Grid View/Switch View

app/dashboard/applications/Applications.tsx

@@ -16,7 +16,7 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { Button } from "@/components/ui/button";
-import { Plus, Link, Home, Trash2 } from "lucide-react";
+import { Plus, Link, Home, Trash2, LayoutGrid, List } from "lucide-react";
 import {
   Card,
   CardContent,
@@ -55,7 +55,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-
+import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
 import axios from 'axios';
 
@@ -70,6 +70,22 @@ export default function Dashboard() {
   const [maxPage, setMaxPage] = useState(1);
   const [applications, setApplications] = useState([]);
   const [servers, setServers] = useState([]);
+  const [isGridLayout, setIsGridLayout] = useState(false);
+
+  useEffect(() => {
+    const savedLayout = Cookies.get('layoutPreference');
+    setIsGridLayout(savedLayout === 'grid');
+  }, []);
+
+  const toggleLayout = () => {
+    const newLayout = !isGridLayout;
+    setIsGridLayout(newLayout);
+    Cookies.set('layoutPreference', newLayout ? 'grid' : 'standard', {
+      expires: 365,
+      path: '/',
+      sameSite: 'strict'
+    });
+  };
 
   const add = async () => {
     try {
@@ -142,6 +158,15 @@ export default function Dashboard() {
         <div className="pl-4 pr-4">
           <div className="flex justify-between items-center">
             <span className="text-2xl font-semibold">Your Applications</span>
+            <div className="flex gap-2">
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={toggleLayout}
+                title={isGridLayout ? "Switch to list view" : "Switch to grid view"}
+              >
+                {isGridLayout ? <List className="h-4 w-4" /> : <LayoutGrid className="h-4 w-4" />}
+              </Button>
               {servers.length === 0 ? (
                 <p className="text-muted-foreground">You must first add a server.</p>
               ) : (
@@ -204,9 +229,18 @@ export default function Dashboard() {
                 </AlertDialog>
               )}
           </div>
+          </div>
           <br />
+          <div className={isGridLayout ? 
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : 
+            "space-y-4"}>
             {applications.map((app) => (
-            <Card key={app.id} className="w-full mb-4">
+              <Card 
+                key={app.id} 
+                className={isGridLayout ? 
+                  "h-full flex flex-col justify-between" : 
+                  "w-full mb-4"}
+              >
                 <CardHeader>
                   <div className="flex items-center justify-between w-full">
                     <div className="flex items-center">
@@ -261,6 +295,7 @@ export default function Dashboard() {
               </CardHeader>
             </Card>
           ))}
+          </div>
           <div className="pt-4">
             <Pagination>
               <PaginationContent>

app/dashboard/servers/Servers.tsx

@@ -16,7 +16,7 @@ import {
   SidebarTrigger,
 } from "@/components/ui/sidebar"
 import { Button } from "@/components/ui/button"
-import { Plus, Link, MonitorCog, FileDigit, Trash2 } from "lucide-react" // Importiere Icons
+import { Plus, Link, MonitorCog, FileDigit, Trash2, LayoutGrid, List } from "lucide-react"
 import {
   Card,
   CardContent,
@@ -60,7 +60,7 @@ import {
     TooltipProvider,
     TooltipTrigger,
   } from "@/components/ui/tooltip"
-  
+import Cookies from "js-cookie";
 import { useState, useEffect } from "react";
 import axios from 'axios';
 
@@ -69,10 +69,25 @@ export default function Dashboard() {
   const [os, setOs] = useState("");
   const [ip, setIp] = useState("");
   const [url, setUrl] = useState("");
-
   const [currentPage, setCurrentPage] = useState(1);
   const [maxPage, setMaxPage] = useState(1);
   const [servers, setServers] = useState([]);
+  const [isGridLayout, setIsGridLayout] = useState(false);
+
+  useEffect(() => {
+    const savedLayout = Cookies.get('layoutPreference');
+    setIsGridLayout(savedLayout === 'grid');
+  }, []);
+
+  const toggleLayout = () => {
+    const newLayout = !isGridLayout;
+    setIsGridLayout(newLayout);
+    Cookies.set('layoutPreference', newLayout ? 'grid' : 'standard', {
+      expires: 365,
+      path: '/',
+      sameSite: 'strict'
+    });
+  };
 
   const add = async () => {
     try {
@@ -140,8 +155,31 @@ export default function Dashboard() {
           </div>
         </header>
         <div className="pl-4 pr-4">
-          <div className="flex justify-between">
+          <div className="flex justify-between items-center">
             <span className="text-2xl font-semibold">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>
               <AlertDialog>
                 <AlertDialogTrigger asChild>
                   <Button variant="outline" size="icon">
@@ -197,9 +235,18 @@ export default function Dashboard() {
                 </AlertDialogContent>
               </AlertDialog>
             </div>
+          </div>
           <br />
+          <div className={isGridLayout ? 
+            "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" : 
+            "space-y-4"}>
             {servers.map((server) => (
-            <Card key={server.id} className="w-full mb-4">
+              <Card 
+                key={server.id} 
+                className={isGridLayout ? 
+                  "h-full flex flex-col justify-between" : 
+                  "w-full mb-4"}
+              >
                 <CardHeader>
                   <div className="flex items-center justify-between w-full">
                     <div className="flex items-center">
@@ -245,6 +292,7 @@ export default function Dashboard() {
                 </CardHeader>
               </Card>
             ))}
+          </div>
           <div className="pt-4">
             <Pagination>
               <PaginationContent>