feat: initial conversational flow (#37)

* chore: only set visibility for container particles * create reusable controls indicator for reply or new * compress the size of top bar * refactor: restructure state, routing, and more * introduce stream compose flow * feat: compose new stream full flow * implement stream player * fix: prevent redirect for signed object urls * fix: implement stream playback cleaner structure * refactor: layout file name * feat: show stream name in breadcrumbs * chore: tweak padding * chore: adjust position of audio bars * feat: show latest particle preview in stream list * fix: remove console log * refactor: reorder classes * fix: avoid passing in updated_at to firestore particle * refactor: extract properties for container particles to flat fields in firestore * make the stream previews look alive * feat: show audio bars during audio clip playback * feat: order streams by last child creation * feat: playback where I left off * chore: remove unused store * fix: recording mode not using shared state * chore: clean unused variable * remove unused imports * fix: improve controls indicator immersion * feat: show playback progress in bar & auto-play text * feat: auto-exit stream on playback completion * fix: jittery media playback progress * fix: navigate during state change is invalid with react router * fix: buggy exit progress when changing clips * feat: add app icon * update package.json info * feat: only show streams visible to me * feat: show seen indicator on particles * fix: prevent unnecessary effects * fix: play new particle after playback is ended * use contols indicator for exit timer
2026-03-19 16:29:40 -07:00
parent 990137b829
commit 4b66d8e185
48 changed files with 2112 additions and 1482 deletions
@@ -0,0 +1,139 @@
+import { useNavigate } from "react-router-dom";
+import { ChevronRight, LogOut, User, Info, Shield } from "lucide-react";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { Separator } from "@/components/ui/separator";
+import { WindowControls } from "@/components/window-controls";
+import { Button } from "@/components/ui/button";
+import { Muted } from "@/components/ui/typography";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useAuthStore } from "@/stores/auth-store";
+import { ArrowLeft } from "lucide-react";
+
+interface SettingsRowProps {
+  icon: React.ReactNode;
+  label: string;
+  detail?: string;
+  onClick?: () => void;
+  destructive?: boolean;
+}
+
+function SettingsRow({
+  icon,
+  label,
+  detail,
+  onClick,
+  destructive,
+}: SettingsRowProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex w-full items-center gap-3 px-4 py-3 text-left transition-colors hover:bg-accent ${destructive ? "text-destructive" : ""}`}
+    >
+      <span className="text-muted-foreground flex size-5 items-center justify-center">
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1 text-sm font-medium">{label}</span>
+      {detail && <Muted className="text-xs">{detail}</Muted>}
+      {onClick && !destructive && (
+        <ChevronRight className="text-muted-foreground size-4" />
+      )}
+    </button>
+  );
+}
+
+function SettingsGroup({
+  title,
+  children,
+}: {
+  title: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div>
+      <p className="text-muted-foreground px-4 pb-1 pt-4 text-xs font-medium uppercase tracking-wider">
+        {title}
+      </p>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+export default function SettingsPage() {
+  const navigate = useNavigate();
+  const user = useAuthStore((s) => s.user);
+  const signOut = useAuthStore((s) => s.signOut);
+
+  const initials = user?.email_prefix?.slice(0, 2).toUpperCase() ?? "?";
+
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="drag-region flex items-center gap-3 border-b px-3 py-1">
+        <WindowControls />
+        <Button
+          variant="ghost"
+          size="sm"
+          className="no-drag text-muted-foreground"
+          onClick={() => navigate(-1)}
+        >
+          <ArrowLeft className="size-3.5" />
+        </Button>
+        <span className="text-sm font-medium">Settings</span>
+        <div className="flex-1" />
+      </div>
+
+      <ScrollArea className="flex-1">
+        {/* Profile header */}
+        <div className="flex items-center gap-3 px-4 py-5">
+          <Avatar size="lg">
+            <AvatarFallback className="bg-primary/10 text-primary font-medium">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium">
+              {user?.email_prefix}
+            </p>
+            <Muted className="text-xs">{user?.email}</Muted>
+          </div>
+        </div>
+
+        <Separator />
+
+        <SettingsGroup title="Account">
+          <SettingsRow
+            icon={<User className="size-4" />}
+            label="Profile"
+            detail={user?.email_prefix}
+          />
+          <Separator className="mx-4" />
+          <SettingsRow
+            icon={<Shield className="size-4" />}
+            label="Privacy"
+          />
+        </SettingsGroup>
+
+        <Separator className="mt-4" />
+
+        <SettingsGroup title="About">
+          <SettingsRow
+            icon={<Info className="size-4" />}
+            label="Version"
+            detail="1.0.0"
+          />
+        </SettingsGroup>
+
+        <Separator className="mt-4" />
+
+        <div className="py-4">
+          <SettingsRow
+            icon={<LogOut className="size-4" />}
+            label="Sign out"
+            onClick={signOut}
+            destructive
+          />
+        </div>
+      </ScrollArea>
+    </div>
+  );
+}