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

remove desktop help modal

Browse Source
This commit is contained in:
nils
2025-11-10 13:46:21 +01:00
parent d43885aa48
commit 7376a5dd4d
9 changed files with 1 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/AppLayout.jsx
-2
View File
@@ -31,8 +31,6 @@ const AppLayout = () => {
onToggleSearchIncludeDescendants: documentsPreferences.toggleSearchIncludeDescendants,
onSetSearchIncludeDescendants: documentsPreferences.setSearchIncludeDescendants,
sortRefreshReadyRef: documentsPreferences.sortRefreshReadyRef,
deskHelpOpen: documentsPreferences.deskHelpOpen,
setDeskHelpOpen: documentsPreferences.setDeskHelpOpen,
handleDeskExit: documentsPreferences.handleDeskExit,
});
frontend/src/app/useDocumentsPreferences.js
-11
View File
@@ -42,17 +42,8 @@ export const useDocumentsPreferences = () => {
return 'list';
});
const [deskHelpOpen, setDeskHelpOpen] = useState(false);
const lastNonDeskViewRef = useRef(documentsViewMode === 'desk' ? 'list' : documentsViewMode);
useEffect(() => {
if (documentsViewMode !== 'desk') {
lastNonDeskViewRef.current = documentsViewMode;
} else if (deskHelpOpen) {
setDeskHelpOpen(false);
}
}, [documentsViewMode, deskHelpOpen]);
const setDocumentsViewMode = useCallback((mode) => {
const next = mode === 'grid' ? 'grid' : mode === 'desk' ? 'desk' : 'list';
setDocumentsViewModeState((previous) => {
@@ -122,8 +113,6 @@ export const useDocumentsPreferences = () => {
documentsViewMode,
handleDocumentsViewModeChange: setDocumentsViewMode,
handleDeskExit,
deskHelpOpen,
setDeskHelpOpen,
documentsSortField,
documentsSortDirection,
documentsSortFieldRef,
frontend/src/desktop/DesktopWorkspace.jsx
+1 -115
View File
@@ -7,9 +7,7 @@ import React, {
useState,
useSyncExternalStore,
} from 'react';
import { createPortal } from 'react-dom';
import { resolveDocumentAssetUrl } from '../asset_manager';
import { CloseIcon } from '../ui/icons';
import { formatTransform } from './math';
import useDocumentDrag from './useDocumentDrag';
import PreviewZoomOverlay from '../detail/PreviewZoomOverlay';
@@ -29,7 +27,6 @@ import usePreviewMetadata from './hooks/usePreviewMetadata';
import '../styles/workspace/workspace-layout.css';
import '../styles/workspace/workspace-items.css';
import '../styles/workspace/workspace-cards.css';
import '../styles/workspace/workspace-overlays.css';
const DEBUG_DRAG = false;
const DEBUG_FOCUS = false;
@@ -50,8 +47,6 @@ const DesktopWorkspace = ({
onClearSelection = null,
detailPanelOpen = false,
onCloseDetailPanel = null,
helpOpen = false,
onHelpClose = null,
tenantId = null,
viewId = 'default',
}) => {
@@ -641,12 +636,7 @@ const DesktopWorkspace = ({
visibleDocIds,
],
);
return (
<>
<DesktopWorkspaceView {...viewProps} />
<DesktopHelpOverlay open={helpOpen} onClose={onHelpClose} />
</>
);
return <DesktopWorkspaceView {...viewProps} />;
};
const DesktopWorkspaceView = ({
@@ -897,107 +887,3 @@ const DesktopWorkspaceView = ({
};
export default DesktopWorkspace;
const DesktopHelpOverlay = ({ open = false, onClose = null }) => {
const portalTarget = typeof document !== 'undefined' ? document.body : null;
const closeButtonRef = useRef(null);
const previousFocusRef = useRef(null);
const handleClose = useCallback(() => {
if (typeof onClose === 'function') {
onClose();
}
}, [onClose]);
useEffect(() => {
if (!open || typeof window === 'undefined') {
return undefined;
}
const handleKeyDown = (event) => {
if (!event) {
return;
}
if (event.key === 'Escape') {
event.preventDefault();
handleClose();
}
};
window.addEventListener('keydown', handleKeyDown, true);
return () => window.removeEventListener('keydown', handleKeyDown, true);
}, [open, handleClose]);
useEffect(() => {
if (!open) {
const previous = previousFocusRef.current;
if (previous && typeof previous.focus === 'function') {
previous.focus();
}
previousFocusRef.current = null;
return;
}
if (typeof document !== 'undefined') {
previousFocusRef.current = document.activeElement instanceof HTMLElement
? document.activeElement
: null;
}
if (closeButtonRef.current && typeof closeButtonRef.current.focus === 'function') {
closeButtonRef.current.focus();
}
}, [open]);
if (!open || !portalTarget) {
return null;
}
return createPortal(
<div className="desk-help-overlay" role="dialog" aria-modal="true" aria-labelledby="desk-help-title">
<div className="desk-help-overlay__backdrop" onClick={handleClose} />
<div className="desk-help-overlay__content">
<div className="desk-help-overlay__header">
<h2 id="desk-help-title">Desk view tips</h2>
<button
type="button"
className="icon-button"
onClick={handleClose}
aria-label="Close desk view tips"
ref={closeButtonRef}
>
<CloseIcon />
</button>
</div>
<div className="desk-help-overlay__body">
<p>Use the desk as a freeform workspace for triage and quick comparisons.</p>
<ul className="desk-help-overlay__list">
<li><strong>Single-click</strong> a document to open it in the detail panel.</li>
<li><strong>Double-click</strong> to open the zoomed preview.</li>
<li>
<strong>Drag</strong> selected cards to reposition them; build a selection with
{' '}
<kbd>Cmd</kbd>/<kbd>Ctrl</kbd>
{' '}+ click or Shift-click.
</li>
<li>
<strong>Cmd/Ctrl + click</strong> with an empty selection scoops up the stack under
{' '}the pointer.
</li>
<li><strong>Space</strong> clears the current selection.</li>
<li>
<strong>Drag tags</strong> from the sidebar onto a card to assign them, or fling a
{' '}tag away to remove it.
</li>
</ul>
</div>
<div className="desk-help-overlay__footer">
<button type="button" className="button primary" onClick={handleClose}>
Got it
</button>
</div>
</div>
</div>,
portalTarget,
);
};
frontend/src/desktop/createDesktopSurface.js
-1
View File
@@ -54,7 +54,6 @@ const createDesktopSurface = ({
viewMode: viewMode || 'desk',
onViewModeChange,
onRefresh,
onShowDeskHelp: viewMode === 'desk' ? workspaceProps?.onOpenHelp : null,
includeDescendants: searchIncludeDescendants,
onToggleIncludeDescendants: onToggleSearchIncludeDescendants,
});
frontend/src/desktop/useDeskWorkspaceProps.js
-16
View File
@@ -46,8 +46,6 @@ const useDeskWorkspaceProps = ({
searchQuery,
activeCorrespondentFilters,
selectedFolder,
setDeskHelpOpen,
deskHelpOpen,
openDetailPanel,
}) => {
const handleDeskDocumentStackSelect = useCallback(
@@ -107,14 +105,6 @@ const useDeskWorkspaceProps = ({
[openDetailPanel, selectedDocumentIds],
);
const handleDeskHelpOpen = useCallback(() => {
setDeskHelpOpen(true);
}, [setDeskHelpOpen]);
const handleDeskHelpClose = useCallback(() => {
setDeskHelpOpen(false);
}, [setDeskHelpOpen]);
const deskViewId = useMemo(() => {
if (showingSearchResults) {
const trimmedQuery = searchQuery.trim();
@@ -148,9 +138,6 @@ const useDeskWorkspaceProps = ({
onEntryPointer: handleEntryPointerCore,
onDocumentStackSelect: handleDeskDocumentStackSelect,
onPromoteSelection: promoteSelectionOrder,
onOpenHelp: handleDeskHelpOpen,
helpOpen: deskHelpOpen,
onHelpClose: handleDeskHelpClose,
tenantId: currentTenantId,
viewId: deskViewId,
selectedDocumentIds,
@@ -193,9 +180,6 @@ const useDeskWorkspaceProps = ({
handleEntryPointerCore,
handleDeskDocumentStackSelect,
promoteSelectionOrder,
handleDeskHelpOpen,
deskHelpOpen,
handleDeskHelpClose,
currentTenantId,
deskViewId,
selectedDocumentIds,
frontend/src/documents/panel/DocumentsToolbar.jsx
-18
View File
@@ -5,7 +5,6 @@ import {
IconFileStack,
RefreshIcon,
MinusVerticalIcon,
InfoIcon,
FoldersIcon,
FoldersOffIcon,
SortAscendingLettersIcon,
@@ -17,7 +16,6 @@ export const createDocumentsTableHeaderActions = ({
viewMode,
onViewModeChange,
onRefresh,
onShowDeskHelp = null,
sortField = 'title',
onSortFieldChange = null,
sortDirection = 'asc',
@@ -78,22 +76,6 @@ export const createDocumentsTableHeaderActions = ({
return (
<>
{isDeskView && typeof onShowDeskHelp === 'function' ? (
<>
<button
type="button"
className="icon-button"
onClick={onShowDeskHelp}
aria-label="Show desk view tips"
title="Show desk view tips"
>
<InfoIcon />
</button>
<span className="main-content__actions-divider" aria-hidden="true">
<MinusVerticalIcon />
</span>
</>
) : null}
{includeDescendantsToggle ? (
<>
{includeDescendantsToggle}
frontend/src/hooks/documents/useDocumentsWorkspace.js
-5
View File
@@ -65,8 +65,6 @@ const useDocumentsWorkspace = ({
onToggleSearchIncludeDescendants,
onSetSearchIncludeDescendants,
sortRefreshReadyRef,
deskHelpOpen = false,
setDeskHelpOpen,
handleDeskExit,
} = {}) => {
const handleDocumentsViewModeChange = onDocumentsViewModeChange || noop;
@@ -74,7 +72,6 @@ const useDocumentsWorkspace = ({
const handleDocumentsSortDirectionToggle = onDocumentsSortDirectionToggle || noop;
const toggleSearchIncludeDescendants = onToggleSearchIncludeDescendants || noop;
const setSearchIncludeDescendants = onSetSearchIncludeDescendants || noop;
const setDeskHelpOpenSafe = setDeskHelpOpen || noop;
const handleDeskExitSafe = handleDeskExit || noop;
const fallbackSortFieldRef = useRef(documentsSortField);
@@ -1446,8 +1443,6 @@ const useDocumentsWorkspace = ({
searchQuery,
activeCorrespondentFilters,
selectedFolder,
setDeskHelpOpen: setDeskHelpOpenSafe,
deskHelpOpen,
openDetailPanel,
});
frontend/src/settings/sections/ApiTokensSection.jsx
-3
View File
@@ -365,9 +365,6 @@ const ApiTokensSection = ({
const selectedSet = token?.capability_set_id
? capabilitySetMap[token.capability_set_id]
: null;
const capabilityList = Array.isArray(token?.capabilities) && token.capabilities.length
? token.capabilities
: selectedSet?.capabilities || [];
const capabilitySetLabel = selectedSet?.label
|| selectedSet?.slug
|| token.capability_set_id
frontend/src/styles/workspace/workspace-overlays.css
-94
View File
@@ -1,94 +0,0 @@
/* Workspace overlays (help, guidance, etc.) */
.desk-help-overlay {
position: fixed;
inset: 0;
z-index: 2000000;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1.5rem, 4vw, 3rem);
pointer-events: none;
}
.desk-help-overlay__backdrop {
position: absolute;
inset: 0;
background: var(--surface-overlay);
backdrop-filter: blur(8px);
pointer-events: auto;
}
.desk-help-overlay__content {
position: relative;
width: min(640px, 92vw);
max-height: min(80vh, 640px);
background: var(--surface);
border: 1px solid var(--border);
box-shadow: 0 24px 64px var(--shadow-strong);
border-radius: 1.25rem;
display: flex;
flex-direction: column;
pointer-events: auto;
overflow: hidden;
}
.desk-help-overlay__header,
.desk-help-overlay__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
}
.desk-help-overlay__header {
border-bottom: 1px solid var(--border);
}
.desk-help-overlay__header h2 {
margin: 0;
font-size: 1.15rem;
font-weight: 600;
}
.desk-help-overlay__body {
padding: 1rem 1.25rem 1.5rem;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.75rem;
line-height: 1.55;
}
.desk-help-overlay__body p {
margin: 0;
color: var(--muted);
}
.desk-help-overlay__list {
margin: 0;
padding-left: 1.1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.desk-help-overlay__list li {
color: var(--fg);
}
.desk-help-overlay__body kbd {
display: inline-block;
padding: 0.15rem 0.4rem;
border-radius: 0.4rem;
border: 1px solid var(--border-strong);
background: var(--surface-subtle);
font-size: 0.85em;
line-height: 1;
font-family: inherit;
}
.desk-help-overlay__footer {
border-top: 1px solid var(--border);
justify-content: flex-end;
gap: 0.5rem;
}