feat: optimize frontend document panel rendering and folder creation.

This commit is contained in:
2025-12-12 03:47:50 +01:00
parent 6ba8084caa
commit b6857bd0b3
5 changed files with 9 additions and 23 deletions
-8
View File
@@ -26,18 +26,10 @@ const DocumentsInner: React.FC<{
const { openDetailPanel } = surfaceConfig;
const sidebarHidden = sidebarCollapsed || sidebarSuppressed;
const documentsTablePropsWithNav = surfaceConfig.documentsTableProps
? {
...surfaceConfig.documentsTableProps,
onBreadcrumbNavigate: surfaceConfig.handleBreadcrumbNavigate,
}
: null;
const { surface } = useWorkspaceSurface({
sidebarHidden,
onExpandSidebar: expandSidebar,
...surfaceConfig,
documentsTableProps: documentsTablePropsWithNav,
});
useEffect(() => {
+1 -1
View File
@@ -22,7 +22,7 @@ const useDocumentsShell = (): DocumentsShellView => {
return useMemo(() => {
const surfaceConfig: WorkspaceSurfaceConfig = {
documentsTableProps: {},
viewMode: shell.search?.documentsViewMode,
detailPanelProps: (shell.detailPanel?.detailPanelProps ?? null) as WorkspaceSurfaceConfig['detailPanelProps'],
detailPanelOpen: Boolean(shell.detailPanel?.detailPanelOpen),
openDetailPanel: shell.detailPanel?.openDetailPanel as WorkspaceSurfaceConfig['openDetailPanel'],
+3 -9
View File
@@ -16,7 +16,6 @@ type EnsureViewerData = (docId: Identifier, options?: Record<string, unknown>) =
type GetDocumentAsset = (document: unknown, assetType: string) => unknown;
type NotifyApiError = (error: unknown, fallbackMessage?: string) => void;
type DocumentsTableProps = ComponentProps<typeof DocumentsPanel> | null;
type DetailPanelProps = (ComponentProps<typeof DocumentViewerPanel> & {
onClose?: () => void;
onOpenViewer?: (args: { documentIds: Array<string> }) => void;
@@ -32,7 +31,7 @@ type WorkspaceSurface = { content: ReactNode; detail?: ReactNode | null; detailM
export interface UseWorkspaceSurfaceArgs {
sidebarHidden?: boolean;
onExpandSidebar?: () => void;
documentsTableProps?: DocumentsTableProps;
viewMode?: string;
detailPanelProps?: DetailPanelProps;
detailPanelOpen?: boolean;
viewerWorkspaceDocument?: unknown;
@@ -51,7 +50,7 @@ interface UseWorkspaceSurfaceResult {
export const useWorkspaceSurface = ({
sidebarHidden = false,
onExpandSidebar,
documentsTableProps,
viewMode,
detailPanelProps,
detailPanelOpen = false,
viewerWorkspaceDocument,
@@ -105,12 +104,7 @@ export const useWorkspaceSurface = ({
}, [sidebarHidden, onExpandSidebar]);
const documentsSurface = useMemo<WorkspaceSurface>(() => {
if (!documentsTableProps) {
return null;
}
const sidebarToggle = renderSidebarToggle ? renderSidebarToggle() : null;
const viewMode = documentsTableProps.viewMode;
const sidebarMode = viewMode === 'desk' ? 'overlay' : 'inline';
const detailMode: 'overlay' | 'inline' | null = detailPanelOpen && detailPanelProps ? sidebarMode : null;
@@ -157,7 +151,7 @@ export const useWorkspaceSurface = ({
detailMode,
};
}, [
documentsTableProps,
viewMode,
renderSidebarToggle,
detailPanelOpen,
detailPanelProps,
@@ -179,11 +179,10 @@ const useFolderTreeActions = ({
setCreatingFolder(true);
let succeeded = false;
try {
const folderData = await foldersManager.create(name.trim(), targetParentId);
await foldersManager.create(name.trim(), targetParentId);
showToast('Folder created.', 'success');
await selectFolder(folderData.id, { immediate: true });
succeeded = true;
return true;
} catch (error) {
@@ -199,7 +198,6 @@ const useFolderTreeActions = ({
},
[
notifyApiError,
selectFolder,
selectedFolder,
setCreatingFolder,
foldersManager,
@@ -50,7 +50,7 @@ interface DocumentsPanelProps {
headerLeading?: ReactNode;
}
const DocumentsPanelInner: React.FC<DocumentsPanelProps> = (props) => {
const DocumentsPanelInner: React.FC<DocumentsPanelProps> = React.memo((props) => {
const { headerLeading } = props;
const shell = useAppShell();
const {
@@ -304,7 +304,9 @@ const DocumentsPanelInner: React.FC<DocumentsPanelProps> = (props) => {
</DocumentsViewStateContext.Provider>
</DocumentsAssetContext.Provider>
);
};
});
DocumentsPanelInner.displayName = 'DocumentsPanelInner';
const DocumentsPanel: React.FC<DocumentsPanelProps> = (props) => {
const shell = useAppShell();