feat: initial ui redesign from demo

2026-07-16 05:13: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,124 @@
+import React from "react";
+import { Alert, AlertTitle, AlertDescription } from "@/components/alert.tsx";
+import { Button } from "@/components/button.tsx";
+import { ExternalLink, Download, AlertTriangle, Info } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+interface VersionAlertProps {
+  updateInfo: {
+    success: boolean;
+    status?: "up_to_date" | "requires_update" | "beta";
+    localVersion?: string;
+    remoteVersion?: string;
+    latest_release?: {
+      tag_name: string;
+      name: string;
+      published_at: string;
+      html_url: string;
+      body: string;
+    };
+    cached?: boolean;
+    cache_age?: number;
+    error?: string;
+  };
+  onDownload?: () => void;
+}
+
+export function VersionAlert({ updateInfo, onDownload }: VersionAlertProps) {
+  const { t } = useTranslation();
+
+  if (!updateInfo.success) {
+    return (
+      <Alert variant="destructive">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.error")}</AlertTitle>
+        <AlertDescription>
+          {updateInfo.error || t("versionCheck.checkFailed")}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (updateInfo.status === "up_to_date") {
+    return (
+      <Alert>
+        <Download className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.upToDate")}</AlertTitle>
+        <AlertDescription>
+          {t("versionCheck.currentVersion", {
+            version: updateInfo.localVersion,
+          })}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (updateInfo.status === "beta") {
+    return (
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.betaVersion")}</AlertTitle>
+        <AlertDescription>
+          {t("versionCheck.betaVersionDesc", {
+            current: updateInfo.localVersion,
+            latest: updateInfo.remoteVersion,
+          })}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (updateInfo.status === "requires_update") {
+    return (
+      <Alert variant="destructive">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>{t("versionCheck.updateAvailable")}</AlertTitle>
+        <AlertDescription className="space-y-3">
+          <div>
+            {t("versionCheck.newVersionAvailable", {
+              current: updateInfo.localVersion,
+              latest: updateInfo.remoteVersion,
+            })}
+          </div>
+
+          {updateInfo.latest_release && (
+            <div className="text-sm text-muted-foreground">
+              <div className="font-medium">
+                {updateInfo.latest_release.name}
+              </div>
+              <div className="text-xs">
+                {t("versionCheck.releasedOn", {
+                  date: new Date(
+                    updateInfo.latest_release.published_at,
+                  ).toLocaleDateString(),
+                })}
+              </div>
+            </div>
+          )}
+
+          <div className="flex gap-2 pt-2">
+            {updateInfo.latest_release?.html_url && (
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => {
+                  if (onDownload) {
+                    onDownload();
+                  } else {
+                    window.open(updateInfo.latest_release!.html_url, "_blank");
+                  }
+                }}
+                className="flex items-center gap-1"
+              >
+                <ExternalLink className="h-3 w-3" />
+                {t("versionCheck.downloadUpdate")}
+              </Button>
+            )}
+          </div>
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return null;
+}