feat: navbar context menu

apps/www/package.json

@@ -24,6 +24,7 @@
 		"@radix-ui/react-aspect-ratio": "1.1.1",
 		"@radix-ui/react-avatar": "1.1.1",
 		"@radix-ui/react-collapsible": "1.1.1",
+		"@radix-ui/react-context-menu": "^2.2.6",
 		"@radix-ui/react-hover-card": "1.1.1",
 		"@radix-ui/react-icons": "1.3.0",
 		"@radix-ui/react-menubar": "1.1.1",

apps/www/src/app/(main)/layout.tsx

@@ -40,6 +40,7 @@ import { ClerkProvider } from "@clerk/nextjs";
 import Link from "next/link";
 import { NavBar } from "@/components/feat/navbar/navbar";
 import { TooltipProvider } from "@/components/ui/tooltip";
+import { ThemeProvider } from "@/components/util/theme-provider";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -70,8 +71,15 @@ export default function RootLayout({
               </main>
             </noscript>
             <IsScript>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="system"
+                enableSystem
+                disableTransitionOnChange
+              >
                 <NavBar />
                 <div className="pt-16">{children}</div>
+              </ThemeProvider>
             </IsScript>
           </TooltipProvider>
         </body>

apps/www/src/components/feat/navbar/navbar.tsx

@@ -1,8 +1,19 @@
 "use client";
 import { BrandingGenericIcon } from "@/components/feat/icons/branding-icons";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import Github from "@/components/ui/github";
+import { ALegacy } from "@/components/util/link";
+import { ModeToggle } from "@/components/util/mode-toggle";
 import { version } from "@/config/version";
 import { useScroll } from "@/lib/hooks/use-scroll";
 import { cn } from "@/lib/utils";
+import { ServerCrash } from "lucide-react";
 import Link from "next/link";
 
 export function NavBar() {
@@ -12,10 +23,13 @@ export function NavBar() {
     <div
       className={cn(
         "w-screen h-[3rem] grid-cols-3 fixed backdrop-blur-xl z-10 flex",
-        "items-center justify-self-start me-auto pl-4 flex-1 transition-all",
+        "items-center justify-self-start me-auto pl-4 flex-1 transition-all justify-between",
         showBorder ? "border-b" : ""
       )}
     >
+      <span>
+        <ContextMenu>
+          <ContextMenuTrigger>
             <Link className="gap-5 flex items-center " href="/">
               <BrandingGenericIcon className="max-w-[32px] max-h-[32px] mt-0.5" />
               <span className="gap-2 flex group hover:text-blue-500 hover:underline transition-all">
@@ -25,6 +39,29 @@ export function NavBar() {
                 </span>
               </span>
             </Link>
+          </ContextMenuTrigger>
+          <ContextMenuContent className="overflow-hidden min-w-[300px]">
+            <ALegacy href="Special:Root">
+              <ContextMenuItem>
+                <span className="pl-2 flex gap-2 items-center">
+                  <ServerCrash size={16} /> Go home
+                </span>
+              </ContextMenuItem>
+            </ALegacy>
+            <ContextMenuSeparator />
+            <ALegacy href="Special:GitHub">
+              <ContextMenuItem>
+                <span className="pl-2 flex gap-2 items-center">
+                  <Github /> Open GitHub
+                </span>
+              </ContextMenuItem>
+            </ALegacy>
+          </ContextMenuContent>
+        </ContextMenu>
+      </span>
+      <span className="mr-3">
+        <ModeToggle />
+      </span>
     </div>
   );
 }

apps/www/src/components/feat/server-list/statistics.tsx

@@ -6,9 +6,10 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import type { OnlineServer } from "@/lib/types/mh-server";
-import { InfoIcon } from "lucide-react";
+import { ChartArea, InfoIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import IconDisplay from "../icons/minecraft-icon-display";
 
 export function Statistics({
   totalPlayers,
@@ -70,8 +71,8 @@ export function Statistics({
             className={
               !averagesLoading && !error
                 ? (averages?.totalPlayerAverage as number) > totalPlayers
-                  ? "text-red-400"
+                  ? "text-rose-400"
-                  : "text-green-400"
+                  : "text-lime-400"
                 : ""
             }
           >
@@ -113,8 +114,8 @@ export function Statistics({
             className={
               !averagesLoading && !error
                 ? (averages?.totalServerAverage as number) > totalServers
-                  ? "text-red-400"
+                  ? "text-rose-400"
-                  : "text-green-400"
+                  : "text-lime-400"
                 : ""
             }
           >
@@ -136,8 +137,13 @@ export function Statistics({
         </span>
       </Material>
       <Material className="gap-2">
-        <strong>Top Server</strong> <br />
+        <strong className="justify-between flex items-center">
-        <span className="text-lg"> {topServer.name}</span>
+          Top Server <ChartArea size={16} className="text-muted-foreground" />
+        </strong>{" "}
+        <span className="text-lg gap-2 flex items-center">
+          {topServer.name}
+          <IconDisplay server={topServer} />
+        </span>
       </Material>
     </div>
   );

apps/www/src/components/ui/context-menu.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Material } from "./material";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "backdrop-blur-xl w-max max-w-[280px] z-[100] origin-top-left max-h-[32rem] overflow-auto list-none shadow-xl rounded-xl",
+        className
+      )}
+      data-align="end"
+      data-side="left"
+      {...props}
+    >
+      <div className="animate-scale-in">
+        <Material
+          className="flex flex-col py-2 list-none bg-white/80 dark:bg-zinc-900/80 px-2"
+          color="distinct"
+          padding="none"
+          rounding="xl"
+        >
+          {props.children}
+        </Material>
+      </div>
+    </ContextMenuPrimitive.Content>
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "w-full px-2 rounded-lg z-[100] min-h-[36px] font-normal flex items-center cursor-pointer hover:dark:bg-zinc-800/70",
+      props.disabled ? "opacity-70 pointer-events-none cursor-not-allowed" : "",
+      "duration-100 border border-transparent bg-transparent hover:bg-slate-100 dark:text-zinc-200",
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px ", className)}
+    {...props}
+  />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

apps/www/src/components/ui/dropdown-menu.tsx

@@ -1,27 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
+import { Material } from "./material";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -36,9 +37,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className="ml-auto" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -52,9 +53,9 @@ const DropdownMenuSubContent = React.forwardRef<
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -63,35 +64,47 @@ const DropdownMenuContent = React.forwardRef<
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
-      sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "backdrop-blur-xl w-max z-[100] max-w-[280px] origin-top-left max-h-[32rem] overflow-auto list-none shadow-xl rounded-xl",
-        "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}
-    />
+    >
+      <div className="animate-scale-in">
+        <Material
+          className="flex flex-col py-2 list-none bg-white/80 dark:bg-zinc-900/80 px-2"
+          color="distinct"
+          padding="none"
+          rounding="xl"
+        >
+          <div className="overflow-y-auto max-h-[calc(32rem-1rem)]">
+            {props.children}
+          </div>
+        </Material>
+      </div>
+    </DropdownMenuPrimitive.Content>
   </DropdownMenuPrimitive.Portal>
-))
+));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "w-full px-2 rounded-lg z-[100] min-h-[36px] font-normal flex items-center cursor-pointer hover:dark:bg-zinc-800/70",
-      inset && "pl-8",
+      props.disabled ? "opacity-70 pointer-events-none cursor-not-allowed" : "",
+      "duration-100 border border-transparent bg-transparent hover:bg-slate-100 dark:text-zinc-200",
       className
     )}
     {...props}
   />
-))
+));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -113,9 +126,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -136,13 +149,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
+));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -154,8 +167,8 @@ const DropdownMenuLabel = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -166,8 +179,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
+));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -178,9 +191,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
+  );
-}
+};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -198,4 +211,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};

apps/www/src/components/ui/menu.tsx

@@ -1,81 +0,0 @@
-import { cn } from "@/lib/utils";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React from "react";
-import { Material } from "./material";
-import { Button, type ButtonProps } from "./button";
-
-const MenuContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(
-  (
-    { className, align = "start", side = "bottom", sideOffset = 4, ...props },
-    ref
-  ) => (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        ref={ref}
-        align={align}
-        sideOffset={sideOffset}
-        side={side}
-        className={cn(
-          "backdrop-blur-xl w-max max-w-[280px] origin-top-left max-h-[32rem] overflow-auto list-none shadow-xl rounded-xl",
-          className
-        )}
-        {...props}
-      >
-        <div className="animate-scale-in">
-          <Material
-            className="flex flex-col py-2 list-none bg-white/80 dark:bg-zinc-900/80 px-2"
-            color="distinct"
-            padding="none"
-            rounding="xl"
-          >
-            <div className="overflow-y-auto max-h-[calc(32rem-1rem)]">
-              {props.children}
-            </div>
-          </Material>
-        </div>
-      </PopoverPrimitive.Content>
-    </PopoverPrimitive.Portal>
-  )
-);
-
-MenuContent.displayName = PopoverPrimitive.Content.displayName;
-
-function MenuButton(props: ButtonProps) {
-  const variant = props.variant ?? "tertiary";
-  const alignment = props.alignment ?? "left";
-
-  return (
-    <Button
-      rounding="none"
-      className={cn(
-        "w-full px-2 rounded-lg min-h-[36px] font-normal flex items-center",
-        props.disabled
-          ? "opacity-70 pointer-events-none cursor-not-allowed"
-          : "",
-        variant === "tertiary" ? "hover:dark:bg-zinc-800/70" : "",
-        "duration-100",
-        props.className
-      )}
-      variant={variant}
-      alignment={alignment}
-      {...props}
-    />
-  );
-}
-
-function MenuButtonPrefix({ children }: { children: React.ReactNode }) {
-  return <span className="contents flex-shrink-0">{children}</span>;
-}
-
-function MenuSeparator({ children }: { children?: React.ReactNode }) {
-  return (
-    <span className="text-slate-800 dark:text-zinc-200 text-xs font-medium py-2 px-2 block">
-      {children}
-    </span>
-  );
-}
-
-export { MenuContent, MenuButton, MenuButtonPrefix, MenuSeparator };

apps/www/src/components/ui/separator.tsx

@@ -18,7 +18,7 @@ const Separator = React.forwardRef<
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-slate-200",
+        "shrink-0 dark:bg-border bg-slate-200 ",
         orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       )}

apps/www/src/components/util/link.tsx

@@ -69,7 +69,7 @@ export function ALegacy({
   return (
     <NextLink
       href={pageFind(href || "") || "#"}
-      className="no-underline transition duration-300 hover:underline "
+      className="no-underline transition duration-300 "
       title={href}
     >
       {(href || "").startsWith("Docs:") && (
@@ -95,7 +95,8 @@ export const pageFind = (text: string) => {
   if (text === "Special:AccountOptions") return "/account/settings/options";
   if (text.startsWith("Server:") && text.endsWith("/Customization"))
     return "/server/" + text.substring(7, text.length - 14) + "/customization";
-  if (text === "Special:ClerkConvertionPage") return process.env.NEXT_PUBLIC_CLERK_SWITCH_DOMAIN;
+  if (text === "Special:ClerkConvertionPage")
+    return process.env.NEXT_PUBLIC_CLERK_SWITCH_DOMAIN;
   if (text.startsWith("Server:")) return "/server/" + text.substring(7);
   if (text.startsWith("Wiki:"))
     return "https://minehut.wiki.gg/wiki/" + text.substring(5);

apps/www/src/components/util/mode-toggle.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+
+export function ModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="tertiary"
+          className="flex items-center"
+          size="square-lg"
+        >
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

yarn.lock

@@ -1639,7 +1639,7 @@
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz#6f766faa975f8738269ebb8a23bad4f5a8d2faec"
   integrity sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==
 
-"@radix-ui/react-context-menu@^2.1.5":
+"@radix-ui/react-context-menu@^2.1.5", "@radix-ui/react-context-menu@^2.2.6":
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.2.6.tgz#752fd1d91f92bba287ef2b558770f4ca7d74523e"
   integrity sha512-aUP99QZ3VU84NPsHeaFt4cQUNgJqFsLLOt/RbbWXszZ6MP0DpDyjkFZORr4RpAEx3sUBk+Kc8h13yGtC5Qw8dg==