fix: lint error and build error

packages/app/src/components/workspace-avatar/index.tsx

@@ -1,7 +1,4 @@
-import { useAppState } from '@/providers/app-state-provider';
 import { stringToColour } from '@/utils';
-import { useEffect, useState } from 'react';
-
 interface IWorkspaceAvatar {
   size: number;
   name: string;
@@ -25,7 +22,9 @@ export const WorkspaceAvatar = (props: IWorkspaceAvatar) => {
             overflow: 'hidden',
           }}
         >
-          <img src={props.avatar} alt="" />
+          <picture>
+            <img src={props.avatar} alt="" />
+          </picture>
         </div>
       ) : (
         <div

packages/app/src/components/workspace-setting/SyncPage.tsx

@@ -43,7 +43,7 @@ export const SyncPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
                       //   await login();
                       // }
                       const id = await enableWorkspace(currentWorkspace);
-                      router.push(`/workspace/${id}`);
+                      router.push(`/workspace/${id}/setting`);
                       toast('Enabled success');
                     }
                   });

packages/app/src/components/workspace-setting/general/General.tsx

@@ -48,9 +48,11 @@ export const GeneralPage = ({ workspace }: { workspace: WorkspaceUnit }) => {
 
   const fileChange = async (file: File) => {
     // console.log('file: ', file);
-    // setUploading(true);
+    setUploading(true);
     const blob = new Blob([file], { type: file.type });
-    currentWorkspace && updateWorkspace({ avatarBlob: blob }, currentWorkspace);
+    currentWorkspace &&
+      (await updateWorkspace({ avatarBlob: blob }, currentWorkspace));
+    setUploading(false);
   };
 
   return workspace ? (

packages/app/src/components/workspace-setting/style.ts

@@ -2,7 +2,7 @@ import { styled } from '@/styles';
 import { Button } from '@/ui/button';
 import MuiAvatar from '@mui/material/Avatar';
 
-export const StyledSettingContainer = styled('div')(({ theme }) => {
+export const StyledSettingContainer = styled('div')(() => {
   return {
     display: 'flex',
     padding: '50px',
@@ -12,7 +12,7 @@ export const StyledSettingContainer = styled('div')(({ theme }) => {
   };
 });
 
-export const StyledSettingSidebar = styled('div')(({ theme }) => {
+export const StyledSettingSidebar = styled('div')(() => {
   {
     return {
       flexShrink: 0,

packages/app/src/hooks/use-ensure-workspace.ts

@@ -18,7 +18,8 @@ export const useEnsureWorkspace = () => {
     // If workspaceList is empty, we need to create a default workspace but not jump to 404
     if (
       workspaceList.length &&
-      router.query.workspaceId &&
+      // FIXME: router is not ready when this hook is called
+      location.pathname.startsWith(`/workspace/${router.query.workspaceId}`) &&
       workspaceList.findIndex(
         meta => meta.id.toString() === router.query.workspaceId
       ) === -1
@@ -35,14 +36,13 @@ export const useEnsureWorkspace = () => {
     //   router.push('/404');
     //   return;
     // }
-
     const workspaceId =
       (router.query.workspaceId as string) || workspaceList[0]?.id;
     loadWorkspace(workspaceId).finally(() => {
       setWorkspaceLoaded(true);
       setActiveWorkspaceId(activeWorkspaceId);
     });
-  }, [loadWorkspace, router, user, workspaceList]);
+  }, [loadWorkspace, router, user, workspaceList, activeWorkspaceId]);
 
   return {
     workspaceLoaded,

packages/app/src/pages/workspace/[workspaceId]/index.tsx

@@ -16,9 +16,7 @@ const WorkspaceIndex = () => {
       if (!workspaceLoaded) {
         return;
       }
-
       const savedPageId = currentWorkspace?.meta.pageMetas[0]?.id;
-
       if (savedPageId) {
         router.replace(`/workspace/${activeWorkspaceId}/${savedPageId}`);
         return;
@@ -34,6 +32,7 @@ const WorkspaceIndex = () => {
     createPage,
     router,
     workspaceLoaded,
+    activeWorkspaceId,
   ]);
 
   return <PageLoading />;

packages/app/src/providers/app-state-provider/Provider.tsx

@@ -100,7 +100,6 @@ export const AppStateProvider = ({
     if (workspaceId === currentWorkspaceId) {
       return currentWorkspace;
     }
-
     const workspace = await dataCenter.loadWorkspace(workspaceId);
     const currentMetaWorkSpace = dataCenter.workspaces.find(
       (item: WorkspaceUnit) => {

packages/app/src/providers/app-state-provider/utils.ts

@@ -4,7 +4,6 @@ const DEFAULT_WORKSPACE_NAME = 'affine';
 
 export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
   return dataCenter.createWorkspace({
-    avatar: 'test',
     name: DEFAULT_WORKSPACE_NAME,
   });
 };