Repository: usememos/memos
File: web/src/pages/Setting.tsx (TypeScript)

Code before:
import { Option, Select } from "@mui/joy";
import { LucideIcon } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import Icon from "@/components/Icon";
import MobileHeader from "@/components/MobileHeader";
import MemberSection from "@/components/Settings/MemberSection";
import MyAccountSection from "@/components/Settings/MyAccountSection";
import PreferencesSection from "@/components/Settings/PreferencesSection";
import SSOSection from "@/components/Settings/SSOSection";
import SectionMenuItem from "@/components/Settings/SectionMenuItem";
import StorageSection from "@/components/Settings/StorageSection";
import SystemSection from "@/components/Settings/SystemSection";
import useCurrentUser from "@/hooks/useCurrentUser";
import { useGlobalStore } from "@/store/module";
import { User_Role } from "@/types/proto/api/v2/user_service";
import { useTranslate } from "@/utils/i18n";

type SettingSection = "my-account" | "preference" | "member" | "system" | "storage" | "sso";

interface State {
  selectedSection: SettingSection;
}

const BasicSection: SettingSection[] = ["my-account", "preference"];
const AdminSection: SettingSection[] = ["member", "system", "storage", "sso"];

const SectionsIconsMap: Record<SettingSection, LucideIcon> = {
  "my-account": Icon.User,
  preference: Icon.Cog,
  member: Icon.Users,
  system: Icon.Settings2,
  storage: Icon.Database,
  sso: Icon.Key,
};

const Setting = () => {
  const t = useTranslate();
  const user = useCurrentUser();
  const globalStore = useGlobalStore();
  const [state, setState] = useState<State>({
    selectedSection: "my-account",
  });

  const isHost = user.role === User_Role.HOST;

  const settingsSectionList = useMemo(() => {
    let settingList = [...BasicSection];
    if (isHost) {
      settingList = settingList.concat(AdminSection);

Review comment (suggestion):
```suggestion
const BASIC_SECTIONS: SettingSection[] = ["my-account", "preference"];
```

Code after:
import { Option, Select } from "@mui/joy";
import { LucideIcon } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import Icon from "@/components/Icon";
import MobileHeader from "@/components/MobileHeader";
import MemberSection from "@/components/Settings/MemberSection";
import MyAccountSection from "@/components/Settings/MyAccountSection";
import PreferencesSection from "@/components/Settings/PreferencesSection";
import SSOSection from "@/components/Settings/SSOSection";
import SectionMenuItem from "@/components/Settings/SectionMenuItem";
import StorageSection from "@/components/Settings/StorageSection";
import SystemSection from "@/components/Settings/SystemSection";
import useCurrentUser from "@/hooks/useCurrentUser";
import { useGlobalStore } from "@/store/module";
import { User_Role } from "@/types/proto/api/v2/user_service";
import { useTranslate } from "@/utils/i18n";

type SettingSection = "my-account" | "preference" | "member" | "system" | "storage" | "sso";

interface State {
  selectedSection: SettingSection;
}

const BASIC_SECTIONS: SettingSection[] = ["my-account", "preference"];
const ADMIN_SECTIONS: SettingSection[] = ["member", "system", "storage", "sso"];

const SECTION_ICON_MAP: Record<SettingSection, LucideIcon> = {
  "my-account": Icon.User,
  preference: Icon.Cog,
  member: Icon.Users,
  system: Icon.Settings2,
  storage: Icon.Database,
  sso: Icon.Key,
};

const Setting = () => {
  const t = useTranslate();
  const user = useCurrentUser();
  const globalStore = useGlobalStore();
  const [state, setState] = useState<State>({
    selectedSection: "my-account",
  });

  const isHost = user.role === User_Role.HOST;

  const settingsSectionList = useMemo(() => {
    let settingList = [...BASIC_SECTIONS];
    if (isHost) {
      settingList = settingList.concat(ADMIN_SECTIONS);