feat: support upload page icon (#59)

src/application/types.ts

@@ -996,6 +996,7 @@ export interface ViewMetaProps {
   extra?: ViewExtra | null;
   readOnly?: boolean;
   updatePage?: (viewId: string, data: UpdatePagePayload) => Promise<void>;
+  uploadFile?: (file: File) => Promise<string>;
   onEnter?: (text: string) => void;
   maxWidth?: number;
 }

src/components/_shared/LoadingDots.tsx

@@ -0,0 +1,26 @@
+export default function LoadingDots({
+  className,
+  colors = ['#00b5ff', '#e3006d', '#f7931e'],
+}: {
+  className?: string;
+  colors?: [string, string, string];
+}) {
+  return (
+    <div className={className}>
+      <div
+        style={{
+          width: `30px`,
+          aspectRatio: '2',
+          background: `
+            radial-gradient(circle closest-side, ${colors[0]} 90%, transparent) 0% 50%,
+            radial-gradient(circle closest-side, ${colors[1]} 90%, transparent) 50% 50%,
+            radial-gradient(circle closest-side, ${colors[2]} 90%, transparent) 100% 50%
+          `,
+          backgroundSize: 'calc(100%/3) 50%',
+          backgroundRepeat: 'no-repeat',
+          animation: 'dots-loading 1s infinite linear',
+        }}
+      />
+    </div>
+  );
+}

src/components/_shared/image-upload/UploadImage.tsx

@@ -1,4 +1,5 @@
 import FileDropzone from '@/components/_shared/file-dropzone/FileDropzone';
+import LoadingDots from '@/components/_shared/LoadingDots';
 import { notify } from '@/components/_shared/notify';
 import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -10,24 +11,28 @@ export function UploadImage({ onDone, uploadAction }: {
   uploadAction?: (file: File) => Promise<string>
 }) {
   const { t } = useTranslation();
-  const handleFileChange = useCallback(async (files: File[]) => {
+  const [loading, setLoading] = React.useState(false);
+  const handleFileChange = useCallback(async(files: File[]) => {
+    setLoading(true);
     const file = files[0];
 
-    if (!file) return;
+    if(!file) return;
 
     try {
       const url = await uploadAction?.(file);
 
-      if (!url) {
+      if(!url) {
         onDone?.(URL.createObjectURL(file));
         return;
       }
 
       onDone?.(url);
       // eslint-disable-next-line
-    } catch (e: any) {
+    } catch(e: any) {
       notify.error(e.message);
       onDone?.(URL.createObjectURL(file));
+    } finally {
+      setLoading(false);
     }
 
   }, [onDone, uploadAction]);
@@ -39,6 +44,10 @@ export function UploadImage({ onDone, uploadAction }: {
         onChange={handleFileChange}
         accept={ALLOWED_IMAGE_EXTENSIONS.join(',')}
       />
+      {loading &&
+        <div className={'absolute bg-bg-body z-10 opacity-90 flex items-center inset-0 justify-center w-full h-full'}>
+          <LoadingDots />
+        </div>}
     </div>
 
   );

src/components/_shared/view-icon/ChangeIconPopover.tsx

@@ -1,6 +1,7 @@
 import { ViewIconType } from '@/application/types';
 import { EmojiPicker } from '@/components/_shared/emoji-picker';
 import IconPicker from '@/components/_shared/icon-picker/IconPicker';
+import { UploadImage } from '@/components/_shared/image-upload';
 import { Popover } from '@/components/_shared/popover';
 import { TabPanel, ViewTab, ViewTabs } from '@/components/_shared/tabs/ViewTabs';
 import { Button } from '@mui/material';
@@ -8,7 +9,7 @@ import { PopoverProps } from '@mui/material/Popover';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-function ChangeIconPopover ({
+function ChangeIconPopover({
   open,
   anchorEl,
   onClose,
@@ -20,16 +21,20 @@ function ChangeIconPopover ({
   removeIcon,
   anchorPosition,
   hideRemove,
+  uploadEnabled,
+  onUploadFile,
 }: {
   open: boolean,
   anchorEl?: HTMLElement | null,
   anchorPosition?: PopoverProps['anchorPosition'],
   onClose: () => void,
-  defaultType: 'emoji' | 'icon',
+  defaultType: 'emoji' | 'icon' | 'upload',
   emojiEnabled?: boolean,
+  uploadEnabled?: boolean,
   iconEnabled?: boolean,
   popoverProps?: Partial<PopoverProps>,
   onSelectIcon?: (icon: { ty: ViewIconType, value: string, color?: string, content?: string }) => void,
+  onUploadFile?: (file: File) => Promise<string>,
   removeIcon?: () => void,
   hideRemove?: boolean,
 }) {
@@ -80,6 +85,16 @@ function ChangeIconPopover ({
               />
             )
           }
+          {
+            uploadEnabled && (
+              <ViewTab
+                className={'flex items-center flex-row justify-center gap-1.5'}
+                value={'upload'}
+                label={'Upload'}
+                data-testid="upload-tab"
+              />
+            )
+          }
 
         </ViewTabs>
         {!hideRemove && <Button
@@ -126,6 +141,24 @@ function ChangeIconPopover ({
           hideRemove
         />
       </TabPanel>}
+      {uploadEnabled && <TabPanel
+        index={'upload'}
+        value={value}
+      >
+        <div className={'pt-4 relative pb-2'}>
+          <UploadImage
+            onDone={(url) => {
+              onSelectIcon?.({
+                ty: ViewIconType.URL,
+                value: url,
+              });
+              handleClose();
+            }}
+            uploadAction={onUploadFile}
+          />
+        </div>
+
+      </TabPanel>}
     </Popover>
   );
 }

src/components/app/DatabaseView.tsx

@@ -16,17 +16,17 @@ import React, { Suspense, useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import ViewMetaPreview from 'src/components/view-meta/ViewMetaPreview';
 
-function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
+function DatabaseView({ viewMeta, uploadFile, ...props }: ViewComponentProps) {
   const [search, setSearch] = useSearchParams();
   const outline = useAppOutline();
   const iidIndex = viewMeta.viewId;
   const view = useMemo(() => {
-    if (!outline || !iidIndex) return;
+    if(!outline || !iidIndex) return;
     return findView(outline || [], iidIndex);
   }, [outline, iidIndex]);
 
   const visibleViewIds = useMemo(() => {
-    if (!view) return [];
+    if(!view) return [];
     return [view.view_id, ...(view.children?.map(v => v.view_id) || [])];
   }, [view]);
 
@@ -58,11 +58,11 @@ function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
   const doc = props.doc;
   const database = doc?.getMap(YjsEditorKey.data_section)?.get(YjsEditorKey.database) as YDatabase;
   const skeleton = useMemo(() => {
-    if (rowId) {
+    if(rowId) {
       return <DocumentSkeleton />;
     }
 
-    switch (viewMeta.layout) {
+    switch(viewMeta.layout) {
       case ViewLayout.Grid:
         return <GridSkeleton includeTitle={false} />;
       case ViewLayout.Board:
@@ -74,7 +74,7 @@ function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
     }
   }, [rowId, viewMeta.layout]);
 
-  if (!viewId || !doc || !database) return null;
+  if(!viewId || !doc || !database) return null;
 
   return (
     <div
@@ -87,6 +87,7 @@ function DatabaseView ({ viewMeta, ...props }: ViewComponentProps) {
         {...viewMeta}
         readOnly={props.readOnly}
         updatePage={props.updatePage}
+        uploadFile={uploadFile}
       />}
 
       <Suspense fallback={skeleton}>

src/components/app/outline/ViewItem.tsx

@@ -40,7 +40,7 @@ function ViewItem({ view, width, level = 0, renderExtra, expandIds, toggleExpand
   const selectedViewId = useAppViewId();
   const viewId = view.view_id;
   const selected = selectedViewId === viewId;
-  const { updatePage } = useAppHandlers();
+  const { updatePage, uploadFile } = useAppHandlers();
 
   const isExpanded = expandIds.includes(viewId);
   const [hovered, setHovered] = React.useState<boolean>(false);
@@ -57,6 +57,11 @@ function ViewItem({ view, width, level = 0, renderExtra, expandIds, toggleExpand
     /></span>;
   }, [isExpanded, level, toggleExpand, viewId]);
 
+  const onUploadFile = useCallback(async(file: File) => {
+    if(!uploadFile) return Promise.reject();
+    return uploadFile(viewId, file);
+  }, [uploadFile, viewId]);
+
   const renderItem = useMemo(() => {
     if(!view) return null;
 
@@ -165,6 +170,8 @@ function ViewItem({ view, width, level = 0, renderExtra, expandIds, toggleExpand
           onClose={() => {
             setIconPopoverAnchorEl(null);
           }}
+          uploadEnabled
+          onUploadFile={onUploadFile}
           popoverProps={popoverProps}
           onSelectIcon={(icon) => {
             if(icon.ty === ViewIconType.Icon) {

src/components/app/view-actions/MorePageActions.tsx

@@ -38,20 +38,35 @@ function MorePageActions({ view, onClose }: {
 
   const {
     updatePage,
+    uploadFile,
   } = useAppHandlers();
   const { t } = useTranslation();
 
-  const handleChangeIcon = useCallback(async (icon: { ty: ViewIconType, value: string }) => {
+  const viewId = view.view_id;
+
+  const onUploadFile = useCallback(async(file: File) => {
+    if(!uploadFile) return Promise.reject();
+    return uploadFile(viewId, file);
+  }, [uploadFile, viewId]);
+
+  const handleChangeIcon = useCallback(async(icon: { ty: ViewIconType, value: string, color?: string }) => {
     try {
       await updatePage?.(view.view_id, {
-        icon: icon,
+        icon: icon.ty === ViewIconType.Icon ? {
+          ty: ViewIconType.Icon,
+          value: JSON.stringify({
+            color: icon.color,
+            groupName: icon.value.split('/')[0],
+            iconName: icon.value.split('/')[1],
+          }),
+        } : icon,
         name: view.name,
         extra: view.extra || {},
       });
       setIconPopoverAnchorEl(null);
       onClose?.();
       // eslint-disable-next-line
-    } catch (e: any) {
+    } catch(e: any) {
       notify.error(e);
     }
   }, [onClose, updatePage, view.extra, view.name, view.view_id]);
@@ -63,14 +78,14 @@ function MorePageActions({ view, onClose }: {
   const actions = useMemo(() => {
     return [{
       label: t('button.rename'),
-      icon: <EditIcon/>,
+      icon: <EditIcon />,
       onClick: () => {
         setRenameModalOpen(true);
         onClose?.();
       },
     }, {
       label: t('disclosureAction.changeIcon'),
-      icon: <ChangeIcon/>,
+      icon: <ChangeIcon />,
       onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
         setIconPopoverAnchorEl(e.currentTarget);
       },
@@ -96,25 +111,25 @@ function MorePageActions({ view, onClose }: {
         viewId={view.view_id}
         movePopoverOrigins={popoverProps}
       />
-      <Divider className={'w-full'}/>
+      <Divider className={'w-full'} />
       <Button
         size={'small'}
 
         className={'px-3 py-1 justify-start'}
         color={'inherit'}
         onClick={() => {
-          if (!currentWorkspaceId) return;
+          if(!currentWorkspaceId) return;
           onClose?.();
           window.open(`/app/${currentWorkspaceId}/${view.view_id}`, '_blank');
 
         }}
-        startIcon={<OpenInBrowserIcon className={'w-4 h-4'}/>}
+        startIcon={<OpenInBrowserIcon className={'w-4 h-4'} />}
       >
         {t('disclosureAction.openNewTab')}
       </Button>
       <Suspense fallback={null}>
         <ChangeIconPopover
-          iconEnabled={false}
+          iconEnabled
           defaultType={'emoji'}
           open={openIconPopover}
           anchorEl={iconPopoverAnchorEl}
@@ -122,6 +137,8 @@ function MorePageActions({ view, onClose }: {
             onClose?.();
             setIconPopoverAnchorEl(null);
           }}
+          onUploadFile={onUploadFile}
+          uploadEnabled
           popoverProps={popoverProps}
           onSelectIcon={handleChangeIcon}
           removeIcon={handleRemoveIcon}

src/components/document/Document.tsx

@@ -24,6 +24,7 @@ export const Document = (props: DocumentProps) => {
     updatePage,
     onRendered,
     onEditorConnected,
+    uploadFile,
   } = props;
   const blockId = search.get('blockId') || undefined;
 
@@ -76,6 +77,7 @@ export const Document = (props: DocumentProps) => {
         updatePage={updatePage}
         onEnter={readOnly ? undefined : handleEnter}
         maxWidth={988}
+        uploadFile={uploadFile}
       />
       <Suspense fallback={<EditorSkeleton />}>
         <div className={'flex justify-center w-full'}>

src/components/view-meta/AddIconCover.tsx

@@ -15,6 +15,7 @@ function AddIconCover({
   setIconAnchorEl,
   maxWidth,
   visible,
+  onUploadFile,
 }: {
   visible: boolean;
   hasIcon: boolean;
@@ -24,6 +25,7 @@ function AddIconCover({
   iconAnchorEl: HTMLElement | null;
   setIconAnchorEl: (el: HTMLElement | null) => void;
   maxWidth?: number;
+  onUploadFile: (file: File) => Promise<string>;
 }) {
   const { t } = useTranslation();
 
@@ -80,6 +82,8 @@ function AddIconCover({
           setIconAnchorEl(null);
           onUpdateIcon?.({ ty: ViewIconType.Emoji, value: '' });
         }}
+        uploadEnabled
+        onUploadFile={onUploadFile}
       />
     </>
 

src/components/view-meta/ViewMetaPreview.tsx

@@ -2,13 +2,13 @@ import { CoverType, ViewIconType, ViewLayout, ViewMetaCover, ViewMetaIcon, ViewM
 import { notify } from '@/components/_shared/notify';
 import TitleEditable from '@/components/view-meta/TitleEditable';
 import ViewCover from '@/components/view-meta/ViewCover';
-import React, { lazy, Suspense, useEffect, useMemo } from 'react';
+import React, { lazy, Suspense, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import PageIcon from '@/components/_shared/view-icon/PageIcon';
 
 const AddIconCover = lazy(() => import('@/components/view-meta/AddIconCover'));
 
-export function ViewMetaPreview ({
+export function ViewMetaPreview({
   icon: iconProp,
   cover: coverProp,
   name,
@@ -18,6 +18,7 @@ export function ViewMetaPreview ({
   updatePage,
   onEnter,
   maxWidth,
+  uploadFile,
 }: ViewMetaProps) {
   const [iconAnchorEl, setIconAnchorEl] = React.useState<null | HTMLElement>(null);
   const [cover, setCover] = React.useState<ViewMetaCover | null>(coverProp || null);
@@ -32,21 +33,21 @@ export function ViewMetaPreview ({
   }, [iconProp]);
 
   const coverType = useMemo(() => {
-    if (cover && [CoverType.NormalColor, CoverType.GradientColor].includes(cover.type)) {
+    if(cover && [CoverType.NormalColor, CoverType.GradientColor].includes(cover.type)) {
       return 'color';
     }
 
-    if (CoverType.BuildInImage === cover?.type) {
+    if(CoverType.BuildInImage === cover?.type) {
       return 'built_in';
     }
 
-    if (cover && [CoverType.CustomImage, CoverType.UpsplashImage].includes(cover.type)) {
+    if(cover && [CoverType.CustomImage, CoverType.UpsplashImage].includes(cover.type)) {
       return 'custom';
     }
   }, [cover]);
 
   const coverValue = useMemo(() => {
-    if (coverType === CoverType.BuildInImage) {
+    if(coverType === CoverType.BuildInImage) {
       return {
         1: '/covers/m_cover_image_1.png',
         2: '/covers/m_cover_image_2.png',
@@ -63,8 +64,8 @@ export function ViewMetaPreview ({
 
   const [isHover, setIsHover] = React.useState(false);
 
-  const handleUpdateIcon = React.useCallback(async (icon: { ty: ViewIconType, value: string }) => {
+  const handleUpdateIcon = React.useCallback(async(icon: { ty: ViewIconType, value: string }) => {
-    if (!updatePage || !viewId) return;
+    if(!updatePage || !viewId) return;
     setIcon(icon);
     try {
       await updatePage(viewId, {
@@ -73,15 +74,15 @@ export function ViewMetaPreview ({
         extra: extra || {},
       });
       // eslint-disable-next-line
-    } catch (e: any) {
+    } catch(e: any) {
       notify.error(e.message);
     }
   }, [updatePage, viewId, name, extra]);
 
-  const handleUpdateName = React.useCallback(async (newName: string) => {
+  const handleUpdateName = React.useCallback(async(newName: string) => {
-    if (!updatePage || !viewId) return;
+    if(!updatePage || !viewId) return;
     try {
-      if (name === newName) return;
+      if(name === newName) return;
       await updatePage(viewId, {
         icon: icon || {
           ty: ViewIconType.Emoji,
@@ -91,16 +92,16 @@ export function ViewMetaPreview ({
         extra: extra || {},
       });
       // eslint-disable-next-line
-    } catch (e: any) {
+    } catch(e: any) {
       notify.error(e.message);
     }
   }, [name, updatePage, viewId, icon, extra]);
 
-  const handleUpdateCover = React.useCallback(async (cover?: {
+  const handleUpdateCover = React.useCallback(async(cover?: {
     type: CoverType;
     value: string;
   }) => {
-    if (!updatePage || !viewId) return;
+    if(!updatePage || !viewId) return;
     setCover(cover ? cover : null);
 
     try {
@@ -116,11 +117,16 @@ export function ViewMetaPreview ({
         },
       });
       // eslint-disable-next-line
-    } catch (e: any) {
+    } catch(e: any) {
       notify.error(e.message);
     }
   }, [extra, icon, name, updatePage, viewId]);
 
+  const onUploadFile = useCallback(async(file: File) => {
+    if(!uploadFile) return Promise.reject();
+    return uploadFile(file);
+  }, [uploadFile]);
+
   const ref = React.useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -133,13 +139,13 @@ export function ViewMetaPreview ({
       setIsHover(false);
     };
 
-    if (el) {
+    if(el) {
       el.addEventListener('mouseenter', handleMouseEnter);
       el.addEventListener('mouseleave', handleMouseLeave);
     }
 
     return () => {
-      if (el) {
+      if(el) {
         el.removeEventListener('mouseenter', handleMouseEnter);
         el.removeEventListener('mouseleave', handleMouseLeave);
       }
@@ -174,8 +180,10 @@ export function ViewMetaPreview ({
             maxWidth={maxWidth}
             iconAnchorEl={iconAnchorEl}
             setIconAnchorEl={setIconAnchorEl}
+            onUploadFile={onUploadFile}
           /></Suspense>}
 
+
         </div>
         <div
           className={`relative mb-6 flex items-center overflow-visible w-full justify-center`}
@@ -192,7 +200,7 @@ export function ViewMetaPreview ({
             {icon?.value ?
               <div
                 onClick={e => {
-                  if (readOnly) return;
+                  if(readOnly) return;
                   setIconAnchorEl(e.currentTarget);
                 }}
                 className={`view-icon flex h-[1.25em] px-1.5 items-center justify-center ${readOnly ? 'cursor-default' : 'cursor-pointer hover:bg-fill-list-hover '}`}