feat(call): add sound effects and incoming call notification UI

- Implemented sound management for call events including mute, unmute, deafen, undeafen, call joined, call depart, and dialing sounds.
- Created a new CallSounds class to handle sound playback and state management.
- Added IncomingCallNotification component to display incoming call alerts with caller information and action buttons.
- Styled the incoming call notification using vanilla-extract CSS for animations and layout.
- Integrated sound playback for incoming calls with a 15-second threshold for dialing sound.

src/app/state/settings.ts

@@ -9,6 +9,12 @@ export enum MessageLayout {
   Bubble = 2,
 }
 
+export enum EmojiStyle {
+  System = 'system',
+  Apple = 'apple',
+  Twemoji = 'twemoji',
+}
+
 export interface Settings {
   themeId?: string;
   useSystemTheme: boolean;
@@ -17,7 +23,7 @@ export interface Settings {
   monochromeMode?: boolean;
   isMarkdown: boolean;
   editorToolbar: boolean;
-  twitterEmoji: boolean;
+  emojiStyle: EmojiStyle;
   pageZoom: number;
   hideActivity: boolean;
 
@@ -51,7 +57,7 @@ const defaultSettings: Settings = {
   monochromeMode: false,
   isMarkdown: true,
   editorToolbar: false,
-  twitterEmoji: false,
+  emojiStyle: EmojiStyle.Apple,
   pageZoom: 100,
   hideActivity: false,
 
@@ -80,9 +86,18 @@ const defaultSettings: Settings = {
 export const getSettings = () => {
   const settings = localStorage.getItem(STORAGE_KEY);
   if (settings === null) return defaultSettings;
+  
+  const parsed = JSON.parse(settings) as Settings & { twitterEmoji?: boolean };
+  
+  // Migrate old twitterEmoji boolean to new emojiStyle enum
+  if ('twitterEmoji' in parsed && parsed.emojiStyle === undefined) {
+    parsed.emojiStyle = parsed.twitterEmoji ? EmojiStyle.Twemoji : EmojiStyle.Apple;
+    delete parsed.twitterEmoji;
+  }
+  
   return {
     ...defaultSettings,
-    ...(JSON.parse(settings) as Settings),
+    ...parsed,
   };
 };