import { CollapsibleSection } from "$components/CollapsibleSection"; import { Sheet, type SheetPosition, type SheetSize } from "$components/Sheet"; import { useRoutedSheet } from "$hooks/useRoutedSheet"; import { useViewportTier } from "$hooks/useViewportTier"; import { useLayoutSettingsUiState } from "$state/selectors"; import type { SettingsScope } from "$types"; import { cn } from "$utils/tw"; import { useCallback, useEffect, useMemo } from "react"; import { AccessibilitySection } from "./Accessibility"; import { AtProtoSection } from "./AtProtoSection"; import { ChromeSettingsSection } from "./ChromeSettings"; import { EditorSettingsSection } from "./EditorSettings"; import { FocusModeSection } from "./FocusModeSettings"; import { QuickCaptureSection } from "./QuickCapture"; import { SettingsHeader } from "./SettingsHeader"; import { WritingTools } from "./WriterTools"; type SettingsSheetLayout = { position: SheetPosition; size: SheetSize; className: string; backdropClassName: string }; type SettingsBodyProps = { scope: SettingsScope; onOpenAtProtoAuth: () => void; onOpenStandardSiteImport: () => void; onLogoutAtProto: () => void; atProtoSession: import("$types").AtProtoSession | null; atProtoPending: boolean; }; const SettingsBody = ( { scope, onOpenAtProtoAuth, onLogoutAtProto, atProtoSession, atProtoPending }: SettingsBodyProps, ) => (

{scope === "full" && ( <> )}

); type SettingsContentProps = { title: string; scope: SettingsScope; onClose: () => void; closeAriaLabel: string; onViewMore?: () => void; onOpenAtProtoAuth: () => void; onOpenStandardSiteImport: () => void; onLogoutAtProto: () => void; atProtoSession: import("$types").AtProtoSession | null; atProtoPending: boolean; }; const SettingsContent = ( { title, scope, onClose, closeAriaLabel, onViewMore, onOpenAtProtoAuth, onOpenStandardSiteImport, onLogoutAtProto, atProtoSession, atProtoPending, }: SettingsContentProps, ) => (

); function useSettingsSheetLayout(scope: SettingsScope): SettingsSheetLayout { const { isCompact, viewportWidth } = useViewportTier(); const compactPanel = useMemo(() => isCompact || viewportWidth < 920, [isCompact, viewportWidth]); return useMemo(() => { if (compactPanel) { return { position: "b", size: scope === "basic" ? "lg" : "full", className: scope === "basic" ? "left-3 right-3 bottom-3 rounded-xl border" : "left-2 right-2 top-2 bottom-2 rounded-2xl border shadow-2xl", backdropClassName: scope === "basic" ? "bg-black/35" : "bg-black/45", }; } return { position: "r", size: scope === "basic" ? "md" : "xl", className: scope === "basic" ? "right-4 top-14 bottom-4 rounded-xl border" : "right-4 top-4 bottom-4 rounded-2xl border shadow-2xl", backdropClassName: scope === "basic" ? "bg-black/30" : "bg-black/40", }; }, [compactPanel, scope]); } type SettingsSheetProps = { atProtoSession?: import("$types").AtProtoSession | null; atProtoPending?: boolean; onOpenAtProtoAuth?: () => void; onOpenStandardSiteImport?: () => void; onLogoutAtProto?: () => void; }; export function LayoutSettingsPanel( { atProtoSession = null, atProtoPending = false, onOpenAtProtoAuth = () => {}, onOpenStandardSiteImport = () => {}, onLogoutAtProto = () => {}, }: SettingsSheetProps, ) { const { isOpen: isVisible, setOpen } = useLayoutSettingsUiState(); const { isOpen: isSettingsRouteOpen, open: openSettingsRoute } = useRoutedSheet("/settings"); const layout = useSettingsSheetLayout("basic"); useEffect(() => { if (isVisible && isSettingsRouteOpen) { setOpen(false); } }, [isSettingsRouteOpen, isVisible, setOpen]); const handleClose = useCallback(() => { setOpen(false); }, [setOpen]); const handleViewMore = useCallback(() => { setOpen(false); openSettingsRoute(); }, [openSettingsRoute, setOpen]); return ( ); } export function RoutedSettingsSheet( { atProtoSession = null, atProtoPending = false, onOpenAtProtoAuth = () => {}, onOpenStandardSiteImport = () => {}, onLogoutAtProto = () => {}, }: SettingsSheetProps, ) { const { isOpen, close } = useRoutedSheet("/settings"); const layout = useSettingsSheetLayout("full"); return ( ); }