Merge pull request #1106 from DJKnaeckebrot/fix/styling-after-sidebar-fixes

fix(style): clean up sidebar related style issue

apps/dokploy/components/dashboard/docker/show/show-containers.tsx

@@ -1,13 +1,13 @@
 import {
-	type ColumnFiltersState,
-	type SortingState,
-	type VisibilityState,
-	flexRender,
-	getCoreRowModel,
-	getFilteredRowModel,
-	getPaginationRowModel,
-	getSortedRowModel,
-	useReactTable,
+  type ColumnFiltersState,
+  type SortingState,
+  type VisibilityState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
 } from "@tanstack/react-table";
 import { ChevronDown, Container } from "lucide-react";
 import * as React from "react";
@@ -15,228 +15,228 @@ import * as React from "react";
 import { AlertBlock } from "@/components/shared/alert-block";
 import { Button } from "@/components/ui/button";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
 import {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import {
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableHeader,
-	TableRow,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
 } from "@/components/ui/table";
 import { type RouterOutputs, api } from "@/utils/api";
 import { columns } from "./colums";
 export type Container = NonNullable<
-	RouterOutputs["docker"]["getContainers"]
+  RouterOutputs["docker"]["getContainers"]
 >[0];
 
 interface Props {
-	serverId?: string;
+  serverId?: string;
 }
 
 export const ShowContainers = ({ serverId }: Props) => {
-	const { data, isLoading } = api.docker.getContainers.useQuery({
-		serverId,
-	});
+  const { data, isLoading } = api.docker.getContainers.useQuery({
+    serverId,
+  });
 
-	const [sorting, setSorting] = React.useState<SortingState>([]);
-	const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-		[],
-	);
-	const [columnVisibility, setColumnVisibility] =
-		React.useState<VisibilityState>({});
-	const [rowSelection, setRowSelection] = React.useState({});
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    []
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState({});
 
-	const table = useReactTable({
-		data: data ?? [],
-		columns,
-		onSortingChange: setSorting,
-		onColumnFiltersChange: setColumnFilters,
-		getCoreRowModel: getCoreRowModel(),
-		getPaginationRowModel: getPaginationRowModel(),
-		getSortedRowModel: getSortedRowModel(),
-		getFilteredRowModel: getFilteredRowModel(),
-		onColumnVisibilityChange: setColumnVisibility,
-		onRowSelectionChange: setRowSelection,
-		state: {
-			sorting,
-			columnFilters,
-			columnVisibility,
-			rowSelection,
-		},
-	});
+  const table = useReactTable({
+    data: data ?? [],
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+    },
+  });
 
-	return (
-		<div className="w-full">
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-8xl mx-auto">
-				<div className="rounded-xl bg-background shadow-md ">
-					<CardHeader className="">
-						<CardTitle className="text-xl flex flex-row gap-2">
-							<Container className="size-6 text-muted-foreground self-center" />
-							Docker Containers
-						</CardTitle>
-						<CardDescription>
-							See all the containers of your dokploy server
-						</CardDescription>
-					</CardHeader>
-					<CardContent className="space-y-2 py-8 border-t">
-						<div className="gap-4 pb-20 w-full">
-							<div className="flex flex-col gap-4  w-full overflow-auto">
-								<div className="flex items-center gap-2 max-sm:flex-wrap">
-									<Input
-										placeholder="Filter by name..."
-										value={
-											(table.getColumn("name")?.getFilterValue() as string) ??
-											""
-										}
-										onChange={(event) =>
-											table
-												.getColumn("name")
-												?.setFilterValue(event.target.value)
-										}
-										className="md:max-w-sm"
-									/>
-									<DropdownMenu>
-										<DropdownMenuTrigger asChild>
-											<Button
-												variant="outline"
-												className="sm:ml-auto max-sm:w-full"
-											>
-												Columns <ChevronDown className="ml-2 h-4 w-4" />
-											</Button>
-										</DropdownMenuTrigger>
-										<DropdownMenuContent align="end">
-											{table
-												.getAllColumns()
-												.filter((column) => column.getCanHide())
-												.map((column) => {
-													return (
-														<DropdownMenuCheckboxItem
-															key={column.id}
-															className="capitalize"
-															checked={column.getIsVisible()}
-															onCheckedChange={(value) =>
-																column.toggleVisibility(!!value)
-															}
-														>
-															{column.id}
-														</DropdownMenuCheckboxItem>
-													);
-												})}
-										</DropdownMenuContent>
-									</DropdownMenu>
-								</div>
-								<div className="rounded-md border">
-									{isLoading ? (
-										<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-											<span className="text-muted-foreground text-lg font-medium">
-												Loading...
-											</span>
-										</div>
-									) : data?.length === 0 ? (
-										<div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
-											<span className="text-muted-foreground text-lg font-medium">
-												No results.
-											</span>
-										</div>
-									) : (
-										<Table>
-											<TableHeader>
-												{table.getHeaderGroups().map((headerGroup) => (
-													<TableRow key={headerGroup.id}>
-														{headerGroup.headers.map((header) => {
-															return (
-																<TableHead key={header.id}>
-																	{header.isPlaceholder
-																		? null
-																		: flexRender(
-																				header.column.columnDef.header,
-																				header.getContext(),
-																			)}
-																</TableHead>
-															);
-														})}
-													</TableRow>
-												))}
-											</TableHeader>
-											<TableBody>
-												{table?.getRowModel()?.rows?.length ? (
-													table.getRowModel().rows.map((row) => (
-														<TableRow
-															key={row.id}
-															data-state={row.getIsSelected() && "selected"}
-														>
-															{row.getVisibleCells().map((cell) => (
-																<TableCell key={cell.id}>
-																	{flexRender(
-																		cell.column.columnDef.cell,
-																		cell.getContext(),
-																	)}
-																</TableCell>
-															))}
-														</TableRow>
-													))
-												) : (
-													<TableRow>
-														<TableCell
-															colSpan={columns.length}
-															className="h-24 text-center"
-														>
-															{isLoading ? (
-																<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-																	<span className="text-muted-foreground text-lg font-medium">
-																		Loading...
-																	</span>
-																</div>
-															) : (
-																<>No results.</>
-															)}
-														</TableCell>
-													</TableRow>
-												)}
-											</TableBody>
-										</Table>
-									)}
-								</div>
-								{data && data?.length > 0 && (
-									<div className="flex items-center justify-end space-x-2 py-4">
-										<div className="space-x-2 flex flex-wrap">
-											<Button
-												variant="outline"
-												size="sm"
-												onClick={() => table.previousPage()}
-												disabled={!table.getCanPreviousPage()}
-											>
-												Previous
-											</Button>
-											<Button
-												variant="outline"
-												size="sm"
-												onClick={() => table.nextPage()}
-												disabled={!table.getCanNextPage()}
-											>
-												Next
-											</Button>
-										</div>
-									</div>
-								)}
-							</div>
-						</div>
-					</CardContent>
-				</div>
-			</Card>
-		</div>
-	);
+  return (
+    <div className="w-full">
+      <Card className="h-full bg-sidebar p-2.5 rounded-xl">
+        <div className="rounded-xl bg-background shadow-md ">
+          <CardHeader className="">
+            <CardTitle className="text-xl flex flex-row gap-2">
+              <Container className="size-6 text-muted-foreground self-center" />
+              Docker Containers
+            </CardTitle>
+            <CardDescription>
+              See all the containers of your dokploy server
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-2 py-8 border-t">
+            <div className="gap-4 pb-20 w-full">
+              <div className="flex flex-col gap-4  w-full overflow-auto">
+                <div className="flex items-center gap-2 max-sm:flex-wrap">
+                  <Input
+                    placeholder="Filter by name..."
+                    value={
+                      (table.getColumn("name")?.getFilterValue() as string) ??
+                      ""
+                    }
+                    onChange={(event) =>
+                      table
+                        .getColumn("name")
+                        ?.setFilterValue(event.target.value)
+                    }
+                    className="md:max-w-sm"
+                  />
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className="sm:ml-auto max-sm:w-full"
+                      >
+                        Columns <ChevronDown className="ml-2 h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      {table
+                        .getAllColumns()
+                        .filter((column) => column.getCanHide())
+                        .map((column) => {
+                          return (
+                            <DropdownMenuCheckboxItem
+                              key={column.id}
+                              className="capitalize"
+                              checked={column.getIsVisible()}
+                              onCheckedChange={(value) =>
+                                column.toggleVisibility(!!value)
+                              }
+                            >
+                              {column.id}
+                            </DropdownMenuCheckboxItem>
+                          );
+                        })}
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </div>
+                <div className="rounded-md border">
+                  {isLoading ? (
+                    <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+                      <span className="text-muted-foreground text-lg font-medium">
+                        Loading...
+                      </span>
+                    </div>
+                  ) : data?.length === 0 ? (
+                    <div className="flex-col gap-2 flex items-center justify-center h-[55vh]">
+                      <span className="text-muted-foreground text-lg font-medium">
+                        No results.
+                      </span>
+                    </div>
+                  ) : (
+                    <Table>
+                      <TableHeader>
+                        {table.getHeaderGroups().map((headerGroup) => (
+                          <TableRow key={headerGroup.id}>
+                            {headerGroup.headers.map((header) => {
+                              return (
+                                <TableHead key={header.id}>
+                                  {header.isPlaceholder
+                                    ? null
+                                    : flexRender(
+                                        header.column.columnDef.header,
+                                        header.getContext()
+                                      )}
+                                </TableHead>
+                              );
+                            })}
+                          </TableRow>
+                        ))}
+                      </TableHeader>
+                      <TableBody>
+                        {table?.getRowModel()?.rows?.length ? (
+                          table.getRowModel().rows.map((row) => (
+                            <TableRow
+                              key={row.id}
+                              data-state={row.getIsSelected() && "selected"}
+                            >
+                              {row.getVisibleCells().map((cell) => (
+                                <TableCell key={cell.id}>
+                                  {flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext()
+                                  )}
+                                </TableCell>
+                              ))}
+                            </TableRow>
+                          ))
+                        ) : (
+                          <TableRow>
+                            <TableCell
+                              colSpan={columns.length}
+                              className="h-24 text-center"
+                            >
+                              {isLoading ? (
+                                <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+                                  <span className="text-muted-foreground text-lg font-medium">
+                                    Loading...
+                                  </span>
+                                </div>
+                              ) : (
+                                <>No results.</>
+                              )}
+                            </TableCell>
+                          </TableRow>
+                        )}
+                      </TableBody>
+                    </Table>
+                  )}
+                </div>
+                {data && data?.length > 0 && (
+                  <div className="flex items-center justify-end space-x-2 py-4">
+                    <div className="space-x-2 flex flex-wrap">
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.previousPage()}
+                        disabled={!table.getCanPreviousPage()}
+                      >
+                        Previous
+                      </Button>
+                      <Button
+                        variant="outline"
+                        size="sm"
+                        onClick={() => table.nextPage()}
+                        disabled={!table.getCanNextPage()}
+                      >
+                        Next
+                      </Button>
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </div>
+      </Card>
+    </div>
+  );
 };

apps/dokploy/components/dashboard/file-system/show-traefik-system.tsx

@@ -1,10 +1,10 @@
 import { AlertBlock } from "@/components/shared/alert-block";
 import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
 } from "@/components/ui/card";
 import { Tree } from "@/components/ui/file-tree";
 import { cn } from "@/lib/utils";
@@ -14,97 +14,97 @@ import React from "react";
 import { ShowTraefikFile } from "./show-traefik-file";
 
 interface Props {
-	serverId?: string;
+  serverId?: string;
 }
 export const ShowTraefikSystem = ({ serverId }: Props) => {
-	const [file, setFile] = React.useState<null | string>(null);
+  const [file, setFile] = React.useState<null | string>(null);
 
-	const {
-		data: directories,
-		isLoading,
-		error,
-		isError,
-	} = api.settings.readDirectories.useQuery(
-		{
-			serverId,
-		},
-		{
-			retry: 2,
-		},
-	);
+  const {
+    data: directories,
+    isLoading,
+    error,
+    isError,
+  } = api.settings.readDirectories.useQuery(
+    {
+      serverId,
+    },
+    {
+      retry: 2,
+    }
+  );
 
-	return (
-		<div className="w-full">
-			<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-8xl mx-auto">
-				<div className="rounded-xl bg-background shadow-md ">
-					<CardHeader className="">
-						<CardTitle className="text-xl flex flex-row gap-2">
-							<FileIcon className="size-6 text-muted-foreground self-center" />
-							Traefik File System
-						</CardTitle>
-						<CardDescription>
-							Manage all the files and directories in {"'/etc/dokploy/traefik'"}
-							.
-						</CardDescription>
+  return (
+    <div className="w-full">
+      <Card className="h-full bg-sidebar p-2.5 rounded-xl">
+        <div className="rounded-xl bg-background shadow-md ">
+          <CardHeader className="">
+            <CardTitle className="text-xl flex flex-row gap-2">
+              <FileIcon className="size-6 text-muted-foreground self-center" />
+              Traefik File System
+            </CardTitle>
+            <CardDescription>
+              Manage all the files and directories in {"'/etc/dokploy/traefik'"}
+              .
+            </CardDescription>
 
-						<AlertBlock type="warning">
-							Adding invalid configuration to existing files, can break your
-							Traefik instance, preventing access to your applications.
-						</AlertBlock>
-					</CardHeader>
-					<CardContent className="space-y-2 py-8 border-t">
-						<div>
-							<div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
-								{isError && (
-									<AlertBlock type="error" className="w-full">
-										{error?.message}
-									</AlertBlock>
-								)}
-								{isLoading && (
-									<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-										<span className="text-muted-foreground text-lg font-medium">
-											Loading...
-										</span>
-										<Loader2 className="animate-spin size-8 text-muted-foreground" />
-									</div>
-								)}
-								{directories?.length === 0 && (
-									<div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
-										<span className="text-muted-foreground text-lg font-medium">
-											No directories or files detected in{" "}
-											{"'/etc/dokploy/traefik'"}
-										</span>
-										<Folder className="size-8 text-muted-foreground" />
-									</div>
-								)}
-								{directories && directories?.length > 0 && (
-									<>
-										<Tree
-											data={directories}
-											className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
-											onSelectChange={(item) => setFile(item?.id || null)}
-											folderIcon={Folder}
-											itemIcon={Workflow}
-										/>
-										<div className="w-full">
-											{file ? (
-												<ShowTraefikFile path={file} serverId={serverId} />
-											) : (
-												<div className="h-full w-full flex-col gap-2 flex items-center justify-center">
-													<span className="text-muted-foreground text-lg font-medium">
-														No file selected
-													</span>
-													<FileIcon className="size-8 text-muted-foreground" />
-												</div>
-											)}
-										</div>
-									</>
-								)}
-							</div>
-						</div>
-					</CardContent>
-				</div>
-			</Card>
-		</div>
-	);
+            <AlertBlock type="warning">
+              Adding invalid configuration to existing files, can break your
+              Traefik instance, preventing access to your applications.
+            </AlertBlock>
+          </CardHeader>
+          <CardContent className="space-y-2 py-8 border-t">
+            <div>
+              <div className="flex flex-col lg:flex-row gap-4 md:gap-10 w-full">
+                {isError && (
+                  <AlertBlock type="error" className="w-full">
+                    {error?.message}
+                  </AlertBlock>
+                )}
+                {isLoading && (
+                  <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+                    <span className="text-muted-foreground text-lg font-medium">
+                      Loading...
+                    </span>
+                    <Loader2 className="animate-spin size-8 text-muted-foreground" />
+                  </div>
+                )}
+                {directories?.length === 0 && (
+                  <div className="w-full flex-col gap-2 flex items-center justify-center h-[55vh]">
+                    <span className="text-muted-foreground text-lg font-medium">
+                      No directories or files detected in{" "}
+                      {"'/etc/dokploy/traefik'"}
+                    </span>
+                    <Folder className="size-8 text-muted-foreground" />
+                  </div>
+                )}
+                {directories && directories?.length > 0 && (
+                  <>
+                    <Tree
+                      data={directories}
+                      className="lg:max-w-[19rem] w-full lg:h-[660px] border rounded-lg"
+                      onSelectChange={(item) => setFile(item?.id || null)}
+                      folderIcon={Folder}
+                      itemIcon={Workflow}
+                    />
+                    <div className="w-full">
+                      {file ? (
+                        <ShowTraefikFile path={file} serverId={serverId} />
+                      ) : (
+                        <div className="h-full w-full flex-col gap-2 flex items-center justify-center">
+                          <span className="text-muted-foreground text-lg font-medium">
+                            No file selected
+                          </span>
+                          <FileIcon className="size-8 text-muted-foreground" />
+                        </div>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </CardContent>
+        </div>
+      </Card>
+    </div>
+  );
 };

apps/dokploy/components/dashboard/monitoring/web-server/show.tsx

@@ -3,7 +3,7 @@ import { DockerMonitoring } from "../docker/show";
 
 export const ShowMonitoring = () => {
 	return (
-		<div className="my-6 w-full ">
+		<div className="w-full">
 			<DockerMonitoring appName="dokploy" />
 		</div>
 	);

apps/dokploy/components/dashboard/projects/show.tsx

@@ -75,7 +75,7 @@ export const ShowProjects = () => {
 				list={[{ name: "Projects", href: "/dashboard/projects" }]}
 			/>
 			<div className="w-full">
-				<Card className="h-full bg-sidebar  p-2.5 rounded-xl  ">
+				<Card className="h-full bg-sidebar p-2.5 rounded-xl  ">
 					<div className="rounded-xl bg-background shadow-md ">
 						<div className="flex justify-between gap-4 w-full items-center">
 							<CardHeader className="">

apps/dokploy/components/dashboard/swarm/monitoring-card.tsx

@@ -70,7 +70,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 	);
 
 	return (
-		<Card className="h-full bg-sidebar  p-2.5 rounded-xl  max-w-8xl mx-auto w-full">
+		<Card className="h-full bg-sidebar  p-2.5 rounded-xl mx-auto w-full">
 			<div className="rounded-xl bg-background shadow-md p-6 flex flex-col gap-4">
 				<header className="flex items-center justify-between">
 					<div className="space-y-1">
@@ -94,7 +94,7 @@ export default function SwarmMonitorCard({ serverId }: Props) {
 					)}
 				</header>
 
-				<div className="grid gap-6 md:grid-cols-3">
+				<div className="grid gap-6 lg:grid-cols-3">
 					<Card className="bg-background">
 						<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
 							<CardTitle className="text-sm font-medium">Total Nodes</CardTitle>

apps/dokploy/components/layouts/side.tsx

@@ -8,6 +8,7 @@ import {
 	BlocksIcon,
 	BookIcon,
 	ChevronRight,
+	CircleHelp,
 	Command,
 	CreditCard,
 	Database,
@@ -127,7 +128,7 @@ const data = {
 			isActive: false,
 		},
 		{
-			title: "File System",
+			title: "Traefik File System",
 			url: "/dashboard/traefik",
 			icon: GalleryVerticalEnd,
 			isSingle: true,
@@ -317,9 +318,15 @@ const data = {
 		},
 		{
 			name: "Support",
+			url: "https://discord.gg/2tBnJ3jDJc",
+			icon: CircleHelp,
+		},
+		{
+			name: "Sponsor",
 			url: "https://opencollective.com/dokploy",
 			icon: Heart,
 		},
+
 		// {
 		// 	name: "Sales & Marketing",
 		// 	url: "#",

apps/dokploy/pages/dashboard/settings/profile.tsx

@@ -26,7 +26,7 @@ const Page = () => {
 	const { data: isCloud } = api.settings.isCloud.useQuery();
 	return (
 		<div className="w-full">
-			<div className="h-full  p-2.5 rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
+			<div className="h-full rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
 				<ProfileForm />
 				{(user?.canAccessToAPI || data?.rol === "admin") && <GenerateToken />}
 

apps/dokploy/pages/dashboard/settings/server.tsx

@@ -13,7 +13,7 @@ import superjson from "superjson";
 const Page = () => {
 	return (
 		<div className="w-full">
-			<div className="h-full  p-2.5 rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
+			<div className="h-full rounded-xl  max-w-5xl mx-auto flex flex-col gap-4">
 				<WebDomain />
 				<WebServer />
 			</div>