nils/papercrate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

deskview

Browse Source
This commit is contained in:
nils
2025-10-31 14:27:30 +01:00
parent b969cae524
commit 91dd3289a9
8 changed files with 169 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/DesktopWorkspace.css
+30 -30
View File
@@ -1,12 +1,12 @@
/* Desktop workspace styles */
.skeuo-main {
.desk-main {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.skeuo-item {
.desk-item {
position: absolute;
display: block;
width: auto;
@@ -18,7 +18,7 @@
will-change: transform;
}
.skeuo-shell {
.desk-shell {
flex: 1;
display: flex;
flex-direction: column;
@@ -27,14 +27,14 @@
position: relative;
}
.skeuo-canvas {
.desk-canvas {
flex: 1;
position: relative;
overflow: hidden;
margin: 0;
}
.skeuo-empty {
.desk-empty {
height: 100%;
display: flex;
align-items: center;
@@ -47,32 +47,32 @@
.skeuo-item__body {
.desk-item__body {
flex-grow: 1;
width: 100%;
height: 100%;
}
.skeuo-item:focus-visible {
.desk-item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.skeuo-item.is-dragging {
.desk-item.is-dragging {
cursor: grabbing;
transition: none;
}
.skeuo-item.is-tag-target .skeuo-item__card {
.desk-item.is-tag-target .desk-item__card {
outline: 0.35rem dashed var(--accent);
outline-offset: 0.35rem;
}
.skeuo-item.is-tag-pending .skeuo-item__card {
.desk-item.is-tag-pending .desk-item__card {
opacity: 0.6;
}
.skeuo-item.is-filtered-out {
.desk-item.is-filtered-out {
opacity: 0.12;
pointer-events: none;
filter: blur(15px) grayscale(100%);
@@ -80,7 +80,7 @@
z-index: 0 !important;
}
.skeuo-item__tags {
.desk-item__tags {
--tag-scale: 1;
position: absolute;
top: 0;
@@ -112,14 +112,14 @@
pointer-events: none;
}
.skeuo-item__tags .tag-chip {
.desk-item__tags .tag-chip {
font-size: 0.85rem;
padding: 0.18rem 0.55rem;
gap: 0.3rem;
}
.skeuo-card__nav {
.desk-card__nav {
position: absolute;
bottom: 1.8rem;
left: 50%;
@@ -132,12 +132,12 @@
transition: opacity 0.2s ease;
}
.skeuo-item__card:hover .skeuo-card__nav {
.desk-item__card:hover .desk-card__nav {
opacity: 1;
pointer-events: auto;
}
.skeuo-card__nav-button {
.desk-card__nav-button {
display: inline-flex;
align-items: center;
justify-content: center;
@@ -152,39 +152,39 @@
transition: background 0.15s ease, opacity 0.15s ease;
}
.skeuo-card__nav-button:hover:not([disabled]) {
.desk-card__nav-button:hover:not([disabled]) {
background: var(--preview-nav-bg-hover);
}
.skeuo-card__nav-button:disabled {
.desk-card__nav-button:disabled {
opacity: 0.4;
cursor: default;
}
.skeuo-card__nav-button:focus-visible {
.desk-card__nav-button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.skeuo-card__nav-button svg {
.desk-card__nav-button svg {
width: 100%;
height: 100%;
}
.skeuo-item__tags .tag-chip--tear-pending {
.desk-item__tags .tag-chip--tear-pending {
opacity: 0.35;
}
body.skeuo-cursor-remove,
body.skeuo-cursor-remove * {
body.desk-cursor-remove,
body.desk-cursor-remove * {
cursor: not-allowed !important;
}
.skeuo-item__shadow {
.desk-item__shadow {
display: none;
}
.skeuo-item__card {
.desk-item__card {
position: relative;
border-radius: 0;
display: flex;
@@ -196,14 +196,14 @@ body.skeuo-cursor-remove * {
overflow: hidden;
}
.skeuo-item__card img {
.desk-item__card img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.skeuo-item__card--empty {
.desk-item__card--empty {
box-shadow: 0 12px 32px var(--shadow-medium);
background:
radial-gradient(circle at 42% 38%, color-mix(in oklch, var(--surface-subtle) 75%, var(--selection) 25%), color-mix(in oklch, var(--surface-subtle) 85%, var(--selection) 15%) 70%),
@@ -217,14 +217,14 @@ body.skeuo-cursor-remove * {
gap: 0.5rem;
}
.skeuo-item__placeholder {
.desk-item__placeholder {
font-size: 0.95rem;
font-weight: 500;
letter-spacing: normal;
color: var(--muted);
}
.skeuo-item__empty {
.desk-item__empty {
display: flex;
flex-direction: column;
align-items: center;
@@ -236,7 +236,7 @@ body.skeuo-cursor-remove * {
text-align: center;
}
.skeuo-item__title {
.desk-item__title {
font-size: 0.95rem;
font-weight: 500;
color: var(--fg);
frontend/src/DesktopWorkspace.jsx
+59 -63
View File
@@ -8,7 +8,8 @@ import React, {
} from 'react';
import { resolveDocumentAssetUrl, createAssetView } from './asset_manager';
import { useAssetNavigator } from './hooks/useAssetNavigator';
import { ArrowLeftIcon, ArrowRightIcon, RefreshIcon } from './ui/icons';
import { ArrowLeftIcon, ArrowRightIcon } from './ui/icons';
import { createDocumentsTableHeaderActions } from './documents/DocumentsTable';
import { clamp, formatTransform } from './desktop/math';
import { preventAll } from './desktop/events';
import useDocumentDrag from './desktop/useDocumentDrag';
@@ -122,7 +123,7 @@ const readTransferData = (dataTransfer, mimeTypes) => {
}
} catch (error) {
if (DEBUG_DROP) {
console.warn('[skeuo] readTransferData failed for type', type, error);
console.warn('[desk] readTransferData failed for type', type, error);
}
}
}
@@ -140,7 +141,7 @@ const parseTagTransferPayload = (event) => {
try {
return JSON.parse(raw);
} catch (error) {
console.warn('[skeuo] parseTagTransferPayload failed', error);
console.warn('[desk] parseTagTransferPayload failed', error);
}
return null;
};
@@ -207,8 +208,8 @@ const DesktopPreviewCard = ({
onNavigatorSnapshot,
]);
const hasPreview = Boolean(currentUrl);
const cardClasses = ['skeuo-item__card'];
if (!hasPreview) cardClasses.push('skeuo-item__card--empty');
const cardClasses = ['desk-item__card'];
if (!hasPreview) cardClasses.push('desk-item__card--empty');
const showNav = hasPreview && (cardinality > 1 || canGoPrev || canGoNext);
return (
@@ -216,18 +217,18 @@ const DesktopPreviewCard = ({
{hasPreview ? (
<img src={currentUrl} alt={title} />
) : (
<div className="skeuo-item__empty">
<div className="skeuo-item__placeholder">DOC</div>
<div className="skeuo-item__title" title={title}>
<div className="desk-item__empty">
<div className="desk-item__placeholder">DOC</div>
<div className="desk-item__title" title={title}>
{title}
</div>
</div>
)}
{showNav ? (
<div className="skeuo-card__nav">
<div className="desk-card__nav">
<button
type="button"
className="skeuo-card__nav-button"
className="desk-card__nav-button"
onClick={(event) => {
preventAll(event);
navigator.goPrev();
@@ -251,7 +252,7 @@ const DesktopPreviewCard = ({
</button>
<button
type="button"
className="skeuo-card__nav-button"
className="desk-card__nav-button"
onClick={(event) => {
preventAll(event);
navigator.goNext();
@@ -463,7 +464,7 @@ const usePreviewMetadata = (documents, getDocumentAsset, ensureAssetUrl) => {
metadata = view.getPrimaryMetadata();
}
} catch (error) {
console.warn('[skeuo] ensureDocumentSize metadata fetch failed', error);
console.warn('[desk] ensureDocumentSize metadata fetch failed', error);
}
}
@@ -750,15 +751,15 @@ const DesktopWorkspace = ({
const focusTarget = () => {
try {
if (DEBUG_FOCUS) {
console.log('[skeuo] focusCanvas -> attempting focus', canvas);
console.log('[desk] focusCanvas -> attempting focus', canvas);
}
canvas.focus({ preventScroll: true });
if (DEBUG_FOCUS) {
console.log('[skeuo] focusCanvas: applied focus. activeElement:', document?.activeElement);
console.log('[desk] focusCanvas: applied focus. activeElement:', document?.activeElement);
}
} catch (error) {
if (DEBUG_FOCUS) {
console.warn('[skeuo] focusTarget failed to focus canvas', error);
console.warn('[desk] focusTarget failed to focus canvas', error);
}
}
};
@@ -769,20 +770,20 @@ const DesktopWorkspace = ({
}
if (DEBUG_FOCUS) {
console.log('[skeuo] requestCanvasFocus -> scheduling deferred focus');
console.log('[desk] requestCanvasFocus -> scheduling deferred focus');
}
if (typeof window.requestAnimationFrame === 'function') {
window.requestAnimationFrame(() => {
if (DEBUG_FOCUS) {
console.log('[skeuo] requestCanvasFocus -> executing deferred focus (rAF)');
console.log('[desk] requestCanvasFocus -> executing deferred focus (rAF)');
}
focusTarget();
});
} else {
setTimeout(() => {
if (DEBUG_FOCUS) {
console.log('[skeuo] requestCanvasFocus -> executing deferred focus (timeout)');
console.log('[desk] requestCanvasFocus -> executing deferred focus (timeout)');
}
focusTarget();
}, 0);
@@ -802,9 +803,9 @@ const DesktopWorkspace = ({
}
removalCursorActiveRef.current = active;
if (active) {
body.classList.add('skeuo-cursor-remove');
body.classList.add('desk-cursor-remove');
} else {
body.classList.remove('skeuo-cursor-remove');
body.classList.remove('desk-cursor-remove');
}
}, []);
@@ -1080,7 +1081,7 @@ const syncLayoutSnapshot = useCallback(() => {
const nodeEnv = typeof globalThis !== 'undefined' ? globalThis.process?.env?.NODE_ENV : undefined;
if (nodeEnv !== 'production') {
console.log('[skeuo] canvas element', container);
console.log('[desk] canvas element', container);
}
const commitSize = () => {
@@ -1238,7 +1239,7 @@ const syncLayoutSnapshot = useCallback(() => {
return;
}
const container = itemRefs.current.get(docId);
const imageNode = container?.querySelector?.('.skeuo-item__card img');
const imageNode = container?.querySelector?.('.desk-item__card img');
if (!container || !imageNode) {
return;
}
@@ -1353,24 +1354,24 @@ const syncLayoutSnapshot = useCallback(() => {
async (event, doc) => {
if (!doc || !isTagTransfer(event) || typeof onAssignTagToDocument !== 'function') {
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: drop ignored', { doc, hasTransfer: isTagTransfer(event) });
console.log('[desk] handleTagDropOnDoc: drop ignored', { doc, hasTransfer: isTagTransfer(event) });
}
return;
}
preventAll(event);
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: drop accepted for doc', doc.id, 'event', event);
console.log('[desk] handleTagDropOnDoc: drop accepted for doc', doc.id, 'event', event);
}
setTagDropTargetId(null);
const payload = parseTagTransferPayload(event);
if (!payload && DEBUG_DROP) {
console.warn('[skeuo] handleTagDropOnDoc: failed to parse payload');
console.warn('[desk] handleTagDropOnDoc: failed to parse payload');
}
if (!payload?.id) {
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: missing tag id payload', payload);
console.log('[desk] handleTagDropOnDoc: missing tag id payload', payload);
}
requestCanvasFocus();
return;
@@ -1379,13 +1380,13 @@ const syncLayoutSnapshot = useCallback(() => {
const tagId = payload.id;
const sourceDocId = payload.sourceDocId || null;
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: parsed payload', { tagId, sourceDocId });
console.log('[desk] handleTagDropOnDoc: parsed payload', { tagId, sourceDocId });
}
if (sourceDocId && sourceDocId === doc.id) {
markActiveTagDropHandled(tagId, sourceDocId);
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: drop from same doc ignored', tagId);
console.log('[desk] handleTagDropOnDoc: drop from same doc ignored', tagId);
}
requestCanvasFocus();
return;
@@ -1397,7 +1398,7 @@ const syncLayoutSnapshot = useCallback(() => {
if (alreadyAssigned) {
markActiveTagDropHandled(tagId, sourceDocId);
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: tag already assigned', tagId);
console.log('[desk] handleTagDropOnDoc: tag already assigned', tagId);
}
requestCanvasFocus();
return;
@@ -1405,7 +1406,7 @@ const syncLayoutSnapshot = useCallback(() => {
const movingBetweenDocuments = Boolean(sourceDocId && sourceDocId !== doc.id);
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: movingBetweenDocuments', movingBetweenDocuments);
console.log('[desk] handleTagDropOnDoc: movingBetweenDocuments', movingBetweenDocuments);
}
setPendingTagDocId(doc.id);
@@ -1413,14 +1414,14 @@ const syncLayoutSnapshot = useCallback(() => {
await onAssignTagToDocument({ documentId: doc.id, tagId, tag: payload });
markActiveTagDropHandled(tagId, sourceDocId);
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: assigned tag', tagId, 'to doc', doc.id);
console.log('[desk] handleTagDropOnDoc: assigned tag', tagId, 'to doc', doc.id);
}
if (movingBetweenDocuments && typeof onRemoveTagFromDocument === 'function') {
setPendingRemovalTag({ docId: sourceDocId, tagId });
try {
await onRemoveTagFromDocument(sourceDocId, tagId);
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: removed tag from source doc', sourceDocId);
console.log('[desk] handleTagDropOnDoc: removed tag from source doc', sourceDocId);
}
} finally {
setPendingRemovalTag(null);
@@ -1429,7 +1430,7 @@ const syncLayoutSnapshot = useCallback(() => {
} finally {
setPendingTagDocId(null);
if (DEBUG_DROP) {
console.log('[skeuo] handleTagDropOnDoc: finalizing drop for tag', tagId);
console.log('[desk] handleTagDropOnDoc: finalizing drop for tag', tagId);
}
requestCanvasFocus();
}
@@ -1551,7 +1552,7 @@ const syncLayoutSnapshot = useCallback(() => {
event.dataTransfer.effectAllowed = 'copyMove';
}
} catch (error) {
console.warn('[skeuo] Failed to set drag effect', error);
console.warn('[desk] Failed to set drag effect', error);
}
const payload = JSON.stringify({ id: tag.id, label: tag.label, sourceDocId: doc.id });
@@ -1560,7 +1561,7 @@ const syncLayoutSnapshot = useCallback(() => {
event.dataTransfer?.setData('text/papercrate-tag', payload);
event.dataTransfer?.setData('text/plain', tag.label || 'Tag');
} catch (error) {
console.warn('[skeuo] Failed to populate drag data for tag', error);
console.warn('[desk] Failed to populate drag data for tag', error);
}
const pending = pendingDocTagDragRef.current;
@@ -1591,7 +1592,7 @@ const syncLayoutSnapshot = useCallback(() => {
try {
event.dataTransfer.setDragImage(preview.clone, preview.offsetX, preview.offsetY);
} catch (error) {
console.warn('[skeuo] Failed to set drag image', error);
console.warn('[desk] Failed to set drag image', error);
}
}
}
@@ -1678,7 +1679,7 @@ const syncLayoutSnapshot = useCallback(() => {
};
const dropEffect = event?.dataTransfer?.dropEffect || 'none';
console.log('[skeuo] dragEnd dropEffect', dropEffect, 'dropHandled', state.dropHandled);
console.log('[desk] dragEnd dropEffect', dropEffect, 'dropHandled', state.dropHandled);
const shouldRemove =
!state.dropHandled &&
dropEffect === 'none' &&
@@ -1687,7 +1688,7 @@ const syncLayoutSnapshot = useCallback(() => {
(state.distance || 0) >= TAG_REMOVE_DISTANCE;
if (!shouldRemove) {
console.log('[skeuo] dragEnd -> no removal. distance:', state.distance);
console.log('[desk] dragEnd -> no removal. distance:', state.distance);
scheduleShowNode();
requestCanvasFocus();
updateRemovalCursor(false);
@@ -1700,7 +1701,7 @@ const syncLayoutSnapshot = useCallback(() => {
void (async () => {
try {
await onRemoveTagFromDocument(state.sourceDocId, state.tagId);
console.log('[skeuo] dragEnd -> removed tag due to fling');
console.log('[desk] dragEnd -> removed tag due to fling');
} catch (error) {
console.error('Failed to remove tag after drag', error);
scheduleShowNode();
@@ -1854,20 +1855,20 @@ const DesktopWorkspaceView = () => {
return (
<>
<div className="skeuo-shell">
<div className="desk-shell">
<div
className="skeuo-canvas"
className="desk-canvas"
ref={containerRef}
onDragOver={handleCanvasDragOver}
onDragLeave={handleCanvasDragLeave}
onDrop={handleCanvasDrop}
>
{!allSizesReady ? (
<div className="skeuo-empty">
<div className="desk-empty">
<p>Loading previews…</p>
</div>
) : items.length === 0 ? (
<div className="skeuo-empty">
<div className="desk-empty">
<p>No documents to show here yet. Drop files to make this space come alive.</p>
</div>
) : (
@@ -1914,7 +1915,7 @@ const DesktopWorkspaceView = () => {
activeTagSet.size === 0 || docTagKeys.some((key) => activeTagSet.has(key));
const dropActive = tagDropTargetId === doc.id;
const dropPending = pendingTagDocId === doc.id;
const itemClasses = ['skeuo-item'];
const itemClasses = ['desk-item'];
if (dragging) itemClasses.push('is-dragging');
if (dropActive) itemClasses.push('is-tag-target');
if (dropPending) itemClasses.push('is-tag-pending');
@@ -1951,7 +1952,7 @@ const DesktopWorkspaceView = () => {
}
}}
>
<div className="skeuo-item__body">
<div className="desk-item__body">
<DesktopPreviewCard
doc={doc}
title={title}
@@ -1961,7 +1962,7 @@ const DesktopWorkspaceView = () => {
shouldLoad={shouldLoad}
/>
{tags.length > 0 && (
<div className="skeuo-item__tags" aria-hidden="true">
<div className="desk-item__tags" aria-hidden="true">
{tags.map((tag) => {
const key = tag.id || tag.label || String(tag);
if (
@@ -2021,7 +2022,13 @@ export const createDesktopSurface = ({ workspaceProps, renderSidebarToggle }) =>
return null;
}
const { currentFolderName, searchResults, onRefresh, onExit } = workspaceProps;
const {
currentFolderName,
searchResults,
onRefresh,
viewMode,
onViewModeChange,
} = workspaceProps;
const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
const subtitle = Array.isArray(searchResults)
? `${searchResults.length} matching document${searchResults.length === 1 ? '' : 's'}`
@@ -2030,22 +2037,11 @@ export const createDesktopSurface = ({ workspaceProps, renderSidebarToggle }) =>
const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
const leading = sidebarToggle ? <>{sidebarToggle}</> : null;
const actions = (
<>
<button
type="button"
className="icon-button"
onClick={onRefresh}
aria-label="Refresh"
title="Refresh"
>
<RefreshIcon />
</button>
<button type="button" className="secondary" onClick={onExit}>
Back to List
</button>
</>
);
const actions = createDocumentsTableHeaderActions({
viewMode: viewMode || 'desk',
onViewModeChange,
onRefresh,
});
return {
key: 'workspace',
frontend/src/app/AppLayout.jsx
+31 -22
View File
@@ -190,14 +190,14 @@ const AppLayout = () => {
const [currentFolder, setCurrentFolder] = useState(null);
const [currentSubfolders, setCurrentSubfolders] = useState([]);
const [documents, setDocuments] = useState([]);
const [workspaceMode, setWorkspaceMode] = useState('table');
const [documentsViewMode, setDocumentsViewMode] = useState(() => {
if (typeof window === 'undefined') {
return 'list';
}
const stored = window.localStorage.getItem('papercrate_view_mode');
return stored === 'grid' ? 'grid' : 'list';
return stored === 'grid' || stored === 'desk' ? stored : 'list';
});
const lastNonDeskViewRef = useRef(documentsViewMode === 'desk' ? 'list' : documentsViewMode);
const loadThemeSettings = () => {
const defaults = { neutralHue: 260, mode: 'system' };
@@ -258,6 +258,12 @@ const AppLayout = () => {
const initialThemeSettings = loadThemeSettings();
const [neutralHue, setNeutralHue] = useState(initialThemeSettings.neutralHue);
const [themeMode, setThemeMode] = useState(initialThemeSettings.mode);
useEffect(() => {
if (documentsViewMode !== 'desk') {
lastNonDeskViewRef.current = documentsViewMode;
}
}, [documentsViewMode]);
const initialRowSelection = [];
const [selectedRowKeys, setSelectedRowKeys] = useState(initialRowSelection);
const [selectionOrder, setSelectionOrder] = useState(initialRowSelection);
@@ -281,9 +287,9 @@ const AppLayout = () => {
}
tagRemovalCursorActiveRef.current = active;
if (active) {
body.classList.add('skeuo-cursor-remove');
body.classList.add('desk-cursor-remove');
} else {
body.classList.remove('skeuo-cursor-remove');
body.classList.remove('desk-cursor-remove');
}
}, []);
const refreshAccessToken = useCallback(async () => {
@@ -4641,11 +4647,9 @@ const AppLayout = () => {
[ensureAssetUrl, getDocumentAsset],
);
const showSkeuoWorkspace = useCallback(() => setWorkspaceMode('skeuo'), [setWorkspaceMode]);
const exitSkeuoWorkspace = useCallback(() => setWorkspaceMode('table'), [setWorkspaceMode]);
const handleDocumentsViewModeChange = useCallback((mode) => {
const next = mode === 'grid' ? 'grid' : mode === 'desk' ? 'desk' : 'list';
setDocumentsViewMode((previous) => {
const next = mode === 'grid' ? 'grid' : 'list';
if (next !== previous && typeof window !== 'undefined') {
window.localStorage.setItem('papercrate_view_mode', next);
}
@@ -4653,6 +4657,13 @@ const AppLayout = () => {
});
}, []);
const handleDeskExit = useCallback(() => {
const fallback = lastNonDeskViewRef.current && lastNonDeskViewRef.current !== 'desk'
? lastNonDeskViewRef.current
: 'list';
handleDocumentsViewModeChange(fallback);
}, [handleDocumentsViewModeChange]);
const handleTenantSelect = useCallback(
async (tenantOption, { refreshOnly = false } = {}) => {
const requestedTenantId = tenantOption?.id ?? null;
@@ -4697,7 +4708,7 @@ const AppLayout = () => {
appDispatch({ type: 'SET_TENANTS', tenants: data.tenants });
}
setWorkspaceMode('table');
handleDocumentsViewModeChange('list');
navigate('/documents', { replace: true });
await Promise.all([refreshTags(), refreshCorrespondents()]);
@@ -4717,7 +4728,7 @@ const AppLayout = () => {
notifyApiError,
setStatusMessage,
resetWorkspaceState,
setWorkspaceMode,
handleDocumentsViewModeChange,
navigate,
refreshTags,
refreshCorrespondents,
@@ -4730,7 +4741,6 @@ const AppLayout = () => {
currentFolderName,
breadcrumbs,
onRefresh: refreshCurrentFolder,
onShowSkeuoWorkspace: showSkeuoWorkspace,
subfolders: currentSubfolders,
documents,
searchResults,
@@ -4811,7 +4821,6 @@ const AppLayout = () => {
selectedDocumentIds,
selectedFolderIds,
setFocusedRowKey,
showSkeuoWorkspace,
tagLookupById,
toggleCorrespondentFilter,
toggleTagFilter,
@@ -4970,13 +4979,15 @@ const AppLayout = () => {
],
);
const skeuoWorkspaceProps = useMemo(
const deskWorkspaceProps = useMemo(
() => ({
documents,
searchResults,
breadcrumbs,
currentFolderName,
onExit: exitSkeuoWorkspace,
viewMode: documentsViewMode,
onViewModeChange: handleDocumentsViewModeChange,
onExit: handleDeskExit,
onRefresh: refreshCurrentFolder,
onDocumentOpen: openDocumentPreview,
resolveThumbnailUrl: resolveThumbnailUrlForDoc,
@@ -4991,7 +5002,9 @@ const AppLayout = () => {
searchResults,
breadcrumbs,
currentFolderName,
exitSkeuoWorkspace,
documentsViewMode,
handleDocumentsViewModeChange,
handleDeskExit,
refreshCurrentFolder,
openDocumentPreview,
resolveThumbnailUrlForDoc,
@@ -5049,10 +5062,8 @@ const AppLayout = () => {
handleThumbnailRegeneration,
documentsTableProps,
detailPanelProps,
workspaceMode,
showSkeuoWorkspace,
exitSkeuoWorkspace,
skeuoWorkspaceProps,
documentsViewMode,
deskWorkspaceProps,
ensurePreviewData,
ensureAssetUrl,
resolveApiPath,
@@ -5109,10 +5120,8 @@ const AppLayout = () => {
handleThumbnailRegeneration,
documentsTableProps,
detailPanelProps,
workspaceMode,
showSkeuoWorkspace,
exitSkeuoWorkspace,
skeuoWorkspaceProps,
documentsViewMode,
deskWorkspaceProps,
ensurePreviewData,
ensureAssetUrl,
getDocumentAsset,
frontend/src/app/DocumentsRoute.jsx
+4 -4
View File
@@ -11,8 +11,8 @@ const DocumentsRoute = () => {
documentsTableProps,
detailPanelProps,
detailPanelOpen,
workspaceMode,
skeuoWorkspaceProps,
documentsViewMode,
deskWorkspaceProps,
openTagsModal,
openCorrespondentsModal,
previewWorkspaceDocument,
@@ -65,8 +65,8 @@ const DocumentsRoute = () => {
documentsTableProps,
detailPanelProps,
detailPanelOpen,
workspaceMode,
skeuoWorkspaceProps,
viewMode: documentsViewMode,
deskWorkspaceProps,
previewWorkspaceDocument,
previewWorkspaceEntry,
ensureAssetUrl,
frontend/src/app/useWorkspaceSurface.js
+8 -8
View File
@@ -10,8 +10,8 @@ export const useWorkspaceSurface = ({
documentsTableProps,
detailPanelProps,
detailPanelOpen,
workspaceMode,
skeuoWorkspaceProps,
viewMode,
deskWorkspaceProps,
previewWorkspaceDocument,
previewWorkspaceEntry,
ensureAssetUrl,
@@ -62,7 +62,7 @@ export const useWorkspaceSurface = ({
detailPanelOpen,
]);
const showPreviewWorkspace = workspaceMode !== 'skeuo' && Boolean(previewWorkspaceDocument);
const showPreviewWorkspace = viewMode !== 'desk' && Boolean(previewWorkspaceDocument);
const previewSurface = useMemo(() => {
if (!showPreviewWorkspace || !previewWorkspaceDocument) {
@@ -95,24 +95,24 @@ export const useWorkspaceSurface = ({
]);
const workspaceSurface = useMemo(() => {
if (workspaceMode !== 'skeuo') {
if (viewMode !== 'desk') {
return null;
}
return createDesktopSurface({
workspaceProps: skeuoWorkspaceProps,
workspaceProps: deskWorkspaceProps,
renderSidebarToggle,
});
}, [workspaceMode, skeuoWorkspaceProps, renderSidebarToggle]);
}, [viewMode, deskWorkspaceProps, renderSidebarToggle]);
const surface = useMemo(() => {
if (showPreviewWorkspace) {
return previewSurface;
}
if (workspaceMode === 'skeuo') {
if (viewMode === 'desk') {
return workspaceSurface;
}
return documentsSurface;
}, [showPreviewWorkspace, workspaceMode, previewSurface, workspaceSurface, documentsSurface]);
}, [showPreviewWorkspace, viewMode, previewSurface, workspaceSurface, documentsSurface]);
return { surface };
};
frontend/src/desktop/useDocumentDrag.js
+7 -7
View File
@@ -37,7 +37,7 @@ const useDocumentDrag = () => {
capturedTarget.releasePointerCapture(pointerId);
} catch (error) {
if (debugDrag) {
console.warn('[skeuo] releasePointerCapture failed', error);
console.warn('[desk] releasePointerCapture failed', error);
}
}
}
@@ -52,7 +52,7 @@ const useDocumentDrag = () => {
(event, docId) => {
if (debugDrag) {
console.log(
'[skeuo] handlePointerDown fired for doc',
'[desk] handlePointerDown fired for doc',
docId,
'button',
event.button,
@@ -86,7 +86,7 @@ const useDocumentDrag = () => {
capturedTarget.setPointerCapture(event.pointerId);
} catch (error) {
if (debugDrag) {
console.warn('[skeuo] setPointerCapture failed', error);
console.warn('[desk] setPointerCapture failed', error);
}
}
}
@@ -125,14 +125,14 @@ const useDocumentDrag = () => {
const state = dragStateRef.current;
if (!state) {
if (debugDrag) {
console.log('[skeuo] handlePointerMove: no drag state for pointer', event.pointerId);
console.log('[desk] handlePointerMove: no drag state for pointer', event.pointerId);
}
return;
}
if (state.pointerId !== event.pointerId) {
if (debugDrag) {
console.log(
'[skeuo] handlePointerMove: pointer mismatch expected',
'[desk] handlePointerMove: pointer mismatch expected',
state.pointerId,
'got',
event.pointerId,
@@ -143,7 +143,7 @@ const useDocumentDrag = () => {
preventAll(event);
if (state.locked) {
if (debugDrag) {
console.log('[skeuo] handlePointerMove: locked drag for doc', state.docId);
console.log('[desk] handlePointerMove: locked drag for doc', state.docId);
}
return;
}
@@ -193,7 +193,7 @@ const useDocumentDrag = () => {
);
}
if (debugDrag) {
console.log('[skeuo] handlePointerMove: moved doc', state.docId, 'to', clampedCenterX, clampedCenterY);
console.log('[desk] handlePointerMove: moved doc', state.docId, 'to', clampedCenterX, clampedCenterY);
}
recalcVisibleDocIds();
},
frontend/src/documents/DocumentsTable.jsx
+28 -15
View File
@@ -7,6 +7,7 @@ import {
EditIcon,
ViewListIcon,
ViewGridIcon,
DesktopIcon,
FolderIcon,
TrashIcon,
RefreshIcon,
@@ -197,7 +198,6 @@ const DocumentThumbnailImage = ({
const DocumentsTable = ({
currentFolderName,
onRefresh,
onShowSkeuoWorkspace = () => {},
subfolders,
documents,
searchResults,
@@ -272,6 +272,8 @@ const DocumentsTable = ({
}
}, []);
const isGridView = viewMode === 'grid';
const isDeskView = viewMode === 'desk';
const isListView = viewMode === 'list';
const gridIconSize = DEFAULT_GRID_ICON_SIZE;
const handleSetViewMode = useCallback(
(nextMode) => {
@@ -492,9 +494,9 @@ const DocumentsTable = ({
<div className="view-toggle" role="group" aria-label="Change view">
<button
type="button"
className={`view-toggle__button${isGridView ? '' : ' active'}`}
className={`view-toggle__button${isListView ? ' active' : ''}`}
onClick={() => handleSetViewMode('list')}
aria-pressed={!isGridView}
aria-pressed={isListView}
title="List view"
>
<ViewListIcon className="view-toggle__icon" size={18} />
@@ -508,13 +510,19 @@ const DocumentsTable = ({
>
<ViewGridIcon className="view-toggle__icon" size={18} />
</button>
<button
type="button"
className={`view-toggle__button${isDeskView ? ' active' : ''}`}
onClick={() => handleSetViewMode('desk')}
aria-pressed={isDeskView}
title="Desk view"
>
<DesktopIcon className="view-toggle__icon" size={18} />
</button>
</div>
<button className="secondary" onClick={onRefresh}>
Refresh
</button>
<button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
Desk View
</button>
</div>
</div>
) : null}
@@ -1050,18 +1058,19 @@ export const createDocumentsTableHeaderActions = ({
viewMode,
onViewModeChange,
onRefresh,
onShowSkeuoWorkspace,
}) => {
const isListView = viewMode === 'list';
const isGridView = viewMode === 'grid';
const isDeskView = viewMode === 'desk';
return (
<>
<div className="view-toggle" role="group" aria-label="Change view">
<button
type="button"
className={`view-toggle__button${isGridView ? '' : ' active'}`}
className={`view-toggle__button${isListView ? ' active' : ''}`}
onClick={() => onViewModeChange?.('list')}
aria-pressed={!isGridView}
aria-pressed={isListView}
title="List view"
>
<ViewListIcon className="view-toggle__icon" size={18} />
@@ -1075,6 +1084,15 @@ export const createDocumentsTableHeaderActions = ({
>
<ViewGridIcon className="view-toggle__icon" size={18} />
</button>
<button
type="button"
className={`view-toggle__button${isDeskView ? ' active' : ''}`}
onClick={() => onViewModeChange?.('desk')}
aria-pressed={isDeskView}
title="Desk view"
>
<DesktopIcon className="view-toggle__icon" size={18} />
</button>
</div>
<span className="main-content__actions-divider" aria-hidden="true">
<MinusVerticalIcon />
@@ -1088,12 +1106,9 @@ export const createDocumentsTableHeaderActions = ({
>
<RefreshIcon />
</button>
<button className="secondary" type="button" onClick={onShowSkeuoWorkspace}>
Desk View
</button>
</>
);
};
};
export const createDocumentsSurface = ({
tableProps,
@@ -1109,7 +1124,6 @@ export const createDocumentsSurface = ({
viewMode,
onViewModeChange,
onRefresh,
onShowSkeuoWorkspace,
} = tableProps;
const title = Array.isArray(searchResults) ? 'Search results' : currentFolderName;
@@ -1121,7 +1135,6 @@ export const createDocumentsSurface = ({
viewMode,
onViewModeChange,
onRefresh,
onShowSkeuoWorkspace,
});
const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
frontend/src/styles.css
+2 -2
View File
@@ -2571,11 +2571,11 @@ button.danger:hover:not([disabled]) {
}
.preview-pane--stack:hover .preview-pane__nav--overlay,
.skeuo-item__card:hover .preview-pane__nav--overlay {
.desk-item__card:hover .preview-pane__nav--overlay {
opacity: 1;
}
.skeuo-card__nav {
.desk-card__nav {
bottom: 0.5rem;
}