chore: update user profile page

api/v1/docs.go

@@ -2687,9 +2687,6 @@ const docTemplate = `{
         "v1.CreateResourceRequest": {
             "type": "object",
             "properties": {
-                "downloadToLocal": {
-                    "type": "boolean"
-                },
                 "externalLink": {
                     "type": "string"
                 },

api/v1/resource.go

@@ -6,7 +6,6 @@ import (
 	"encoding/json"
 	"fmt"
 	"io"
-	"mime"
 	"net/http"
 	"net/url"
 	"os"
@@ -54,7 +53,6 @@ type CreateResourceRequest struct {
 	InternalPath string `json:"internalPath"`
 	ExternalLink string `json:"externalLink"`
 	Type         string `json:"type"`
-	DownloadToLocal bool   `json:"downloadToLocal"`
 }
 
 type FindResourceRequest struct {
@@ -172,41 +170,6 @@ func (s *APIV1Service) CreateResource(c echo.Context) error {
 		if linkURL.Scheme != "http" && linkURL.Scheme != "https" {
 			return echo.NewHTTPError(http.StatusBadRequest, "Invalid external link scheme")
 		}
-
-		if request.DownloadToLocal {
-			resp, err := http.Get(linkURL.String())
-			if err != nil {
-				return echo.NewHTTPError(http.StatusBadRequest, fmt.Sprintf("Failed to request %s", request.ExternalLink))
-			}
-			defer resp.Body.Close()
-
-			blob, err := io.ReadAll(resp.Body)
-			if err != nil {
-				return echo.NewHTTPError(http.StatusBadRequest, fmt.Sprintf("Failed to read %s", request.ExternalLink))
-			}
-
-			mediaType, _, err := mime.ParseMediaType(resp.Header.Get("Content-Type"))
-			if err != nil {
-				return echo.NewHTTPError(http.StatusBadRequest, fmt.Sprintf("Failed to read mime from %s", request.ExternalLink))
-			}
-			create.Type = mediaType
-
-			filename := path.Base(linkURL.Path)
-			if path.Ext(filename) == "" {
-				extensions, _ := mime.ExtensionsByType(mediaType)
-				if len(extensions) > 0 {
-					filename += extensions[0]
-				}
-			}
-			create.Filename = filename
-			create.ExternalLink = ""
-			create.Size = int64(len(blob))
-
-			err = SaveResourceBlob(ctx, s.Store, create, bytes.NewReader(blob))
-			if err != nil {
-				return echo.NewHTTPError(http.StatusInternalServerError, "Failed to save resource").SetInternal(err)
-			}
-		}
 	}
 
 	resource, err := s.Store.CreateResource(ctx, create)

api/v1/swagger.yaml

@@ -265,8 +265,6 @@ definitions:
     type: object
   v1.CreateResourceRequest:
     properties:
-      downloadToLocal:
-        type: boolean
       externalLink:
         type: string
       filename:

web/src/components/CreateResourceDialog.tsx

@@ -13,7 +13,7 @@ interface Props extends DialogProps {
   onConfirm?: (resourceList: Resource[]) => void;
 }
 
-type SelectedMode = "local-file" | "external-link" | "download-link";
+type SelectedMode = "local-file" | "external-link";
 
 interface State {
   selectedMode: SelectedMode;
@@ -32,7 +32,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
     filename: "",
     externalLink: "",
     type: "",
-    downloadToLocal: false,
   });
   const [fileList, setFileList] = useState<File[]>([]);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -71,7 +70,7 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
     destroy();
   };
 
-  const handleSelectedModeChanged = (mode: "local-file" | "external-link" | "download-link") => {
+  const handleSelectedModeChanged = (mode: "local-file" | "external-link") => {
     setState((state) => {
       return {
         ...state,
@@ -130,10 +129,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
       if (resourceCreate.filename === "" || resourceCreate.externalLink === "" || resourceCreate.type === "") {
         return false;
       }
-    } else if (state.selectedMode === "download-link") {
-      if (resourceCreate.externalLink === "") {
-        return false;
-      }
     }
     return true;
   };
@@ -166,9 +161,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
           createdResourceList.push(resource);
         }
       } else {
-        if (state.selectedMode === "download-link") {
-          resourceCreate.downloadToLocal = true;
-        }
         const resource = await resourceStore.createResource(resourceCreate);
         createdResourceList.push(resource);
       }
@@ -203,7 +195,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
         >
           <Option value="local-file">{t("resource.create-dialog.local-file.option")}</Option>
           <Option value="external-link">{t("resource.create-dialog.external-link.option")}</Option>
-          <Option value="download-link">{t("resource.create-dialog.download-link.option")}</Option>
         </Select>
 
         {state.selectedMode === "local-file" && (
@@ -288,21 +279,6 @@ const CreateResourceDialog: React.FC<Props> = (props: Props) => {
           </>
         )}
 
-        {state.selectedMode === "download-link" && (
-          <>
-            <Typography className="!mb-1" level="body-md">
-              {t("resource.create-dialog.external-link.link")}
-            </Typography>
-            <Input
-              className="mb-2"
-              placeholder={t("resource.create-dialog.external-link.link-placeholder")}
-              value={resourceCreate.externalLink}
-              onChange={handleExternalLinkChanged}
-              fullWidth
-            />
-          </>
-        )}
-
         <div className="mt-2 w-full flex flex-row justify-end items-center space-x-1">
           <Button variant="plain" color="neutral" onClick={handleCloseDialog}>
             {t("common.cancel")}

web/src/components/Memo.tsx

@@ -216,17 +216,15 @@ const Memo: React.FC<Props> = (props: Props) => {
   };
 
   const handleMemoCreatedTimeClick = (e: React.MouseEvent) => {
-    if (e.altKey) {
     e.preventDefault();
     showChangeMemoCreatedTsDialog(memo.id);
-    }
   };
 
   return (
     <>
       <div className={`memo-wrapper ${"memos-" + memo.id} ${memo.pinned && !readonly ? "pinned" : ""}`} ref={memoContainerRef}>
         <div className="memo-top-wrapper">
-          <p className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
+          <div className="w-full max-w-[calc(100%-20px)] flex flex-row justify-start items-center mr-1">
             {creator && (
               <>
                 <Link className="flex flex-row justify-start items-center" to={`/u/${memo.creatorUsername}`}>
@@ -236,10 +234,10 @@ const Memo: React.FC<Props> = (props: Props) => {
                 <Icon.Dot className="w-4 h-auto text-gray-400 dark:text-zinc-400" />
               </>
             )}
-            <span className="text-sm text-gray-400" onClick={handleMemoCreatedTimeClick}>
+            <span className="text-sm text-gray-400 select-none" onDoubleClick={handleMemoCreatedTimeClick}>
               {displayTime}
             </span>
-          </p>
+          </div>
           <div className="btns-container space-x-2">
             {!readonly && (
               <>

web/src/components/Settings/StorageSection.tsx

-import { Divider, Option, Select } from "@mui/joy";
+import { Divider, IconButton, Radio, RadioGroup } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
 import * as api from "@/helpers/api";
@@ -6,6 +6,7 @@ import { useGlobalStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 import showCreateStorageServiceDialog from "../CreateStorageServiceDialog";
 import { showCommonDialog } from "../Dialog/CommonDialog";
+import Icon from "../Icon";
 import LearnMore from "../LearnMore";
 import showUpdateLocalStorageDialog from "../UpdateLocalStorageDialog";
 import Dropdown from "../kit/Dropdown";
@@ -58,23 +59,26 @@ const StorageSection = () => {
       <div className="mt-4 mb-2 w-full flex flex-row justify-start items-center">
         <span className="font-mono text-sm text-gray-400 mr-2">{t("setting.storage-section.current-storage")}</span>
       </div>
-      <Select
-        className="w-full mb-4"
+      <RadioGroup
+        className="w-full"
         value={storageServiceId}
-        onChange={(_, storageId) => {
-          handleActiveStorageServiceChanged(storageId ?? storageServiceId);
+        onChange={(event) => {
+          handleActiveStorageServiceChanged(Number(event.target.value));
         }}
       >
-        <Option value={0}>{t("setting.storage-section.type-database")}</Option>
-        <Option value={-1}>{t("setting.storage-section.type-local")}</Option>
+        <div className="w-full flex flex-row justify-start items-center gap-x-2">
+          <Radio value={"-1"} label={t("setting.storage-section.type-local")} />
+          <IconButton size="sm" onClick={() => showUpdateLocalStorageDialog(systemStatus.localStoragePath)}>
+            <Icon.PenBox className="w-4 h-auto" />
+          </IconButton>
+        </div>
+        <Radio value={"0"} label={t("setting.storage-section.type-database")} />
         {storageList.map((storage) => (
-          <Option key={storage.id} value={storage.id}>
-            {storage.name}
-          </Option>
+          <Radio key={storage.id} value={storage.id} label={storage.name} />
         ))}
-      </Select>
-      <Divider />
-      <div className="mt-4 mb-2 w-full flex flex-row justify-start items-center gap-1">
+      </RadioGroup>
+      <Divider className="!my-4" />
+      <div className="mb-2 w-full flex flex-row justify-start items-center gap-1">
         <span className="font-mono text-sm text-gray-400">{t("setting.storage-section.storage-services-list")}</span>
         <LearnMore url="https://usememos.com/docs/storage" />
         <button className="btn-normal px-2 py-0 ml-1" onClick={() => showCreateStorageServiceDialog(undefined, fetchStorageList)}>
@@ -82,30 +86,6 @@ const StorageSection = () => {
         </button>
       </div>
       <div className="mt-2 w-full flex flex-col">
-        <div
-          className={
-            storageServiceId !== -1 ? "hidden" : "py-2 w-full border-t dark:border-zinc-700 flex flex-row items-center justify-between"
-          }
-        >
-          <div className="flex flex-row items-center">
-            <p className="ml-2">{t("setting.storage-section.type-local")}</p>
-          </div>
-          <div className="flex flex-row items-center">
-            <Dropdown
-              actionsClassName="!w-28"
-              actions={
-                <>
-                  <button
-                    className="w-full text-left text-sm leading-6 py-1 px-3 cursor-pointer rounded hover:bg-gray-100 dark:hover:bg-zinc-600"
-                    onClick={() => showUpdateLocalStorageDialog(systemStatus.localStoragePath)}
-                  >
-                    {t("common.edit")}
-                  </button>
-                </>
-              }
-            />
-          </div>
-        </div>
         {storageList.map((storage) => (
           <div
             key={storage.id}

web/src/components/UpdateLocalStorageDialog.tsx

@@ -50,8 +50,8 @@ const UpdateLocalStorageDialog: React.FC<Props> = (props: Props) => {
       </div>
       <div className="dialog-content-container max-w-xs">
         <p className="text-sm break-words mb-1">{t("setting.storage-section.update-local-path-description")}</p>
-        <div className="flex flex-row">
-          <p className="text-sm text-gray-400 mb-2 break-all">e.g. {"assets/{filename}"}</p>
+        <div className="flex flex-row items-center mb-2 gap-x-2">
+          <span className="text-sm text-gray-400 break-all">e.g. {"assets/{timestamp}_{filename}"}</span>
           <LearnMore url="https://usememos.com/docs/local-storage" />
         </div>
         <Input

web/src/locales/de.json

@@ -141,9 +141,6 @@
         "file-name-placeholder": "Dateiname",
         "type": "Typ",
         "type-placeholder": "Dateityp"
-      },
-      "download-link": {
-        "option": "Download-Link"
       }
     }
   },

web/src/locales/en.json

@@ -142,9 +142,6 @@
         "file-name-placeholder": "File name",
         "type": "Type",
         "type-placeholder": "File type"
-      },
-      "download-link": {
-        "option": "Download link"
       }
     }
   },

web/src/locales/hi.json

@@ -141,9 +141,6 @@
         "file-name-placeholder": "फ़ाइल का नाम",
         "type": "प्रकार",
         "type-placeholder": "फ़ाइल प्रकार"
-      },
-      "download-link": {
-        "option": "डाउनलोड लिंक"
       }
     }
   },

web/src/locales/hr.json

@@ -141,9 +141,6 @@
         "file-name-placeholder": "Ime fajla",
         "type": "Tip",
         "type-placeholder": "Tip fajla"
-      },
-      "download-link": {
-        "option": "Link za preuzimanje"
       }
     }
   },

web/src/locales/it.json

@@ -141,9 +141,6 @@
         "file-name-placeholder": "Nome file",
         "type": "Tipo",
         "type-placeholder": "Tipo file"
-      },
-      "download-link": {
-        "option": "Link di download"
       }
     }
   },

web/src/locales/ja.json

@@ -142,9 +142,6 @@
         "file-name-placeholder": "ファイル名",
         "type": "タイプ",
         "type-placeholder": "ファイルタイプ"
-      },
-      "download-link": {
-        "option": "ダウンロードリンク"
       }
     }
   },

web/src/locales/ko.json

@@ -141,9 +141,6 @@
         "file-name-placeholder": "파일 이름",
         "type": "종류",
         "type-placeholder": "파일 종류"
-      },
-      "download-link": {
-        "option": "링크 다운로드"
       }
     }
   },

web/src/locales/ru.json

@@ -133,9 +133,6 @@
         "type": "Тип",
         "type-placeholder": "Тип файла",
         "link-placeholder": "https://the.link.to/your/resource"
-      },
-      "download-link": {
-        "option": "Ссылка на скачивание"
       }
     }
   },

web/src/locales/zh-Hans.json

@@ -255,9 +255,6 @@
         "type": "类型",
         "type-placeholder": "文件类型"
       },
-      "download-link": {
-        "option": "从外部链接下载"
-      },
       "local-file": {
         "choose": "选择文件...",
         "option": "本地文件"

web/src/locales/zh-Hant.json

@@ -141,9 +141,6 @@
         "file-name-placeholder": "檔案名稱",
         "type": "類型",
         "type-placeholder": "檔案類型"
-      },
-      "download-link": {
-        "option": "從外部連結下載"
       }
     }
   },

web/src/pages/Auth.tsx

@@ -133,16 +133,17 @@ const Auth = () => {
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
         <div className="w-full py-4 grow flex flex-col justify-center items-center">
           <div className="w-full flex flex-col justify-center items-center mb-2">
-            <img className="h-20 w-auto rounded-full shadow mr-1" src={systemStatus.customizedProfile.logoUrl} alt="" />
-            <p className="text-3xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
+            <img className="h-20 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
+            <p className="mt-2 text-3xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
           </div>
           {!disablePasswordLogin && (
-            <form className="w-full mt-4" onSubmit={handleFormSubmit}>
+            <form className="w-full mt-2" onSubmit={handleFormSubmit}>
               <div className="flex flex-col justify-start items-start w-full gap-4">
                 <Input
                   className="w-full"
                   size="lg"
                   type="text"
+                  disabled={actionBtnLoadingState.isLoading}
                   placeholder={t("common.username")}
                   value={username}
                   onChange={handleUsernameInputChanged}
@@ -152,6 +153,7 @@ const Auth = () => {
                   className="w-full"
                   size="lg"
                   type="password"
+                  disabled={actionBtnLoadingState.isLoading}
                   placeholder={t("common.password")}
                   value={password}
                   onChange={handlePasswordInputChanged}

web/src/pages/DailyReview.tsx

@@ -91,7 +91,7 @@ const DailyReview = () => {
       <div className="w-full flex flex-col justify-start items-start px-4 py-3 rounded-xl bg-white dark:bg-zinc-700 text-black dark:text-gray-300">
         <div className="relative w-full flex flex-row justify-between items-center">
           <p
-            className="px-2 py-1 flex flex-row justify-start items-center cursor-pointer select-none rounded hover:bg-gray-100 dark:hover:bg-zinc-700"
+            className="px-2 py-1 flex flex-row justify-start items-center cursor-pointer select-none rounded opacity-80 hover:bg-gray-100 dark:hover:bg-zinc-700"
             onClick={() => toggleShowDatePicker()}
           >
             <Icon.Calendar className="w-5 h-auto mr-1" /> {t("daily-review.title")}

web/src/pages/Explore.tsx

@@ -96,7 +96,7 @@ const Explore = () => {
             return <Memo key={`${memo.id}-${memo.displayTs}`} memo={memo} />;
           })}
           {isComplete ? (
-            memos.length === 0 && (
+            sortedMemos.length === 0 && (
               <div className="w-full mt-16 mb-8 flex flex-col justify-center items-center italic">
                 <Empty />
                 <p className="mt-4 text-gray-600 dark:text-gray-400">{t("message.no-data")}</p>

web/src/pages/MemoDetail.tsx

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
-import { Link, useLocation, useParams } from "react-router-dom";
-import Icon from "@/components/Icon";
+import { useParams } from "react-router-dom";
+import FloatingNavButton from "@/components/FloatingNavButton";
 import Memo from "@/components/Memo";
+import UserAvatar from "@/components/UserAvatar";
 import useLoading from "@/hooks/useLoading";
-import { useGlobalStore, useMemoStore } from "@/store/module";
-import { useTranslate } from "@/utils/i18n";
+import { useMemoStore, useUserStore } from "@/store/module";
 
 const MemoDetail = () => {
-  const t = useTranslate();
   const params = useParams();
-  const location = useLocation();
-  const globalStore = useGlobalStore();
   const memoStore = useMemoStore();
+  const userStore = useUserStore();
   const loadingState = useLoading();
-  const customizedProfile = globalStore.state.systemStatus.customizedProfile;
+  const [user, setUser] = useState<User>();
   const memoId = Number(params.memoId);
   const memo = memoStore.state.memos.find((memo) => memo.id === memoId);
 
@@ -22,7 +20,9 @@ const MemoDetail = () => {
     if (memoId && !isNaN(memoId)) {
       memoStore
         .fetchMemoById(memoId)
-        .then(() => {
+        .then(async (memo) => {
+          const user = await userStore.getUserByUsername(memo.creatorUsername);
+          setUser(user);
           loadingState.setFinish();
         })
         .catch((error) => {
@@ -30,15 +30,16 @@ const MemoDetail = () => {
           toast.error(error.response.data.message);
         });
     }
-  }, [location]);
+  }, [memoId]);
 
   return (
+    <>
       <section className="relative top-0 w-full min-h-full overflow-x-hidden bg-zinc-100 dark:bg-zinc-800">
         <div className="relative w-full min-h-full mx-auto flex flex-col justify-start items-center pb-6">
-        <div className="max-w-2xl w-full flex flex-row justify-center items-center px-4 py-2 mt-2 bg-zinc-100 dark:bg-zinc-800">
-          <div className="detail-header flex flex-row justify-start items-center">
-            <img className="detail-logo h-10 w-auto rounded-lg mr-2" src={customizedProfile.logoUrl} alt="" />
-            <p className="detail-name text-4xl tracking-wide text-black dark:text-white">{customizedProfile.name}</p>
+          <div className="w-full flex flex-col justify-start items-center py-8">
+            <UserAvatar className="!w-20 h-auto mb-4 drop-shadow" avatarUrl={user?.avatarUrl} />
+            <div>
+              <p className="text-2xl font-bold text-gray-700 dark:text-gray-300">{user?.nickname}</p>
             </div>
           </div>
           {!loadingState.isLoading &&
@@ -47,14 +48,6 @@ const MemoDetail = () => {
                 <main className="relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4">
                   <Memo memo={memo} />
                 </main>
-              <div className="mt-4 w-full flex flex-row justify-center items-center gap-2">
-                <Link
-                  to="/"
-                  className="flex flex-row justify-center items-center text-gray-600 dark:text-gray-300 text-sm px-3 hover:opacity-80 hover:underline"
-                >
-                  <Icon.Home className="w-4 h-auto mr-1 -mt-0.5" /> {t("router.back-to-home")}
-                </Link>
-              </div>
               </>
             ) : (
               <>
@@ -63,6 +56,9 @@ const MemoDetail = () => {
             ))}
         </div>
       </section>
+
+      <FloatingNavButton />
+    </>
   );
 };
 

web/src/pages/UserProfile.tsx

@@ -39,7 +39,7 @@ const UserProfile = () => {
                   <div className="w-full flex flex-row justify-start items-start">
                     <div className="flex-grow shrink w-full">
                       <div className="w-full flex flex-col justify-start items-center py-8">
-                        <UserAvatar className="w-16 h-auto mb-4 drop-shadow" avatarUrl={user?.avatarUrl} />
+                        <UserAvatar className="!w-20 h-auto mb-4 drop-shadow" avatarUrl={user?.avatarUrl} />
                         <div>
                           <p className="text-2xl font-bold text-gray-700 dark:text-gray-300">{user?.nickname}</p>
                         </div>

web/src/router/index.tsx

@@ -218,7 +218,7 @@ const router = createBrowserRouter([
     },
   },
   {
-    path: "u/:username",
+    path: "/u/:username",
     element: <UserProfile />,
     loader: async () => {
       await initialGlobalStateLoader();

web/src/types/modules/resource.d.ts

@@ -18,7 +18,6 @@ interface ResourceCreate {
   filename: string;
   externalLink: string;
   type: string;
-  downloadToLocal: boolean;
 }
 
 interface ResourcePatch {