orcheo-studio 0.21.1

package/src/features/account/components/use-theme-preferences.ts

@@ -0,0 +1,106 @@
+import { useEffect, useState } from "react";
+import {
+  applyAccentColor,
+  applyHighContrast,
+  applyReducedMotion,
+  applyTheme,
+} from "@/lib/theme";
+
+type ThemeOption = "light" | "dark" | "system";
+
+interface UseThemePreferencesArgs {
+  onThemeChange?: (theme: ThemeOption) => void;
+  onReducedMotionChange?: (enabled: boolean) => void;
+  onHighContrastChange?: (enabled: boolean) => void;
+}
+
+const isBrowser = () => typeof window !== "undefined";
+
+const getStoredTheme = (): ThemeOption => {
+  if (!isBrowser()) {
+    return "system";
+  }
+
+  return (localStorage.getItem("theme") as ThemeOption | null) ?? "system";
+};
+
+const getStoredBoolean = (key: string): boolean => {
+  if (!isBrowser()) {
+    return false;
+  }
+
+  return localStorage.getItem(key) === "true";
+};
+
+const getStoredAccentColor = (): string => {
+  if (!isBrowser()) {
+    return "blue";
+  }
+
+  return localStorage.getItem("accentColor") || "blue";
+};
+
+export const useThemePreferences = ({
+  onThemeChange,
+  onReducedMotionChange,
+  onHighContrastChange,
+}: UseThemePreferencesArgs) => {
+  const [theme, setTheme] = useState<ThemeOption>(() => getStoredTheme());
+  const [reducedMotion, setReducedMotion] = useState(() =>
+    getStoredBoolean("reducedMotion"),
+  );
+  const [highContrast, setHighContrast] = useState(() =>
+    getStoredBoolean("highContrast"),
+  );
+  const [accentColor, setAccentColor] = useState(() => getStoredAccentColor());
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("theme", theme);
+    applyTheme(theme);
+    onThemeChange?.(theme);
+  }, [theme, onThemeChange]);
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("reducedMotion", String(reducedMotion));
+    applyReducedMotion(reducedMotion);
+    onReducedMotionChange?.(reducedMotion);
+  }, [reducedMotion, onReducedMotionChange]);
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("highContrast", String(highContrast));
+    applyHighContrast(highContrast);
+    onHighContrastChange?.(highContrast);
+  }, [highContrast, onHighContrastChange]);
+
+  useEffect(() => {
+    if (!isBrowser()) {
+      return;
+    }
+
+    localStorage.setItem("accentColor", accentColor);
+    applyAccentColor(accentColor);
+  }, [accentColor]);
+
+  return {
+    accentColor,
+    highContrast,
+    reducedMotion,
+    setAccentColor,
+    setHighContrast,
+    setReducedMotion,
+    setTheme,
+    theme,
+  };
+};

package/src/features/account/pages/profile/components/profile-general-tab.tsx

@@ -0,0 +1,89 @@
+import { Avatar, AvatarFallback, AvatarImage } from "@/design-system/ui/avatar";
+import { Badge } from "@/design-system/ui/badge";
+import { Button } from "@/design-system/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/design-system/ui/card";
+import { Input } from "@/design-system/ui/input";
+import { Label } from "@/design-system/ui/label";
+import { Separator } from "@/design-system/ui/separator";
+import type { ProfileUser } from "../types";
+
+interface ProfileGeneralTabProps {
+  user: ProfileUser;
+}
+
+export function ProfileGeneralTab({ user }: ProfileGeneralTabProps) {
+  return (
+    <div className="space-y-4">
+      <Card>
+        <CardHeader>
+          <CardTitle>Profile Information</CardTitle>
+          <CardDescription>
+            Update your account profile information and email address.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center space-x-4">
+            <Avatar className="h-20 w-20">
+              <AvatarImage src={user.avatar} alt={user.name} />
+              <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
+            </Avatar>
+            <div className="space-y-1">
+              <h3 className="font-medium">{user.name}</h3>
+              <div className="flex items-center space-x-2">
+                <Badge variant="outline">{user.role}</Badge>
+                {user.joinDate ? (
+                  <span className="text-sm text-muted-foreground">
+                    Member since {user.joinDate}
+                  </span>
+                ) : null}
+              </div>
+              <Button size="sm" variant="outline">
+                Change Avatar
+              </Button>
+            </div>
+          </div>
+          <Separator />
+          <form className="space-y-4">
+            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+              <div className="space-y-2">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  defaultValue={user.name}
+                  placeholder="Your name"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  defaultValue={user.email}
+                  placeholder="Your email"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="bio">Bio</Label>
+              <textarea
+                id="bio"
+                className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                placeholder="Write a short bio about yourself"
+              />
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter>
+          <Button>Save Changes</Button>
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

package/src/features/account/pages/profile/types.ts

@@ -0,0 +1,7 @@
+export interface ProfileUser {
+  name: string;
+  email: string;
+  avatar: string;
+  role: string;
+  joinDate?: string;
+}

package/src/features/account/pages/profile.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useMemo } from "react";
+import TopNavigation from "@features/shared/components/top-navigation";
+import useCredentialVault from "@/hooks/use-credential-vault";
+import { usePageContext } from "@/hooks/use-page-context";
+import { getAuthenticatedUserProfile } from "@features/auth/lib/auth-session";
+import type { ProfileUser } from "./profile/types";
+import { ProfileGeneralTab } from "./profile/components/profile-general-tab";
+
+const LOCAL_DEV_PROFILE: ProfileUser = {
+  name: "Local Developer",
+  email: "local@orcheo.dev",
+  avatar: "https://avatar.vercel.sh/orcheo-local",
+  role: "Local development",
+  joinDate: undefined,
+};
+
+export default function Profile() {
+  const { setPageContext } = usePageContext();
+  useEffect(() => {
+    setPageContext({ page: "profile" });
+  }, [setPageContext]);
+  const authUser = useMemo(() => getAuthenticatedUserProfile(), []);
+  const user = useMemo<ProfileUser>(() => {
+    if (!authUser) {
+      return LOCAL_DEV_PROFILE;
+    }
+
+    const avatarSeed = authUser.subject ?? authUser.email ?? authUser.name;
+    return {
+      name: authUser.name,
+      email: authUser.email ?? "",
+      avatar:
+        authUser.avatar ??
+        `https://avatar.vercel.sh/${encodeURIComponent(avatarSeed)}`,
+      role: authUser.role ?? "Member",
+    };
+  }, [authUser]);
+
+  const actorName = authUser?.subject ?? authUser?.email ?? user.name;
+
+  const {
+    credentials,
+    isLoading: isCredentialsLoading,
+    onAddCredential,
+    onUpdateCredential,
+    onDeleteCredential,
+    onRevealCredentialSecret,
+  } = useCredentialVault({ actorName });
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      <TopNavigation
+        credentials={credentials}
+        isCredentialsLoading={isCredentialsLoading}
+        onAddCredential={onAddCredential}
+        onUpdateCredential={onUpdateCredential}
+        onDeleteCredential={onDeleteCredential}
+        onRevealCredentialSecret={onRevealCredentialSecret}
+      />
+
+      <main className="flex-1 min-h-0 overflow-auto">
+        <div className="mx-auto flex w-full max-w-7xl flex-col space-y-4 p-8 pt-6">
+          <div className="flex items-center justify-between space-y-2">
+            <h2 className="text-3xl font-bold tracking-tight">Profile</h2>
+          </div>
+          <ProfileGeneralTab user={user} />
+        </div>
+      </main>
+    </div>
+  );
+}