chore: add beta badge to storage (#1099)

* chore: add beta badge to storage

* chore: update

server/memo.go

@@ -57,7 +57,7 @@ func (s *Server) registerMemoRoutes(g *echo.Group) {
 		disablePublicMemosSystemSetting, err := s.Store.FindSystemSetting(ctx, &api.SystemSettingFind{
 			Name: api.SystemSettingDisablePublicMemosName,
 		})
-		if err != nil {
+		if err != nil && common.ErrorCode(err) != common.NotFound {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to find system setting").SetInternal(err)
 		}
 		if disablePublicMemosSystemSetting != nil {

web/src/components/BetaBadge.tsx

-import "../less/beta-badge.less";
-
 interface Props {
   className?: string;
 }
@@ -7,7 +5,13 @@ interface Props {
 const BetaBadge: React.FC<Props> = (props: Props) => {
   const { className } = props;
 
-  return <span className={`beta-badge ${className ?? ""}`}>beta</span>;
+  return (
+    <span
+      className={`mx-1 px-1 leading-5 text-xs border dark:border-zinc-600 rounded-full text-gray-500 dark:text-gray-400 ${className ?? ""}`}
+    >
+      Beta
+    </span>
+  );
 };
 
 export default BetaBadge;

web/src/components/SettingDialog.tsx

 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useUserStore } from "../store/module";
+import { useGlobalStore, useUserStore } from "../store/module";
 import Icon from "./Icon";
 import { generateDialog } from "./Dialog";
 import MyAccountSection from "./Settings/MyAccountSection";
@@ -8,6 +8,7 @@ import PreferencesSection from "./Settings/PreferencesSection";
 import MemberSection from "./Settings/MemberSection";
 import SystemSection from "./Settings/SystemSection";
 import StorageSection from "./Settings/StorageSection";
+import BetaBadge from "./BetaBadge";
 import "../less/setting-dialog.less";
 
 type Props = DialogProps;
@@ -21,6 +22,7 @@ interface State {
 const SettingDialog: React.FC<Props> = (props: Props) => {
   const { destroy } = props;
   const { t } = useTranslation();
+  const globalStore = useGlobalStore();
   const userStore = useUserStore();
   const user = userStore.state.user;
   const [state, setState] = useState<State>({
@@ -70,12 +72,14 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
               >
                 <span className="icon-text">🛠️</span> {t("setting.system")}
               </span>
+              {globalStore.isDev() && (
                 <span
                   onClick={() => handleSectionSelectorItemClick("storage")}
                   className={`section-item ${state.selectedSection === "storage" ? "selected" : ""}`}
                 >
-                <span className="icon-text">💾</span> {t("setting.storage")}
+                  <span className="icon-text">💾</span> {t("setting.storage")} <BetaBadge />
                 </span>
+              )}
             </div>
           </>
         ) : null}

web/src/components/Settings/SystemSection.tsx

 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Button, Switch, Textarea } from "@mui/joy";
+import { Button, Divider, Switch, Textarea } from "@mui/joy";
 import { useGlobalStore } from "../../store/module";
 import * as api from "../../helpers/api";
 import toastHelper from "../Toast";
@@ -157,6 +157,11 @@ const SystemSection = () => {
         <span className="normal-text">{t("setting.system-section.disable-public-memos")}</span>
         <Switch checked={state.disablePublicMemos} onChange={(event) => handleDisablePublicMemosChanged(event.target.checked)} />
       </div>
+      <div className="form-label">
+        <span className="normal-text">Storage</span>
+        <Switch checked={state.disablePublicMemos} onChange={(event) => handleDisablePublicMemosChanged(event.target.checked)} />
+      </div>
+      <Divider className="!mt-3 !my-4" />
       <div className="form-label">
         <span className="normal-text">{t("setting.system-section.additional-style")}</span>
         <Button onClick={handleSaveAdditionalStyle}>{t("common.save")}</Button>

web/src/less/base-dialog.less

 .dialog-wrapper {
-  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-100 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;
+  @apply fixed top-0 left-0 flex flex-col justify-start items-center w-full h-full pt-16 pb-8 px-4 z-1000 overflow-x-hidden overflow-y-scroll bg-transparent transition-all hide-scrollbar;
 
   &.showup {
     background-color: rgba(0, 0, 0, 0.6);

web/src/less/beta-badge.less

-.beta-badge {
-  @apply px-2 py-1 text-xs border rounded-full text-gray-500;
-}

web/src/less/memo-editor.less

@@ -52,7 +52,7 @@
             @apply hidden flex-row justify-start items-start flex-wrap absolute top-6 left-0 mt-1 p-1 z-1 rounded w-52 h-auto max-h-48 overflow-y-auto font-mono shadow bg-zinc-200 dark:bg-zinc-600;
 
             > .item-container {
-              @apply w-auto max-w-full truncate text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 truncate hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0;
+              @apply w-auto max-w-full truncate text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0;
             }
 
             > .tip-text {

web/src/store/module/global.ts

@@ -64,6 +64,9 @@ export const useGlobalStore = () => {
     getState: () => {
       return store.getState().global;
     },
+    isDev: () => {
+      return state.systemStatus.profile.mode === "dev";
+    },
     fetchSystemStatus: async () => {
       const { data: systemStatus } = (await api.getSystemStatus()).data;
       store.dispatch(setGlobalState({ systemStatus: systemStatus }));