From 2f61974f6ea59914e65f9edda8c8fb318d0cad81 Mon Sep 17 00:00:00 2001
From: headlessdev <damian.bergemann@outlook.com>
Date: Sat, 26 Apr 2025 13:18:26 +0200
Subject: [PATCH] New view selection menu in servers view

---
 app/dashboard/servers/Servers.tsx | 39 +++++++++++++++++++------------
 1 file changed, 24 insertions(+), 15 deletions(-)

diff --git a/app/dashboard/servers/Servers.tsx b/app/dashboard/servers/Servers.tsx
index 7b09fc7..aa80a01 100644
--- a/app/dashboard/servers/Servers.tsx
+++ b/app/dashboard/servers/Servers.tsx
@@ -64,6 +64,7 @@ import Chart from 'chart.js/auto'
 import NextLink from "next/link"
 import { Toaster } from "@/components/ui/sonner"
 import { toast } from "sonner"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 
 interface ServerHistory {
   labels: string[];
@@ -173,10 +174,9 @@ export default function Dashboard() {
   const customInputRef = useRef<HTMLInputElement>(null);
   const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);
 
-  const toggleLayout = () => {
-    const newLayout = !isGridLayout;
-    setIsGridLayout(newLayout);
-    Cookies.set("layoutPreference-servers", newLayout ? "grid" : "standard", {
+  const toggleLayout = (gridLayout: boolean) => {
+    setIsGridLayout(gridLayout);
+    Cookies.set("layoutPreference-servers", gridLayout ? "grid" : "standard", {
       expires: 365,
       path: "/",
       sameSite: "strict",
@@ -541,17 +541,26 @@ export default function Dashboard() {
         <div className="p-6">
           <div className="flex justify-between items-center">
             <span className="text-3xl font-bold">Your Servers</span>
-            <div className="flex gap-2">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button variant="outline" size="icon" onClick={toggleLayout}>
-                      {isGridLayout ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>{isGridLayout ? "Switch to list view" : "Switch to grid view"}</TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+            <div className="flex gap-2">              
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline" size="icon" title="Change view">
+                    {isGridLayout ? (
+                      <LayoutGrid className="h-4 w-4" />
+                    ) : (
+                      <List className="h-4 w-4" />
+                    )}
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem onClick={() => toggleLayout(false)}>
+                    <List className="h-4 w-4 mr-2" /> List View
+                  </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => toggleLayout(true)}>
+                    <LayoutGrid className="h-4 w-4 mr-2" /> Grid View
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
               
               <Select
                 value={String(itemsPerPage)}