@hot-updater/console 0.36.6 → 1.0.0-rc.0

package/src/components/ChannelBadge.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils";
+
+import { Badge } from "./ui/badge";
+
+interface ChannelBadgeProps {
+  channel: string;
+  className?: string;
+}
+
+const channelColors: Record<string, string> = {
+  production:
+    "bg-green-500/10 text-green-700 dark:text-green-400 border-green-500/20",
+  dev: "bg-blue-500/10 text-blue-700 dark:text-blue-400 border-blue-500/20",
+  staging:
+    "bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 border-yellow-500/20",
+};
+
+export function ChannelBadge({ channel, className }: ChannelBadgeProps) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        channelColors[channel.toLowerCase()] ||
+          "bg-gray-500/10 text-gray-700 dark:text-gray-400 border-gray-500/20",
+        className,
+      )}
+    >
+      {channel}
+    </Badge>
+  );
+}

package/src/components/ConsoleAccessPage.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+
+import { HotUpdaterLogo } from "@/components/HotUpdaterLogo";
+import { Button } from "@/components/ui/button";
+
+import type { ConsoleAccess, ConsoleAuthProvider } from "../index";
+
+type ConsoleAccessPageProps = {
+  readonly access: Exclude<ConsoleAccess, { status: "authorized" }>;
+  readonly providers: readonly ConsoleAuthProvider[];
+};
+
+const providerLabel: Record<ConsoleAuthProvider, string> = {
+  github: "GitHub",
+  google: "Google",
+};
+
+export function ConsoleAccessPage({
+  access,
+  providers,
+}: ConsoleAccessPageProps) {
+  const [pendingProvider, setPendingProvider] =
+    useState<ConsoleAuthProvider | null>(null);
+  const [signingOut, setSigningOut] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const signIn = async (provider: ConsoleAuthProvider) => {
+    setPendingProvider(provider);
+    setError(null);
+    try {
+      const response = await fetch("/api/auth/sign-in/social", {
+        body: JSON.stringify({ callbackURL: "/", provider }),
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
+      const result = (await response.json()) as { readonly url?: unknown };
+      if (!response.ok || typeof result.url !== "string") {
+        throw new Error("The identity provider did not return a sign-in URL.");
+      }
+      window.location.assign(result.url);
+    } catch (cause) {
+      setPendingProvider(null);
+      setError(cause instanceof Error ? cause.message : "Sign-in failed.");
+    }
+  };
+
+  const signOut = async () => {
+    setSigningOut(true);
+    setError(null);
+    try {
+      const response = await fetch("/api/auth/sign-out", { method: "POST" });
+      if (!response.ok) {
+        throw new Error("Sign-out failed.");
+      }
+      window.location.reload();
+    } catch (cause) {
+      setSigningOut(false);
+      setError(cause instanceof Error ? cause.message : "Sign-out failed.");
+    }
+  };
+
+  return (
+    <main className="bg-background text-foreground flex min-h-screen items-center justify-center p-6">
+      <section className="border-border bg-card w-full max-w-sm rounded-xl border p-6 shadow-sm">
+        <div className="mb-6 flex items-center gap-3">
+          <HotUpdaterLogo className="h-10 w-7" />
+          <div>
+            <h1 className="text-lg font-semibold">Hot Updater Console</h1>
+            <p className="text-muted-foreground text-sm">
+              Sign in to manage OTA releases.
+            </p>
+          </div>
+        </div>
+
+        {access.status === "forbidden" ? (
+          <div className="space-y-3">
+            <p className="text-sm font-medium">Access denied</p>
+            <p className="text-muted-foreground text-sm">
+              {access.principal.email} is not in the console allowlist.
+            </p>
+            <Button
+              className="w-full"
+              disabled={signingOut}
+              onClick={() => void signOut()}
+              size="lg"
+              variant="outline"
+            >
+              {signingOut ? "Signing out…" : "Sign out"}
+            </Button>
+          </div>
+        ) : providers.length === 0 ? (
+          <p className="text-muted-foreground text-sm">
+            No OAuth provider is configured for this console.
+          </p>
+        ) : (
+          <div className="grid gap-2">
+            {providers.map((provider) => (
+              <Button
+                className="w-full"
+                disabled={pendingProvider !== null}
+                key={provider}
+                onClick={() => void signIn(provider)}
+                size="lg"
+                variant="outline"
+              >
+                {pendingProvider === provider
+                  ? "Redirecting…"
+                  : `Continue with ${providerLabel[provider]}`}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        {error ? (
+          <p className="text-destructive mt-3 text-sm" role="alert">
+            {error}
+          </p>
+        ) : null}
+      </section>
+    </main>
+  );
+}

package/src/components/EnabledStatusIcon.tsx

@@ -0,0 +1,54 @@
+import { Check, Minus, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+interface EnabledStatusIconProps {
+  enabled: boolean;
+  className?: string;
+  falseIcon?: "minus" | "x";
+  colorMode?: "semantic" | "inherit";
+}
+
+export function EnabledStatusIcon({
+  enabled,
+  className,
+  falseIcon = "x",
+  colorMode = "semantic",
+}: EnabledStatusIconProps) {
+  const iconColorClassName =
+    colorMode === "inherit" ? "text-current" : undefined;
+
+  if (enabled) {
+    return (
+      <Check
+        className={cn(
+          "h-4 w-4",
+          iconColorClassName ?? "text-green-600 dark:text-green-400",
+          className,
+        )}
+      />
+    );
+  }
+
+  if (falseIcon === "minus") {
+    return (
+      <Minus
+        className={cn(
+          "h-4 w-4",
+          iconColorClassName ?? "text-muted-foreground",
+          className,
+        )}
+      />
+    );
+  }
+
+  return (
+    <X
+      className={cn(
+        "h-4 w-4",
+        iconColorClassName ?? "text-red-600 dark:text-red-400",
+        className,
+      )}
+    />
+  );
+}

package/src/components/HashValueDisplay.tsx

@@ -0,0 +1,85 @@
+import { toast } from "sonner";
+
+import { cn } from "@/lib/utils";
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+interface HashValueDisplayProps {
+  value: string;
+  maxLength?: number;
+  className?: string;
+}
+
+export function HashValueDisplay({
+  value,
+  maxLength = 12,
+  className,
+}: HashValueDisplayProps) {
+  const isTruncated = value.length > maxLength;
+  const truncated = isTruncated ? value.slice(0, maxLength) : value;
+
+  const copyValue = async () => {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success("Copied to clipboard", {
+        description: value,
+      });
+    } catch {
+      toast.error("Failed to copy value");
+    }
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    void copyValue();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      event.stopPropagation();
+      void copyValue();
+    }
+  };
+
+  const content = (
+    <span
+      translate="no"
+      className={cn(
+        "font-mono text-xs tabular-nums whitespace-nowrap",
+        className,
+      )}
+    >
+      {truncated}
+    </span>
+  );
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <button
+            type="button"
+            translate="no"
+            className={cn(
+              "ring-ring/30 bg-muted/40 border-border/70 inline-flex min-w-0 max-w-full cursor-pointer items-center rounded-md border px-1.5 py-0.5 align-top shadow-xs outline-none transition-[background-color,border-color,transform,box-shadow]",
+              "hover:bg-muted/70 active:scale-[0.98] active:bg-muted/85 focus-visible:ring-[2px]",
+              "touch-manipulation select-none",
+              !isTruncated && "cursor-copy",
+            )}
+            onClick={handleClick}
+            onKeyDown={handleKeyDown}
+          />
+        }
+      >
+        {content}
+      </TooltipTrigger>
+      <TooltipContent hidden={!isTruncated}>
+        <p translate="no" className="break-all font-mono text-xs tabular-nums">
+          {value}
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/components/HotUpdaterLogo.tsx

@@ -0,0 +1,30 @@
+export function HotUpdaterLogo({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-label="Hot Updater"
+      className={className}
+      viewBox="0 0 447 652"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <linearGradient
+          id="hot-updater-gradient"
+          x1="223.54"
+          y1="0.36"
+          x2="223.54"
+          y2="711.23"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#ff7f33" />
+          <stop offset="0.4" stopColor="#f9602b" />
+          <stop offset="0.76" stopColor="#f54c25" />
+          <stop offset="1" stopColor="#f44523" />
+        </linearGradient>
+      </defs>
+      <path
+        d="M150.25,8.58c16.28,31.85,42.09,116-68.18,212.22C75.46,226.57,70,233,63.72,239.62c-28.48,30-84.71,114.89-55.82,207,.69,2.18,1.31,4.37,1.91,6.57,5.25,19.33,38.08,121,155.56,157.25a5.14,5.14,0,0,0,6-7.39c-14.72-26.53-46.07-96.89-8.89-162.55,0,0,11.5,44.5,50.5,83.5,6,6,14.72,15.64,19.53,21.23,14.47,16.77,32.24,53.55,1.82,98.18a5.63,5.63,0,0,0,6.85,8.34c75.64-32.1,333.29-164.6,128.68-410.85a7,7,0,0,0-12.46,4.15c-1.77,39.31-14.84,129-96.18,148.06a31.08,31.08,0,0,1-24.3-4.16c-13.34-8.9-25.41-32.06.53-92.3a250.9,250.9,0,0,1,20.12-37.29C282.78,220.56,356.18,79.83,157.33.77A5.64,5.64,0,0,0,150.25,8.58Z"
+        fill="url(#hot-updater-gradient)"
+      />
+    </svg>
+  );
+}

package/src/components/NotFoundPage.tsx

@@ -0,0 +1,33 @@
+import { Link } from "@tanstack/react-router";
+
+import { buttonVariants } from "@/components/ui/button";
+
+const homeSearch = {
+  channel: undefined,
+  platform: undefined,
+  targetAppVersion: undefined,
+  page: undefined,
+  after: undefined,
+  before: undefined,
+  bundleId: undefined,
+  expandedBundleId: undefined,
+} as const;
+
+export function NotFoundPage() {
+  return (
+    <div className="flex min-h-svh flex-1 items-center justify-center px-6 py-10">
+      <section className="flex max-w-md flex-col items-center text-center">
+        <h1 className="text-2xl font-semibold tracking-tight text-foreground">
+          Page not found
+        </h1>
+        <Link
+          className={buttonVariants({ className: "mt-6", size: "lg" })}
+          to="/"
+          search={homeSearch}
+        >
+          Go to home
+        </Link>
+      </section>
+    </div>
+  );
+}

package/src/components/PlatformIcon.tsx

@@ -0,0 +1,39 @@
+interface PlatformIconProps {
+  platform: "ios" | "android";
+  className?: string;
+}
+
+function AppleIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill="currentColor"
+    >
+      <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+    </svg>
+  );
+}
+
+function AndroidIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden="true"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      fill="currentColor"
+    >
+      <path d="M18.4395 5.5586c-.675 1.1664-1.352 2.3318-2.0274 3.498-.0366-.0155-.0742-.0286-.1113-.043-1.8249-.6957-3.484-.8-4.42-.787-1.8551.0185-3.3544.4643-4.2597.8203-.084-.1494-1.7526-3.021-2.0215-3.4864a1.1451 1.1451 0 0 0-.1406-.1914c-.3312-.364-.9054-.4859-1.379-.203-.475.282-.7136.9361-.3886 1.5019 1.9466 3.3696-.0966-.2158 1.9473 3.3593.0172.031-.4946.2642-1.3926 1.0177C2.8987 12.176.452 14.772 0 18.9902h24c-.119-1.1108-.3686-2.099-.7461-3.0683-.7438-1.9118-1.8435-3.2928-2.7402-4.1836a12.1048 12.1048 0 0 0-2.1309-1.6875c.6594-1.122 1.312-2.2559 1.9649-3.3848.2077-.3615.1886-.7956-.0079-1.1191a1.1001 1.1001 0 0 0-.8515-.5332c-.5225-.0536-.9392.3128-1.0488.5449zm-.0391 8.461c.3944.5926.324 1.3306-.1563 1.6503-.4799.3197-1.188.0985-1.582-.4941-.3944-.5927-.324-1.3307.1563-1.6504.4727-.315 1.1812-.1086 1.582.4941zM7.207 13.5273c.4803.3197.5506 1.0577.1563 1.6504-.394.5926-1.1038.8138-1.584.4941-.48-.3197-.5503-1.0577-.1563-1.6504.4008-.6021 1.1087-.8106 1.584-.4941z" />
+    </svg>
+  );
+}
+
+export function PlatformIcon({ platform, className }: PlatformIconProps) {
+  if (platform === "ios") {
+    return <AppleIcon className={className} />;
+  }
+  return <AndroidIcon className={className} />;
+}

package/src/components/RolloutPercentageBadge.tsx

@@ -0,0 +1,28 @@
+import { AlertTriangle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+import { Badge } from "./ui/badge";
+
+interface RolloutPercentageBadgeProps {
+  percentage: number;
+  className?: string;
+}
+
+export function RolloutPercentageBadge({
+  percentage,
+  className,
+}: RolloutPercentageBadgeProps) {
+  const isPartialRollout = percentage < 100;
+  const formattedPercentage = percentage.toFixed(1);
+
+  return (
+    <Badge
+      className={cn("gap-1", className)}
+      variant={isPartialRollout ? "secondary" : "default"}
+    >
+      {isPartialRollout ? <AlertTriangle className="h-3 w-3" /> : null}
+      {formattedPercentage}%
+    </Badge>
+  );
+}

package/src/components/ThemeProvider.tsx

@@ -0,0 +1,116 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+const LIGHT_THEME_COLOR = "#fbfbfa";
+const DARK_THEME_COLOR = "#1f1d1c";
+const REFRESH_THEME_CHROME_EVENT = "hot-updater:refresh-theme-chrome";
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "dark",
+  storageKey = "hot-updater-theme",
+}: {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+}) {
+  const [theme, setTheme] = useState<Theme>(defaultTheme);
+
+  useEffect(() => {
+    const stored = localStorage.getItem(storageKey) as Theme | null;
+    if (stored) {
+      setTheme(stored);
+    }
+  }, [storageKey]);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const themeColorMeta = window.document.querySelector(
+      'meta[name="theme-color"]',
+    );
+    const colorSchemeMeta = window.document.querySelector(
+      'meta[name="color-scheme"]',
+    );
+
+    const applyResolvedTheme = (resolvedTheme: "dark" | "light") => {
+      root.classList.remove("light", "dark");
+      root.classList.add(resolvedTheme);
+      root.style.colorScheme = resolvedTheme;
+
+      if (themeColorMeta) {
+        themeColorMeta.setAttribute(
+          "content",
+          resolvedTheme === "dark" ? DARK_THEME_COLOR : LIGHT_THEME_COLOR,
+        );
+      }
+
+      if (colorSchemeMeta) {
+        colorSchemeMeta.setAttribute(
+          "content",
+          resolvedTheme === "dark" ? "dark light" : "light dark",
+        );
+      }
+    };
+
+    const syncTheme = () => {
+      const resolvedTheme =
+        theme === "system" ? (mediaQuery.matches ? "dark" : "light") : theme;
+
+      applyResolvedTheme(resolvedTheme);
+    };
+
+    syncTheme();
+
+    const refreshThemeChrome = () => {
+      window.requestAnimationFrame(syncTheme);
+    };
+
+    window.addEventListener(REFRESH_THEME_CHROME_EVENT, refreshThemeChrome);
+    window.addEventListener("pageshow", refreshThemeChrome);
+    document.addEventListener("visibilitychange", refreshThemeChrome);
+
+    if (theme === "system") {
+      mediaQuery.addEventListener("change", syncTheme);
+    }
+
+    return () => {
+      if (theme === "system") {
+        mediaQuery.removeEventListener("change", syncTheme);
+      }
+      window.removeEventListener(
+        REFRESH_THEME_CHROME_EVENT,
+        refreshThemeChrome,
+      );
+      window.removeEventListener("pageshow", refreshThemeChrome);
+      document.removeEventListener("visibilitychange", refreshThemeChrome);
+    };
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (newTheme: Theme) => {
+      localStorage.setItem(storageKey, newTheme);
+      setTheme(newTheme);
+    },
+  };
+
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

package/src/components/TimestampDisplay.tsx

@@ -0,0 +1,41 @@
+import { extractTimestampFromUUIDv7 } from "@hot-updater/plugin-core";
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+
+dayjs.extend(relativeTime);
+
+interface TimestampDisplayProps {
+  uuid: string;
+  format?: "relative" | "absolute" | "both";
+}
+
+export function TimestampDisplay({
+  uuid,
+  format = "relative",
+}: TimestampDisplayProps) {
+  const timestamp = extractTimestampFromUUIDv7(uuid);
+  const date = dayjs(timestamp);
+
+  if (format === "relative") {
+    return (
+      <span className="text-sm text-muted-foreground">{date.fromNow()}</span>
+    );
+  }
+
+  if (format === "absolute") {
+    return (
+      <span className="text-sm text-muted-foreground">
+        {date.format("YYYY-MM-DD HH:mm:ss")}
+      </span>
+    );
+  }
+
+  return (
+    <div className="flex flex-col">
+      <span className="text-sm">{date.fromNow()}</span>
+      <span className="text-xs text-muted-foreground">
+        {date.format("YYYY-MM-DD HH:mm:ss")}
+      </span>
+    </div>
+  );
+}