dbdiff-app 0.1.0

package/src/App.tsx

@@ -0,0 +1,543 @@
+import { useCallback, useEffect, useState, useRef } from "react";
+import {
+  useStore,
+  useActiveDatabaseConfig,
+  useOpenTableTab,
+  useNewConsoleTab,
+  useSyncDatabase,
+  useCloudSync,
+} from "./stores";
+
+import { CLOUD_URL, LOCALHOST_SCANNING_ENABLED } from "./constants";
+import {
+  TabBar,
+  InnerTabBar,
+  Sidebar,
+  ConnectionPicker,
+  ConnectedView,
+  NewConnectionModal,
+  EditConnectionModal,
+  MembersModal,
+  ShortcutSettingsModal,
+  Resizer,
+  GlobalShortcuts,
+  CommandPalette,
+  DatabaseSwitcher,
+  ScanSuccessModal,
+} from "./components";
+import type {
+  DatabaseConfig,
+  ScanLocalhostResponse,
+  ExportType,
+} from "./types";
+import "./App.css";
+
+const isElectronMac =
+  navigator.userAgent.includes("Electron") &&
+  navigator.userAgent.includes("Macintosh");
+
+function App() {
+  const connectionTabs = useStore((s) => s.connectionTabs);
+  const activeTabId = useStore((s) => s.activeTabId);
+  const draggedTabId = useStore((s) => s.draggedTabId);
+  const draggedInnerTabId = useStore((s) => s.draggedInnerTabId);
+  const databaseConfigs = useStore((s) => s.databaseConfigs);
+  const darkMode = useStore((s) => s.darkMode);
+  const cloudApiKey = useStore((s) => s.cloudApiKey);
+  const setCloudApiKey = useStore((s) => s.setCloudApiKey);
+  const clearCloudApiKey = useStore((s) => s.clearCloudApiKey);
+
+  const createConnectionTab = useStore((s) => s.createConnectionTab);
+  const closeConnectionTab = useStore((s) => s.closeConnectionTab);
+  const selectConnectionTab = useStore((s) => s.selectConnectionTab);
+  const connectToDatabase = useStore((s) => s.connectToDatabase);
+  const reorderConnectionTabs = useStore((s) => s.reorderConnectionTabs);
+  const setDraggedTabId = useStore((s) => s.setDraggedTabId);
+  const setDraggedInnerTabId = useStore((s) => s.setDraggedInnerTabId);
+  const selectInnerTab = useStore((s) => s.selectInnerTab);
+  const closeInnerTab = useStore((s) => s.closeInnerTab);
+  const reorderInnerTabs = useStore((s) => s.reorderInnerTabs);
+  const toggleDarkMode = useStore((s) => s.toggleDarkMode);
+  const resetUIState = useStore((s) => s.resetUIState);
+  const addConfig = useStore((s) => s.addConfig);
+  const updateConfig = useStore((s) => s.updateConfig);
+  const deleteConfig = useStore((s) => s.deleteConfig);
+
+  const [showNewConnectionModal, setShowNewConnectionModal] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<DatabaseConfig | null>(
+    null,
+  );
+  const [managingMembersConfig, setManagingMembersConfig] =
+    useState<DatabaseConfig | null>(null);
+  const [sidebarWidth, setSidebarWidth] = useState(220);
+  const [showShortcutSettings, setShowShortcutSettings] = useState(false);
+  const [isScanning, setIsScanning] = useState(false);
+  const [showCommandPalette, setShowCommandPalette] = useState(false);
+  const [showDatabaseSwitcher, setShowDatabaseSwitcher] = useState(false);
+  const [scanResultCount, setScanResultCount] = useState<number | null>(null);
+
+  const handleSidebarResize = useCallback((delta: number) => {
+    setSidebarWidth((w) => Math.max(150, Math.min(w + delta, 500)));
+  }, []);
+
+  const activeDatabaseConfig = useActiveDatabaseConfig();
+  const openTableTab = useOpenTableTab();
+  const newConsoleTab = useNewConsoleTab();
+  const { sync: syncDatabase, isSyncing } = useSyncDatabase(
+    activeDatabaseConfig?.id,
+  );
+
+  // Auto-sync schema on first connection (when cache is empty)
+  useEffect(() => {
+    if (
+      activeDatabaseConfig &&
+      !activeDatabaseConfig.cache.schemas?.length &&
+      !isSyncing
+    ) {
+      syncDatabase();
+    }
+  }, [activeDatabaseConfig?.id]);
+
+  const {
+    sync: syncCloud,
+    isSyncing: isCloudSyncing,
+    error: cloudSyncError,
+    transferToCloud,
+    transferringId,
+    updateCloudConnection,
+    isUpdating: isCloudUpdating,
+    updateError: cloudUpdateError,
+    deleteCloudConnection,
+    isDeleting: isCloudDeleting,
+    deleteError: cloudDeleteError,
+  } = useCloudSync();
+
+  const activeTab = connectionTabs.find((t) => t.id === activeTabId);
+  const activeInnerTab = activeTab?.activeInnerTabId
+    ? activeTab.innerTabs.find((t) => t.id === activeTab.activeInnerTabId)
+    : null;
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", darkMode);
+  }, [darkMode]);
+
+  // Handle cloud API key from URL query param (after redirect from cloud.dbdiff.app)
+  // This path is used in the browser; in Electron the IPC callback below handles it.
+  const hasProcessedCloudKey = useRef(false);
+  useEffect(() => {
+    if (hasProcessedCloudKey.current) return;
+
+    const params = new URLSearchParams(window.location.search);
+    const key = params.get("key");
+    const state = params.get("state");
+
+    if (key && state) {
+      hasProcessedCloudKey.current = true;
+
+      // Verify state matches what we stored (CSRF protection)
+      const expectedState = sessionStorage.getItem("cloud_link_state");
+      if (state === expectedState) {
+        setCloudApiKey(key);
+        sessionStorage.removeItem("cloud_link_state");
+      } else {
+        console.warn("Cloud link state mismatch - ignoring key");
+      }
+
+      // Clear the query params from URL
+      window.history.replaceState(null, "", window.location.pathname);
+    }
+  }, [setCloudApiKey]);
+
+  // In Electron, the main process intercepts the auth popup redirect and sends
+  // the key+state via IPC, so the main window updates without a manual refresh.
+  useEffect(() => {
+    if (!window.electronAPI?.onCloudAuthCallback) return;
+    return window.electronAPI.onCloudAuthCallback(({ key, state }) => {
+      const expectedState = sessionStorage.getItem("cloud_link_state");
+      if (state === expectedState) {
+        setCloudApiKey(key);
+        sessionStorage.removeItem("cloud_link_state");
+      } else {
+        console.warn("Cloud link state mismatch - ignoring key");
+      }
+    });
+  }, [setCloudApiKey]);
+
+  // Auto-scan localhost on mount when there are no database configs
+  const hasAutoScanned = useRef(false);
+  useEffect(() => {
+    if (
+      LOCALHOST_SCANNING_ENABLED &&
+      databaseConfigs.length === 0 &&
+      !hasAutoScanned.current
+    ) {
+      hasAutoScanned.current = true;
+      handleScanLocalhost();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Sync cloud connections on mount and when cloudApiKey changes
+  const hasSyncedOnMount = useRef(false);
+  useEffect(() => {
+    if (cloudApiKey && !hasSyncedOnMount.current) {
+      hasSyncedOnMount.current = true;
+      syncCloud();
+    }
+    // Reset the flag if cloudApiKey is cleared
+    if (!cloudApiKey) {
+      hasSyncedOnMount.current = false;
+    }
+  }, [cloudApiKey, syncCloud]);
+
+  // --- Electron native menu bridge (macOS only) ---
+  async function handleExportFromMenu(exportType: ExportType) {
+    if (!activeDatabaseConfig) return;
+    try {
+      const res = await fetch("/api/export", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          connection: activeDatabaseConfig.connection,
+          exportType,
+        }),
+      });
+      if (!res.ok) return;
+      const blob = await res.blob();
+      const disposition = res.headers.get("Content-Disposition") ?? "";
+      const match = disposition.match(/filename="(.+)"/);
+      const filename =
+        match?.[1] ?? `${activeDatabaseConfig.connection.database}.sql`;
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+    } catch {
+      // silently fail
+    }
+  }
+
+  // Use a ref so the IPC listener always calls the latest handlers
+  const menuHandlersRef = useRef<Record<string, () => void>>({});
+  menuHandlersRef.current = {
+    "shortcut-settings": () => setShowShortcutSettings(true),
+    "scan-localhost": () => {
+      if (LOCALHOST_SCANNING_ENABLED) handleScanLocalhost();
+    },
+    "reset-ui-state": resetUIState,
+    "export-schema": () => handleExportFromMenu("schema"),
+    "export-schema-and-data": () => handleExportFromMenu("schema-and-data"),
+  };
+
+  useEffect(() => {
+    if (!window.electronAPI) return;
+    return window.electronAPI.onMenuAction((action) => {
+      menuHandlersRef.current[action]?.();
+    });
+  }, []);
+
+  // Keep native Database menu enabled state in sync
+  useEffect(() => {
+    window.electronAPI?.setDatabaseMenuEnabled(!!activeDatabaseConfig);
+  }, [activeDatabaseConfig]);
+
+  function handleDragStart(e: React.DragEvent, tabId: string) {
+    setDraggedTabId(tabId);
+    e.dataTransfer.effectAllowed = "move";
+  }
+
+  function handleDragOver(e: React.DragEvent, tabId: string) {
+    e.preventDefault();
+    if (!draggedTabId || draggedTabId === tabId) return;
+
+    const draggedIndex = connectionTabs.findIndex((t) => t.id === draggedTabId);
+    const targetIndex = connectionTabs.findIndex((t) => t.id === tabId);
+    if (draggedIndex === targetIndex) return;
+
+    reorderConnectionTabs(draggedIndex, targetIndex);
+  }
+
+  function handleDragEnd() {
+    setDraggedTabId(null);
+  }
+
+  function handleInnerDragStart(e: React.DragEvent, tabId: string) {
+    setDraggedInnerTabId(tabId);
+    e.dataTransfer.effectAllowed = "move";
+  }
+
+  function handleInnerDragOver(e: React.DragEvent, tabId: string) {
+    e.preventDefault();
+    if (!draggedInnerTabId || draggedInnerTabId === tabId || !activeTab) return;
+
+    const draggedIndex = activeTab.innerTabs.findIndex(
+      (t) => t.id === draggedInnerTabId,
+    );
+    const targetIndex = activeTab.innerTabs.findIndex((t) => t.id === tabId);
+    if (
+      draggedIndex === -1 ||
+      targetIndex === -1 ||
+      draggedIndex === targetIndex
+    )
+      return;
+
+    reorderInnerTabs(draggedIndex, targetIndex);
+  }
+
+  function handleInnerDragEnd() {
+    setDraggedInnerTabId(null);
+  }
+
+  function handleAddNewConnection() {
+    setShowNewConnectionModal(true);
+  }
+
+  function handleSaveNewConnection(config: DatabaseConfig) {
+    addConfig(config);
+    setShowNewConnectionModal(false);
+  }
+
+  function handleEditConnection(config: DatabaseConfig) {
+    setEditingConfig(config);
+  }
+
+  function handleManageMembers(config: DatabaseConfig) {
+    setManagingMembersConfig(config);
+  }
+
+  async function handleSaveEditedConnection(config: DatabaseConfig) {
+    if (config.source === "cloud") {
+      const result = await updateCloudConnection(config);
+      if (!result.success) return; // don't close modal on error
+    }
+    updateConfig(config.id, config);
+    setEditingConfig(null);
+  }
+
+  async function handleDeleteConnection(id: string) {
+    // If it's a cloud connection, delete from cloud first
+    if (editingConfig?.source === "cloud" && editingConfig.cloud?.id) {
+      const result = await deleteCloudConnection(editingConfig.cloud.id);
+      if (!result.success) return; // don't close modal on error
+    }
+
+    // Close any tabs using this connection
+    connectionTabs
+      .filter((tab) => tab.databaseConfigId === id)
+      .forEach((tab) => closeConnectionTab(tab.id));
+    deleteConfig(id);
+    setEditingConfig(null);
+  }
+
+  const SCAN_COLORS = [
+    "#ef4444",
+    "#f59e0b",
+    "#22c55e",
+    "#3b82f6",
+    "#8b5cf6",
+    "#ec4899",
+    "#14b8a6",
+    "#f97316",
+  ];
+
+  async function handleScanLocalhost() {
+    setIsScanning(true);
+    try {
+      const res = await fetch("/api/scan-localhost");
+      const data: ScanLocalhostResponse = await res.json();
+      const existing = new Set(
+        databaseConfigs.map(
+          (c) =>
+            `${c.connection.host}:${c.connection.port}:${c.connection.database}:${c.connection.username}`,
+        ),
+      );
+      let added = 0;
+      data.databases.forEach((db, i) => {
+        const key = `${db.host}:${db.port}:${db.database}:${db.username}`;
+        if (!existing.has(key)) {
+          existing.add(key);
+          addConfig({
+            id: (Date.now() + i).toString(),
+            display: {
+              name: `${db.database} (localhost)`,
+              color: SCAN_COLORS[added % SCAN_COLORS.length],
+            },
+            connection: {
+              type: "postgres",
+              host: db.host,
+              port: db.port,
+              database: db.database,
+              username: db.username,
+              password: db.password,
+            },
+            cache: {},
+            source: "local",
+          });
+          added++;
+        }
+      });
+      if (added > 0) {
+        setScanResultCount(added);
+      }
+    } catch {
+      // silently fail — nothing running on 5432
+    } finally {
+      setIsScanning(false);
+    }
+  }
+
+  function handleLinkCloud() {
+    // Generate random state for CSRF protection
+    const state = crypto.randomUUID();
+    sessionStorage.setItem("cloud_link_state", state);
+
+    const redirectUrl = `${window.location.origin}?state=${state}`;
+    const linkUrl = `${CLOUD_URL}/link?redirect=${encodeURIComponent(redirectUrl)}`;
+    window.open(linkUrl, "_blank");
+  }
+
+  return (
+    <div className="flex flex-col h-screen bg-stone-50 dark:bg-[#0a0a0a] text-primary antialiased transition-colors duration-200">
+      <GlobalShortcuts
+        onOpenTableSwitcher={() => setShowCommandPalette(true)}
+        onOpenDatabaseSwitcher={() => setShowDatabaseSwitcher(true)}
+      />
+      <TabBar
+        tabs={connectionTabs}
+        activeTabId={activeTabId}
+        draggedTabId={draggedTabId}
+        databaseConfigs={databaseConfigs}
+        darkMode={darkMode}
+        onTabSelect={selectConnectionTab}
+        onTabClose={closeConnectionTab}
+        onNewTab={createConnectionTab}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragEnd={handleDragEnd}
+        onThemeToggle={toggleDarkMode}
+        onOpenShortcutSettings={() => setShowShortcutSettings(true)}
+        onScanLocalhost={
+          LOCALHOST_SCANNING_ENABLED ? handleScanLocalhost : undefined
+        }
+        isScanning={isScanning}
+        onResetUIState={resetUIState}
+        activeDatabaseConfig={activeDatabaseConfig}
+        hideMenus={isElectronMac}
+      />
+
+      {activeTab?.databaseConfigId && (
+        <InnerTabBar
+          innerTabs={activeTab.innerTabs}
+          activeInnerTabId={activeTab.activeInnerTabId}
+          draggedInnerTabId={draggedInnerTabId}
+          onTabSelect={selectInnerTab}
+          onTabClose={closeInnerTab}
+          onNewConsole={newConsoleTab}
+          onDragStart={handleInnerDragStart}
+          onDragOver={handleInnerDragOver}
+          onDragEnd={handleInnerDragEnd}
+        />
+      )}
+
+      <div className="flex flex-1 overflow-hidden">
+        {activeTab?.databaseConfigId && (
+          <>
+            <Sidebar
+              schemas={activeDatabaseConfig?.cache.schemas ?? []}
+              databaseConfig={activeDatabaseConfig ?? null}
+              onTableClick={openTableTab}
+              onTableOpenNewTab={(tableName) =>
+                openTableTab(tableName, { forceNew: true })
+              }
+              onRefresh={syncDatabase}
+              isRefreshing={isSyncing}
+              width={sidebarWidth}
+              activeTableName={
+                activeInnerTab?.type === "table" ? activeInnerTab.name : null
+              }
+            />
+            <Resizer direction="horizontal" onResize={handleSidebarResize} />
+          </>
+        )}
+
+        <div className="flex-1 overflow-auto bg-white dark:bg-[#0f0f0f]">
+          {activeTab?.databaseConfigId ? (
+            <ConnectedView
+              name={activeTab.name}
+              databaseConfig={activeDatabaseConfig ?? null}
+              activeInnerTab={activeInnerTab ?? null}
+            />
+          ) : (
+            <ConnectionPicker
+              databaseConfigs={databaseConfigs}
+              onConnect={connectToDatabase}
+              onAddNew={handleAddNewConnection}
+              onEdit={handleEditConnection}
+              cloudApiKey={cloudApiKey}
+              onLinkCloud={handleLinkCloud}
+              onUnlinkCloud={clearCloudApiKey}
+              onRefreshCloud={syncCloud}
+              isCloudSyncing={isCloudSyncing}
+              cloudSyncError={cloudSyncError}
+              onTransferToCloud={transferToCloud}
+              transferringId={transferringId}
+              onManageMembers={handleManageMembers}
+            />
+          )}
+        </div>
+      </div>
+
+      {showNewConnectionModal && (
+        <NewConnectionModal
+          onClose={() => setShowNewConnectionModal(false)}
+          onSave={handleSaveNewConnection}
+        />
+      )}
+
+      {editingConfig && (
+        <EditConnectionModal
+          config={editingConfig}
+          onClose={() => setEditingConfig(null)}
+          onSave={handleSaveEditedConnection}
+          onDelete={handleDeleteConnection}
+          isSaving={isCloudUpdating}
+          saveError={cloudUpdateError}
+          isDeleting={isCloudDeleting}
+          deleteError={cloudDeleteError}
+        />
+      )}
+
+      {managingMembersConfig && (
+        <MembersModal
+          config={managingMembersConfig}
+          onClose={() => setManagingMembersConfig(null)}
+        />
+      )}
+
+      {showShortcutSettings && (
+        <ShortcutSettingsModal onClose={() => setShowShortcutSettings(false)} />
+      )}
+
+      {showCommandPalette && activeTab?.databaseConfigId && (
+        <CommandPalette onClose={() => setShowCommandPalette(false)} />
+      )}
+
+      {showDatabaseSwitcher && (
+        <DatabaseSwitcher onClose={() => setShowDatabaseSwitcher(false)} />
+      )}
+
+      {scanResultCount !== null && (
+        <ScanSuccessModal
+          count={scanResultCount}
+          onClose={() => setScanResultCount(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+export default App;

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>