+
);
}
return (
-
+
+
+
);
}
diff --git a/src/components/QuickCapture/QuickCaptureForm.tsx b/src/components/QuickCapture/QuickCaptureForm.tsx
index 84dd5d2..d58a8f3 100644
--- a/src/components/QuickCapture/QuickCaptureForm.tsx
+++ b/src/components/QuickCapture/QuickCaptureForm.tsx
@@ -1,17 +1,37 @@
import { Button } from "$components/Button";
-import { XIcon } from "$icons";
+import { ContextMenu, type ContextMenuDivider, type ContextMenuItem, useContextMenu } from "$components/ContextMenu";
+import { CHROME_SECTION, NO_MOTION_TRANSITION, QUICK_CAPTURE } from "$constants";
+import { ChevronDownIcon, PenIcon, XIcon } from "$icons";
import type { CaptureMode } from "$types";
+import { formatShortcut } from "$utils/shortcuts";
import { cn } from "$utils/tw";
+import { AnimatePresence, motion } from "motion/react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+export type QuickCaptureSaveTarget = { id: string; locationId: number; relPath: string; label: string };
+
type QuickCaptureFormProps = {
defaultMode?: CaptureMode;
onSubmit: (text: string, mode: CaptureMode, destination?: { locationId: number; relPath: string }) => void;
onClose: () => void;
isSubmitting: boolean;
error: string | null;
+ reduceMotion?: boolean;
+ saveTargets?: QuickCaptureSaveTarget[];
};
+type FormTransition = typeof CHROME_SECTION.TRANSITION | typeof NO_MOTION_TRANSITION;
+
+type ModeButtonsProps = {
+ currentMode: CaptureMode;
+ setMode: (mode: CaptureMode) => void;
+ isSubmitting: boolean;
+ transition: FormTransition;
+};
+
+const MODE_OPTIONS = ["QuickNote", "WritingSession", "Append"] as const satisfies readonly CaptureMode[];
+const EMPTY_SAVE_TARGETS: QuickCaptureSaveTarget[] = [];
+
const getModeLabel = (m: CaptureMode): string => {
switch (m) {
case "QuickNote":
@@ -25,98 +45,357 @@ const getModeLabel = (m: CaptureMode): string => {
}
};
-type ModeButtonsProps = { currentMode: CaptureMode; setMode: (mode: CaptureMode) => void; isSubmitting: boolean };
+const getModeDescription = (m: CaptureMode): string => {
+ switch (m) {
+ case "QuickNote":
+ return "Capture and save immediately into your inbox.";
+ case "WritingSession":
+ return "Draft freely and save when you are ready.";
+ case "Append":
+ return "Append your note to the last configured target.";
+ default:
+ return "Capture a thought quickly.";
+ }
+};
-type ModeButtonProps = ModeButtonsProps & { mode: CaptureMode };
+const getShortcutHint = (mode: CaptureMode): string => {
+ if (mode === "WritingSession") {
+ return `${formatShortcut("Cmd+Enter")} to save, Esc to close`;
+ }
+ return "Enter to save, Shift+Enter for newline, Esc to close";
+};
+
+const ModeDescription = ({ mode, transition }: { mode: CaptureMode; transition: FormTransition }) => (
+
+
+ {getModeDescription(mode)}
+
+
+);
-const ModeButton = ({ currentMode, setMode, isSubmitting, mode }: ModeButtonProps) => {
+const ModeButton = (
+ { mode, currentMode, setMode, isSubmitting, transition }: {
+ mode: CaptureMode;
+ currentMode: CaptureMode;
+ setMode: (mode: CaptureMode) => void;
+ isSubmitting: boolean;
+ transition: FormTransition;
+ },
+) => {
const handleClick = useCallback(() => {
setMode(mode);
}, [mode, setMode]);
- const modeLabel = useMemo(() => getModeLabel(mode), [mode]);
-
const classes = useMemo(
() =>
cn(
- "px-2.5 py-1.5 text-xs sm:text-sm font-medium border rounded transition-[color,background-color,opacity,border-color] duration-150",
- mode === currentMode
- ? "bg-accent-blue text-white border-accent-blue"
- : "bg-field-02 text-text-secondary border-border-subtle hover:bg-field-hover-02 hover:text-text-primary",
+ "relative rounded px-2.5 py-1.5 text-xs font-medium transition-[color,background-color,opacity,border-color] duration-150 sm:text-sm",
+ mode === currentMode ? "text-text-primary" : "text-text-secondary hover:text-text-primary",
),
[mode, currentMode],
);
- return
;
+ return (
+
+ );
};
-const ModeButtons = ({ currentMode, setMode, isSubmitting }: ModeButtonsProps) => (
-
- {(["QuickNote", "WritingSession", "Append"] as CaptureMode[]).map((m) => (
-
+const ModeButtons = ({ currentMode, setMode, isSubmitting, transition }: ModeButtonsProps) => (
+
+ {MODE_OPTIONS.map((modeOption) => (
+
))}
);
-const ErrorMessage = ({ error }: { error: string | null }) => {
- return
{error && {error}}
;
-};
+const CaptureTitle = ({ mode, transition }: { mode: CaptureMode; transition: FormTransition }) => (
+
+);
-const FooterActions = (
- { mode, isSubmitting, handleSubmit, text }: {
- mode: CaptureMode;
- isSubmitting: boolean;
- handleSubmit: () => void;
+const QuickCaptureFormHeader = (
+ { onClose, currentMode, setMode, isSubmitting, transition }: ModeButtonsProps & { onClose: () => void },
+) => (
+
+);
+
+const CaptureMetaRow = ({ mode, noteStats }: { mode: CaptureMode; noteStats: string }) => (
+
+ {getModeLabel(mode)} mode
+ {noteStats}
+
+);
+
+const CaptureTextarea = (
+ { textareaRef, text, isSubmitting, onChange, onKeyDown }: {
+ textareaRef: React.RefObject
;
text: string;
+ isSubmitting: boolean;
+ onChange: (e: React.ChangeEvent) => void;
+ onKeyDown: (e: React.KeyboardEvent) => void;
},
) => (
-
-
- {mode === "WritingSession"
- ? "Cmd+Enter to save, Esc to close"
- : "Enter to save, Shift+Enter for newline, Esc to close"}
-
-
-
+
+
);
-const QuickCaptureFormHeader = (
- { onClose, currentMode, setMode, isSubmitting }: ModeButtonsProps & { onClose: () => void },
+const ComposePane = (
+ { mode, noteStats, text, isSubmitting, textareaRef, onTextChange, onTextareaKeyDown, transition }: {
+ mode: CaptureMode;
+ noteStats: string;
+ text: string;
+ isSubmitting: boolean;
+ textareaRef: React.RefObject
;
+ onTextChange: (e: React.ChangeEvent) => void;
+ onTextareaKeyDown: (e: React.KeyboardEvent) => void;
+ transition: FormTransition;
+ },
) => (
-
-
+
+
+
+
+);
+
+function FooterStatus(
+ { error, mode, transition, selectedSaveTargetLabel }: {
+ error: string | null;
+ mode: CaptureMode;
+ transition: FormTransition;
+ selectedSaveTargetLabel: string | null;
+ },
+) {
+ const message = useMemo(
+ () => error ?? (selectedSaveTargetLabel ? `Save To: ${selectedSaveTargetLabel}` : getShortcutHint(mode)),
+ [error, selectedSaveTargetLabel, mode],
+ );
+ const statusClass = useMemo(() => error ? "text-support-error" : "text-text-placeholder", [error]);
+ const statusKey = useMemo(() => error ?? selectedSaveTargetLabel ?? mode, [error, selectedSaveTargetLabel, mode]);
+
+ return (
+
+ );
+}
+
+function FooterActions(
+ { mode, isSubmitting, canSubmit, onSubmit, onClose, saveTargets, selectedSaveTargetId, onSaveTargetSelect }: {
+ mode: CaptureMode;
+ isSubmitting: boolean;
+ canSubmit: boolean;
+ onSubmit: () => void;
+ onClose: () => void;
+ saveTargets: QuickCaptureSaveTarget[];
+ selectedSaveTargetId: string | null;
+ onSaveTargetSelect: (targetId: string | null) => void;
+ },
+) {
+ const { isOpen, position, openAt, close } = useContextMenu();
+ const isAppendMode = mode === "Append";
+ const canChooseSaveTarget = !isAppendMode && saveTargets.length > 0;
+ const menuItems = useMemo<(ContextMenuItem | ContextMenuDivider)[]>(() => {
+ if (isAppendMode) {
+ return [{ label: "Append mode uses append target", onClick: () => {}, disabled: true }];
+ }
+
+ if (saveTargets.length === 0) {
+ return [{ label: "No directories found", onClick: () => {}, disabled: true }];
+ }
+
+ return [
+ { label: "Save (Auto)", onClick: () => onSaveTargetSelect(null) },
+ { divider: true },
+ ...saveTargets.map((target) => ({
+ label: `Save to ${target.label}`,
+ onClick: () => onSaveTargetSelect(target.id),
+ })),
+ ];
+ }, [isAppendMode, onSaveTargetSelect, saveTargets]);
+
+ const handleOpenSaveTo = useCallback((event: React.MouseEvent) => {
+ event.preventDefault();
+ event.stopPropagation();
+
+ const rect = event.currentTarget.getBoundingClientRect();
+ openAt(rect.left, rect.bottom + 6);
+ }, [openAt]);
+
+ const saveLabel = selectedSaveTargetId ? "Save To" : "Save Capture";
+ const saveButtonLabel = isSubmitting ? "Saving..." : saveLabel;
+
+ return (
+ <>
+
+
+
+
+
+
+
@@ -150,9 +150,9 @@ export function Toolbar(
label={isExportingPdf ? "Exporting" : "Export PDF"}
onClick={onExportPdf}
disabled={isExportingPdf || isPdfExportDisabled}
- iconOnly={iconOnly} />
+ iconOnly={isNarrow} />
)}
-
+