chore: update upgrade version view (#1791)

api/system.go

@@ -10,8 +10,6 @@ type SystemStatus struct {
 	// System settings
 	// Allow sign up.
 	AllowSignUp bool `json:"allowSignUp"`
-	// Ignore upgrade
-	IgnoreUpgrade bool `json:"ignoreUpgrade"`
 	// Disable public memos.
 	DisablePublicMemos bool `json:"disablePublicMemos"`
 	// Max upload size.

api/system_setting.go

@@ -17,8 +17,6 @@ const (
 	SystemSettingSecretSessionName SystemSettingName = "secret-session"
 	// SystemSettingAllowSignUpName is the name of allow signup setting.
 	SystemSettingAllowSignUpName SystemSettingName = "allow-signup"
-	// SystemSettingIgnoreUpgradeName is the name of ignore upgrade.
-	SystemSettingIgnoreUpgradeName SystemSettingName = "ignore-upgrade"
 	// SystemSettingDisablePublicMemosName is the name of disable public memos setting.
 	SystemSettingDisablePublicMemosName SystemSettingName = "disable-public-memos"
 	// SystemSettingMaxUploadSizeMiBName is the name of max upload size setting.
@@ -69,8 +67,6 @@ func (key SystemSettingName) String() string {
 		return "secret-session"
 	case SystemSettingAllowSignUpName:
 		return "allow-signup"
-	case SystemSettingIgnoreUpgradeName:
-		return "ignore-upgrade"
 	case SystemSettingDisablePublicMemosName:
 		return "disable-public-memos"
 	case SystemSettingMaxUploadSizeMiBName:
@@ -119,11 +115,6 @@ func (upsert SystemSettingUpsert) Validate() error {
 		if err := json.Unmarshal([]byte(upsert.Value), &value); err != nil {
 			return fmt.Errorf(systemSettingUnmarshalError, settingName)
 		}
-	case SystemSettingIgnoreUpgradeName:
-		var value bool
-		if err := json.Unmarshal([]byte(upsert.Value), &value); err != nil {
-			return fmt.Errorf(systemSettingUnmarshalError, settingName)
-		}
 	case SystemSettingDisablePublicMemosName:
 		var value bool
 		if err := json.Unmarshal([]byte(upsert.Value), &value); err != nil {

server/system.go

@@ -42,7 +42,6 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
 			Profile:            *s.Profile,
 			DBSize:             0,
 			AllowSignUp:        false,
-			IgnoreUpgrade:      false,
 			DisablePublicMemos: false,
 			MaxUploadSizeMiB:   32,
 			AdditionalStyle:    "",
@@ -79,8 +78,6 @@ func (s *Server) registerSystemRoutes(g *echo.Group) {
 			switch systemSetting.Name {
 			case api.SystemSettingAllowSignUpName:
 				systemStatus.AllowSignUp = baseValue.(bool)
-			case api.SystemSettingIgnoreUpgradeName:
-				systemStatus.IgnoreUpgrade = baseValue.(bool)
 			case api.SystemSettingDisablePublicMemosName:
 				systemStatus.DisablePublicMemos = baseValue.(bool)
 			case api.SystemSettingMaxUploadSizeMiBName:

web/src/components/ArchivedMemo.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 import { useMemoStore } from "@/store/module";
 import { getDateTimeString } from "@/helpers/datetime";
 import useToggle from "@/hooks/useToggle";
+import Tooltip from "./kit/Tooltip";
+import Icon from "./Icon";
 import MemoContent from "./MemoContent";
 import MemoResourceListView from "./MemoResourceListView";
 import "@/less/memo.less";
@@ -53,15 +55,23 @@ const ArchivedMemo: React.FC<Props> = (props: Props) => {
   return (
     <div className={`memo-wrapper archived ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
       <div className="memo-top-wrapper">
-        <span className="time-text">{getDateTimeString(memo.updatedTs)}</span>
-        <div className="btns-container">
-          <span className="btn-text" onClick={handleRestoreMemoClick}>
-            {t("common.restore")}
-          </span>
-          <span className={`btn-text ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
-            {t("common.delete")}
-            {showConfirmDeleteBtn ? "!" : ""}
-          </span>
+        <div className="status-text-container">
+          <span className="time-text">{getDateTimeString(memo.updatedTs)}</span>
+        </div>
+        <div className="flex flex-row justify-end items-center gap-x-2">
+          <Tooltip title={t("common.restore")} side="top">
+            <button onClick={handleRestoreMemoClick}>
+              <Icon.ArchiveRestore className="w-4 h-auto cursor-pointer text-gray-500 dark:text-gray-400" />
+            </button>
+          </Tooltip>
+          <Tooltip title={t("common.delete")} side="top">
+            <button
+              onClick={handleDeleteMemoClick}
+              className={`text-gray-500 dark:text-gray-400 ${showConfirmDeleteBtn ? "text-red-600" : ""}`}
+            >
+              <Icon.Trash className="w-4 h-auto cursor-pointer" />
+            </button>
+          </Tooltip>
         </div>
       </div>
       <MemoContent content={memo.content} />

web/src/components/DemoBanner.tsx

@@ -23,7 +23,7 @@ const DemoBanner: React.FC = () => {
   if (!state.show) return null;
 
   return (
-    <div className="flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
+    <div className="z-1 flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
       <div className="w-full max-w-6xl px-4 flex flex-row justify-between items-center gap-x-3">
         <span>✨ A lightweight, self-hosted memo hub. Open Source and Free forever. ✨</span>
         <a className="btn-primary shadow" href="https://usememos.com/docs/install/docker" target="_blank">

web/src/components/Header.tsx

@@ -7,6 +7,7 @@ import Icon from "./Icon";
 import UserBanner from "./UserBanner";
 import showAboutSiteDialog from "./AboutSiteDialog";
 import showMemoEditorDialog from "./MemoEditor/MemoEditorDialog";
+import UpgradeVersionView from "./UpgradeVersionBanner";
 
 const Header = () => {
   const { t } = useTranslation();
@@ -139,6 +140,7 @@ const Header = () => {
                   <Icon.Edit3 className="w-4 h-auto mr-1" /> New
                 </button>
               </div>
+              <UpgradeVersionView />
             </>
           )}
           {isVisitorMode && (

web/src/components/Settings/SystemSection.tsx

@@ -12,7 +12,6 @@ import "@/less/settings/system-section.less";
 interface State {
   dbSize: number;
   allowSignUp: boolean;
-  ignoreUpgrade: boolean;
   disablePublicMemos: boolean;
   additionalStyle: string;
   additionalScript: string;
@@ -27,7 +26,6 @@ const SystemSection = () => {
   const [state, setState] = useState<State>({
     dbSize: systemStatus.dbSize,
     allowSignUp: systemStatus.allowSignUp,
-    ignoreUpgrade: systemStatus.ignoreUpgrade,
     additionalStyle: systemStatus.additionalStyle,
     additionalScript: systemStatus.additionalScript,
     disablePublicMemos: systemStatus.disablePublicMemos,
@@ -82,17 +80,6 @@ const SystemSection = () => {
     });
   };
 
-  const handleIgnoreUpgradeChanged = async (value: boolean) => {
-    setState({
-      ...state,
-      ignoreUpgrade: value,
-    });
-    await api.upsertSystemSetting({
-      name: "ignore-upgrade",
-      value: JSON.stringify(value),
-    });
-  };
-
   const handleUpdateCustomizedProfileButtonClick = () => {
     showUpdateCustomizedProfileDialog();
   };
@@ -261,10 +248,6 @@ const SystemSection = () => {
         <span className="normal-text">{t("setting.system-section.allow-user-signup")}</span>
         <Switch checked={state.allowSignUp} onChange={(event) => handleAllowSignUpChanged(event.target.checked)} />
       </div>
-      <div className="form-label">
-        <span className="normal-text">{t("setting.system-section.ignore-version-upgrade")}</span>
-        <Switch checked={state.ignoreUpgrade} onChange={(event) => handleIgnoreUpgradeChanged(event.target.checked)} />
-      </div>
       <div className="form-label">
         <span className="normal-text">{t("setting.system-section.disable-public-memos")}</span>
         <Switch checked={state.disablePublicMemos} onChange={(event) => handleDisablePublicMemosChanged(event.target.checked)} />

web/src/components/UpgradeVersionBanner.tsx

@@ -4,13 +4,14 @@ import * as api from "@/helpers/api";
 import storage from "@/helpers/storage";
 import { useGlobalStore } from "@/store/module";
 import Icon from "./Icon";
+import Tooltip from "./kit/Tooltip";
 
 interface State {
   latestVersion: string;
   show: boolean;
 }
 
-const UpgradeVersionBanner: React.FC = () => {
+const UpgradeVersionView: React.FC = () => {
   const globalStore = useGlobalStore();
   const profile = globalStore.state.systemStatus.profile;
   const [state, setState] = useState<State>({
@@ -19,10 +20,6 @@ const UpgradeVersionBanner: React.FC = () => {
   });
 
   useEffect(() => {
-    if (globalStore.state.systemStatus.ignoreUpgrade) {
-      return;
-    }
-
     api.getRepoLatestTag().then((latestTag) => {
       const { skippedVersion } = storage.get(["skippedVersion"]);
       const latestVersion = latestTag.slice(1) || "0.0.0";
@@ -46,20 +43,21 @@ const UpgradeVersionBanner: React.FC = () => {
   if (!state.show) return null;
 
   return (
-    <div className="flex flex-row items-center justify-center w-full py-2 text-white bg-green-600">
+    <div className="flex flex-row justify-center items-center w-full py-2 px-2">
       <a
-        className="flex flex-row items-center justify-center hover:underline"
+        className="flex flex-row justify-start items-center text-sm break-all text-green-600 hover:underline"
         target="_blank"
         href="https://github.com/usememos/memos/releases"
       >
-        <Icon.ArrowUpCircle className="w-5 h-auto mr-2" />
-        New Update <span className="ml-1 font-bold">{state.latestVersion}</span>
+        ✨ New version: v{state.latestVersion}
       </a>
-      <button className="absolute opacity-80 right-4 hover:opacity-100" title="Skip this version" onClick={onSkip}>
-        <Icon.X />
-      </button>
+      <Tooltip title="Ignore upgrade" side="top">
+        <button className="ml-1 opacity-60 text-gray-600 hover:opacity-100" onClick={onSkip}>
+          <Icon.X className="w-4 h-auto" />
+        </button>
+      </Tooltip>
     </div>
   );
 };
 
-export default UpgradeVersionBanner;
+export default UpgradeVersionView;

web/src/layouts/Root.tsx

 import { Outlet } from "react-router-dom";
 import Header from "@/components/Header";
-import UpgradeVersionBanner from "@/components/UpgradeVersionBanner";
 import DemoBanner from "@/components/DemoBanner";
 
 function Root() {
@@ -8,9 +7,8 @@ function Root() {
     <div className="w-full min-h-full bg-zinc-100 dark:bg-zinc-800">
       <div className="w-full h-auto flex flex-col justify-start items-center">
         <DemoBanner />
-        <UpgradeVersionBanner />
       </div>
-      <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start">
+      <div className="w-full max-w-6xl mx-auto flex flex-row justify-center items-start sm:px-4">
         <Header />
         <main className="w-auto max-w-full flex-grow shrink flex flex-col justify-start items-start">
           <Outlet />

web/src/less/memo.less

@@ -5,10 +5,6 @@
     @apply border-gray-200 border-2 dark:border-zinc-600;
   }
 
-  &.archived {
-    @apply border-gray-200 dark:border-zinc-600;
-  }
-
   > .memo-top-wrapper {
     @apply flex flex-row justify-between items-center w-full h-6 mb-1;
 
@@ -36,10 +32,6 @@
       }
     }
 
-    > .time-text {
-      @apply text-xs text-gray-400 cursor-pointer;
-    }
-
     > .btns-container {
       @apply flex flex-row justify-end items-center relative shrink-0;
 

web/src/store/module/global.ts

@@ -11,7 +11,6 @@ export const initialGlobalState = async () => {
     appearance: "system" as Appearance,
     systemStatus: {
       allowSignUp: false,
-      ignoreUpgrade: false,
       disablePublicMemos: false,
       maxUploadSizeMiB: 0,
       additionalStyle: "",

web/src/store/reducer/global.ts

@@ -19,7 +19,6 @@ const globalSlice = createSlice({
       },
       dbSize: 0,
       allowSignUp: false,
-      ignoreUpgrade: false,
       disablePublicMemos: false,
       additionalStyle: "",
       additionalScript: "",

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

@@ -23,7 +23,6 @@ interface SystemStatus {
   dbSize: number;
   // System settings
   allowSignUp: boolean;
-  ignoreUpgrade: boolean;
   disablePublicMemos: boolean;
   maxUploadSizeMiB: number;
   additionalStyle: string;