feat: initial ui redesign from demo

2026-07-17 13:53:36 +00:00 · 2026-05-11 01:23:11 -05:00
parent eaa758effe
commit 33dcde0827
349 changed files with 23984 additions and 31634 deletions
@@ -0,0 +1,215 @@
+import React, { useState, useEffect } from "react";
+import { Button } from "@/components/button.tsx";
+import { VersionAlert } from "@/components/version-alert.tsx";
+import { useTranslation } from "react-i18next";
+import { isElectron } from "@/lib/electron";
+import { checkElectronUpdate } from "@/main-axios.ts";
+import { useTheme } from "@/components/theme-provider";
+
+interface VersionCheckModalProps {
+  onContinue: () => void;
+}
+
+type ElectronWindow = Window & {
+  electronAPI?: {
+    getAppVersion?: () => Promise<string | undefined>;
+  };
+};
+
+export function ElectronVersionCheck({ onContinue }: VersionCheckModalProps) {
+  const { t } = useTranslation();
+  const { theme } = useTheme();
+  const [versionInfo, setVersionInfo] = useState<Record<
+    string,
+    unknown
+  > | null>(null);
+  const [versionChecking, setVersionChecking] = useState(false);
+  const [versionDismissed] = useState(false);
+
+  const isDarkMode =
+    theme === "dark" ||
+    theme === "dracula" ||
+    theme === "gentlemansChoice" ||
+    theme === "midnightEspresso" ||
+    theme === "catppuccinMocha" ||
+    (theme === "system" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches);
+  const lineColor = isDarkMode ? "#151517" : "#f9f9f9";
+  const versionModalTitle =
+    versionInfo?.status === "beta"
+      ? t("versionCheck.betaVersion")
+      : t("versionCheck.updateRequired");
+
+  useEffect(() => {
+    const updateCheckDisabled =
+      localStorage.getItem("disableUpdateCheck") === "true";
+    if (updateCheckDisabled) {
+      onContinue();
+      return;
+    }
+    if (isElectron()) {
+      checkForUpdates();
+    } else {
+      onContinue();
+    }
+  }, []);
+
+  const checkForUpdates = async () => {
+    setVersionChecking(true);
+    try {
+      const updateInfo = await checkElectronUpdate();
+      setVersionInfo(updateInfo);
+
+      const currentVersion = await (
+        window as ElectronWindow
+      ).electronAPI?.getAppVersion?.();
+      const dismissedVersion = localStorage.getItem(
+        "electron-version-check-dismissed",
+      );
+
+      if (dismissedVersion === currentVersion) {
+        onContinue();
+        return;
+      }
+
+      if (updateInfo?.status === "up_to_date") {
+        if (currentVersion) {
+          localStorage.setItem(
+            "electron-version-check-dismissed",
+            currentVersion,
+          );
+        }
+        onContinue();
+        return;
+      }
+    } catch (error) {
+      console.error("Failed to check for updates:", error);
+      setVersionInfo({ success: false, error: "Check failed" });
+    } finally {
+      setVersionChecking(false);
+    }
+  };
+
+  const handleDownloadUpdate = () => {
+    if (versionInfo?.latest_release?.html_url) {
+      window.open(versionInfo.latest_release.html_url, "_blank");
+    }
+  };
+
+  const handleContinue = async () => {
+    const currentVersion = await (
+      window as ElectronWindow
+    ).electronAPI?.getAppVersion?.();
+    if (currentVersion) {
+      localStorage.setItem("electron-version-check-dismissed", currentVersion);
+    }
+    onContinue();
+  };
+
+  if (!isElectron()) {
+    return null;
+  }
+
+  if (versionChecking && !versionInfo) {
+    return (
+      <div
+        className="fixed inset-0 flex items-center justify-center z-50"
+        style={{
+          background: "var(--bg-elevated)",
+          backgroundImage: `repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 35px,
+            ${lineColor} 35px,
+            ${lineColor} 37px
+          )`,
+        }}
+      >
+        <div className="w-[420px] max-w-full p-8 flex flex-col backdrop-blur-sm bg-card/50 rounded-2xl shadow-xl border-2 border-edge overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300">
+          <div className="flex items-center justify-center mb-4">
+            <div className="w-8 h-8 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+          </div>
+          <p className="text-center text-muted-foreground">
+            {t("versionCheck.checkingUpdates")}
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!versionInfo || versionDismissed) {
+    return (
+      <div
+        className="fixed inset-0 flex items-center justify-center z-50"
+        style={{
+          background: "var(--bg-elevated)",
+          backgroundImage: `repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 35px,
+            ${lineColor} 35px,
+            ${lineColor} 37px
+          )`,
+        }}
+      >
+        <div className="w-[420px] max-w-full p-8 flex flex-col backdrop-blur-sm bg-card/50 rounded-2xl shadow-xl border-2 border-edge overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300">
+          <div className="mb-4">
+            <h2 className="text-lg font-semibold">
+              {t("versionCheck.checkUpdates")}
+            </h2>
+          </div>
+
+          {versionInfo && !versionDismissed && (
+            <div className="mb-4">
+              <VersionAlert
+                updateInfo={versionInfo}
+                onDownload={handleDownloadUpdate}
+              />
+            </div>
+          )}
+
+          <div className="flex gap-2">
+            <Button onClick={handleContinue} className="flex-1 h-10">
+              {t("common.continue")}
+            </Button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="fixed inset-0 flex items-center justify-center z-50"
+      style={{
+        background: "var(--bg-elevated)",
+        backgroundImage: `repeating-linear-gradient(
+          45deg,
+          transparent,
+          transparent 35px,
+          ${lineColor} 35px,
+          ${lineColor} 37px
+        )`,
+      }}
+    >
+      <div className="w-[420px] max-w-full p-8 flex flex-col backdrop-blur-sm bg-card/50 rounded-2xl shadow-xl border-2 border-edge overflow-y-auto thin-scrollbar my-2 animate-in fade-in zoom-in-95 duration-300">
+        <div className="mb-4">
+          <h2 className="text-lg font-semibold">{versionModalTitle}</h2>
+        </div>
+
+        <div className="mb-4">
+          <VersionAlert
+            updateInfo={versionInfo}
+            onDownload={handleDownloadUpdate}
+          />
+        </div>
+
+        <div className="flex gap-2">
+          <Button onClick={handleContinue} className="flex-1 h-10">
+            {t("common.continue")}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}