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,7 +11,9 @@ export function UploadImage({ onDone, uploadAction }: {
   uploadAction?: (file: File) => Promise<string>
 }) {
   const { t } = useTranslation();
+  const [loading, setLoading] = React.useState(false);
   const handleFileChange = useCallback(async(files: File[]) => {
+    setLoading(true);
     const file = files[0];
 
     if(!file) return;
@@ -28,6 +31,8 @@ export function UploadImage({ onDone, uploadAction }: {
     } 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';
@@ -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,7 +16,7 @@ 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;
@@ -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,13 +38,28 @@ 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 || {},
       });
@@ -114,7 +129,7 @@ function MorePageActions({ view, onClose }: {
       </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,7 +2,7 @@ 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';
 
@@ -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);
@@ -121,6 +122,11 @@ export function ViewMetaPreview ({
     }
   }, [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(() => {
@@ -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`}