Something went wrong. Try again.
[mirror] A local-first desktop markdown writer with grammar checking, at proto integration, and more github.com/stormlightlabs/writer/releases
atproto codemirror markdown tauri rust react
Something went wrong. Try again.
3.9 kB · 104 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105import { Button } from "$components/Button";import { EditorWithContainer } from "$components/Editor";import type { EditorProps } from "$components/Editor";import { StatusBar } from "$components/StatusBar";import type { StatusBarProps } from "$components/StatusBar";import { SaveStatusIndicator } from "$components/Toolbar/SaveStatusIndicator";import { FOCUS, NO_MOTION_TRANSITION } from "$constants";import { useSkipAnimation } from "$hooks/useMotion";import { FocusIcon } from "$icons";import { useFocusModePanelState, useHelpSheetState } from "$state/selectors";import type { SaveStatus } from "$types";import { formatShortcut } from "$utils/shortcuts";import * as logger from "@tauri-apps/plugin-log";import { AnimatePresence, motion } from "motion/react";import { useCallback, useEffect, useMemo } from "react";
type FocusModePanelProps = { editor: Pick<EditorProps, "initialText" | "onChange" | "onSave" | "onCursorMove" | "onSelectionChange">; statusBar: Pick<StatusBarProps, "docMeta" | "stats">; saveStatus: SaveStatus; hasActiveDocument: boolean; onSave: () => void;};
type FocusHeaderProps = { onExit: () => void; onOpenHelp: () => void; onSave: () => void; saveStatus: SaveStatus; hasActiveDocument: boolean;};
function FocusHeader({ onExit, onOpenHelp, onSave, saveStatus, hasActiveDocument }: FocusHeaderProps) { const saveShortcut = formatShortcut("Cmd+S"); const helpShortcut = formatShortcut("Cmd+/");
return ( <div className="px-6 py-4 flex items-center justify-between"> <h1 className="m-0 text-sm font-medium text-text-secondary flex items-center gap-2"> <FocusIcon size="md" /> Focus Mode </h1> <div className="flex items-center gap-2"> <SaveStatusIndicator status={saveStatus} compact onClick={onSave} disabled={!hasActiveDocument || saveStatus === "Saved" || saveStatus === "Saving"} title={`Save (${saveShortcut})`} /> <Button variant="surface" size="lg" onClick={onOpenHelp} className="rounded-md text-[0.8125rem] "> Help ({helpShortcut}) </Button> <Button variant="surface" size="lg" onClick={onExit} className="rounded-md text-[0.8125rem]"> Exit Focus Mode (Esc) </Button> </div> </div> );}
export function FocusModePanel({ editor, statusBar, saveStatus, hasActiveDocument, onSave }: FocusModePanelProps) { const { statusBarCollapsed, setFocusMode } = useFocusModePanelState(); const { setOpen: setHelpSheetOpen } = useHelpSheetState(); const skipAnimation = useSkipAnimation(); const transition = useMemo(() => skipAnimation ? NO_MOTION_TRANSITION : FOCUS.TRANSITION, [skipAnimation]); const handleExit = useCallback(() => { setFocusMode(false); }, [setFocusMode]); const handleOpenHelp = useCallback(() => { setHelpSheetOpen(true); }, [setHelpSheetOpen]); const container = useMemo( () => ({ className: "flex min-h-0 flex-1 max-w-3xl mx-auto w-full overflow-hidden pt-3", style: {} }), [], );
useEffect(() => { void logger.debug( `Focus mode layout ready: hasActiveDocument=${String(hasActiveDocument)}, statusBarCollapsed=${ String(statusBarCollapsed) }`, ); }, [hasActiveDocument, statusBarCollapsed]);
return ( <AnimatePresence> <motion.div initial={FOCUS.INITIAL} animate={FOCUS.ANIMATE} exit={FOCUS.EXIT} transition={transition} className="fixed inset-0 z-50 flex min-h-0 flex-col bg-surface-primary"> <FocusHeader onExit={handleExit} onOpenHelp={handleOpenHelp} onSave={onSave} saveStatus={saveStatus} hasActiveDocument={hasActiveDocument} /> <EditorWithContainer {...editor} container={container} /> {statusBarCollapsed ? null : <StatusBar {...statusBar} />} </motion.div> </AnimatePresence> );}