feat(core): unused blob management in settings (#9795)

fix AF-2144, PD-2064, PD-2065, PD-2066

blocksuite/affine/block-attachment/src/attachment-block.ts

@@ -3,7 +3,7 @@ import { CaptionedBlockComponent } from '@blocksuite/affine-components/caption';
 import { HoverController } from '@blocksuite/affine-components/hover';
 import {
   AttachmentIcon16,
-  getAttachmentFileIcons,
+  getAttachmentFileIcon,
 } from '@blocksuite/affine-components/icons';
 import { Peekable } from '@blocksuite/affine-components/peek';
 import { toast } from '@blocksuite/affine-components/toast';
@@ -226,7 +226,7 @@ export class AttachmentBlockComponent extends CaptionedBlockComponent<
     const infoText = this.error ? 'File loading failed.' : humanFileSize(size);
 
     const fileType = name.split('.').pop() ?? '';
-    const FileTypeIcon = getAttachmentFileIcons(fileType);
+    const FileTypeIcon = getAttachmentFileIcon(fileType);
 
     const embedView = this.embedView;
 

blocksuite/affine/components/src/icons/file-icons.ts

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 
-export function getAttachmentFileIcons(filetype: string) {
+export function getAttachmentFileIcon(filetype: string) {
   switch (filetype) {
     case 'img':
       return IMGFileIcon;

blocksuite/affine/components/src/rich-text/inline/presets/nodes/footnote-node/footnote-popup.ts

@@ -7,7 +7,7 @@ import { DualLinkIcon, LinkIcon } from '@blocksuite/icons/lit';
 import { css, html, LitElement, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 
-import { getAttachmentFileIcons } from '../../../../../icons';
+import { getAttachmentFileIcon } from '../../../../../icons';
 import { RefNodeSlotsProvider } from '../../../../extension/ref-node-slots';
 
 export class FootNotePopup extends WithDisposable(LitElement) {
@@ -34,7 +34,7 @@ export class FootNotePopup extends WithDisposable(LitElement) {
       if (!fileType) {
         return undefined;
       }
-      return getAttachmentFileIcons(fileType);
+      return getAttachmentFileIcon(fileType);
     }
     return undefined;
   };

blocksuite/playground/apps/_common/components/attachment-viewer-panel.ts

@@ -1,7 +1,7 @@
 /* oxlint-disable @typescript-eslint/no-non-null-assertion */
 import type { AttachmentBlockModel } from '@blocksuite/affine-model';
 import { humanFileSize } from '@blocksuite/affine-shared/utils';
-import { getAttachmentFileIcons } from '@blocksuite/blocks';
+import { getAttachmentFileIcon } from '@blocksuite/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/utils';
 import {
   ArrowDownBigIcon,
@@ -155,7 +155,7 @@ export class AttachmentViewerPanel extends SignalWatcher(
     const { name, size } = model;
 
     const fileType = name.split('.').pop() ?? '';
-    const icon = getAttachmentFileIcons(fileType);
+    const icon = getAttachmentFileIcon(fileType);
     const isPDF = fileType === 'pdf';
 
     this.#fileInfo.value = {

packages/frontend/apps/electron/src/helper/workspace/handlers.ts

@@ -8,7 +8,6 @@ import {
 import fs from 'fs-extra';
 import { applyUpdate, Doc as YDoc } from 'yjs';
 
-import { isWindows } from '../../shared/utils';
 import { logger } from '../logger';
 import { getDocStoragePool } from '../nbstore';
 import { ensureSQLiteDisconnected } from '../nbstore/v1/ensure-db';
@@ -69,16 +68,10 @@ export async function trashWorkspace(universalId: string) {
     await fs.ensureDir(movedPath);
     // todo(@pengx17): it seems the db file is still being used at the point
     // on windows so that it cannot be moved. we will fallback to copy the dir instead.
-    if (isWindows()) {
-      await fs.copy(path.dirname(dbPath), movedPath, {
-        overwrite: true,
-      });
-      await fs.rmdir(path.dirname(dbPath), { recursive: true });
-    } else {
-      return await fs.move(path.dirname(dbPath), movedPath, {
-        overwrite: true,
-      });
-    }
+    await fs.copy(path.dirname(dbPath), movedPath, {
+      overwrite: true,
+    });
+    await fs.rmdir(path.dirname(dbPath), { recursive: true });
   } catch (error) {
     logger.error('trashWorkspace', error);
   }

packages/frontend/component/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export { useAutoFocus, useAutoSelect } from './focus-and-select';
+export { useDisposable } from './use-disposable';
 export { useRefEffect } from './use-ref-effect';
 export * from './use-theme-color-meta';
 export * from './use-theme-value';

packages/frontend/component/src/hooks/use-disposable.ts

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+
+export function useDisposable<T extends Disposable | AsyncDisposable>(
+  disposableFn: (abortSignal?: AbortSignal) => Promise<T | null>,
+  deps?: any[]
+): { data: T | null; loading: boolean; error: Error | null };
+
+export function useDisposable<T extends Disposable | AsyncDisposable>(
+  disposableFn: (abortSignal?: AbortSignal) => T | null,
+  deps?: any[]
+): { data: T | null };
+
+export function useDisposable<T extends Disposable | AsyncDisposable>(
+  disposableFn: (abortSignal?: AbortSignal) => Promise<T | null> | T | null,
+  deps?: any[]
+) {
+  const [state, setState] = useState<{
+    data: T | null;
+    loading: boolean;
+    error: Error | null;
+  }>({
+    data: null,
+    loading: false,
+    error: null,
+  });
+
+  useEffect(() => {
+    const abortController = new AbortController();
+    let _data: T | null = null;
+    setState(prev => ({ ...prev, loading: true, error: null }));
+
+    Promise.resolve(disposableFn(abortController.signal))
+      .then(data => {
+        _data = data;
+        if (!abortController.signal.aborted) {
+          setState({ data, loading: false, error: null });
+        }
+      })
+      .catch(error => {
+        if (!abortController.signal.aborted) {
+          setState(prev => ({ ...prev, error, loading: false }));
+        }
+      });
+
+    return () => {
+      abortController.abort();
+
+      if (_data && typeof _data === 'object') {
+        if (Symbol.dispose in _data) {
+          _data[Symbol.dispose]();
+        } else if (Symbol.asyncDispose in _data) {
+          _data[Symbol.asyncDispose]();
+        }
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps || []);
+
+  return state;
+}

packages/frontend/component/src/lit-react/index.ts

@@ -1,3 +1,4 @@
 export { createComponent as createReactComponentFromLit } from './create-component';
 export * from './lit-portal';
 export { toReactNode } from './to-react-node';
+export { templateToString } from './utils';

packages/frontend/component/src/lit-react/utils.ts

@@ -0,0 +1,9 @@
+import type { TemplateResult } from 'lit';
+
+export function templateToString({ strings, values }: TemplateResult): string {
+  return strings.reduce(
+    (result, str, i) =>
+      result + str + (i < values.length ? String(values[i]) : ''),
+    ''
+  );
+}

packages/frontend/core/src/blocksuite/presets/ai/chat-panel/components/file-chip.ts

@@ -1,5 +1,5 @@
 import { ShadowlessElement } from '@blocksuite/affine/block-std';
-import { getAttachmentFileIcons } from '@blocksuite/affine/blocks';
+import { getAttachmentFileIcon } from '@blocksuite/affine/blocks';
 import { SignalWatcher, WithDisposable } from '@blocksuite/affine/global/utils';
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
@@ -17,7 +17,7 @@ export class ChatPanelFileChip extends SignalWatcher(
     const { state, fileName, fileType } = this.chip;
     const isLoading = state === 'embedding' || state === 'uploading';
     const tooltip = getChipTooltip(state, fileName, this.chip.tooltip);
-    const fileIcon = getAttachmentFileIcons(fileType);
+    const fileIcon = getAttachmentFileIcon(fileType);
     const icon = getChipIcon(state, fileIcon);
 
     return html`<chat-panel-chip

packages/frontend/core/src/desktop/dialogs/setting/setting-sidebar/style.css.ts

@@ -74,9 +74,11 @@ export const sidebarSelectSubItem = style({
 export const sidebarSelectItemIcon = style({
   width: '16px',
   height: '16px',
+  fontSize: '16px',
   marginRight: '10px',
   flexShrink: 0,
   color: cssVarV2('icon/primary'),
+  display: 'inline-flex',
 });
 
 export const sidebarSelectItemName = style({

packages/frontend/core/src/desktop/dialogs/setting/workspace-setting/index.tsx

@@ -43,7 +43,7 @@ export const WorkspaceSetting = ({
     case 'workspace:billing':
       return <WorkspaceSettingBilling />;
     case 'workspace:storage':
-      return <WorkspaceSettingStorage />;
+      return <WorkspaceSettingStorage onCloseSetting={onCloseSetting} />;
     default:
       return null;
   }