"use client" import type { Platform } from "macbetter" import { Avatar } from "macbetter/avatar" import { Badge } from "macbetter/badge" import { Button } from "macbetter/button" import { List, ListRow, ListRowAccessory, ListRowSubtitle, ListRowTitle, ListRowValue, ListSection, } from "macbetter/list" import { Progress } from "macbetter/progress" import { Radio, RadioGroup } from "macbetter/radio" import { SegmentedControl, SegmentedControlItem } from "macbetter/segmented-control" import { AppWindowIcon, ArchiveRestoreIcon, BellIcon, BriefcaseIcon, CalendarClockIcon, CarIcon, CloudIcon, CreditCardIcon, DownloadIcon, HardDriveIcon, InfoIcon, KeyRoundIcon, LanguagesIcon, LockIcon, MoonIcon, PowerIcon, RefreshCwIcon, ShareIcon, ShieldCheckIcon, SunDimIcon, SunIcon, UserIcon, UsersIcon, Volume1Icon, Volume2Icon, WifiIcon, } from "lucide-react" import type * as React from "react" import { SelectRow, SliderRow, ToggleRow, ValueRow } from "../rows" import { accents, alertSounds, apps, devices, networks, outputs, type PaneId, type SettingsState, } from "./data" type Set = (key: K, value: SettingsState[K]) => void type PaneProps = { s: SettingsState; set: Set; platform: Platform } function Signal({ secure = true }: { secure?: boolean }) { return ( {secure ? : null} ) } function WifiPane({ s, set, platform }: PaneProps) { const mac = platform === "macos" return ( <> set("wifi", v)} /> {s.wifi ? ( {s.network} Connected {mac ? ( ) : ( )} ) : null} {s.wifi ? ( <> {networks.known .filter((name) => name !== s.network) .concat(s.network === networks.current ? [] : [networks.current]) .map((name) => ( set("network", name)}> {name} ))} {networks.other.map((name) => ( set("network", name)}> {name} ))} set("askToJoin", v)} options={[ { value: "off", label: "Off" }, { value: "notify", label: "Notify" }, { value: "ask", label: "Ask" }, ]} /> set("askHotspots", v)} options={[ { value: "never", label: "Never" }, { value: "ask", label: "Ask to join" }, { value: "auto", label: "Automatic" }, ]} /> ) : null} ) } function BluetoothPane({ s, set, platform }: PaneProps) { const mac = platform === "macos" return ( <> set("bluetooth", v)} /> {s.bluetooth ? ( {devices.map((device) => { const on = s.connected[device.id] const toggle = () => set("connected", { ...s.connected, [device.id]: !on }) return mac ? ( {device.name} {on ? `Connected${device.battery ? ` · ${device.battery}% battery` : ""}` : "Not connected"} ) : ( ) })} ) : null} ) } function BluetoothGlyph(props: React.SVGProps) { return ( ) } function NetworkPane({ s, set }: PaneProps) { const services = [ { name: "Wi-Fi", status: s.wifi ? "Connected" : "Off", on: s.wifi }, { name: "Thunderbolt Bridge", status: "Not connected", on: false }, { name: "USB 10/100/1000 LAN", status: "Cable unplugged", on: false }, ] return ( <> {services.map((service) => ( {}}> ))} set("vpn", v)} /> set("firewall", v)} /> ) } function NotificationsPane({ s, set }: PaneProps) { return ( <> set("previews", v)} options={[ { value: "always", label: "Always" }, { value: "unlocked", label: "When Unlocked" }, { value: "never", label: "Never" }, ]} /> set("notifySleeping", v)} /> set("notifyLocked", v)} /> set("notifyMirroring", v)} /> {apps.map((app) => ( set("appNotifications", { ...s.appNotifications, [app.id]: v })} /> ))} ) } function SoundPane({ s, set, platform }: PaneProps) { const mac = platform === "macos" return ( <> set("alertSound", v)} options={alertSounds.map((name) => ({ value: name, label: name }))} /> set("alertVolume", v)} min={Volume1Icon} max={Volume2Icon} showLabel={mac} /> set("startupSound", v)} /> set("uiSounds", v)} /> set("volumeFeedback", v)} /> { set("outputVolume", v) if (s.muted) set("muted", false) }} min={Volume1Icon} max={Volume2Icon} showLabel={mac} /> set("muted", v)} /> {outputs.map((output) => ( set("output", output.id)} /> ))} ) } function FocusPane({ s, set }: PaneProps) { return ( <> set("doNotDisturb", v)} /> {}} /> {}} /> {}} /> {}} /> set("shareFocus", v)} /> set("focusStatus", v)} /> ) } function GeneralPane({ platform }: PaneProps) { const mac = platform === "macos" return ( <> {}} /> {}}> Software Update 1 {}} /> {}} /> {}} /> {}} /> {}} /> {}} /> {}} /> {}} /> ) } function AppearancePane({ s, set }: PaneProps) { return ( <> Appearance v && set("appearance", v as SettingsState["appearance"])} block > Accent color {accents.find((a) => a.id === s.accent)?.label} v && set("accent", v as string)} className="ex-swatches" > {accents.map((accent) => ( ))} set("sidebarIcons", v)} options={[ { value: "small", label: "Small" }, { value: "medium", label: "Medium" }, { value: "large", label: "Large" }, ]} /> set("wallpaperTinting", v)} /> set("scrollBars", v)} options={[ { value: "auto", label: "Automatically" }, { value: "scrolling", label: "When scrolling" }, { value: "always", label: "Always" }, ]} /> ) } function DisplaysPane({ s, set, platform }: PaneProps) { const mac = platform === "macos" return ( <> Resolution v && set("resolution", v as string)} block > Larger text Default More space set("brightness", v)} min={SunDimIcon} max={SunIcon} showLabel={mac} /> set("autoBrightness", v)} /> set("trueTone", v)} /> set("nightShift", v)} options={[ { value: "off", label: "Off" }, { value: "sunset", label: "Sunset to Sunrise" }, { value: "custom", label: "Custom" }, ]} /> ) } function BatteryPane({ s, set }: PaneProps) { return ( <> Battery level 82% {}} /> set("lowPower", v)} options={[ { value: "never", label: "Never" }, { value: "always", label: "Always" }, { value: "battery", label: "Only on Battery" }, { value: "adapter", label: "Only on Power Adapter" }, ]} /> set("optimizedCharging", v)} /> ) } function AccountPane({ platform }: PaneProps) { return ( <>

Avery Chen

avery.chen@icloud.com

{}} /> {}} /> {}} /> {}} /> {}} /> {}} /> {}} /> ) } const simpleRows: Partial> = { "screen-time": { header: "Today", rows: [ { title: "App & Website Activity", value: "4h 12m" }, { title: "Notifications", value: "86" }, { title: "Pickups", value: "41" }, { title: "Downtime", value: "Off" }, { title: "App Limits", value: "2 limits" }, { title: "Content & Privacy", value: "On" }, ], }, accessibility: { header: "Vision", rows: [ { title: "VoiceOver", value: "Off" }, { title: "Zoom", value: "Off" }, { title: "Display" }, { title: "Spoken Content" }, { title: "Descriptions" }, ], }, "control-center": { header: "Control Center modules", rows: [ { title: "Wi-Fi", value: "Show in Menu Bar" }, { title: "Bluetooth", value: "Show in Menu Bar" }, { title: "Focus", value: "Show When Active" }, { title: "Display", value: "Show When Active" }, { title: "Sound", value: "Always Show" }, ], }, wallpaper: { rows: [ { title: "Current wallpaper", value: "Racing Green" }, { title: "Show on all Spaces", value: "On" }, { title: "Screen saver", value: "Drift" }, ], footer: "Wallpapers follow your appearance setting.", }, privacy: { header: "Privacy", rows: [ { title: "Location Services", value: "On" }, { title: "Contacts", value: "3 apps" }, { title: "Calendars", value: "2 apps" }, { title: "Camera", value: "1 app" }, { title: "Microphone", value: "2 apps" }, { title: "Analytics & Improvements" }, ], }, passwords: { rows: [ { title: "All", value: "214" }, { title: "Passkeys", value: "18" }, { title: "Codes", value: "9" }, { title: "Wi-Fi", value: "26" }, { title: "Security", value: "No issues" }, ], }, } function SimplePane({ id }: { id: PaneId }) { const content = simpleRows[id] if (!content) return null return ( {content.rows.map((row) => ( {}} /> ))} ) } const paneComponents: Partial React.ReactNode>> = { account: AccountPane, wifi: WifiPane, bluetooth: BluetoothPane, network: NetworkPane, notifications: NotificationsPane, sound: SoundPane, focus: FocusPane, general: GeneralPane, appearance: AppearancePane, displays: DisplaysPane, battery: BatteryPane, } /** One settings pane, drawn with macbetter lists so it takes each platform's idiom on its own. */ function PaneContent({ id, ...props }: PaneProps & { id: PaneId }) { const Component = paneComponents[id] return {Component ? : } } /** What the iPhone's root list shows at the trailing edge of a row. */ function rowValue(id: PaneId, s: SettingsState) { if (id === "wifi") return s.wifi ? s.network : "Off" if (id === "bluetooth") return s.bluetooth ? "On" : "Off" if (id === "focus") return s.doNotDisturb ? "Do Not Disturb" : undefined if (id === "battery") return "82%" return undefined } export { PaneContent, rowValue } export type { PaneProps, Set }