refactor: organize desktop vs. mobile into separate folders
This commit is contained in:
Arjun Patel
@@ -0,0 +1,232 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ChevronRight, LogOut, User, Info, Shield, Mail, Mic, LifeBuoy, FileText, Volume2 } from "lucide-react";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
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 { CopyableEmail } from "@/components/copyable-email";
|
||||
import { useAuthStore } from "@/stores/auth-store";
|
||||
import { useSoundEffectsStore } from "@/stores/sound-effects-store";
|
||||
import { apiClient } from "@/api/client";
|
||||
import { logError, toUserMessage } from "@/lib/errors";
|
||||
import { toast } from "sonner";
|
||||
import { PRIVACY_URL, SUPPORT_EMAIL, TERMS_URL } from "@/lib/constants";
|
||||
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 [emailNotifications, setEmailNotifications] = useState(
|
||||
user?.email_notifications_enabled ?? true,
|
||||
);
|
||||
const soundEffectsEnabled = useSoundEffectsStore((s) => s.enabled);
|
||||
const setSoundEffectsEnabled = useSoundEffectsStore((s) => s.setEnabled);
|
||||
const [version, setVersion] = useState<string>();
|
||||
|
||||
useEffect(() => {
|
||||
window.electronApp.getVersion().then(setVersion);
|
||||
}, []);
|
||||
|
||||
const handleToggleEmailNotifications = async (checked: boolean) => {
|
||||
setEmailNotifications(checked);
|
||||
useAuthStore.setState((state) => ({
|
||||
user: state.user ? { ...state.user, email_notifications_enabled: checked } : null,
|
||||
}));
|
||||
try {
|
||||
await apiClient.updateSettings({ email_notifications_enabled: checked });
|
||||
} catch (err) {
|
||||
setEmailNotifications(!checked);
|
||||
useAuthStore.setState((state) => ({
|
||||
user: state.user ? { ...state.user, email_notifications_enabled: !checked } : null,
|
||||
}));
|
||||
toast.error(toUserMessage(err));
|
||||
logError(err, { scope: "settings.emailNotifications" });
|
||||
}
|
||||
};
|
||||
|
||||
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="Notifications">
|
||||
<div className="flex w-full items-center gap-3 px-4 py-3">
|
||||
<span className="text-muted-foreground flex size-5 items-center justify-center">
|
||||
<Mail className="size-4" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 text-sm font-medium">
|
||||
Email notifications
|
||||
</span>
|
||||
<Switch
|
||||
size="sm"
|
||||
checked={emailNotifications}
|
||||
onCheckedChange={handleToggleEmailNotifications}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex w-full items-center gap-3 px-4 py-3">
|
||||
<span className="text-muted-foreground flex size-5 items-center justify-center">
|
||||
<Volume2 className="size-4" />
|
||||
</span>
|
||||
<span className="min-w-0 flex-1 text-sm font-medium">
|
||||
Sound effects
|
||||
</span>
|
||||
<Switch
|
||||
size="sm"
|
||||
checked={soundEffectsEnabled}
|
||||
onCheckedChange={setSoundEffectsEnabled}
|
||||
/>
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
|
||||
<Separator className="mt-4" />
|
||||
|
||||
<SettingsGroup title="Media">
|
||||
<SettingsRow
|
||||
icon={<Mic className="size-4" />}
|
||||
label="Audio & Video"
|
||||
onClick={() => navigate("/settings/audio-video")}
|
||||
/>
|
||||
</SettingsGroup>
|
||||
|
||||
<Separator className="mt-4" />
|
||||
|
||||
<SettingsGroup title="About">
|
||||
<SettingsRow
|
||||
icon={<Info className="size-4" />}
|
||||
label="Version"
|
||||
detail={version}
|
||||
/>
|
||||
</SettingsGroup>
|
||||
|
||||
<Separator className="mt-4" />
|
||||
|
||||
<SettingsGroup title="Legal">
|
||||
<SettingsRow
|
||||
icon={<Shield className="size-4" />}
|
||||
label="Privacy Policy"
|
||||
onClick={() => window.electronLink.openExternal(PRIVACY_URL)}
|
||||
/>
|
||||
<SettingsRow
|
||||
icon={<FileText className="size-4" />}
|
||||
label="Terms of Service"
|
||||
onClick={() => window.electronLink.openExternal(TERMS_URL)}
|
||||
/>
|
||||
</SettingsGroup>
|
||||
|
||||
<Separator className="mt-4" />
|
||||
|
||||
<SettingsGroup title="Contact us">
|
||||
<div className="flex w-full items-center gap-3 px-4 py-3">
|
||||
<span className="text-muted-foreground flex size-5 items-center justify-center">
|
||||
<LifeBuoy className="size-4" />
|
||||
</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium">Email support</p>
|
||||
<Muted className="text-xs">
|
||||
Questions, feedback, or bug reports
|
||||
</Muted>
|
||||
</div>
|
||||
<CopyableEmail email={SUPPORT_EMAIL} />
|
||||
</div>
|
||||
</SettingsGroup>
|
||||
|
||||
<Separator className="mt-4" />
|
||||
|
||||
<div className="py-4">
|
||||
<SettingsRow
|
||||
icon={<LogOut className="size-4" />}
|
||||
label="Sign out"
|
||||
onClick={signOut}
|
||||
destructive
|
||||
/>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user