4b:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T29e1,"use client" import * as React from "react" import { Bell, Check, Globe, Home, Keyboard, Link, Lock, Menu, MessageCircle, Paintbrush, Settings, Video, type LucideIcon, } from "lucide-react" import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, } from "@/components/ui/breadcrumb" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, } from "@/components/ui/sidebar" import { Switch } from "@/components/ui/switch" type Setting = { key: string title: string description: string defaultValue: boolean } type SettingsSection = { name: string icon: LucideIcon description: string settings: Setting[] } const sections: SettingsSection[] = [ { name: "Notifications", icon: Bell, description: "Choose how and when you receive updates.", settings: [{ key: "push-notifications", title: "Push notifications", description: "Receive notifications for new activity.", defaultValue: true }, { key: "email-summary", title: "Email summary", description: "Get a daily summary of unread activity.", defaultValue: false }] }, { name: "Navigation", icon: Menu, description: "Tune the way you move through your workspace.", settings: [{ key: "compact-navigation", title: "Compact navigation", description: "Use a denser navigation layout.", defaultValue: false }, { key: "remember-last-page", title: "Remember last page", description: "Return to the page you last visited.", defaultValue: true }] }, { name: "Home", icon: Home, description: "Personalize what you see when you open the app.", settings: [{ key: "recent-items", title: "Show recent items", description: "Show recently opened content on your home screen.", defaultValue: true }, { key: "suggestions", title: "Show suggestions", description: "Show recommendations based on your activity.", defaultValue: true }] }, { name: "Appearance", icon: Paintbrush, description: "Adjust your visual preferences.", settings: [{ key: "reduced-motion", title: "Reduce motion", description: "Limit non-essential animations.", defaultValue: false }, { key: "high-contrast", title: "High contrast", description: "Increase contrast for interface elements.", defaultValue: false }] }, { name: "Messages & media", icon: MessageCircle, description: "Control how conversations and shared content behave.", settings: [{ key: "read-receipts", title: "Read receipts", description: "Let others know when you have read their messages.", defaultValue: true }, { key: "link-previews", title: "Link previews", description: "Show a preview when someone sends a supported link.", defaultValue: true }] }, { name: "Language & region", icon: Globe, description: "Choose language, region, and formatting preferences.", settings: [{ key: "auto-translate", title: "Auto-translate", description: "Offer translations for messages in other languages.", defaultValue: false }, { key: "local-time", title: "Use local time", description: "Display dates and times in your local time zone.", defaultValue: true }] }, { name: "Accessibility", icon: Keyboard, description: "Make the interface easier to use your way.", settings: [{ key: "keyboard-hints", title: "Keyboard shortcuts", description: "Show available shortcuts in menus and tooltips.", defaultValue: true }, { key: "focus-indicator", title: "Enhanced focus indicator", description: "Use a more visible keyboard focus ring.", defaultValue: false }] }, { name: "Mark as read", icon: Check, description: "Choose when activity is considered seen.", settings: [{ key: "mark-on-open", title: "Mark on open", description: "Mark a message as read when it is opened.", defaultValue: true }, { key: "mark-all-confirmation", title: "Confirm mark all read", description: "Ask before marking every message as read.", defaultValue: true }] }, { name: "Audio & video", icon: Video, description: "Control media behavior in calls and messages.", settings: [{ key: "join-muted", title: "Join calls muted", description: "Start calls with your microphone muted.", defaultValue: false }, { key: "autoplay-video", title: "Autoplay video", description: "Play videos automatically when they are visible.", defaultValue: false }] }, { name: "Connected accounts", icon: Link, description: "Manage services connected to your account.", settings: [{ key: "sync-calendar", title: "Sync calendar", description: "Keep connected calendar events up to date.", defaultValue: true }, { key: "share-presence", title: "Share presence", description: "Share your availability with connected services.", defaultValue: false }] }, { name: "Privacy & visibility", icon: Lock, description: "Decide what information other people can see.", settings: [{ key: "activity-status", title: "Activity status", description: "Show others when you are active.", defaultValue: true }, { key: "profile-discovery", title: "Profile discovery", description: "Allow people to find you by your profile details.", defaultValue: true }] }, { name: "Advanced", icon: Settings, description: "Manage advanced behavior and diagnostics.", settings: [{ key: "beta-features", title: "Beta features", description: "Enable early access to experimental features.", defaultValue: false }, { key: "diagnostics", title: "Usage diagnostics", description: "Share anonymous diagnostics to improve the app.", defaultValue: true }] }, ] export type SettingsPreferences = Record export type SettingsDialogProps = { open?: boolean defaultOpen?: boolean onOpenChange?: (open: boolean) => void preferences?: SettingsPreferences onPreferencesChange?: (preferences: SettingsPreferences) => void trigger?: React.ReactElement } const defaultPreferences = Object.fromEntries( sections.flatMap((section) => section.settings.map((setting) => [setting.key, setting.defaultValue])) ) as SettingsPreferences export function SettingsDialog({ open: openProp, defaultOpen = false, onOpenChange, preferences: preferencesProp, onPreferencesChange, trigger, }: SettingsDialogProps) { const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen) const [activeItem, setActiveItem] = React.useState("Messages & media") const [uncontrolledPreferences, setUncontrolledPreferences] = React.useState(defaultPreferences) const open = openProp ?? uncontrolledOpen const preferences = preferencesProp ?? uncontrolledPreferences const activeSection = sections.find((section) => section.name === activeItem) ?? sections[0] const handleOpenChange = (nextOpen: boolean) => { if (openProp === undefined) setUncontrolledOpen(nextOpen) onOpenChange?.(nextOpen) } const handlePreferenceChange = (key: string, value: boolean) => { const nextPreferences = { ...preferences, [key]: value } if (preferencesProp === undefined) setUncontrolledPreferences(nextPreferences) onPreferencesChange?.(nextPreferences) } return ( ) } function SettingRow({ title, description, checked, onCheckedChange }: Pick & { checked: boolean; onCheckedChange: (checked: boolean) => void }) { return (

{title}

{description}

) } 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","radix-ui",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui"}]]}]}]]}],["$","$L4b",null,{"namespace":"@amarjay-ui","registryDependencies":["breadcrumb","button","dialog","sidebar","switch"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"src/components/examples/settings-dialog.tsx","content":"$4d","type":"registry:block"}],"className":"h-[70svh] min-h-80"}]]}]