feat: support publish outline (#6173)

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) => {
@@ -83,16 +90,36 @@ export const PublishProvider = ({
           throw new Error('Not found');
         }
 
-        const { namespace, publishName } = res;
+        const { namespace: viewNamespace, publishName } = res;
 
-        navigate(`/${namespace}/${publishName}`);
+        prevViewMeta.current = undefined;
+        navigate(`/${viewNamespace}/${publishName}`, {
+          replace: true,
+        });
+        return;
       } catch (e) {
         return Promise.reject(e);
       }
     },
     [navigate, service],
   );
 
+  const loadOutline = useCallback(async () => {
+    if (!service || !namespace) return;
+    console.log('loadOutline', namespace);
+    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 +215,10 @@ export const PublishProvider = ({
     prevViewMeta.current = viewMeta;
   }, [viewMeta]);
 
+  useEffect(() => {
+    void loadOutline();
+  }, [loadOutline]);
+
   return (
     <PublishContext.Provider
       value={{
@@ -199,6 +230,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/appflowy-power/AppFlowyPower.tsx

@@ -0,0 +1,41 @@
+import { Divider } from '@mui/material';
+import React from 'react';
+import { ReactComponent as AppFlowyLogo } from '@/assets/appflowy.svg';
+
+function AppFlowyPower ({
+  divider,
+  width,
+}: {
+  divider?: boolean;
+  width?: number;
+}) {
+  return (
+    <div
+      style={{
+        backdropFilter: 'saturate(180%) blur(16px)',
+        width,
+        boxShadow: 'var(--footer) 0px -4px 14px 13px',
+      }}
+      className={'flex bg-bg-body sticky bottom-0 w-full flex-col items-center justify-center'}
+    >
+      {divider && <Divider className={'w-full my-0'} />}
+
+      <div
+        onClick={() => {
+          window.open('https://appflowy.io', '_blank');
+        }}
+        style={{
+          width,
+        }}
+        className={
+          'flex w-full cursor-pointer gap-2 items-center justify-center py-4 text-sm text-text-title opacity-50'
+        }
+      >
+        Powered by
+        <AppFlowyLogo className={'w-[88px]'} />
+      </div>
+    </div>
+  );
+}
+
+export default AppFlowyPower;

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/BreadcrumbSkeleton.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Skeleton, Box } from '@mui/material';
+
+export const BreadcrumbsSkeleton = () => {
+  return (
+    <Box display="flex" alignItems="center">
+      <Skeleton variant="text" width={60} height={20} />
+      <Skeleton variant="text" width={20} height={20} sx={{ mx: 1 }} />
+      <Skeleton variant="text" width={80} height={20} />
+      <Skeleton variant="text" width={20} height={20} sx={{ mx: 1 }} />
+      <Skeleton variant="text" width={100} height={20} />
+    </Box>
+  );
+};
+
+export default BreadcrumbsSkeleton;