Add CYD browser flasher with Next.js, i18n, and Web Serial install.
Replace the starter app with a public/local flasher that discovers sibling firmwares, supports en/zh, and documents HTTPS deploy. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
162
components/flasher-panel.tsx
Normal file
162
components/flasher-panel.tsx
Normal file
@@ -0,0 +1,162 @@
|
||||
"use client";
|
||||
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import type { FirmwareInfo } from "@/lib/firmware";
|
||||
import { formatBytes, cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { EspWebInstall } from "@/components/esp-web-install";
|
||||
|
||||
function supportsWebSerial() {
|
||||
return typeof navigator !== "undefined" && "serial" in navigator;
|
||||
}
|
||||
|
||||
export function FlasherPanel() {
|
||||
const t = useTranslations();
|
||||
const [firmwares, setFirmwares] = useState<FirmwareInfo[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [serialOk, setSerialOk] = useState(true);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch("/api/firmware", { cache: "no-store" });
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const data = (await res.json()) as { firmwares: FirmwareInfo[] };
|
||||
const list = data.firmwares ?? [];
|
||||
setFirmwares(list);
|
||||
setSelectedId((prev) => {
|
||||
if (prev && list.some((f) => f.id === prev)) return prev;
|
||||
return list[0]?.id ?? null;
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : String(err));
|
||||
setFirmwares([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setSerialOk(supportsWebSerial());
|
||||
void load();
|
||||
}, [load]);
|
||||
|
||||
const selected = firmwares.find((f) => f.id === selectedId) ?? null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
{!serialOk && (
|
||||
<Card className="border-[rgba(232,164,90,0.35)] text-[var(--warn)]">
|
||||
<p className="m-0 text-sm">{t("browser.unsupported")}</p>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("firmware.title")}</CardTitle>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => void load()}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw className={cn("size-3.5", loading && "animate-spin")} />
|
||||
{t("firmware.refresh")}
|
||||
</Button>
|
||||
</CardHeader>
|
||||
|
||||
<div className="flex flex-col gap-2" role="listbox" aria-label={t("firmware.title")}>
|
||||
{loading && !firmwares.length && (
|
||||
<p className="m-0 text-sm text-[var(--muted)]">{t("firmware.scanning")}</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="m-0 text-sm text-[var(--warn)]">
|
||||
{t("firmware.error", { message: error })}
|
||||
</p>
|
||||
)}
|
||||
{!loading && !error && !firmwares.length && (
|
||||
<p className="m-0 text-sm text-[var(--muted)]">{t("firmware.empty")}</p>
|
||||
)}
|
||||
{firmwares.map((fw) => {
|
||||
const active = fw.id === selectedId;
|
||||
const meta = [fw.board, fw.date, fw.git ? `git ${fw.git}` : null]
|
||||
.filter(Boolean)
|
||||
.join(" · ");
|
||||
return (
|
||||
<button
|
||||
key={fw.id}
|
||||
type="button"
|
||||
role="option"
|
||||
aria-selected={active}
|
||||
className={cn(
|
||||
"grid w-full grid-cols-[auto_1fr_auto] items-center gap-x-4 gap-y-1 rounded-[10px] border px-4 py-3.5 text-left transition-colors",
|
||||
active
|
||||
? "border-[var(--accent)] bg-[rgba(240,197,10,0.1)] shadow-[inset_0_0_0_1px_rgba(240,197,10,0.25)]"
|
||||
: "border-[var(--line)] bg-[rgba(0,0,0,0.2)] hover:border-[rgba(240,197,10,0.35)] hover:bg-[rgba(240,197,10,0.05)]"
|
||||
)}
|
||||
onClick={() => setSelectedId(fw.id)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"size-4 shrink-0 rounded-full border-2",
|
||||
active
|
||||
? "border-[var(--accent)] bg-[radial-gradient(circle_at_center,var(--accent)_40%,transparent_45%)]"
|
||||
: "border-[var(--muted)]"
|
||||
)}
|
||||
aria-hidden
|
||||
/>
|
||||
<span className="min-w-0">
|
||||
<span className="block font-semibold leading-snug">{fw.name}</span>
|
||||
<span className="mt-0.5 block text-xs text-[var(--muted)]">
|
||||
{fw.project} / {fw.variant}
|
||||
{meta ? ` · ${meta}` : ""}
|
||||
</span>
|
||||
</span>
|
||||
<Badge variant="muted" className="justify-self-end tabular-nums">
|
||||
{formatBytes(fw.size)}
|
||||
</Badge>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<div className="mb-4 rounded-lg border border-dashed border-[var(--line)] bg-[rgba(0,0,0,0.25)] px-3.5 py-3 text-sm">
|
||||
{selected ? (
|
||||
<>
|
||||
{t("firmware.selectedLabel")}{" "}
|
||||
<strong className="font-semibold text-[var(--accent-hot)]">
|
||||
{selected.name}
|
||||
</strong>
|
||||
<span className="text-[var(--muted)]"> ({selected.id})</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-[var(--muted)]">{t("firmware.noneSelected")}</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<EspWebInstall
|
||||
manifest={selected?.manifestUrl ?? null}
|
||||
label={t("install.cta")}
|
||||
disabled={!serialOk || !selected}
|
||||
/>
|
||||
|
||||
<ol className="mt-5 list-decimal space-y-1.5 pl-5 text-sm text-[var(--muted)]">
|
||||
<li>{t("install.steps.1")}</li>
|
||||
<li>{t("install.steps.2")}</li>
|
||||
<li>{t("install.steps.3")}</li>
|
||||
<li>{t("install.steps.4")}</li>
|
||||
</ol>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user