fix: add some tips for livedemo

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

@@ -88,6 +88,11 @@ export function Page(props: PageProps) {
                         {activeTab === TabMap.get(TAB_TITLE.TOC).value && (
                             <TOC />
                         )}
+                        {activeTab === TabMap.get(TAB_TITLE.GALLERY).value && (
+                            <StyledTextForGallery>
+                                Gallery coming soon...
+                            </StyledTextForGallery>
+                        )}
                     </WorkspaceSidebarContent>
                 </WorkspaceSidebar>
             </LigoLeftContainer>
@@ -202,3 +207,12 @@ const WorkspaceSidebarContent = styled('div')({
     overflow: 'hidden auto',
     marginTop: '18px',
 });
+
+const StyledTextForGallery = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        color: theme.affine.palette.menu,
+        marginTop: theme.affine.spacing.lgSpacing,
+    };
+});

libs/components/layout/src/header/LayoutHeader.tsx

@@ -4,7 +4,7 @@ import {
     SideBarViewCloseIcon,
     SideBarViewIcon,
 } from '@toeverything/components/icons';
-import { IconButton, styled } from '@toeverything/components/ui';
+import { IconButton, styled, Tooltip } from '@toeverything/components/ui';
 import { useTranslation } from '@toeverything/datasource/i18n';
 import {
     useCurrentEditors,
@@ -51,16 +51,28 @@ export const LayoutHeader = () => {
                 </FlexContainer>
                 <FlexContainer>
                     <StyledHelper>
-                        <StyledShare disabled={true}>{t('Share')}</StyledShare>
+                        <Tooltip
+                            placement="bottom-end"
+                            content="Share function coming soon"
+                        >
+                            <StyledShare disabled={true}>
+                                {t('Share')}
+                            </StyledShare>
+                        </Tooltip>
                         <div style={{ margin: '0px 12px' }}>
-                            <IconButton
+                            <Tooltip
-                                size="large"
+                                placement="bottom-end"
-                                hoverColor={'transparent'}
+                                content="Search function coming soon"
-                                onClick={handleSearch}
-                                disabled={true}
                             >
-                                <SearchIcon />
+                                <IconButton
-                            </IconButton>
+                                    size="large"
+                                    hoverColor={'transparent'}
+                                    onClick={handleSearch}
+                                    disabled={true}
+                                >
+                                    <SearchIcon />
+                                </IconButton>
+                            </Tooltip>
                         </div>
 
                         <IconButton onClick={toggleInfoSidebar} size="large">

libs/components/layout/src/settings-sidebar/Comments/Comments.tsx

@@ -7,7 +7,20 @@ type CommentsProps = {
     resolveComment: (blockId: string, commentId: string) => void;
 };
 
-export const Comments = ({
+export const Comments = (props: CommentsProps) => {
+    return <StyledText>Comment coming soon...</StyledText>;
+};
+
+const StyledText = styled('div')(({ theme }) => {
+    return {
+        display: 'flex',
+        justifyContent: 'center',
+        color: theme.affine.palette.menu,
+        marginTop: theme.affine.spacing.lgSpacing,
+    };
+});
+
+export const BakComments = ({
     activeCommentId,
     resolveComment,
 }: CommentsProps) => {