@wong2kim/wmux 1.0.0 → 1.0.1

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

@@ -1,234 +0,0 @@
-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

@@ -1,129 +0,0 @@
-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>
-  );
-}