refactor: adjust home page

vicanso · Sep 26, 2024 · 53e006b · 53e006b
1 parent 0f73b82
commit 53e006b
Show file tree

Hide file tree

Showing 12 changed files with 279 additions and 198 deletions.
diff --git a/.github/workflows/audit.yml b/.github/workflows/audit.yml
@@ -24,6 +24,6 @@ jobs:
 
       - name: Audit Check
         # https://github.com/rustsec/audit-check/issues/2
-        uses: rustsec/audit-check@v2
+        uses: rustsec/audit-check@v2.0.0
         with:
           token: ${{ secrets.GH_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -45,8 +45,8 @@ jobs:
         run: make test
       - name: Run cargo msrv
         run: |
-          cargo install cargo-msrv
-          cargo msrv verify
+          cargo install cargo-msrv --version 0.16.0-beta.25
+          cargo msrv list
       - name: Run cargo cov
         run: |
           cargo install cargo-llvm-cov

diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -31,14 +31,14 @@
     "cmdk": "^1.0.0",
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
-    "lucide-react": "^0.441.0",
+    "lucide-react": "^0.446.0",
     "next-themes": "^0.3.0",
     "radash": "^12.1.0",
     "react": "^18.3.1",
     "react-async-hook": "^4.0.0",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
-    "react-i18next": "^15.0.1",
+    "react-i18next": "^15.0.2",
     "react-router-dom": "^6.26.2",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.2",
@@ -47,20 +47,20 @@
     "zustand": "^4.5.5"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@types/node": "^22.5.4",
-    "@types/react": "^18.3.3",
+    "@eslint/js": "^9.11.1",
+    "@types/node": "^22.7.2",
+    "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.5.0",
+    "@vitejs/plugin-react-swc": "^3.7.0",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.0",
+    "eslint": "^9.11.1",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
+    "eslint-plugin-react-refresh": "^0.4.12",
     "globals": "^15.9.0",
-    "postcss": "^8.4.45",
-    "tailwindcss": "^3.4.11",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.6.2",
+    "typescript-eslint": "^8.7.0",
+    "vite": "^5.4.8"
   }
 }
diff --git a/web/src/components/ex-form.tsx b/web/src/components/ex-form.tsx
@@ -84,6 +84,7 @@ export type FormContextValue = {
 };
 
 interface ExFormProps {
+  category?: string;
   schema: z.Schema;
   items: ExFormItem[];
   defaultShow?: number;
@@ -95,6 +96,7 @@ interface ExFormProps {
 }
 
 export function ExForm({
+  category = "",
   schema,
   items,
   defaultShow = 0,
@@ -106,15 +108,24 @@ export function ExForm({
 }: ExFormProps) {
   const { t } = useTranslation();
   const { toast } = useToast();
-  const [showCount, setShowCount] = React.useState(defaultShow);
+  const maxCount = items.length;
+  let showCountDefaultValue = defaultShow;
+  let showAllKey = "";
+  if (category) {
+    showAllKey = `${category}.showAll`;
+  }
+  if (showAllKey && localStorage.getItem(showAllKey)) {
+    showCountDefaultValue = maxCount;
+  }
+
+  const [showCount, setShowCount] = React.useState(showCountDefaultValue);
   const [processing, setProcessing] = React.useState(false);
   const [updatedValues, setUpdatedValues] = React.useState(
     {} as Record<string, unknown>,
   );
   const [updatedCount, setUpdatedCount] = React.useState(0);
   const defaultValues: Record<string, unknown> = {};
   const originalValues: Record<string, unknown> = {};
-  // const updatedValues: Record<string, unknown> = {};
   items.forEach((item) => {
     let { defaultValue } = item;
     originalValues[item.name] = defaultValue;
@@ -203,7 +214,6 @@ export function ExForm({
   }
 
   const fields: JSX.Element[] = [];
-  const maxCount = items.length;
 
   items.map((item, index) => {
     if (defaultShow > 0) {
@@ -505,9 +515,11 @@ export function ExForm({
         title={tips}
         onClick={(e) => {
           if (showCount > defaultShow) {
+            localStorage.removeItem(showAllKey);
             setShowCount(defaultShow);
           } else {
             setShowCount(maxCount);
+            localStorage.setItem(showAllKey, "all");
           }
           e.preventDefault();
         }}

diff --git a/web/src/components/header.tsx b/web/src/components/header.tsx
@@ -33,7 +33,6 @@ import i18n from "@/i18n";
 export function MainHeader({
   className,
 }: React.HTMLAttributes<HTMLDivElement>) {
-  console.dir(i18n.language);
   const { t } = useTranslation();
   const iconClassName = "mr-2 h-4 w-4";
   const { setTheme, theme } = useTheme();

diff --git a/web/src/pages/Certificates.tsx b/web/src/pages/Certificates.tsx
@@ -13,6 +13,7 @@ import {
 } from "@/constants";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
+import { ScrollRestoration } from "react-router-dom";
 
 function getCertificateConfig(
   name: string,
@@ -133,12 +134,13 @@ export default function Certificates() {
   const schema = z.object({});
 
   return (
-    <div>
+    <>
       <MainHeader />
       <div className="flex">
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
           <ExForm
+            category="certificate"
             key={currentCertificate}
             items={items}
             schema={schema}
@@ -159,6 +161,7 @@ export default function Certificates() {
           />
         </div>
       </div>
-    </div>
+      <ScrollRestoration />
+    </>
   );
 }
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
@@ -1,8 +1,8 @@
 import { MainHeader } from "@/components/header";
 import { MainSidebar } from "@/components/sidebar-nav";
-import useConfigState from "@/states/config";
+import useConfigState, { getLocationWeight } from "@/states/config";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Menu } from "lucide-react";
+import { FilePlus2 } from "lucide-react";
 import { Link } from "react-router-dom";
 import {
   CERTIFICATES,
@@ -19,6 +19,7 @@ import { listify } from "radash";
 interface Summary {
   name: string;
   value: string;
+  link: string;
 }
 
 export default function Home() {
@@ -41,6 +42,7 @@ export default function Home() {
     listify(config.servers, (name, value) => {
       serverSummary.push({
         name,
+        link: `${SERVERS}?name=${name}`,
         value: value.addr,
       });
     });
@@ -53,19 +55,26 @@ export default function Home() {
       locationCount > 1
         ? `${locationCount} Locations`
         : `${locationCount} Location`;
+    const locationSummaryWeight: Record<string, number> = {};
     listify(config.locations, (name, value) => {
+      const weight = getLocationWeight(value);
+      locationSummaryWeight[name] = weight;
       const tmpArr: string[] = [];
       if (value.host) {
         tmpArr.push(`Host: ${value.host}`);
       }
-      if (value.path) {
-        tmpArr.push(`Path: ${value.path}`);
-      }
+      tmpArr.push(`Path: ${value.path || "/"}`);
       locationSummary.push({
         name,
+        link: `${LOCATIONS}?name=${name}`,
         value: tmpArr.join(" "),
       });
     });
+    locationSummary.sort((item1, item2) => {
+      const weight1 = locationSummaryWeight[item1.name] || 0;
+      const weight2 = locationSummaryWeight[item2.name] || 0;
+      return weight2 - weight1;
+    });
   }
 
   let upstreamDescription = "";
@@ -79,16 +88,26 @@ export default function Home() {
     listify(config.upstreams, (name, value) => {
       upstreamSummary.push({
         name,
+        link: `${UPSTREMAS}?name=${name}`,
         value: value.addrs.join(","),
       });
     });
   }
 
   let pluginDescription = "";
+  const pluginSummary: Summary[] = [];
   if (config.plugins) {
     const pluginCount = Object.keys(config.plugins).length;
     pluginDescription =
       pluginCount > 1 ? `${pluginCount} Plugins` : `${pluginCount} Plugin`;
+    listify(config.plugins, (name, value) => {
+      pluginSummary.push({
+        name,
+        link: `${PLUGINS}?name=${name}`,
+        value: value.category as string,
+      });
+    });
+    pluginSummary.sort((item1, item2) => item1.name.localeCompare(item2.name));
   }
 
   let certificateDescription = "";
@@ -98,6 +117,13 @@ export default function Home() {
       certificateCount > 1
         ? `${certificateCount} Certificates`
         : `${certificateCount} Certificate`;
+    listify(config.certificates, (name, value) => {
+      pluginSummary.push({
+        name,
+        link: `${CERTIFICATES}?name=${name}`,
+        value: value.domains || "",
+      });
+    });
   }
 
   const items = [
@@ -123,7 +149,7 @@ export default function Home() {
       title: "Plugin",
       path: PLUGINS,
       description: pluginDescription,
-      summary: [],
+      summary: pluginSummary,
     },
     {
       title: "Certificate",
@@ -138,7 +164,7 @@ export default function Home() {
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2 relative">
           <CardTitle className="text-sm font-medium ">{item.title}</CardTitle>
           <Link to={item.path} className="absolute top-3 right-3">
-            <Menu className="w-5 h-5" />
+            <FilePlus2 className="w-5 h-5" />
           </Link>
         </CardHeader>
         <CardContent>
@@ -148,7 +174,9 @@ export default function Home() {
               {item.summary.map((item) => {
                 return (
                   <li key={item.name} className="break-all mt-2">
-                    <span className="text-muted-foreground">{item.name}:</span>{" "}
+                    <Link to={item.link} className="text-muted-foreground">
+                      {item.name}:
+                    </Link>{" "}
                     {item.value}
                   </li>
                 );

diff --git a/web/src/pages/Locations.tsx b/web/src/pages/Locations.tsx
@@ -11,6 +11,7 @@ import { ExFormItemCategory, newStringOptions } from "@/constants";
 import { newZodBytes } from "@/helpers/util";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
+import { ScrollRestoration } from "react-router-dom";
 
 function getLocationConfig(name: string, locations?: Record<string, Location>) {
   if (!locations) {
@@ -177,6 +178,7 @@ export default function Locations() {
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
           <ExForm
+            category="location"
             key={currentLocation}
             items={items}
             schema={schema}
@@ -197,6 +199,7 @@ export default function Locations() {
           />
         </div>
       </div>
+      <ScrollRestoration />
     </>
   );
 }
diff --git a/web/src/pages/Plugins.tsx b/web/src/pages/Plugins.tsx
@@ -15,6 +15,7 @@ import {
 } from "@/constants";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
+import { ScrollRestoration } from "react-router-dom";
 
 function getPluginConfig(
   name: string,
@@ -915,6 +916,7 @@ export default function Plugins() {
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
           <ExForm
+            category="plugin"
             key={key}
             items={items}
             schema={schema}
@@ -940,6 +942,7 @@ export default function Plugins() {
           />
         </div>
       </div>
+      <ScrollRestoration />
     </>
   );
 }
diff --git a/web/src/pages/Servers.tsx b/web/src/pages/Servers.tsx
@@ -14,6 +14,7 @@ import {
 import { newZodDuration } from "@/helpers/util";
 import { useSearchParams } from "react-router-dom";
 import { useEffect } from "react";
+import { ScrollRestoration } from "react-router-dom";
 
 function getServerConfig(name: string, servers?: Record<string, Server>) {
   if (!servers) {
@@ -232,6 +233,7 @@ export default function Servers() {
         <MainSidebar className="h-screen flex-none w-[230px]" />
         <div className="grow lg:border-l overflow-auto p-4">
           <ExForm
+            category="server"
             key={currentServer}
             items={items}
             schema={schema}
@@ -252,6 +254,7 @@ export default function Servers() {
           />
         </div>
       </div>
+      <ScrollRestoration />
     </>
   );
 }