dhkatzandClaude Opus 5.5
64c552330b
apps/web: Next.js 16 (App Router), Tailwind 4 and shadcn/ui, light and dark from the system. Pages render on the server and call the API with Eden Treaty (typed by @t5de/api), forwarding the visitor's cookie; forms use server actions; sign-up, sign-in and sign-out use Better Auth's React client. /api is rewritten to the API so its cookies are first-party. Who's online follows the API's event stream (Next's gzip is off: it held the stream back). Standalone output with a Dockerfile; deploys to Vercel as is. Co-Authored-By: Claude Opus 5.5 <[email protected]>
36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
"use client";
|
|
// A linked account's two settings, saved as soon as they're switched.
|
|
import { useOptimistic, useState, useTransition } from "react";
|
|
import { FormMessage } from "@/components/forms";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import type { ActionState } from "@/lib/actions";
|
|
import { saveSettings } from "./actions";
|
|
|
|
type Settings = { showBadge: boolean; showPresence: boolean };
|
|
|
|
export function LinkSettings({ imvuId, ...saved }: Settings & { imvuId: number }) {
|
|
const [settings, setOptimistic] = useOptimistic(saved);
|
|
const [state, setState] = useState<ActionState>(null);
|
|
const [pending, startTransition] = useTransition();
|
|
|
|
const change = (key: keyof Settings) => (value: boolean) =>
|
|
startTransition(async () => {
|
|
setOptimistic({ ...settings, [key]: value });
|
|
setState(await saveSettings(imvuId, { [key]: value }));
|
|
});
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<label className="flex items-center gap-3 text-sm">
|
|
<Switch checked={settings.showBadge} onCheckedChange={change("showBadge")} disabled={pending} />
|
|
Show T5DE badge
|
|
</label>
|
|
<label className="flex items-center gap-3 text-sm">
|
|
<Switch checked={settings.showPresence} onCheckedChange={change("showPresence")} disabled={pending} />
|
|
Show when I'm online in T5DE
|
|
</label>
|
|
<FormMessage state={state} />
|
|
</div>
|
|
);
|
|
}
|