feat: init settings

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-popover": "^1.1.3",
     "@radix-ui/react-progress": "^1.1.0",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",

src/components/ServerCard.tsx

@@ -110,7 +110,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
             <div className="flex items-center text-xs font-semibold">
               {down >= 1024
                 ? `${(down / 1024).toFixed(2)}G/s`
-                : up >= 1
+                : down >= 1
                   ? `${down.toFixed(2)}M/s`
                   : `${(down * 1024).toFixed(2)}K/s`}
             </div>

src/components/ServerOverview.tsx

@@ -104,11 +104,7 @@ export default function ServerOverview({
             </section>
           </CardContent>
         </Card>
-        <Card
+        <Card className={cn("hover:ring-purple-500 ring-1 ring-transparent transition-all")}>
-          className={cn(
-            "hover:ring-purple-500 ring-1 ring-transparent transition-all",
-          )}
-        >
           <CardContent className="flex h-full items-center relative px-6 py-3">
             <section className="flex flex-col gap-1 w-full">
               <div className="flex items-center w-full justify-between">

src/components/ui/popover.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from "react"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-2xl outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }

src/context/filter-context.ts

@@ -1,8 +0,0 @@
-import { createContext } from "react"
-
-export interface FilterContextType {
-  filter: boolean
-  setFilter: (filter: boolean) => void
-}
-
-export const FilterContext = createContext<FilterContextType | undefined>(undefined)

src/context/network-filter-context.tsx

@@ -1,11 +0,0 @@
-"use client"
-
-import { ReactNode, useState } from "react"
-
-import { FilterContext } from "./filter-context"
-
-export function FilterProvider({ children }: { children: ReactNode }) {
-  const [filter, setFilter] = useState<boolean>(false)
-
-  return <FilterContext.Provider value={{ filter, setFilter }}>{children}</FilterContext.Provider>
-}

src/hooks/use-filter.tsx

@@ -1,12 +0,0 @@
-import { FilterContext, FilterContextType } from "@/context/filter-context"
-import { useContext } from "react"
-
-const useFilter = (): FilterContextType => {
-  const context = useContext(FilterContext)
-  if (context === undefined) {
-    throw new Error("useFilter must be used within a FilterProvider")
-  }
-  return context
-}
-
-export default useFilter

src/main.tsx

@@ -7,7 +7,6 @@ import { Toaster } from "sonner"
 import App from "./App"
 import { ThemeProvider } from "./components/ThemeProvider"
 import { MotionProvider } from "./components/motion/motion-provider"
-import { FilterProvider } from "./context/network-filter-context"
 import { StatusProvider } from "./context/status-provider"
 import { TooltipProvider } from "./context/tooltip-provider"
 import { WebSocketProvider } from "./context/websocket-provider"
@@ -23,23 +22,21 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
         <QueryClientProvider client={queryClient}>
           <WebSocketProvider url="/api/v1/ws/server">
             <StatusProvider>
-              <FilterProvider>
+              <TooltipProvider>
-                <TooltipProvider>
+                <App />
-                  <App />
+                <Toaster
-                  <Toaster
+                  duration={1000}
-                    duration={1000}
+                  toastOptions={{
-                    toastOptions={{
+                    classNames: {
-                      classNames: {
+                      default:
-                        default:
+                        "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
-                          "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
+                    },
-                      },
+                  }}
-                    }}
+                  position="top-center"
-                    position="top-center"
+                  className={"flex items-center justify-center"}
-                    className={"flex items-center justify-center"}
+                />
-                  />
+                <ReactQueryDevtools />
-                  <ReactQueryDevtools />
+              </TooltipProvider>
-                </TooltipProvider>
-              </FilterProvider>
             </StatusProvider>
           </WebSocketProvider>
         </QueryClientProvider>

src/pages/Server.tsx

@@ -5,14 +5,15 @@ import ServerCardInline from "@/components/ServerCardInline"
 import ServerOverview from "@/components/ServerOverview"
 import { ServiceTracker } from "@/components/ServiceTracker"
 import { Loader } from "@/components/loading/Loader"
-import useFilter from "@/hooks/use-filter"
+import { Label } from "@/components/ui/label"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { useStatus } from "@/hooks/use-status"
 import { useWebSocketContext } from "@/hooks/use-websocket-context"
 import { fetchServerGroup } from "@/lib/nezha-api"
 import { cn, formatNezhaInfo } from "@/lib/utils"
 import { NezhaWebsocketResponse } from "@/types/nezha-api"
 import { ServerGroup } from "@/types/nezha-api"
-import { ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
+import { ChartBarSquareIcon, CogIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
 import { useQuery } from "@tanstack/react-query"
 import { useEffect, useState } from "react"
 import { useTranslation } from "react-i18next"
@@ -26,10 +27,10 @@ export default function Servers() {
   })
   const { lastMessage, connected } = useWebSocketContext()
   const { status } = useStatus()
-  const { filter } = useFilter()
   const [showServices, setShowServices] = useState<string>("0")
   const [showMap, setShowMap] = useState<string>("0")
   const [inline, setInline] = useState<string>("0")
+  const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
   const [currentGroup, setCurrentGroup] = useState<string>("All")
 
   useEffect(() => {
@@ -136,26 +137,6 @@ export default function Servers() {
           [status].includes(formatNezhaInfo(nezhaWsData.now, server).online ? "online" : "offline"),
         )
 
-  if (filter) {
-    filteredServers.sort((a, b) => {
-      if (!formatNezhaInfo(nezhaWsData.now, a).online && formatNezhaInfo(nezhaWsData.now, b).online)
-        return 1
-      if (formatNezhaInfo(nezhaWsData.now, a).online && !formatNezhaInfo(nezhaWsData.now, b).online)
-        return -1
-      if (
-        !formatNezhaInfo(nezhaWsData.now, a).online &&
-        !formatNezhaInfo(nezhaWsData.now, b).online
-      )
-        return 0
-      return (
-        formatNezhaInfo(nezhaWsData.now, b).state.net_in_speed +
-        formatNezhaInfo(nezhaWsData.now, b).state.net_out_speed -
-        (formatNezhaInfo(nezhaWsData.now, a).state.net_in_speed +
-          formatNezhaInfo(nezhaWsData.now, a).state.net_out_speed)
-      )
-    })
-  }
-
   return (
     <div className="mx-auto w-full max-w-5xl px-0">
       <ServerOverview
@@ -167,50 +148,110 @@ export default function Servers() {
         upSpeed={upSpeed}
         downSpeed={downSpeed}
       />
-      <section className="flex mt-6 items-center gap-2 w-full overflow-hidden">
+      <div className="flex mt-6 items-center justify-between gap-2">
-        <button
+        <section className="flex items-center gap-2 w-full overflow-hidden">
-          onClick={() => {
+          <button
-            setShowMap(showMap === "0" ? "1" : "0")
+            onClick={() => {
-          }}
+              setShowMap(showMap === "0" ? "1" : "0")
-          className={cn(
+            }}
-            "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
+            className={cn(
-            {
+              "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
-              "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
+              {
-            },
+                "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showMap === "1",
-          )}
+              },
-        >
+            )}
-          <MapIcon className="size-[13px]" />
+          >
-        </button>
+            <MapIcon className="size-[13px]" />
-        <button
+          </button>
-          onClick={() => {
+          <button
-            setShowServices(showServices === "0" ? "1" : "0")
+            onClick={() => {
-            localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
+              setShowServices(showServices === "0" ? "1" : "0")
-          }}
+              localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
-          className={cn(
+            }}
-            "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
+            className={cn(
-            {
+              "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
-              "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
+              {
-            },
+                "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": showServices === "1",
-          )}
+              },
-        >
+            )}
-          <ChartBarSquareIcon className="size-[13px]" />
+          >
-        </button>
+            <ChartBarSquareIcon className="size-[13px]" />
-        <button
+          </button>
-          onClick={() => {
+          <button
-            setInline(inline === "0" ? "1" : "0")
+            onClick={() => {
-            localStorage.setItem("inline", inline === "0" ? "1" : "0")
+              setInline(inline === "0" ? "1" : "0")
-          }}
+              localStorage.setItem("inline", inline === "0" ? "1" : "0")
-          className={cn(
+            }}
-            "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
+            className={cn(
-            {
+              "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
-              "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
+              {
-            },
+                "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500": inline === "1",
-          )}
+              },
-        >
+            )}
-          <ViewColumnsIcon className="size-[13px]" />
+          >
-        </button>
+            <ViewColumnsIcon className="size-[13px]" />
-        <GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={setCurrentGroup} />
+          </button>
-      </section>
+          <GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={setCurrentGroup} />
+        </section>
+        <Popover onOpenChange={setSettingsOpen}>
+          <PopoverTrigger asChild>
+            <button
+              className={cn(
+                "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-stone-800 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
+                {
+                  "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-stone-700": settingsOpen,
+                },
+              )}
+            >
+              <CogIcon className="size-[13px]" />
+            </button>
+          </PopoverTrigger>
+          <PopoverContent className="py-2 px-2 w-fit max-w-56 rounded-[8px]">
+            <div className="flex flex-col gap-2">
+              <section className="flex flex-col gap-1">
+                <Label className=" text-stone-500  text-xs">Sort by</Label>
+                <section className="flex items-center gap-1 flex-wrap">
+                  <button className="rounded-[5px] text-[11px] w-fit px-1 py-0.5 cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-black  dark:bg-stone-600 text-white transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Default
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    CPU
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Mem
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Stg
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Up
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Down
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Up Total
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Down Total
+                  </button>
+                </section>
+              </section>
+              <section className="flex flex-col gap-1">
+                <Label className=" text-stone-500  text-xs">Sort order</Label>
+                <section className="flex items-center gap-1">
+                  <button className="rounded-[5px] text-[11px] w-fit px-1 py-0.5 cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-black  dark:bg-stone-600 text-white transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Asc
+                  </button>
+                  <button className="rounded-[5px] text-xs w-fit px-1 py-0.5 cursor-pointer bg-transparent border transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ">
+                    Desc
+                  </button>
+                </section>
+              </section>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </div>
       {showMap === "1" && (
         <GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />
       )}