위젯 추가 팝업 수정

desktop/src/picker-main.tsx

@@ -0,0 +1,101 @@
+import './forceServerApi';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom/client';
+import { emit } from '@tauri-apps/api/event';
+import { getCurrentWindow } from '@tauri-apps/api/window';
+import { initStorage, refreshApiBaseFromStorage } from '@goldenchart/shared';
+import { ensureDesktopApiBase } from './ensureDesktopApiBase';
+import { fitPickerWindowToScreen } from './bridge/pickerWindow';
+import WidgetPickerModal from '@frontend/components/widgetDashboard/WidgetPickerModal';
+import {
+  WIDGET_PICKER_SELECT_EVENT,
+  type WidgetPickerSelectPayload,
+} from './widgetPickerEvents';
+import { readDesktopSync, subscribeDesktopSync } from '@frontend/utils/desktopSync';
+import { syncDocumentTheme } from '@frontend/utils/documentTheme';
+import type { Theme } from '@frontend/types';
+import '@frontend/App.css';
+import '@frontend/styles/appPopup.css';
+import '@frontend/styles/widgetDashboard.css';
+
+document.documentElement.classList.add('fw-native-picker-window');
+
+function parseParams(): { instanceId: string; slotId: string } {
+  const params = new URLSearchParams(window.location.search);
+  return {
+    instanceId: params.get('instanceId') ?? '',
+    slotId: params.get('slotId') ?? '',
+  };
+}
+
+const PickerApp: React.FC = () => {
+  const { instanceId, slotId } = useMemo(() => parseParams(), []);
+  const sync = readDesktopSync();
+  const [theme, setTheme] = useState<Theme>((sync?.theme as Theme | undefined) ?? 'dark');
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    syncDocumentTheme(theme);
+  }, [theme]);
+
+  useEffect(() => {
+    return subscribeDesktopSync(state => {
+      if (state.theme) setTheme(state.theme as Theme);
+    });
+  }, []);
+
+  useEffect(() => {
+    void fitPickerWindowToScreen()
+      .catch(err => console.warn('[picker-main] window fit failed', err))
+      .finally(() => setReady(true));
+  }, []);
+
+  const handleClose = useCallback(() => {
+    void getCurrentWindow().close();
+  }, []);
+
+  const handleSelect = useCallback(async (widgetType: string) => {
+    if (!instanceId || !slotId) {
+      await getCurrentWindow().close();
+      return;
+    }
+    const payload: WidgetPickerSelectPayload = { instanceId, slotId, widgetType };
+    await emit(WIDGET_PICKER_SELECT_EVENT, payload);
+    await getCurrentWindow().close();
+  }, [instanceId, slotId]);
+
+  if (!instanceId || !slotId) {
+    return <p className="wd-widget-empty">위젯 선택 정보가 없습니다.</p>;
+  }
+
+  if (!ready) {
+    return (
+      <div className="wd-picker-native-loading" aria-live="polite">
+        위젯 목록 준비 중…
+      </div>
+    );
+  }
+
+  return (
+    <WidgetPickerModal
+      open
+      category="all"
+      onClose={handleClose}
+      onSelect={widgetType => { void handleSelect(widgetType); }}
+    />
+  );
+};
+
+async function bootstrap() {
+  await initStorage();
+  ensureDesktopApiBase();
+  refreshApiBaseFromStorage();
+
+  ReactDOM.createRoot(document.getElementById('root')!).render(
+    <React.StrictMode>
+      <PickerApp />
+    </React.StrictMode>,
+  );
+}
+
+void bootstrap();