feat: add setting entry of setting workspace

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/SelectorPopperContent.tsx

@@ -10,9 +10,20 @@ import {
   ListItem,
   LoginItem,
 } from './WorkspaceItem';
+import { WorkspaceSetting } from '@/components/workspace-setting';
+import { useState } from 'react';
 
 export const SelectorPopperContent = () => {
   const { user, workspacesMeta } = useAppState();
+  const [settingWorkspaceId, setSettingWorkspaceId] = useState<string | null>(
+    null
+  );
+  const handleClickSettingWorkspace = (workspaceId: string) => {
+    setSettingWorkspaceId(workspaceId);
+  };
+  const handleCloseWorkSpace = () => {
+    setSettingWorkspaceId(null);
+  };
   return !user ? (
     <SelectorPopperContainer placement="bottom-start">
       <LoginItem />
@@ -36,12 +47,16 @@ export const SelectorPopperContent = () => {
               id={workspace.id}
               name={`workspace-${workspace.id}`}
               icon={''}
+              onClick={handleClickSettingWorkspace}
             />
           );
         })}
       </WorkspaceWrapper>
-
       <CreateWorkspaceItem />
+      <WorkspaceSetting
+        isShow={Boolean(settingWorkspaceId)}
+        onClose={handleCloseWorkSpace}
+      />
       <StyledDivider />
       <ListItem
         icon={<InformationIcon />}

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/FooterSetting.tsx

@@ -2,9 +2,16 @@ import { SettingsIcon } from '@blocksuite/icons';
 import { styled } from '@/styles';
 import { IconButton } from '@/ui/button';
 
-export const FooterSetting = () => {
+type SettingProps = {
+  onClick?: () => void;
+};
+
+export const FooterSetting = ({ onClick }: SettingProps) => {
+  const handleClick = () => {
+    onClick && onClick();
+  };
   return (
-    <Wrapper className="footer-setting">
+    <Wrapper className="footer-setting" onClick={handleClick}>
       <SettingsIcon />
     </Wrapper>
   );

packages/app/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceItem/WorkspaceItem/WorkspaceItem.tsx

@@ -12,11 +12,21 @@ interface WorkspaceItemProps {
   id: string;
   name: string;
   icon: string;
+  onClick?: (workspaceId: string) => void;
 }
 
-export const WorkspaceItem = ({ id, name, icon }: WorkspaceItemProps) => {
+export const WorkspaceItem = ({
+  id,
+  name,
+  icon,
+  onClick,
+}: WorkspaceItemProps) => {
   const router = useRouter();
 
+  const handleClickSetting = async () => {
+    onClick && onClick(id);
+  };
+
   return (
     <StyledWrapper
       onClick={() => {
@@ -31,7 +41,7 @@ export const WorkspaceItem = ({ id, name, icon }: WorkspaceItemProps) => {
       </WorkspaceItemContent>
       <Footer>
         <FooterUsers />
-        <FooterSetting />
+        <FooterSetting onClick={handleClickSetting} />
       </Footer>
     </StyledWrapper>
   );