@wong2kim/wmux 1.0.0

package/src/renderer/components/Browser/BrowserToolbar.tsx

@@ -0,0 +1,253 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import { useT } from '../../hooks/useT';
+
+// ---------------------------------------------------------------------------
+// SVG Icon components
+// ---------------------------------------------------------------------------
+
+function IconBack() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <polyline points="9,2 4,7 9,12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IconForward() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <polyline points="5,2 10,7 5,12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IconRefresh() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M12 7A5 5 0 1 1 7 2" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
+      <polyline points="7,0.5 9.5,2.5 7,4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function IconDevTools() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1" y="1" width="12" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.2" />
+      <line x1="1" y1="4.5" x2="13" y2="4.5" stroke="currentColor" strokeWidth="1.2" />
+      <polyline points="3.5,7 5.5,9 3.5,11" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+      <line x1="7" y1="11" x2="10.5" y2="11" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconClose() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <line x1="2" y1="2" x2="10" y2="10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+      <line x1="10" y1="2" x2="2" y2="10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function IconLock() {
+  return (
+    <svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="1.5" y="4.5" width="8" height="5.5" rx="1" stroke="currentColor" strokeWidth="1.2" />
+      <path d="M3.5 4.5V3a2 2 0 0 1 4 0v1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// BrowserToolbar props
+// ---------------------------------------------------------------------------
+
+interface BrowserToolbarProps {
+  currentUrl: string;
+  isLoading: boolean;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  isActive: boolean;
+  onNavigate: (url: string) => void;
+  onBack: () => void;
+  onForward: () => void;
+  onRefresh: () => void;
+  onOpenDevTools: () => void;
+  onClose: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export default function BrowserToolbar({
+  currentUrl,
+  isLoading,
+  canGoBack,
+  canGoForward,
+  isActive,
+  onNavigate,
+  onBack,
+  onForward,
+  onRefresh,
+  onOpenDevTools,
+  onClose,
+}: BrowserToolbarProps) {
+  const t = useT();
+  const [inputValue, setInputValue] = useState(currentUrl);
+  const [isFocused, setIsFocused] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Sync display URL when not focused
+  useEffect(() => {
+    if (!isFocused) {
+      setInputValue(currentUrl);
+    }
+  }, [currentUrl, isFocused]);
+
+  // Ctrl+L focuses the URL bar — only register when this browser panel is active
+  useEffect(() => {
+    if (!isActive) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.ctrlKey && !e.shiftKey && !e.altKey && e.key === 'l') {
+        e.preventDefault();
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }
+    };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [isActive]);
+
+  const handleSubmit = useCallback((e: React.FormEvent) => {
+    e.preventDefault();
+    const raw = inputValue.trim();
+    if (!raw) return;
+    // Normalize: add protocol if missing
+    let url = raw;
+    if (!/^https?:\/\//i.test(url) && !/^about:/i.test(url)) {
+      // If it looks like a domain, add https://; otherwise treat as search
+      if (/^[\w-]+(\.[\w-]+)+([\/?#].*)?$/.test(url)) {
+        url = `https://${url}`;
+      } else {
+        url = `https://www.google.com/search?q=${encodeURIComponent(url)}`;
+      }
+    }
+    setInputValue(url);
+    onNavigate(url);
+    inputRef.current?.blur();
+  }, [inputValue, onNavigate]);
+
+  const isSecure = currentUrl.startsWith('https://');
+
+  const btnBase = 'flex items-center justify-center w-6 h-6 rounded transition-colors duration-100';
+  const btnEnabled = `${btnBase} text-[var(--text-sub2)] hover:text-[var(--text-main)] hover:bg-[var(--bg-surface)] cursor-pointer`;
+  const btnDisabled = `${btnBase} text-[var(--bg-overlay)] cursor-default`;
+
+  return (
+    <div
+      className="flex items-center gap-1.5 px-2 py-1.5 shrink-0"
+      style={{ backgroundColor: 'var(--bg-mantle)', borderBottom: '1px solid var(--bg-surface)' }}
+    >
+      {/* Back */}
+      <button
+        className={canGoBack ? btnEnabled : btnDisabled}
+        onClick={canGoBack ? onBack : undefined}
+        title={t('browser.back')}
+        tabIndex={-1}
+      >
+        <IconBack />
+      </button>
+
+      {/* Forward */}
+      <button
+        className={canGoForward ? btnEnabled : btnDisabled}
+        onClick={canGoForward ? onForward : undefined}
+        title={t('browser.forward')}
+        tabIndex={-1}
+      >
+        <IconForward />
+      </button>
+
+      {/* Refresh */}
+      <button
+        className={btnEnabled}
+        onClick={onRefresh}
+        title={t('browser.reload')}
+        tabIndex={-1}
+      >
+        <span className={isLoading ? 'animate-spin' : ''}>
+          <IconRefresh />
+        </span>
+      </button>
+
+      {/* URL bar */}
+      <form className="flex-1 min-w-0" onSubmit={handleSubmit}>
+        <div
+          className="flex items-center gap-1.5 px-2.5 py-1 rounded-md"
+          style={{
+            backgroundColor: isFocused ? 'var(--bg-base)' : '#11111b',
+            border: `1px solid ${isFocused ? 'var(--accent-blue)' : 'var(--bg-surface)'}`,
+            transition: 'border-color 0.15s',
+          }}
+        >
+          {/* Lock icon */}
+          <span className={isSecure ? 'text-[var(--accent-green)]' : 'text-[var(--text-muted)]'} style={{ flexShrink: 0 }}>
+            <IconLock />
+          </span>
+
+          {/* Loading indicator */}
+          {isLoading && (
+            <span className="w-1.5 h-1.5 rounded-full bg-[var(--accent-blue)] animate-pulse shrink-0" />
+          )}
+
+          <input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onFocus={() => {
+              setIsFocused(true);
+              inputRef.current?.select();
+            }}
+            onBlur={() => {
+              setIsFocused(false);
+              setInputValue(currentUrl);
+            }}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                setInputValue(currentUrl);
+                inputRef.current?.blur();
+              }
+            }}
+            className="flex-1 min-w-0 bg-transparent text-[var(--text-main)] text-xs outline-none"
+            style={{ fontFamily: 'ui-monospace, monospace' }}
+            spellCheck={false}
+            autoComplete="off"
+          />
+        </div>
+      </form>
+
+      {/* DevTools */}
+      <button
+        className={btnEnabled}
+        onClick={onOpenDevTools}
+        title={t('browser.devToolsTooltip')}
+        tabIndex={-1}
+      >
+        <IconDevTools />
+      </button>
+
+      {/* Close */}
+      <button
+        className={`${btnBase} text-[var(--text-sub2)] hover:text-[var(--accent-red)] hover:bg-[#3b1e1e] cursor-pointer`}
+        onClick={onClose}
+        title={t('browser.close')}
+        tabIndex={-1}
+      >
+        <IconClose />
+      </button>
+    </div>
+  );
+}

package/src/renderer/components/Company/ApprovalDialog.tsx

@@ -0,0 +1,3 @@
+export default function ApprovalDialog() {
+  return null;
+}

package/src/renderer/components/Company/CompanyView.tsx

@@ -0,0 +1,7 @@
+interface CompanyViewProps {
+  onClose: () => void;
+}
+
+export default function CompanyView({ onClose }: CompanyViewProps) {
+  return null;
+}

package/src/renderer/components/Company/MessageFeedPanel.tsx

@@ -0,0 +1,3 @@
+export default function MessageFeedPanel() {
+  return null;
+}

package/src/renderer/components/Layout/AppLayout.tsx

@@ -0,0 +1,234 @@
+import { useEffect, useState, useRef } from 'react';
+import { useStore } from '../../stores';
+import Sidebar from '../Sidebar/Sidebar';
+import MiniSidebar from '../Sidebar/MiniSidebar';
+import PaneContainer from '../Pane/PaneContainer';
+import StatusBar from '../StatusBar/StatusBar';
+import NotificationPanel from '../Notification/NotificationPanel';
+import CommandPalette from '../Palette/CommandPalette';
+import SettingsPanel from '../Settings/SettingsPanel';
+import ApprovalDialog from '../Company/ApprovalDialog';
+import CompanyView from '../Company/CompanyView';
+import MessageFeedPanel from '../Company/MessageFeedPanel';
+import { useKeyboard } from '../../hooks/useKeyboard';
+import { useNotificationListener } from '../../hooks/useNotificationListener';
+import { useRpcBridge } from '../../hooks/useRpcBridge';
+import type { SessionData, PaneLeaf } from '../../../shared/types';
+
+export default function AppLayout() {
+  const sidebarVisible = useStore((s) => s.sidebarVisible);
+  const sidebarPosition = useStore((s) => s.sidebarPosition);
+  const companyViewVisible = useStore((s) => s.companyViewVisible);
+  const setCompanyViewVisible = useStore((s) => s.setCompanyViewVisible);
+  const activeWorkspaceId = useStore((s) => s.activeWorkspaceId);
+  const workspaces = useStore((s) => s.workspaces);
+  const addSurface = useStore((s) => s.addSurface);
+
+  const activeWorkspace = workspaces.find((w) => w.id === activeWorkspaceId);
+
+  useKeyboard();
+  useNotificationListener();
+  useRpcBridge();
+
+  // ─── Drop overlay (VS Code-style) ─────────────────────────────────────
+  // A transparent full-window overlay appears during external file drags.
+  // This guarantees the OS-level cursor shows "copy" regardless of WebGL canvas.
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  useEffect(() => {
+    // dragenter/dragleave fire for every child boundary crossing,
+    // so we use a counter to track when the drag truly leaves the window.
+    const onEnter = (e: DragEvent) => {
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+      dragCounterRef.current++;
+      if (dragCounterRef.current === 1) setIsDragging(true);
+    };
+    const onLeave = () => {
+      dragCounterRef.current--;
+      if (dragCounterRef.current <= 0) {
+        dragCounterRef.current = 0;
+        setIsDragging(false);
+      }
+    };
+    const onDrop = (e: DragEvent) => {
+      e.preventDefault();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+
+      const files = e.dataTransfer?.files;
+      if (!files || files.length === 0) return;
+
+      // Get active terminal's PTY ID
+      const state = useStore.getState();
+      const ws = state.workspaces.find((w) => w.id === state.activeWorkspaceId);
+      if (!ws) return;
+
+      const findLeaf = (pane: typeof ws.rootPane): PaneLeaf | null => {
+        if (pane.type === 'leaf') return pane.id === ws.activePaneId ? pane : null;
+        for (const child of pane.children) {
+          const found = findLeaf(child);
+          if (found) return found;
+        }
+        return null;
+      };
+      const leaf = findLeaf(ws.rootPane);
+      if (!leaf) return;
+
+      const activeSurface = leaf.surfaces.find((s) => s.id === leaf.activeSurfaceId);
+      if (!activeSurface || activeSurface.surfaceType === 'browser') return;
+
+      const ptyId = activeSurface.ptyId;
+      const paths: string[] = [];
+      for (let i = 0; i < files.length; i++) {
+        paths.push((files[i] as File & { path: string }).path);
+      }
+      const text = paths.map((p) => (p.includes(' ') ? `"${p}"` : p)).join(' ');
+      window.electronAPI.pty.write(ptyId, text);
+    };
+    // Prevent default on dragover at window level to allow drop everywhere
+    const onOver = (e: DragEvent) => {
+      e.preventDefault();
+      if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
+    };
+    // Use capture phase so these fire before any child element (e.g. xterm
+    // WebGL canvas) can consume the event and cause a "forbidden" cursor.
+    window.addEventListener('dragenter', onEnter, true);
+    window.addEventListener('dragleave', onLeave, true);
+    window.addEventListener('dragover', onOver, true);
+    window.addEventListener('drop', onDrop, true);
+    return () => {
+      window.removeEventListener('dragenter', onEnter, true);
+      window.removeEventListener('dragleave', onLeave, true);
+      window.removeEventListener('dragover', onOver, true);
+      window.removeEventListener('drop', onDrop, true);
+    };
+  }, []);
+
+  // 앱 시작 시 세션 복원
+  useEffect(() => {
+    window.electronAPI.session.load().then((saved: SessionData | null) => {
+      if (!saved) return;
+      useStore.getState().loadSession(saved);
+    });
+  }, []);
+
+  // Save session on beforeunload
+  useEffect(() => {
+    const saveSession = () => {
+      const state = useStore.getState();
+      // Strip dangerous flags from session persistence
+      const companySafe = state.company ? { ...state.company, skipPermissions: undefined } : null;
+      const data: SessionData = {
+        workspaces: state.workspaces,
+        activeWorkspaceId: state.activeWorkspaceId,
+        sidebarVisible: state.sidebarVisible,
+        sidebarMode: state.sidebarMode,
+        company: companySafe,
+        memberCosts: state.memberCosts,
+        sessionStartTime: state.sessionStartTime,
+        // User preferences
+        theme: state.theme,
+        locale: state.locale,
+        terminalFontSize: state.terminalFontSize,
+        terminalFontFamily: state.terminalFontFamily,
+        defaultShell: state.defaultShell,
+        scrollbackLines: state.scrollbackLines,
+        sidebarPosition: state.sidebarPosition,
+        notificationSoundEnabled: state.notificationSoundEnabled,
+        toastEnabled: state.toastEnabled,
+        notificationRingEnabled: state.notificationRingEnabled,
+        customKeybindings: state.customKeybindings,
+      };
+      window.electronAPI.session.save(data);
+    };
+
+    window.addEventListener('beforeunload', saveSession);
+    return () => window.removeEventListener('beforeunload', saveSession);
+  }, []);
+
+  // Auto-create initial surface for empty leaf panes
+  // 세션 복원된 경우: surfaces가 이미 있으므로 이 effect는 실행되지 않음
+  // 브라우저 surface만 있는 pane: surfaceType이 'browser'이면 PTY 생성 스킵
+  useEffect(() => {
+    if (!activeWorkspace) return;
+    const root = activeWorkspace.rootPane;
+    if (root.type !== 'leaf') return;
+
+    // surfaces가 비어있을 때만 새 PTY 생성
+    if (root.surfaces.length === 0) {
+      let cancelled = false;
+      const paneId = root.id;
+      window.electronAPI.pty.create().then((result: { id: string }) => {
+        if (cancelled) {
+          window.electronAPI.pty.dispose(result.id);
+          return;
+        }
+        addSurface(paneId, result.id, 'Terminal', '');
+      });
+      return () => { cancelled = true; };
+    }
+
+    // surfaces가 있지만 모두 browser 타입인 경우 PTY 생성 스킵
+    const hasTerminalSurface = root.surfaces.some(
+      (s) => !s.surfaceType || s.surfaceType === 'terminal'
+    );
+    if (!hasTerminalSurface) {
+      // 브라우저만 있는 pane — PTY 불필요, 아무것도 하지 않음
+      return;
+    }
+  }, [activeWorkspace?.id]);
+
+  if (!activeWorkspace) return null;
+
+  return (
+    <div className={`flex h-screen w-screen bg-[var(--bg-base)] overflow-hidden ${sidebarPosition === 'right' ? 'flex-row-reverse' : ''}`}>
+      {sidebarVisible ? <Sidebar /> : <MiniSidebar />}
+      <div className="flex-1 min-w-0 flex flex-col">
+        <StatusBar />
+        {/* Render ALL workspaces but only show the active one.
+            This preserves xterm Terminal instances (and their scroll state)
+            across workspace switches — same pattern as surface tab switching. */}
+        <div className="flex-1 min-h-0 relative">
+          {workspaces.map((ws) => (
+            <div
+              key={ws.id}
+              style={{
+                position: 'absolute',
+                inset: 0,
+                display: ws.id === activeWorkspaceId ? 'flex' : 'none',
+                flexDirection: 'column',
+              }}
+            >
+              <PaneContainer pane={ws.rootPane} isWorkspaceVisible={ws.id === activeWorkspaceId} />
+            </div>
+          ))}
+        </div>
+      </div>
+      <NotificationPanel />
+      <MessageFeedPanel />
+      <CommandPalette />
+      <SettingsPanel />
+      <ApprovalDialog />
+      {companyViewVisible && (
+        <CompanyView onClose={() => setCompanyViewVisible(false)} />
+      )}
+
+      {/* Visual drag indicator — pointer-events always 'none' so it never
+          blocks clicks, scrolling, or keyboard. Drop handling is done entirely
+          via the window-level listeners registered in the useEffect above. */}
+      {isDragging && (
+        <div
+          style={{
+            position: 'fixed',
+            inset: 0,
+            zIndex: 99999,
+            pointerEvents: 'none',
+            backgroundColor: 'rgba(137, 180, 250, 0.08)',
+          }}
+        />
+      )}
+    </div>
+  );
+}

package/src/renderer/components/Notification/NotificationPanel.tsx

@@ -0,0 +1,129 @@
+import { useMemo } from 'react';
+import { useStore } from '../../stores';
+import { useT } from '../../hooks/useT';
+
+export default function NotificationPanel() {
+  const t = useT();
+  const notifications = useStore((s) => s.notifications);
+  const notificationPanelVisible = useStore((s) => s.notificationPanelVisible);
+  const toggleNotificationPanel = useStore((s) => s.toggleNotificationPanel);
+  const markRead = useStore((s) => s.markRead);
+  const markAllReadForWorkspace = useStore((s) => s.markAllReadForWorkspace);
+  const clearNotifications = useStore((s) => s.clearNotifications);
+  const setActiveWorkspace = useStore((s) => s.setActiveWorkspace);
+  const activeWorkspaceId = useStore((s) => s.activeWorkspaceId);
+
+  const sorted = useMemo(
+    () => [...notifications].sort((a, b) => b.timestamp - a.timestamp),
+    [notifications],
+  );
+  const unreadCount = useMemo(
+    () => notifications.filter((n) => !n.read).length,
+    [notifications],
+  );
+
+  if (!notificationPanelVisible) return null;
+
+  const handleNotifClick = (notif: typeof sorted[0]) => {
+    markRead(notif.id);
+    if (notif.workspaceId !== activeWorkspaceId) {
+      setActiveWorkspace(notif.workspaceId);
+    }
+  };
+
+  const formatTime = (ts: number) => {
+    const d = new Date(ts);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  };
+
+  const typeIcon = (type: string) => {
+    switch (type) {
+      case 'agent': return '🤖';
+      case 'error': return '❌';
+      case 'warning': return '⚠️';
+      default: return 'ℹ️';
+    }
+  };
+
+  return (
+    <div className="fixed right-0 top-0 h-full w-80 bg-[var(--bg-mantle)] border-l border-[var(--bg-surface)] z-50 flex flex-col shadow-2xl notification-panel-enter">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--bg-surface)]">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-bold text-[var(--text-main)]">{t('notification.title')}</span>
+          {unreadCount > 0 && (
+            <span className="bg-[var(--accent-blue)] text-[var(--bg-base)] text-[10px] font-bold px-1.5 py-0.5 rounded-full">
+              {unreadCount}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {notifications.length > 0 && (
+            <>
+              <button
+                className="text-[10px] text-[var(--text-subtle)] hover:text-[var(--accent-blue)] transition-colors"
+                onClick={() => markAllReadForWorkspace(activeWorkspaceId)}
+              >
+                {t('notification.markAllRead')}
+              </button>
+              <button
+                className="text-[10px] text-[var(--text-subtle)] hover:text-[var(--accent-red)] transition-colors"
+                onClick={clearNotifications}
+              >
+                {t('notification.clear')}
+              </button>
+            </>
+          )}
+          <button
+            className="text-[var(--text-subtle)] hover:text-[var(--text-main)] text-sm transition-colors"
+            onClick={toggleNotificationPanel}
+          >
+            ✕
+          </button>
+        </div>
+      </div>
+
+      {/* List */}
+      <div className="flex-1 overflow-y-auto">
+        {sorted.length === 0 ? (
+          <div className="flex items-center justify-center h-full text-[var(--text-muted)] text-sm">
+            {t('notification.empty')}
+          </div>
+        ) : (
+          sorted.map((notif) => (
+            <div
+              key={notif.id}
+              className={`px-4 py-3 border-b border-[rgba(var(--bg-surface-rgb),0.5)] cursor-pointer hover:bg-[rgba(var(--bg-surface-rgb),0.3)] transition-colors ${
+                notif.read ? 'opacity-60' : ''
+              }`}
+              onClick={() => handleNotifClick(notif)}
+            >
+              <div className="flex items-start gap-2">
+                <span className="text-xs mt-0.5">{typeIcon(notif.type)}</span>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center justify-between">
+                    <span className={`text-xs font-medium truncate ${notif.read ? 'text-[var(--text-subtle)]' : 'text-[var(--text-main)]'}`}>
+                      {notif.title}
+                    </span>
+                    <span className="text-[10px] text-[var(--text-muted)] flex-shrink-0 ml-2">
+                      {formatTime(notif.timestamp)}
+                    </span>
+                  </div>
+                  <p className="text-[11px] text-[var(--text-sub2)] mt-0.5 truncate">{notif.body}</p>
+                </div>
+                {!notif.read && (
+                  <div className="w-1.5 h-1.5 rounded-full bg-[var(--accent-blue)] mt-1.5 flex-shrink-0" />
+                )}
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="px-4 py-2 border-t border-[var(--bg-surface)] text-[10px] text-[var(--text-muted)]">
+        {t('notification.toggle')}
+      </div>
+    </div>
+  );
+}