New view selection menu in servers view

This commit is contained in:
headlessdev 2025-04-26 13:18:26 +02:00
parent fde7b3b23e
commit 2f61974f6e

View File

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