feat: support publish outline

frontend/appflowy_web_app/src/application/publish/context.tsx

@@ -1,7 +1,9 @@
 import { GetViewRowsMap, LoadView, LoadViewMeta } from '@/application/collab.type';
 import { db } from '@/application/db';
 import { ViewMeta } from '@/application/db/tables/view_metas';
-import { AFConfigContext } from '@/components/app/app.hooks';
+import { View } from '@/application/types';
+import { useService } from '@/components/app/app.hooks';
+import { notify } from '@/components/_shared/notify';
 import { useLiveQuery } from 'dexie-react-hooks';
 import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -14,8 +16,8 @@ export interface PublishContextType {
   toView: (viewId: string) => Promise<void>;
   loadViewMeta: LoadViewMeta;
   getViewRowsMap?: GetViewRowsMap;
-
   loadView: LoadView;
+  outline?: View;
 }
 
 export const PublishContext = createContext<PublishContextType | null>(null);
@@ -36,13 +38,17 @@ export const PublishProvider = ({
 
     return db.view_metas.get(name);
   }, [namespace, publishName]);
+
+  const [outline, setOutline] = useState<View>();
+
   const [subscribers, setSubscribers] = useState<Map<string, (meta: ViewMeta) => void>>(new Map());
 
   useEffect(() => {
     return () => {
       setSubscribers(new Map());
     };
   }, []);
+
   useEffect(() => {
     db.view_metas.hook('creating', (primaryKey, obj) => {
       const subscriber = subscribers.get(primaryKey);
@@ -72,7 +78,8 @@ export const PublishProvider = ({
 
   const prevViewMeta = useRef(viewMeta);
 
-  const service = useContext(AFConfigContext)?.service;
+  const service = useService();
+
   const navigate = useNavigate();
   const toView = useCallback(
     async (viewId: string) => {
@@ -93,6 +100,21 @@ export const PublishProvider = ({
     [navigate, service],
   );
 
+  const loadOutline = useCallback(async () => {
+    if (!service || !namespace) return;
+    try {
+      const res = await service?.getPublishOutline(namespace);
+
+      if (!res) {
+        throw new Error('Publish outline not found');
+      }
+
+      setOutline(res);
+    } catch (e) {
+      notify.error('Publish outline not found');
+    }
+  }, [namespace, service]);
+
   const loadViewMeta = useCallback(
     async (viewId: string, callback?: (meta: ViewMeta) => void) => {
       try {
@@ -188,6 +210,10 @@ export const PublishProvider = ({
     prevViewMeta.current = viewMeta;
   }, [viewMeta]);
 
+  useEffect(() => {
+    void loadOutline();
+  }, [loadOutline]);
+
   return (
     <PublishContext.Provider
       value={{
@@ -199,6 +225,7 @@ export const PublishProvider = ({
         namespace,
         publishName,
         isTemplateThumb,
+        outline,
       }}
     >
       {children}

frontend/appflowy_web_app/src/application/services/js-services/http/http_api.ts

@@ -11,7 +11,7 @@ import {
   TemplateCreator, TemplateCreatorFormValues, TemplateSummary,
   UploadTemplatePayload,
 } from '@/application/template.type';
-import { FolderView, User, Workspace } from '@/application/types';
+import { FolderView, User, View, Workspace } from '@/application/types';
 import axios, { AxiosInstance } from 'axios';
 import dayjs from 'dayjs';
 
@@ -233,6 +233,23 @@ export async function getPublishInfoWithViewId (viewId: string) {
   return Promise.reject(data);
 }
 
+export async function getPublishOutline (publishNamespace: string) {
+  const url = `/api/workspace/published-outline/${publishNamespace}`;
+  const response = await axiosInstance?.get<{
+    code: number;
+    data?: View;
+    message: string;
+  }>(url);
+
+  const data = response?.data;
+
+  if (data?.code === 0 && data.data) {
+    return data.data;
+  }
+
+  return Promise.reject(data);
+}
+
 export async function getPublishViewComments (viewId: string): Promise<GlobalComment[]> {
   const url = `/api/workspace/published-info/${viewId}/comment`;
   const response = await axiosInstance?.get<{

frontend/appflowy_web_app/src/application/services/js-services/index.ts

@@ -164,6 +164,10 @@ export class AFClientService implements AFService {
     return data;
   }
 
+  async getPublishOutline (namespace: string) {
+    return APIService.getPublishOutline(namespace);
+  }
+
   async loginAuth (url: string) {
     try {
       console.log('loginAuth', url);

frontend/appflowy_web_app/src/application/services/services.type.ts

@@ -9,7 +9,7 @@ import {
   UploadTemplatePayload,
 } from '@/application/template.type';
 import * as Y from 'yjs';
-import { DuplicatePublishView, FolderView, User, Workspace } from '@/application/types';
+import { DuplicatePublishView, FolderView, User, View, Workspace } from '@/application/types';
 
 export type AFService = PublishService;
 
@@ -37,6 +37,8 @@ export interface PublishService {
     destroy: () => void;
   }>;
 
+  getPublishOutline (namespace: string): Promise<View>;
+
   getPublishViewGlobalComments: (viewId: string) => Promise<GlobalComment[]>;
   createCommentOnPublishView: (viewId: string, content: string, replyCommentId?: string) => Promise<void>;
   deleteCommentOnPublishView: (viewId: string, commentId: string) => Promise<void>;

frontend/appflowy_web_app/src/application/services/tauri-services/index.ts

@@ -24,6 +24,10 @@ export class AFClientService implements AFService {
     return Promise.reject('Method not implemented');
   }
 
+  async getPublishOutline (_namespace: string) {
+    return Promise.reject('Method not implemented');
+  }
+
   async getPublishViewMeta (_namespace: string, _publishName: string) {
     return Promise.reject('Method not implemented');
   }

frontend/appflowy_web_app/src/application/types.ts

@@ -1,4 +1,4 @@
-import { CollabType } from '@/application/collab.type';
+import { CollabType, ViewLayout } from '@/application/collab.type';
 
 export interface Workspace {
   icon: string;
@@ -38,3 +38,25 @@ export interface DuplicatePublishView {
   collabType: CollabType;
   viewId: string;
 }
+
+export interface ViewIcon {
+  ty: number;
+  value: string;
+}
+
+export interface ViewExtra {
+  is_space: boolean;
+  space_created_at?: number;
+  space_icon?: string;
+  space_icon_color?: string;
+  space_permission?: number;
+}
+
+export interface View {
+  view_id: string;
+  name: string;
+  icon: ViewIcon | null;
+  layout: ViewLayout;
+  extra: ViewExtra | null;
+  children: View[];
+}

frontend/appflowy_web_app/src/components/_shared/popover/RichTooltip.tsx

@@ -7,9 +7,13 @@ interface Props {
   open: boolean;
   onClose: () => void;
   placement?: PopperPlacementType;
+  PaperProps?: {
+    className?: string;
+  };
+
 }
 
-export const RichTooltip = ({ placement = 'top', open, onClose, content, children }: Props) => {
+export const RichTooltip = ({ placement = 'top', open, onClose, content, children, PaperProps }: Props) => {
   const [childNode, setChildNode] = React.useState<HTMLElement | null>(null);
   const [, setTransitioning] = React.useState(false);
 
@@ -48,7 +52,8 @@ export const RichTooltip = ({ placement = 'top', open, onClose, content, childre
           >
             <Paper className={'bg-transparent shadow-none'}>
               <ClickAwayListener onClickAway={onClose}>
-                <Paper className={'m-2 rounded-md border border-line-divider bg-bg-body overflow-hidden'}>
+                <Paper
+                  className={'m-2 rounded-md border border-line-divider bg-bg-body overflow-hidden'}  {...PaperProps}>
                   <Box>{content}</Box>
                 </Paper>
               </ClickAwayListener>

frontend/appflowy_web_app/src/components/_shared/skeleton/OutlineSkeleton.tsx

@@ -0,0 +1,47 @@
+import { Box, Skeleton } from '@mui/material';
+import './skeleton.scss';
+
+export const DirectoryStructure = () => {
+  return (
+    <Box className={'w-full'}>
+      <div className="directory-item">
+        <Skeleton variant="circular" width={20} height={20} />
+        <Skeleton variant="text" className={'flex-1'} />
+      </div>
+      <div className="nested">
+        <div className="directory-item">
+          <Skeleton variant="circular" width={20} height={20} />
+          <Skeleton variant="text" className={'flex-1'} />
+        </div>
+        <div className="nested">
+          <div className="directory-item">
+            <Skeleton variant="circular" width={20} height={20} />
+            <Skeleton variant="text" className={'flex-1'} />
+          </div>
+          <div className="directory-item">
+            <Skeleton variant="circular" width={20} height={20} />
+            <Skeleton variant="text" className={'flex-1'} />
+          </div>
+        </div>
+        <div className="directory-item">
+          <Skeleton variant="circular" width={20} height={20} />
+          <Skeleton variant="text" className={'flex-1'} />
+        </div>
+      </div>
+      <div className="directory-item">
+        <Skeleton variant="circular" width={20} height={20} />
+        <Skeleton variant="text" className={'flex-1'} />
+      </div>
+      <div className="nested">
+        <div className="directory-item">
+          <Skeleton variant="circular" width={20} height={20} />
+          <Skeleton variant="text" className={'flex-1'} />
+        </div>
+        <div className="directory-item">
+          <Skeleton variant="circular" width={20} height={20} />
+          <Skeleton variant="text" className={'flex-1'} />
+        </div>
+      </div>
+    </Box>
+  );
+};

frontend/appflowy_web_app/src/components/_shared/skeleton/skeleton.scss

@@ -0,0 +1,13 @@
+.directory-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.directory-item .MuiSkeleton-root {
+  margin-right: 8px;
+}
+
+.nested {
+  margin-left: 24px;
+}