refactor(electron): tab title/icon update logic (#7675)

fix AF-1122
fix AF-1136

packages/frontend/core/src/modules/app-tabs-header/views/app-tabs-header.tsx

@@ -7,21 +7,8 @@ import {
 import { appSidebarWidthAtom } from '@affine/core/components/app-sidebar/index.jotai';
 import { WindowsAppControls } from '@affine/core/components/pure/header/windows-app-controls';
 import { useAsyncCallback } from '@affine/core/hooks/affine-async-hooks';
-import { DesktopStateSynchronizer } from '@affine/core/modules/workbench/services/desktop-state-synchronizer';
-import type { WorkbenchMeta } from '@affine/electron-api';
 import { apis, events } from '@affine/electron-api';
-import {
-  AllDocsIcon,
-  CloseIcon,
-  DeleteIcon,
-  EdgelessIcon,
-  PageIcon,
-  PlusIcon,
-  RightSidebarIcon,
-  TagIcon,
-  TodayIcon,
-  ViewLayersIcon,
-} from '@blocksuite/icons/rc';
+import { CloseIcon, PlusIcon, RightSidebarIcon } from '@blocksuite/icons/rc';
 import {
   useLiveData,
   useService,
@@ -38,25 +25,14 @@ import {
   useState,
 } from 'react';
 
+import { iconNameToIcon } from '../../workbench/constants';
+import { DesktopStateSynchronizer } from '../../workbench/services/desktop-state-synchronizer';
 import {
   AppTabsHeaderService,
   type TabStatus,
 } from '../services/app-tabs-header-service';
 import * as styles from './styles.css';
 
-type ModuleName = NonNullable<WorkbenchMeta['views'][0]['moduleName']>;
-
-const moduleNameToIcon = {
-  all: <AllDocsIcon />,
-  collection: <ViewLayersIcon />,
-  doc: <PageIcon />,
-  page: <PageIcon />,
-  edgeless: <EdgelessIcon />,
-  journal: <TodayIcon />,
-  tag: <TagIcon />,
-  trash: <DeleteIcon />,
-} satisfies Record<ModuleName, ReactNode>;
-
 const WorkbenchTab = ({
   workbench,
   active: tabActive,
@@ -66,6 +42,7 @@ const WorkbenchTab = ({
   active: boolean;
   tabsLength: number;
 }) => {
+  useServiceOptional(DesktopStateSynchronizer);
   const tabsHeaderService = useService(AppTabsHeaderService);
   const activeViewIndex = workbench.activeViewIndex ?? 0;
   const onContextMenu = useAsyncCallback(
@@ -115,7 +92,7 @@ const WorkbenchTab = ({
             >
               <div className={styles.labelIcon}>
                 {workbench.ready || !workbench.loaded ? (
-                  moduleNameToIcon[view.moduleName ?? 'all']
+                  iconNameToIcon[view.iconName ?? 'allDocs']
                 ) : (
                   <Loading />
                 )}
@@ -194,8 +171,6 @@ export const AppTabsHeader = ({
     await tabsHeaderService.onToggleRightSidebar();
   }, [tabsHeaderService]);
 
-  useServiceOptional(DesktopStateSynchronizer);
-
   useEffect(() => {
     if (mode === 'app') {
       apis?.ui.pingAppLayoutReady().catch(console.error);

packages/frontend/core/src/modules/app-tabs-header/views/styles.css.ts

@@ -80,7 +80,7 @@ export const tab = style({
       boxShadow: cssVar('shadow1'),
     },
     '&[data-pinned="false"]': {
-      paddingRight: 8,
+      paddingRight: 20,
     },
     '&[data-pinned="true"]': {
       flexShrink: 0,