Move admin link (panel) to settings sidebar

src/assets/locales/en.json

@@ -891,8 +891,7 @@
       },
       "admin": {
         "title": "Admin panel",
-        "text": "Utilize tools made for testing P-Stream's condition.",
-        "button": "Check it out"
+        "text": "Test P-Stream's condition."
       },
       "actions": {
         "delete": {

src/pages/Settings.tsx

@@ -37,7 +37,6 @@ import { useSubtitleStore } from "@/stores/subtitles";
 import { usePreviewThemeStore, useThemeStore } from "@/stores/theme";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
-import { AdminPanelPart } from "./parts/settings/AdminPanel";
 import { PreferencesPart } from "./parts/settings/PreferencesPart";
 
 function SettingsLayout(props: { children: React.ReactNode }) {
@@ -504,9 +503,6 @@ export function SettingsPage() {
             <RegisterCalloutPart />
           )}
         </div>
-        <div className="mt-10">
-          <AdminPanelPart />
-        </div>
         <div id="settings-preferences" className="mt-28">
           <PreferencesPart
             language={state.appLanguage.state}

src/pages/parts/settings/AdminPanel.tsx

@@ -1,30 +0,0 @@
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-
-import { Button } from "@/components/buttons/Button";
-import { SolidSettingsCard } from "@/components/layout/SettingsCard";
-import { Heading3 } from "@/components/utils/Text";
-
-export function AdminPanelPart() {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-
-  return (
-    <div>
-      <SolidSettingsCard
-        paddingClass="px-6 py-12"
-        className="grid grid-cols-2 gap-12 mt-5"
-      >
-        <div>
-          <Heading3>{t("settings.account.admin.title")}</Heading3>
-          <p className="text-type-text">{t("settings.account.admin.text")}</p>
-        </div>
-        <div className="flex justify-end items-center">
-          <Button theme="purple" onClick={() => navigate("/admin")}>
-            {t("settings.account.admin.button")}
-          </Button>
-        </div>
-      </SolidSettingsCard>
-    </div>
-  );
-}

src/pages/parts/settings/SidebarPart.tsx

@@ -1,9 +1,11 @@
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 import Sticky from "react-sticky-el";
 import { useAsync } from "react-use";
 
 import { getBackendMeta } from "@/backend/accounts/meta";
+import { Button } from "@/components/buttons/Button";
 import { Icon, Icons } from "@/components/Icon";
 import { SidebarLink, SidebarSection } from "@/components/layout/Sidebar";
 import { Divider } from "@/components/utils/Divider";
@@ -36,6 +38,7 @@ export function SidebarPart() {
   // eslint-disable-next-line no-restricted-globals
   const hostname = location.hostname;
   const [activeLink, setActiveLink] = useState("");
+  const navigate = useNavigate();
 
   const settingLinks = [
     {
@@ -204,6 +207,19 @@ export function SidebarPart() {
                 )}
               </p>
             </div>
+
+            <div className="col-span-2 space-y-1">
+              <p className="text-type-dimmed font-medium">
+                {t("settings.account.admin.title")}
+              </p>
+              <Button
+                theme="secondary"
+                onClick={() => navigate("/admin")}
+                className="w-full !p-2 text-xs"
+              >
+                {t("settings.account.admin.text")}
+              </Button>
+            </div>
           </div>
         </SidebarSection>
       </Sticky>