design
This commit is contained in:
Generated
+27
@@ -8,6 +8,7 @@
|
||||
"name": "papercrate-frontend",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@tabler/icons-react": "3.11.0",
|
||||
"axios": "1.7.7",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
@@ -1963,6 +1964,32 @@
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tabler/icons": {
|
||||
"version": "3.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.11.0.tgz",
|
||||
"integrity": "sha512-/vZinJNvCYhdAB+RUsyCpanSPuOEKHHIZi4Uu0Bw7ilewHnQhCWUPrT704uHCRli2ROl7spADPmWzAqOganA5A==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/codecalm"
|
||||
}
|
||||
},
|
||||
"node_modules/@tabler/icons-react": {
|
||||
"version": "3.11.0",
|
||||
"resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.11.0.tgz",
|
||||
"integrity": "sha512-xHNBi9mns1slvqos+7LkP3ube4CjWrANMbxMaorzwzO9J/+y1sAEG/sN8CV8FmtpYW/9/gDR+OWCjjLLg0RmAw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tabler/icons": "3.11.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/codecalm"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 16"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/body-parser": {
|
||||
"version": "1.19.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz",
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
"lint": "echo \"No linting configured\""
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/icons-react": "3.11.0",
|
||||
"axios": "1.7.7",
|
||||
"react": "18.3.1",
|
||||
"react-dom": "18.3.1",
|
||||
|
||||
+289
-200
@@ -24,6 +24,14 @@ import './styles.css';
|
||||
import AssetManager, { getAssetFromVersion, resolveDocumentAssetUrl } from './asset_manager';
|
||||
import useApiError from './hooks/useApiError';
|
||||
import SkeuomorphicWorkspace from './skeuomorphic_ws';
|
||||
import {
|
||||
IconChevronRight,
|
||||
IconDownload as TablerDownload,
|
||||
IconFolderFilled,
|
||||
IconPencil,
|
||||
IconTagFilled,
|
||||
IconTrash,
|
||||
} from '@tabler/icons-react';
|
||||
|
||||
const runtimeApiBase =
|
||||
typeof window !== 'undefined' && window.__PAPERCRATE_API_BASE_URL
|
||||
@@ -175,150 +183,6 @@ const getTagColorStyle = (hex) => {
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
const IconChevronRight = ({ className }) => (
|
||||
<svg
|
||||
className={className ? `icon ${className}` : 'icon'}
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M9 6l6 6-6 6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconTrash = ({ className }) => (
|
||||
<svg
|
||||
className={className ? `icon ${className}` : 'icon'}
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M4 7h16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M10 11v6m4-6v6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2l1-12"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M9 7V4h6v3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconDownload = ({ className }) => (
|
||||
<svg
|
||||
className={className ? `icon ${className}` : 'icon'}
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M7 11l5 5 5-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M12 5v11"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconEdit = ({ className }) => (
|
||||
<svg
|
||||
className={className ? `icon ${className}` : 'icon'}
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M12 20h9"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const IconFolder = ({ className }) => (
|
||||
<svg
|
||||
className={className ? `icon ${className}` : 'icon'}
|
||||
viewBox="0 0 24 24"
|
||||
role="img"
|
||||
aria-hidden="true"
|
||||
focusable="false"
|
||||
>
|
||||
<path
|
||||
d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.6"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const createRootNode = () => ({
|
||||
id: 'root',
|
||||
name: DEFAULT_FOLDER_NAME,
|
||||
@@ -386,10 +250,20 @@ const FolderNode = ({
|
||||
onFolderDragEnd,
|
||||
draggingFolderId,
|
||||
}) => {
|
||||
const canToggle = node.id === 'root' || node.children.length > 0 || !node.loaded;
|
||||
const icon = canToggle ? <IconChevronRight className="toggle-icon" /> : null;
|
||||
const canDrag = node.id !== 'root';
|
||||
const isRoot = node.id === 'root';
|
||||
const hasChildren = node.children.length > 0;
|
||||
const canToggle = !isRoot && (hasChildren || !node.loaded);
|
||||
const showChevron = !isRoot && hasChildren;
|
||||
const icon = showChevron ? (
|
||||
<IconChevronRight className="icon toggle-icon" size="1em" stroke={1.6} />
|
||||
) : null;
|
||||
const canDrag = !isRoot;
|
||||
const isDragging = draggingFolderId === node.id;
|
||||
const isExpanded = isRoot ? true : Boolean(node.expanded);
|
||||
const rowClasses = ['folder-row'];
|
||||
if (isSelected) {
|
||||
rowClasses.push('active');
|
||||
}
|
||||
|
||||
const handleToggleClick = (event) => {
|
||||
event.stopPropagation();
|
||||
@@ -401,7 +275,7 @@ const FolderNode = ({
|
||||
return (
|
||||
<li className={`folder-node${isDragging ? ' is-dragging' : ''}`}>
|
||||
<div
|
||||
className={`folder-row${isSelected ? ' active' : ''}`}
|
||||
className={rowClasses.join(' ')}
|
||||
draggable={canDrag}
|
||||
onClick={() => onSelect(node.id)}
|
||||
onDragOver={(event) => onDragOver(event, node.id)}
|
||||
@@ -417,13 +291,22 @@ const FolderNode = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={`toggle${canToggle ? '' : ' invisible'}${node.expanded ? ' expanded' : ''}`}
|
||||
onClick={handleToggleClick}
|
||||
>
|
||||
{icon}
|
||||
{!isRoot && (
|
||||
<span
|
||||
className={`toggle${showChevron ? '' : ' invisible'}${isExpanded ? ' expanded' : ''}`}
|
||||
onClick={handleToggleClick}
|
||||
>
|
||||
{icon}
|
||||
</span>
|
||||
)}
|
||||
<span className="name">
|
||||
<IconFolderFilled
|
||||
className="icon icon--fill folder-icon"
|
||||
size="1em"
|
||||
stroke={0}
|
||||
/>
|
||||
{node.name}
|
||||
</span>
|
||||
<span className="name">{node.name}</span>
|
||||
{node.id !== 'root' && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -435,12 +318,12 @@ const FolderNode = ({
|
||||
title="Delete folder"
|
||||
aria-label={`Delete folder ${node.name}`}
|
||||
>
|
||||
<IconTrash className="icon-trash" />
|
||||
<IconTrash className="icon icon-trash" size="1em" stroke={1.6} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{node.expanded && node.children.length > 0 && (
|
||||
<ul className="folder-children">
|
||||
{isExpanded && node.children.length > 0 && (
|
||||
<ul className={`folder-children${depth === 0 ? ' folder-children--level1' : ''}`}>
|
||||
{renderChildren(node.children, depth + 1)}
|
||||
</ul>
|
||||
)}
|
||||
@@ -530,6 +413,8 @@ const DocumentsTable = ({
|
||||
breadcrumbs,
|
||||
onRefresh,
|
||||
onShowSkeuoWorkspace = () => {},
|
||||
onRequestCreateFolder = () => {},
|
||||
creatingFolder = false,
|
||||
subfolders,
|
||||
documents,
|
||||
searchResults,
|
||||
@@ -654,6 +539,13 @@ const DocumentsTable = ({
|
||||
)}
|
||||
</div>
|
||||
<div className="header-actions">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRequestCreateFolder}
|
||||
disabled={creatingFolder}
|
||||
>
|
||||
{creatingFolder ? 'Creating…' : 'New folder'}
|
||||
</button>
|
||||
<button className="secondary" onClick={onRefresh}>
|
||||
Refresh
|
||||
</button>
|
||||
@@ -732,7 +624,11 @@ const DocumentsTable = ({
|
||||
>
|
||||
<td className="thumb-cell">
|
||||
<div className="thumb-placeholder icon">
|
||||
<IconFolder className="icon-inline" />
|
||||
<IconFolderFilled
|
||||
className="icon icon--fill icon-inline"
|
||||
size="1.1em"
|
||||
stroke={0}
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
<td>{folder.name}</td>
|
||||
@@ -836,7 +732,11 @@ const DocumentsTable = ({
|
||||
onAuxClick={(event) => event.stopPropagation()}
|
||||
onContextMenu={(event) => event.stopPropagation()}
|
||||
>
|
||||
<IconDownload className="icon-inline" />
|
||||
<TablerDownload
|
||||
className="icon icon-inline"
|
||||
size="1em"
|
||||
stroke={1.6}
|
||||
/>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
) : (
|
||||
@@ -1222,7 +1122,7 @@ const DetailPanel = ({
|
||||
aria-label="Edit title"
|
||||
title="Edit title"
|
||||
>
|
||||
<IconEdit className="icon-inline" />
|
||||
<IconPencil className="icon icon-inline" size="1em" stroke={1.6} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
@@ -1266,7 +1166,7 @@ const DetailPanel = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconDownload className="icon-inline" />
|
||||
<TablerDownload className="icon icon-inline" size="1em" stroke={1.6} />
|
||||
<span>Download</span>
|
||||
</a>
|
||||
<button
|
||||
@@ -1507,7 +1407,7 @@ const PreviewWorkspace = ({
|
||||
}
|
||||
}}
|
||||
>
|
||||
<IconDownload className="icon-inline" />
|
||||
<TablerDownload className="icon icon-inline" size="1em" stroke={1.6} />
|
||||
<span>Download</span>
|
||||
</a>
|
||||
<button
|
||||
@@ -1547,7 +1447,6 @@ const Sidebar = ({
|
||||
onDrop,
|
||||
onDragOver,
|
||||
onDragLeave,
|
||||
onCreateFolder,
|
||||
onDeleteFolder,
|
||||
selectedFolder,
|
||||
onFolderDragStart,
|
||||
@@ -1603,43 +1502,38 @@ const Sidebar = ({
|
||||
|
||||
return (
|
||||
<aside className="sidebar column">
|
||||
<div className="column-header">
|
||||
<h2>Folders</h2>
|
||||
<div className="sidebar-section sidebar-section--folders">
|
||||
<div className="sidebar-section__header">
|
||||
<h3>Folders</h3>
|
||||
</div>
|
||||
<ul className="folder-tree">
|
||||
{rootNode && renderNodes([rootNode.id], 0)}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="column-body">
|
||||
<form
|
||||
className="new-folder-form inline"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault();
|
||||
const input = event.currentTarget.elements['folder-name'];
|
||||
const value = input.value.trim();
|
||||
if (!value) return;
|
||||
onCreateFolder(value, () => {
|
||||
input.value = '';
|
||||
});
|
||||
<div className="sidebar-section">
|
||||
<div className="sidebar-section__header">
|
||||
<h3>Tags</h3>
|
||||
<span className="meta">{tags.length}</span>
|
||||
</div>
|
||||
<span
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`sidebar-item${isTagsRoute ? ' active' : ''}`}
|
||||
onClick={handleShowTags}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
handleShowTags();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input name="folder-name" placeholder="New folder name" required />
|
||||
<button type="submit">Create</button>
|
||||
</form>
|
||||
<div className="folder-tree-scroller">
|
||||
<ul className="folder-tree">
|
||||
{rootNode && renderNodes([rootNode.id], 0)}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="sidebar-section">
|
||||
<div className="sidebar-section__header">
|
||||
<h3>Tags</h3>
|
||||
<span className="meta">{tags.length}</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className={`sidebar-link${isTagsRoute ? ' active' : ''}`}
|
||||
onClick={handleShowTags}
|
||||
>
|
||||
All tags
|
||||
</button>
|
||||
</div>
|
||||
<IconTagFilled
|
||||
className="icon icon--fill sidebar-item__icon"
|
||||
size="1em"
|
||||
stroke={0}
|
||||
/>
|
||||
<span>All tags</span>
|
||||
</span>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
@@ -1896,6 +1790,11 @@ const AppLayout = () => {
|
||||
[reportApiError],
|
||||
);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [isCreateFolderModalOpen, setCreateFolderModalOpen] = useState(false);
|
||||
const [newFolderName, setNewFolderName] = useState('');
|
||||
const [createFolderError, setCreateFolderError] = useState('');
|
||||
const [creatingFolder, setCreatingFolder] = useState(false);
|
||||
const createFolderInputRef = useRef(null);
|
||||
const [folderNodes, setFolderNodes] = useState(() => {
|
||||
const rootNode = createRootNode();
|
||||
return new Map([[rootNode.id, rootNode]]);
|
||||
@@ -2063,6 +1962,7 @@ const AppLayout = () => {
|
||||
const bootstrapInitializedRef = useRef(false);
|
||||
const selectionInitializedRef = useRef(false);
|
||||
const dragCounterRef = useRef(0);
|
||||
const prefetchedFoldersRef = useRef(new Set(['root']));
|
||||
const selectionAnchorRef = useRef(routeDocumentId);
|
||||
const selectionOrderRef = useRef(initialSelection);
|
||||
|
||||
@@ -2098,6 +1998,7 @@ const AppLayout = () => {
|
||||
setPreviewEntries(() => new Map());
|
||||
previewInflightRef.current = new Map();
|
||||
dragCounterRef.current = 0;
|
||||
prefetchedFoldersRef.current = new Set(['root']);
|
||||
breadcrumbFetchRef.current = new Set();
|
||||
bootstrapInitializedRef.current = false;
|
||||
selectionInitializedRef.current = false;
|
||||
@@ -2613,6 +2514,7 @@ const AppLayout = () => {
|
||||
name: folderId === 'root' ? DEFAULT_FOLDER_NAME : data.folder?.name || existingNode.name,
|
||||
parentId: data.folder?.parent_id ?? existingNode.parentId ?? 'root',
|
||||
children: childIds,
|
||||
expanded: folderId === 'root' ? true : existingNode.expanded,
|
||||
loaded: true,
|
||||
});
|
||||
|
||||
@@ -2641,6 +2543,33 @@ const AppLayout = () => {
|
||||
},
|
||||
[assetManager, folderContents],
|
||||
);
|
||||
const greedyPrefetchFolders = useCallback(
|
||||
async (startIds) => {
|
||||
const queue = Array.isArray(startIds) ? [...startIds] : [];
|
||||
const visited = prefetchedFoldersRef.current;
|
||||
|
||||
while (queue.length) {
|
||||
const nextId = queue.shift();
|
||||
if (!nextId || visited.has(nextId)) {
|
||||
continue;
|
||||
}
|
||||
visited.add(nextId);
|
||||
|
||||
try {
|
||||
const contents = await ensureFolderData(nextId, { force: false });
|
||||
const subfolders = Array.isArray(contents?.subfolders) ? contents.subfolders : [];
|
||||
subfolders.forEach((entry) => {
|
||||
if (entry?.id && !visited.has(entry.id)) {
|
||||
queue.push(entry.id);
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.warn('[Folders] Failed to prefetch folder tree for', nextId, error);
|
||||
}
|
||||
}
|
||||
},
|
||||
[ensureFolderData],
|
||||
);
|
||||
|
||||
const isInvalidFolderDrop = useCallback(
|
||||
(sourceId, targetId) => {
|
||||
@@ -2882,6 +2811,13 @@ const AppLayout = () => {
|
||||
if (showLoading) setLoading(true);
|
||||
try {
|
||||
const contents = await ensureFolderData(targetId, { force: true });
|
||||
if (targetId !== 'root') {
|
||||
try {
|
||||
await ensureFolderData('root', { force: false });
|
||||
} catch (error) {
|
||||
console.warn('Failed to refresh root folder tree', error);
|
||||
}
|
||||
}
|
||||
const nextSelectedId = applySelectedFolder(targetId, contents);
|
||||
setSearchResults(null);
|
||||
if (nextSelectedId) {
|
||||
@@ -2896,6 +2832,28 @@ const AppLayout = () => {
|
||||
[ensureFolderData, applySelectedFolder, ensureDocumentDetail, notifyApiError],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!folderContents || typeof folderContents.forEach !== 'function') {
|
||||
return;
|
||||
}
|
||||
|
||||
const pendingIds = [];
|
||||
folderContents.forEach((contents) => {
|
||||
const subfolders = Array.isArray(contents?.subfolders) ? contents.subfolders : [];
|
||||
subfolders.forEach((entry) => {
|
||||
if (entry?.id && !prefetchedFoldersRef.current.has(entry.id)) {
|
||||
pendingIds.push(entry.id);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (!pendingIds.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
greedyPrefetchFolders(pendingIds).catch(() => {});
|
||||
}, [folderContents, greedyPrefetchFolders]);
|
||||
|
||||
const selectFolder = useCallback(
|
||||
async (folderId, { replace = false, immediate = false } = {}) => {
|
||||
const targetId = folderId && folderId !== 'root' ? folderId : 'root';
|
||||
@@ -4284,17 +4242,18 @@ const AppLayout = () => {
|
||||
async (name, onSuccess) => {
|
||||
if (!token) {
|
||||
setStatusMessage('Log in to create folders.', 'error');
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
if (!name.trim()) {
|
||||
setStatusMessage('Folder name cannot be empty.', 'error');
|
||||
return;
|
||||
return false;
|
||||
}
|
||||
const payload = {
|
||||
name: name.trim(),
|
||||
parent_id: selectedFolder === 'root' ? null : selectedFolder,
|
||||
};
|
||||
setLoading(true);
|
||||
let succeeded = false;
|
||||
try {
|
||||
const { data } = await api.post('/folders', payload);
|
||||
onSuccess();
|
||||
@@ -4321,16 +4280,94 @@ const AppLayout = () => {
|
||||
return next;
|
||||
});
|
||||
await ensureFolderData(selectedFolder, { force: true });
|
||||
succeeded = true;
|
||||
} catch (error) {
|
||||
const message = error.response?.data?.error || 'Failed to create folder.';
|
||||
notifyApiError(error, message);
|
||||
succeeded = false;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
return succeeded;
|
||||
},
|
||||
[token, selectedFolder, ensureFolderData, notifyApiError, setStatusMessage],
|
||||
);
|
||||
|
||||
const openCreateFolderModal = useCallback(() => {
|
||||
setNewFolderName('');
|
||||
setCreateFolderError('');
|
||||
setCreateFolderModalOpen(true);
|
||||
}, []);
|
||||
|
||||
const closeCreateFolderModal = useCallback(() => {
|
||||
if (creatingFolder) {
|
||||
return;
|
||||
}
|
||||
setCreateFolderModalOpen(false);
|
||||
setNewFolderName('');
|
||||
setCreateFolderError('');
|
||||
}, [creatingFolder]);
|
||||
|
||||
const handleCreateFolderSubmit = useCallback(
|
||||
async (event) => {
|
||||
event.preventDefault();
|
||||
const trimmed = newFolderName.trim();
|
||||
if (!trimmed) {
|
||||
setCreateFolderError('Folder name cannot be empty.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
setCreateFolderError('Log in to create folders.');
|
||||
return;
|
||||
}
|
||||
|
||||
setCreatingFolder(true);
|
||||
setCreateFolderError('');
|
||||
|
||||
try {
|
||||
const success = await handleFolderCreate(trimmed, () => {
|
||||
setCreateFolderModalOpen(false);
|
||||
setNewFolderName('');
|
||||
setCreateFolderError('');
|
||||
});
|
||||
if (!success) {
|
||||
setCreateFolderError('Unable to create folder. Check the status message for details.');
|
||||
}
|
||||
} finally {
|
||||
setCreatingFolder(false);
|
||||
}
|
||||
},
|
||||
[newFolderName, handleFolderCreate, token],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCreateFolderModalOpen) {
|
||||
return;
|
||||
}
|
||||
const node = createFolderInputRef.current;
|
||||
if (node) {
|
||||
node.focus();
|
||||
node.select();
|
||||
}
|
||||
}, [isCreateFolderModalOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isCreateFolderModalOpen) {
|
||||
return;
|
||||
}
|
||||
const handleKeyDown = (event) => {
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault();
|
||||
closeCreateFolderModal();
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
};
|
||||
}, [isCreateFolderModalOpen, closeCreateFolderModal]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!token) return undefined;
|
||||
|
||||
@@ -4555,6 +4592,9 @@ const AppLayout = () => {
|
||||
notifyApiError(error, 'Failed to load folder.');
|
||||
}
|
||||
}
|
||||
if (folderId === 'root') {
|
||||
return;
|
||||
}
|
||||
setFolderNodes((prev) => {
|
||||
const next = new Map(prev);
|
||||
const current = next.get(folderId);
|
||||
@@ -4991,7 +5031,6 @@ const AppLayout = () => {
|
||||
onDrop: folderClickHandlers.onDrop,
|
||||
onDragOver: folderClickHandlers.onDragOver,
|
||||
onDragLeave: folderClickHandlers.onDragLeave,
|
||||
onCreateFolder: handleFolderCreate,
|
||||
onDeleteFolder: handleFolderDelete,
|
||||
selectedFolder,
|
||||
onFolderDragStart: handleFolderDragStart,
|
||||
@@ -5018,6 +5057,8 @@ const AppLayout = () => {
|
||||
breadcrumbs,
|
||||
onRefresh: refreshCurrentFolder,
|
||||
onShowSkeuoWorkspace: showSkeuoWorkspace,
|
||||
onRequestCreateFolder: openCreateFolderModal,
|
||||
creatingFolder,
|
||||
subfolders: currentSubfolders,
|
||||
documents,
|
||||
searchResults,
|
||||
@@ -5211,6 +5252,54 @@ const AppLayout = () => {
|
||||
</div>
|
||||
</header>
|
||||
<Outlet />
|
||||
{isCreateFolderModalOpen && (
|
||||
<div
|
||||
className="modal-backdrop"
|
||||
role="presentation"
|
||||
onClick={closeCreateFolderModal}
|
||||
>
|
||||
<div
|
||||
className="modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="create-folder-title"
|
||||
onClick={(event) => event.stopPropagation()}
|
||||
>
|
||||
<h3 id="create-folder-title">Create folder</h3>
|
||||
<form className="modal__form" onSubmit={handleCreateFolderSubmit}>
|
||||
<label htmlFor="new-folder-name">Folder name</label>
|
||||
<input
|
||||
id="new-folder-name"
|
||||
ref={createFolderInputRef}
|
||||
value={newFolderName}
|
||||
onChange={(event) => {
|
||||
setNewFolderName(event.target.value);
|
||||
if (createFolderError) {
|
||||
setCreateFolderError('');
|
||||
}
|
||||
}}
|
||||
placeholder="Enter folder name"
|
||||
disabled={creatingFolder}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{createFolderError && <p className="modal__error">{createFolderError}</p>}
|
||||
<div className="modal__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="secondary"
|
||||
onClick={closeCreateFolderModal}
|
||||
disabled={creatingFolder}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" disabled={creatingFolder}>
|
||||
{creatingFolder ? 'Creating…' : 'Create'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</AppShellContext.Provider>
|
||||
);
|
||||
|
||||
+185
-57
@@ -1,15 +1,56 @@
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--bg: #f4f5f7;
|
||||
/* Neutrals */
|
||||
--bg: #f6f7f9;
|
||||
--surface: #ffffff;
|
||||
--surface-subtle: #f8f9fb;
|
||||
--fg: #1b1f24;
|
||||
--muted: #5f6673;
|
||||
--border: #d0d5dd;
|
||||
--accent: #2b5cff;
|
||||
--accent-soft: rgba(43, 92, 255, 0.12);
|
||||
--danger: #d92c20;
|
||||
--success: #12805a;
|
||||
--surface-subtle: #fbfbfd;
|
||||
--fg: #1e2127;
|
||||
--muted: #646a75;
|
||||
--border: #dde1e6;
|
||||
--shadow-faint: rgba(0, 0, 0, 0.06);
|
||||
--shadow-soft: rgba(0, 0, 0, 0.12);
|
||||
--shadow-medium: rgba(0, 0, 0, 0.18);
|
||||
--overlay-backdrop: rgba(30, 33, 39, 0.45);
|
||||
--overlay-shadow: rgba(30, 33, 39, 0.18);
|
||||
|
||||
/* Accent (primary action, selection, focus) */
|
||||
--accent: #3f6ad8;
|
||||
--accent-hover: #365cb9;
|
||||
--on-accent: #ffffff;
|
||||
|
||||
/* Soft tints & outlines (for chips, row hovers, subtle fills) */
|
||||
--accent-soft: rgba(63, 106, 216, 0.12);
|
||||
--accent-elevated: rgba(63, 106, 216, 0.16);
|
||||
--accent-elevated-strong: rgba(63, 106, 216, 0.22);
|
||||
--accent-outline: rgba(63, 106, 216, 0.45);
|
||||
--accent-outline-strong: rgba(63, 106, 216, 0.9);
|
||||
--accent-focus: rgba(63, 106, 216, 0.85);
|
||||
|
||||
/* States specific to explorer UX */
|
||||
--row-hover-bg: rgba(63, 106, 216, 0.06);
|
||||
--row-active-bg: rgba(63, 106, 216, 0.12);
|
||||
--sidebar-hover-bg: rgba(63, 106, 216, 0.08);
|
||||
--sidebar-active-bg: rgba(63, 106, 216, 0.16);
|
||||
--selection-ring: #9bb6ff;
|
||||
|
||||
/* Semantic colors */
|
||||
--success: #2e7d6b;
|
||||
--success-subtle: rgba(46, 125, 107, 0.12);
|
||||
--warning: #b98a2e;
|
||||
--warning-subtle: rgba(185, 138, 46, 0.12);
|
||||
--danger: #cc5a52;
|
||||
--danger-border: rgba(204, 90, 82, 0.45);
|
||||
--danger-soft: rgba(204, 90, 82, 0.12);
|
||||
--danger-subtle: rgba(204, 90, 82, 0.08);
|
||||
|
||||
/* File-type accents (used for icons/labels) */
|
||||
--file-folder: #e6a23c; /* folders */
|
||||
--file-doc: #3f6ad8; /* docs */
|
||||
--file-code: #5b9b5f; /* code */
|
||||
--file-image: #9a6bd1; /* images */
|
||||
--file-audio: #db6f9a; /* audio */
|
||||
--file-archive: #9c7a59; /* zips */
|
||||
|
||||
font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
font-size: 15px;
|
||||
}
|
||||
@@ -37,7 +78,7 @@ button {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.35rem 0.85rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
color: var(--on-accent);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
@@ -49,7 +90,7 @@ button[disabled] {
|
||||
}
|
||||
|
||||
button:hover:not([disabled]) {
|
||||
background: #2047d9;
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
a.button-link {
|
||||
@@ -61,7 +102,7 @@ a.button-link {
|
||||
border: 1px solid transparent;
|
||||
padding: 0.35rem 0.85rem;
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
color: var(--on-accent);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: background 0.15s ease, border-color 0.15s ease;
|
||||
@@ -73,7 +114,7 @@ a.button-link[aria-disabled='true'] {
|
||||
}
|
||||
|
||||
a.button-link:hover:not([aria-disabled='true']) {
|
||||
background: #2047d9;
|
||||
background: var(--accent-hover);
|
||||
}
|
||||
|
||||
button.secondary {
|
||||
@@ -89,12 +130,12 @@ button.secondary:hover:not([disabled]) {
|
||||
button.danger {
|
||||
background: transparent;
|
||||
color: var(--danger);
|
||||
border-color: rgba(217, 44, 32, 0.45);
|
||||
border-color: var(--danger-border);
|
||||
}
|
||||
|
||||
button.danger:hover:not([disabled]) {
|
||||
border-color: var(--danger);
|
||||
background: rgba(217, 44, 32, 0.08);
|
||||
background: var(--danger-subtle);
|
||||
}
|
||||
|
||||
button.icon-button {
|
||||
@@ -150,6 +191,11 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
.icon--fill path {
|
||||
stroke: none;
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
@@ -327,7 +373,7 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
}
|
||||
|
||||
.tags-table tr.editing {
|
||||
background: rgba(43, 92, 255, 0.08);
|
||||
background: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
.tags-table__label {
|
||||
@@ -342,7 +388,7 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 2px;
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: inset 0 0 0 1px var(--shadow-faint);
|
||||
}
|
||||
|
||||
.tags-panel__error {
|
||||
@@ -501,22 +547,31 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
cursor: pointer;
|
||||
color: var(--fg);
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.folder-row span.name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.folder-row span.name .folder-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.folder-row:hover {
|
||||
background: var(--surface-subtle);
|
||||
background: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
.folder-row.active {
|
||||
background: rgba(43, 92, 255, 0.12);
|
||||
background: var(--sidebar-active-bg);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
@@ -563,6 +618,10 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.folder-children.folder-children--level1 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
@@ -570,6 +629,21 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
gap: 0.28rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-section:first-of-type,
|
||||
.sidebar-section--folders {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.sidebar-section--folders {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar-section__header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -587,28 +661,47 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
.sidebar-item {
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 0.3rem 0.3rem;
|
||||
padding: 0.16rem 0.26rem;
|
||||
text-align: left;
|
||||
font-size: 0.82rem;
|
||||
color: var(--fg);
|
||||
border-radius: 3px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.38rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.sidebar-link:hover {
|
||||
background: var(--surface-subtle);
|
||||
.sidebar-item:hover {
|
||||
background: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
.sidebar-link.active {
|
||||
background: rgba(43, 92, 255, 0.12);
|
||||
.sidebar-item.active {
|
||||
background: var(--sidebar-active-bg);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sidebar-item:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.sidebar-item__icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
flex-shrink: 0;
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.sidebar-item.active .sidebar-item__icon {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.folder-row.is-drop-target {
|
||||
outline: 2px dashed var(--accent);
|
||||
outline-offset: 2px;
|
||||
@@ -685,7 +778,7 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
height: 48px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
|
||||
box-shadow: 0 1px 3px var(--shadow-medium);
|
||||
}
|
||||
|
||||
.thumb-placeholder {
|
||||
@@ -739,8 +832,8 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
}
|
||||
|
||||
.documents-panel tbody tr.folder.focused {
|
||||
box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.45);
|
||||
background: rgba(43, 92, 255, 0.08);
|
||||
box-shadow: inset 2px 0 0 var(--accent-outline);
|
||||
background: var(--sidebar-hover-bg);
|
||||
}
|
||||
|
||||
.documents-panel tbody tr.document {
|
||||
@@ -748,8 +841,8 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
}
|
||||
|
||||
.documents-panel tbody tr.document.selected {
|
||||
background: rgba(43, 92, 255, 0.12);
|
||||
box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.9);
|
||||
background: var(--accent-soft);
|
||||
box-shadow: inset 2px 0 0 var(--accent-outline-strong);
|
||||
}
|
||||
|
||||
.documents-panel tbody tr.document,
|
||||
@@ -760,7 +853,7 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
}
|
||||
|
||||
.documents-panel tbody tr.document.focused:not(.selected) {
|
||||
box-shadow: inset 2px 0 0 rgba(43, 92, 255, 0.45);
|
||||
box-shadow: inset 2px 0 0 var(--accent-outline);
|
||||
}
|
||||
|
||||
.doc-name {
|
||||
@@ -980,7 +1073,7 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 120ms ease;
|
||||
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.18));
|
||||
filter: drop-shadow(0 2px 6px var(--shadow-soft));
|
||||
transform-origin: center;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
@@ -1018,10 +1111,10 @@ button.icon-button.ghost:hover:not([disabled]) {
|
||||
|
||||
.preview-stack__image:hover,
|
||||
.preview-stack__image:focus-visible {
|
||||
outline-color: rgba(24, 119, 242, 0.85);
|
||||
outline-color: var(--accent-focus);
|
||||
box-shadow:
|
||||
inset 0 0 0 999px rgba(24, 119, 242, 0.18),
|
||||
0 6px 18px rgba(24, 119, 242, 0.24);
|
||||
inset 0 0 0 999px var(--accent-elevated),
|
||||
0 6px 18px var(--accent-elevated-strong);
|
||||
filter: saturate(118%) brightness(1.05);
|
||||
}
|
||||
|
||||
@@ -1127,19 +1220,19 @@ form.inline {
|
||||
}
|
||||
|
||||
.status-banner.success {
|
||||
background: rgba(18, 128, 90, 0.1);
|
||||
background: var(--success-subtle);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-banner.error {
|
||||
background: rgba(217, 44, 32, 0.1);
|
||||
background: var(--danger-soft);
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.drop-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(43, 92, 255, 0.12);
|
||||
background: var(--accent-soft);
|
||||
backdrop-filter: blur(4px);
|
||||
display: none;
|
||||
align-items: center;
|
||||
@@ -1161,6 +1254,57 @@ form.inline {
|
||||
box-shadow: none;
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: var(--overlay-backdrop);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem;
|
||||
z-index: 3000;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 18px 42px var(--overlay-shadow);
|
||||
width: min(360px, 100%);
|
||||
padding: 1.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal__form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.9rem;
|
||||
}
|
||||
|
||||
.modal__form label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal__error {
|
||||
margin: -0.45rem 0 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--danger);
|
||||
}
|
||||
|
||||
.modal__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
.app-main {
|
||||
@@ -1187,22 +1331,6 @@ form.inline {
|
||||
min-height: auto;
|
||||
}
|
||||
}
|
||||
.sidebar .column-body {
|
||||
gap: 0.28rem;
|
||||
}
|
||||
|
||||
.new-folder-form {
|
||||
display: flex;
|
||||
gap: 0.45rem;
|
||||
}
|
||||
|
||||
.folder-tree-scroller {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.4rem;
|
||||
margin-right: -0.4rem;
|
||||
min-height: 0;
|
||||
}
|
||||
.login-screen {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user