chore: update user profile page

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);
-    }
+    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

@@ -1,4 +1,4 @@
-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