refactor: Decompose document and folder views into modular components and hooks, replacing monolithic list/grid implementations.

2025-11-26 01:50:53 +01:00
parent 342714528a
commit 0a4a3ae35c
20 changed files with 1074 additions and 917 deletions
@@ -0,0 +1,77 @@
+import React from 'react';
+import { CheckIcon, CloseIcon } from '../../ui/icons';
+
+interface InlineRenameInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: () => void;
+    onCancel: (event?: React.SyntheticEvent) => void;
+    isSaving?: boolean;
+    canSubmit?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+    className?: string;
+}
+
+const InlineRenameInput: React.FC<InlineRenameInputProps> = ({
+    value,
+    onChange,
+    onSubmit,
+    onCancel,
+    isSaving = false,
+    canSubmit = true,
+    inputRef,
+    className = 'doc-title-edit',
+}) => {
+    return (
+        <span className={className}>
+            <input
+                type="text"
+                ref={inputRef}
+                value={value}
+                onChange={(event) => onChange(event.target.value)}
+                onClick={(event) => event.stopPropagation()}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                        event.preventDefault();
+                        onSubmit();
+                    } else if (event.key === 'Escape') {
+                        event.preventDefault();
+                        onCancel(event);
+                    }
+                }}
+                onBlur={(event) => {
+                    const nextFocus = event.relatedTarget;
+                    if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
+                        onCancel();
+                    }
+                }}
+            />
+            <button
+                type="button"
+                className="icon-button"
+                aria-label="Save"
+                title="Save"
+                disabled={!canSubmit || isSaving}
+                onClick={(event) => {
+                    event.stopPropagation();
+                    onSubmit();
+                }}
+            >
+                <CheckIcon />
+            </button>
+            <button
+                type="button"
+                className="icon-button"
+                aria-label="Cancel"
+                title="Cancel"
+                onClick={(event) => {
+                    onCancel(event);
+                }}
+            >
+                <CloseIcon />
+            </button>
+        </span>
+    );
+};
+
+export default InlineRenameInput;