Merge pull request #65 from toeverything/opti-page-tree-header-mitsuha-dev

Opti page tree header mitsuha dev

apps/ligo-virgo/src/pages/workspace/docs/Page.tsx

@@ -31,7 +31,7 @@ import { WorkspaceName } from './workspace-name';
 import { CollapsiblePageTree } from './collapsible-page-tree';
 import { useFlag } from '@toeverything/datasource/feature-flags';
 import { type BlockEditor } from '@toeverything/components/editor-core';
-
+import { Tabs } from './components/tabs';
 type PageProps = {
     workspace: string;
 };
@@ -80,7 +80,9 @@ export function Page(props: PageProps) {
                     onMouseLeave={() => setSpaceSidebarVisible(false)}
                 >
                     <WorkspaceName />
-                    <Divider light={true} sx={{ my: 1, margin: '6px 0px' }} />
+
+                    <Tabs />
+
                     <WorkspaceSidebarContent>
                         <div>
                             {dailyNotesFlag && (
@@ -219,4 +221,5 @@ const WorkspaceSidebar = styled('div')(({ hidden }) => ({
 const WorkspaceSidebarContent = styled('div')({
     flex: 'auto',
     overflow: 'hidden auto',
+    marginTop: '18px',
 });

apps/ligo-virgo/src/pages/workspace/docs/components/logo/Logo.tsx

@@ -0,0 +1,19 @@
+export const Logo = ({ color, style, ...props }) => {
+    return (
+        <svg
+            width="52"
+            height="52"
+            viewBox="0 0 52 52"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <rect width="52" height="52" rx="10" fill="#3E6FDB" />
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M24.2189 11.4392L14.6321 38.7943H20.2472L26.3453 19.8747L32.4461 38.7943H38.0423L28.454 11.4392H24.2189Z"
+                fill="white"
+            />
+        </svg>
+    );
+};

apps/ligo-virgo/src/pages/workspace/docs/components/logo/index.ts

@@ -0,0 +1 @@
+export { Logo } from './Logo';

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/Tabs.tsx

@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import { MuiDivider as Divider, styled } from '@toeverything/components/ui';
+import type { ValueOf } from '@toeverything/utils';
+
+const StyledTabs = styled('div')({
+    width: '100%',
+    height: '12px',
+    marginTop: '12px',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+});
+
+const StyledDivider = styled(Divider)<{ isActive?: boolean }>(
+    ({ isActive }) => {
+        return {
+            flex: 1,
+            backgroundColor: isActive ? '#3E6FDB' : '#ECF1FB',
+            borderWidth: '2px',
+        };
+    }
+);
+
+const TAB_TITLE = {
+    PAGES: 'pages',
+    GALLERY: 'gallery',
+    TOC: 'toc',
+} as const;
+
+const TabMap = new Map<TabKey, TabValue>([
+    ['PAGES', 'pages'],
+    ['GALLERY', 'gallery'],
+    ['TOC', 'toc'],
+]);
+
+type TabKey = keyof typeof TAB_TITLE;
+type TabValue = ValueOf<typeof TAB_TITLE>;
+
+const Tabs = () => {
+    const [activeTab, setActiveTab] = useState<TabValue>(TAB_TITLE.PAGES);
+
+    const onClick = (v: TabValue) => {
+        setActiveTab(v);
+    };
+
+    return (
+        <StyledTabs>
+            {[...TabMap.entries()].map(([k, v]) => {
+                return (
+                    <StyledDivider
+                        key={v}
+                        isActive={v === activeTab}
+                        onClick={() => onClick(v)}
+                    />
+                );
+            })}
+        </StyledTabs>
+    );
+};
+
+export { Tabs };

apps/ligo-virgo/src/pages/workspace/docs/components/tabs/index.ts

@@ -0,0 +1 @@
+export { Tabs } from './Tabs';

apps/ligo-virgo/src/pages/workspace/docs/workspace-name.tsx

@@ -1,27 +1,28 @@
 import {
-    MuiButton as Button,
-    Switch,
     styled,
     MuiOutlinedInput as OutlinedInput,
 } from '@toeverything/components/ui';
-import { LogoIcon } from '@toeverything/components/icons';
+import { PinIcon } from '@toeverything/components/icons';
 import {
     useUserAndSpaces,
     useShowSpaceSidebar,
 } from '@toeverything/datasource/state';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { services } from '@toeverything/datasource/db-service';
+import { Logo } from './components/logo/Logo';
 
 const WorkspaceContainer = styled('div')({
     display: 'flex',
-    alignItems: 'center',
+    flexDirection: 'column',
-    minHeight: 60,
+    paddingBottom: '12px',
-    padding: '12px 0px',
     color: '#566B7D',
 });
 const LeftContainer = styled('div')({
     flex: 'auto',
     display: 'flex',
+    height: '52px',
+    alignItems: 'center',
+    margin: '0 12px',
 });
 
 const LogoContainer = styled('div')({
@@ -32,20 +33,36 @@ const LogoContainer = styled('div')({
     minWidth: 24,
 });
 
-const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
+const StyledPin = styled('div')({
-    return {
+    display: 'flex',
-        color: theme.affine.palette.primary,
+    justifyContent: 'end',
-        width: '16px !important',
+    alignItems: 'center',
-        height: '16px !important',
+});
-    };
+
+const StyledWorkspace = styled('div')({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'space-between',
+    marginLeft: '12px',
+    paddingLeft: '12px',
+});
+
+const StyledWorkspaceDesc = styled('div')({
+    fontSize: '12px',
+    color: '#98ACBD',
+    height: '18px',
+
+    display: 'flex',
+    alignItems: 'center',
 });
 
 const WorkspaceNameContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
     flex: 'auto',
-    width: '100px',
+    width: '165px',
-    marginRight: '10px',
+    height: '34px',
     input: {
         padding: '5px 10px',
     },
@@ -58,21 +75,15 @@ const WorkspaceNameContainer = styled('div')({
 });
 
 const WorkspaceReNameContainer = styled('div')({
-    marginRight: '10px',
+    height: '34px',
+    display: 'flex',
+    alignItems: 'center',
+
     input: {
         padding: '5px 10px',
     },
 });
 
-const ToggleDisplayContainer = styled('div')({
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 12,
-    color: '#3E6FDB',
-    padding: 6,
-    minWidth: 64,
-});
-
 export const WorkspaceName = () => {
     const { currentSpaceId } = useUserAndSpaces();
     const { fixedDisplay, toggleSpaceSidebar } = useShowSpaceSidebar();
@@ -139,35 +150,46 @@ export const WorkspaceName = () => {
 
     return (
         <WorkspaceContainer>
+            <StyledPin>
+                <PinIcon
+                    style={{
+                        width: '20px',
+                        height: '20px',
+                        color: fixedDisplay ? '#3E6FDB' : '',
+                        cursor: 'pointer',
+                    }}
+                    onClick={toggleSpaceSidebar}
+                />
+            </StyledPin>
             <LeftContainer>
                 <LogoContainer>
-                    <StyledLogoIcon />
+                    <Logo color={undefined} style={undefined} />
                 </LogoContainer>
 
-                {inRename ? (
+                <StyledWorkspace>
-                    <WorkspaceReNameContainer>
+                    {inRename ? (
-                        <OutlinedInput
+                        <WorkspaceReNameContainer>
-                            value={workspaceName}
+                            <OutlinedInput
-                            onChange={handleChange}
+                                style={{ width: '140px', height: '28px' }}
-                            onKeyDown={handleKeyDown}
+                                value={workspaceName}
-                            onMouseLeave={() => setInRename(false)}
+                                onChange={handleChange}
-                        />
+                                onKeyDown={handleKeyDown}
-                    </WorkspaceReNameContainer>
+                                onMouseLeave={() => setInRename(false)}
-                ) : (
+                            />
-                    <WorkspaceNameContainer>
+                        </WorkspaceReNameContainer>
-                        <span onClick={() => setInRename(true)}>
+                    ) : (
-                            {workspaceName || workspaceId}
+                        <WorkspaceNameContainer>
-                        </span>
+                            <span onClick={() => setInRename(true)}>
-                    </WorkspaceNameContainer>
+                                {workspaceName || workspaceId}
-                )}
+                            </span>
+                        </WorkspaceNameContainer>
+                    )}
+
+                    <StyledWorkspaceDesc>
+                        To shape, Not to Adapt.
+                    </StyledWorkspaceDesc>
+                </StyledWorkspace>
             </LeftContainer>
-            <ToggleDisplayContainer onClick={toggleSpaceSidebar}>
-                <Switch
-                    checked={fixedDisplay}
-                    checkedLabel="ON"
-                    uncheckedLabel="OFF"
-                />
-            </ToggleDisplayContainer>
         </WorkspaceContainer>
     );
 };