feat(app): route selected documents into workspace views

This commit is contained in:
2026-05-05 19:48:18 +00:00
parent 4cb9d4a394
commit 9fefd6856e
3 changed files with 31 additions and 16 deletions
+25 -10
View File
@@ -24,12 +24,18 @@ const appDocuments: TDocumentRow[] = [
const isWorkspaceView = (view: string): view is TWorkspaceView => workspaceViews.includes(view as TWorkspaceView);
const viewFromLocation = (): TWorkspaceView => {
const view = globalThis.location.hash.replace(/^#/, '');
return isWorkspaceView(view) ? view : 'inbox';
const routeFromLocation = (): { view: TWorkspaceView; documentId: string } => {
const [view = '', documentId = ''] = globalThis.location.hash.replace(/^#/, '').split(':');
return { view: isWorkspaceView(view) ? view : 'inbox', documentId };
};
let currentView = viewFromLocation();
const hashForRoute = (view: TWorkspaceView, documentId = ''): string => {
return documentId && (view === 'sign' || view === 'audit') ? `#${view}:${documentId}` : `#${view}`;
};
let currentRoute = routeFromLocation();
let currentView = currentRoute.view;
let activeDocumentId = currentRoute.documentId;
let appRoot: HTMLElement | null = null;
let routeChangeFrame: number | null = null;
@@ -44,19 +50,25 @@ const handleViewChange = (event: Event) => {
const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
if (!view || !isWorkspaceView(view)) return;
currentView = view;
const nextHash = `#${view}`;
const nextHash = hashForRoute(view, activeDocumentId);
if (globalThis.location.hash !== nextHash) {
globalThis.location.hash = view;
globalThis.location.hash = nextHash.slice(1);
}
};
const handleDocumentOpen = (event: Event) => {
const document = (event as CustomEvent<{ document?: TDocumentRow }>).detail?.document;
if (!document) return;
activeDocumentId = document.id;
};
const handleWorkspaceViewRequest = (event: Event) => {
const view = (event as CustomEvent<{ view?: TWorkspaceView }>).detail?.view;
if (!view || !isWorkspaceView(view)) return;
currentView = view;
const nextHash = `#${view}`;
const nextHash = hashForRoute(view, activeDocumentId);
if (globalThis.location.hash !== nextHash) {
globalThis.location.hash = view;
globalThis.location.hash = nextHash.slice(1);
} else {
renderApp();
}
@@ -68,7 +80,9 @@ const handleRouteChange = () => {
}
routeChangeFrame = globalThis.requestAnimationFrame(() => {
routeChangeFrame = null;
currentView = viewFromLocation();
currentRoute = routeFromLocation();
currentView = currentRoute.view;
activeDocumentId = currentRoute.documentId;
renderApp();
});
};
@@ -96,7 +110,7 @@ const renderApp = () => {
height: 100vh;
}
</style>
<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark" initialView=${currentView} .initialView=${currentView} view=${currentView} .view=${currentView} .documents=${appDocuments}></sdig-workspace>
<sdig-workspace accent="#3b82f6" density="comfortable" theme="dark" initialView=${currentView} .initialView=${currentView} view=${currentView} .view=${currentView} activeDocumentId=${activeDocumentId} .activeDocumentId=${activeDocumentId} .documents=${appDocuments}></sdig-workspace>
`,
appRoot!
);
@@ -105,6 +119,7 @@ const renderApp = () => {
const run = async () => {
createAppRoot();
document.body.addEventListener('view-change', handleViewChange);
document.body.addEventListener('document-open', handleDocumentOpen);
document.body.addEventListener('workspace-view-request', handleWorkspaceViewRequest);
globalThis.addEventListener('popstate', handleRouteChange);
globalThis.addEventListener('hashchange', handleRouteChange);