feat: Add a list view to the Docker management page (#1237)

https://github.com/Termix-SSH/Support/issues/1237

src/types/ui-preferences.ts

@@ -43,6 +43,7 @@ export type UiEmptyStateVerbosity = "minimal" | "guided";
 export type UiToolbarDensity = "icon" | "labeled" | "expanded";
 export type UiFileViewMode = "grid" | "list";
 export type UiDockerViewMode = "list" | "detail";
+export type UiDockerContainerLayout = "card" | "table";
 export type UiHostEditorMode = "simple" | "full";
 
 export interface UiChromePreferences {
@@ -84,6 +85,7 @@ export interface UiFileManagerPreferences {
 
 export interface UiDockerPreferences {
   viewMode: UiDockerViewMode;
+  containerLayout: UiDockerContainerLayout;
 }
 
 export interface UiHostMetricsPreferences {
@@ -228,7 +230,7 @@ export const PRESETS: Record<Exclude<UiPreset, "custom">, UiAreaPreferences> = {
     },
     terminal: { toolbarDensity: "icon" },
     fileManager: { viewMode: "grid", showHiddenFiles: false },
-    docker: { viewMode: "list" },
+    docker: { viewMode: "list", containerLayout: "card" },
     hostMetrics: { enabledCards: SIMPLE_HOST_METRICS_CARDS, columns: 1 },
     hostEditor: { mode: "simple" },
     homepage: { enabledWidgets: null },
@@ -253,7 +255,7 @@ export const PRESETS: Record<Exclude<UiPreset, "custom">, UiAreaPreferences> = {
     terminal: { toolbarDensity: "labeled" },
     // FileManager.tsx has always defaulted to grid when nothing is stored.
     fileManager: { viewMode: "grid", showHiddenFiles: false },
-    docker: { viewMode: "list" },
+    docker: { viewMode: "list", containerLayout: "card" },
     // 3 is defaultLayoutFromWidgets's own default, i.e. today's behavior.
     hostMetrics: { enabledCards: BALANCED_HOST_METRICS_CARDS, columns: 3 },
     hostEditor: { mode: "full" },
@@ -279,7 +281,7 @@ export const PRESETS: Record<Exclude<UiPreset, "custom">, UiAreaPreferences> = {
     terminal: { toolbarDensity: "expanded" },
     // List packs more files and metadata per screen than the grid.
     fileManager: { viewMode: "list", showHiddenFiles: true },
-    docker: { viewMode: "detail" },
+    docker: { viewMode: "detail", containerLayout: "table" },
     hostMetrics: { enabledCards: ADVANCED_HOST_METRICS_CARDS, columns: 4 },
     hostEditor: { mode: "full" },
     homepage: { enabledWidgets: null },
@@ -339,6 +341,7 @@ const AREA_SPECS: {
   },
   docker: {
     viewMode: { kind: "enum", values: ["list", "detail"] },
+    containerLayout: { kind: "enum", values: ["card", "table"] },
   },
   hostMetrics: {
     enabledCards: { kind: "stringArray" },

src/ui/features/docker/DockerManager.tsx

@@ -9,6 +9,8 @@ import {
   AlertCircle,
   Box,
   ExternalLink,
+  Grid3X3,
+  List as ListIcon,
   RefreshCw,
   Search,
 } from "lucide-react";
@@ -27,12 +29,16 @@ import {
   getSSHHosts,
 } from "@/main-axios.ts";
 import { ContainerList } from "./components/ContainerList.tsx";
+import { ContainerTable } from "./components/ContainerTable.tsx";
 import { ContainerDetail } from "./components/ContainerDetail.tsx";
 import { TOTPDialog } from "@/ssh/dialogs/TOTPDialog.tsx";
 import { SSHAuthDialog } from "@/ssh/dialogs/SSHAuthDialog.tsx";
 import { WarpgateDialog } from "@/ssh/dialogs/WarpgateDialog.tsx";
 import { useTabsSafe } from "@/shell/TabContext.tsx";
-import { useAreaPreferences } from "@/contexts/UiPreferencesContext";
+import {
+  useAreaPreferences,
+  useUiPreferencesContext,
+} from "@/contexts/UiPreferencesContext";
 import {
   ConnectionLogProvider,
   useConnectionLog,
@@ -71,6 +77,7 @@ function DockerManagerInner({
   const { addLog, setLogs, clearLogs } = useConnectionLog();
   const { currentTab, removeTab } = useTabsSafe();
   const dockerPrefs = useAreaPreferences("docker");
+  const uiPrefsCtx = useUiPreferencesContext();
   const [currentHostConfig, setCurrentHostConfig] = React.useState(hostConfig);
   const [sessionId, setSessionId] = React.useState<string | null>(null);
   const [containers, setContainers] = React.useState<DockerContainer[]>([]);
@@ -78,6 +85,20 @@ function DockerManagerInner({
   const [selectedContainer, setSelectedContainer] = React.useState<
     string | null
   >(null);
+  const [detailInitialTab, setDetailInitialTab] = React.useState<
+    "logs" | "stats" | "console"
+  >("logs");
+  const [containerLayout, setContainerLayout] = React.useState<
+    "card" | "table"
+  >(dockerPrefs.containerLayout);
+
+  const handleSetContainerLayout = React.useCallback(
+    (layout: "card" | "table") => {
+      setContainerLayout(layout);
+      uiPrefsCtx?.setOverride("docker", "containerLayout", layout);
+    },
+    [uiPrefsCtx],
+  );
   const [isConnecting, setIsConnecting] = React.useState(false);
   const [dockerValidation, setDockerValidation] =
     React.useState<DockerValidation | null>(null);
@@ -674,6 +695,7 @@ function DockerManagerInner({
             containers={containers}
             hostConfig={currentHostConfig}
             onBack={handleBack}
+            initialTab={detailInitialTab}
           />
         ) : (
           <div className="flex-1 overflow-y-auto px-3 py-3 flex flex-col gap-3">
@@ -724,6 +746,29 @@ function DockerManagerInner({
                   </option>
                 </Select2>
                 <Separator orientation="vertical" className="h-8 mx-1" />
+                <div className="flex items-center border border-border overflow-hidden">
+                  <Button
+                    variant={containerLayout === "card" ? "secondary" : "ghost"}
+                    size="icon"
+                    onClick={() => handleSetContainerLayout("card")}
+                    className={`size-8 rounded-none ${containerLayout === "card" ? "bg-accent-brand/10 text-accent-brand" : ""}`}
+                    title={t("docker.cardView")}
+                  >
+                    <Grid3X3 className="size-4" />
+                  </Button>
+                  <Button
+                    variant={
+                      containerLayout === "table" ? "secondary" : "ghost"
+                    }
+                    size="icon"
+                    onClick={() => handleSetContainerLayout("table")}
+                    className={`size-8 rounded-none border-l border-border ${containerLayout === "table" ? "bg-accent-brand/10 text-accent-brand" : ""}`}
+                    title={t("docker.listView")}
+                  >
+                    <ListIcon className="size-4" />
+                  </Button>
+                </div>
+                <Separator orientation="vertical" className="h-8 mx-1" />
                 <Button
                   variant="ghost"
                   size="icon"
@@ -754,12 +799,27 @@ function DockerManagerInner({
                     {t("docker.loadingContainers")}
                   </span>
                 </div>
+              ) : containerLayout === "table" ? (
+                <ContainerTable
+                  containers={containers}
+                  sessionId={sessionId}
+                  onSelectContainer={(id, tab) => {
+                    setSelectedContainer(id);
+                    setDetailInitialTab(tab ?? "logs");
+                    setViewMode("detail");
+                  }}
+                  selectedContainerId={selectedContainer}
+                  onRefresh={refreshContainers}
+                  search={search}
+                  statusFilter={statusFilter}
+                />
               ) : (
                 <ContainerList
                   containers={containers}
                   sessionId={sessionId}
                   onSelectContainer={(id) => {
                     setSelectedContainer(id);
+                    setDetailInitialTab("logs");
                     setViewMode("detail");
                   }}
                   selectedContainerId={selectedContainer}

src/ui/features/docker/components/ContainerDetail.tsx

@@ -17,25 +17,31 @@ import { ContainerStats } from "./ContainerStats.tsx";
 import { ConsoleTerminal } from "./ConsoleTerminal.tsx";
 import { DockerBadge } from "./ContainerCard.tsx";
 
+type DetailTab = "logs" | "stats" | "console";
+
 interface ContainerDetailProps {
   sessionId: string;
   containerId: string;
   containers: DockerContainer[];
   hostConfig: SSHHost;
   onBack: () => void;
+  initialTab?: DetailTab;
 }
 
-type DetailTab = "logs" | "stats" | "console";
-
 export function ContainerDetail({
   sessionId,
   containerId,
   containers,
   hostConfig,
   onBack,
+  initialTab = "logs",
 }: ContainerDetailProps): React.ReactElement {
   const { t } = useTranslation();
-  const [activeTab, setActiveTab] = React.useState<DetailTab>("logs");
+  const [activeTab, setActiveTab] = React.useState<DetailTab>(initialTab);
+
+  React.useEffect(() => {
+    setActiveTab(initialTab);
+  }, [containerId, initialTab]);
 
   const container = containers.find((c) => c.id === containerId);
   const containerName = container

src/ui/features/docker/components/ContainerTable.tsx

@@ -0,0 +1,263 @@
+import { getErrorMessage } from "../../../lib/error-message.js";
+import React from "react";
+import { Box, List, Play, RefreshCw, Square, Terminal } from "lucide-react";
+import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
+import { Button } from "@/components/button.tsx";
+import type { DockerContainer } from "@/types";
+import { startDockerContainer, stopDockerContainer } from "@/main-axios.ts";
+import { DockerBadge } from "./ContainerCard.tsx";
+
+type DetailTab = "logs" | "stats" | "console";
+
+interface ContainerTableProps {
+  containers: DockerContainer[];
+  sessionId: string;
+  onSelectContainer: (containerId: string, tab?: DetailTab) => void;
+  selectedContainerId?: string | null;
+  onRefresh?: () => void;
+  search?: string;
+  statusFilter?: string;
+}
+
+export function ContainerTable({
+  containers,
+  sessionId,
+  onSelectContainer,
+  selectedContainerId = null,
+  onRefresh,
+  search = "",
+  statusFilter = "all",
+}: ContainerTableProps): React.ReactElement {
+  const { t } = useTranslation();
+  const [pendingId, setPendingId] = React.useState<string | null>(null);
+
+  const filtered = React.useMemo(() => {
+    return containers.filter((c) => {
+      const name = c.name.startsWith("/") ? c.name.slice(1) : c.name;
+      const matchesSearch =
+        name.toLowerCase().includes(search.toLowerCase()) ||
+        c.image.toLowerCase().includes(search.toLowerCase()) ||
+        c.id.toLowerCase().includes(search.toLowerCase());
+      return (
+        matchesSearch && (statusFilter === "all" || c.state === statusFilter)
+      );
+    });
+  }, [containers, search, statusFilter]);
+
+  const handleToggleRun = async (
+    e: React.MouseEvent,
+    container: DockerContainer,
+  ) => {
+    e.stopPropagation();
+    const containerName = container.name.startsWith("/")
+      ? container.name.slice(1)
+      : container.name;
+    setPendingId(container.id);
+    try {
+      if (container.state === "running") {
+        await stopDockerContainer(sessionId, container.id);
+        toast.success(t("docker.containerStopped", { name: containerName }));
+      } else {
+        await startDockerContainer(sessionId, container.id);
+        toast.success(t("docker.containerStarted", { name: containerName }));
+      }
+      onRefresh?.();
+    } catch (err) {
+      toast.error(
+        container.state === "running"
+          ? t("docker.failedToStopContainer", { error: getErrorMessage(err) })
+          : t("docker.failedToStartContainer", {
+              error: getErrorMessage(err),
+            }),
+      );
+    } finally {
+      setPendingId(null);
+    }
+  };
+
+  if (containers.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full opacity-20 py-20">
+        <Box className="size-16 mb-4" />
+        <span className="text-xl font-bold uppercase tracking-widest">
+          {t("docker.noContainersFound")}
+        </span>
+        <span className="text-xs font-semibold">
+          {t("docker.noContainersFoundHint")}
+        </span>
+      </div>
+    );
+  }
+
+  if (filtered.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full opacity-20 py-20">
+        <Box className="size-16 mb-4" />
+        <span className="text-xl font-bold uppercase tracking-widest">
+          {t("docker.noContainersMatchFilters")}
+        </span>
+        <span className="text-xs font-semibold">
+          {t("docker.noContainersMatchFiltersHint")}
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col overflow-hidden border border-border bg-card">
+      <div className="min-h-0 flex-1 overflow-y-auto thin-scrollbar">
+        <table className="w-full border-collapse text-xs">
+          <thead className="sticky top-0 z-10 bg-card">
+            <tr className="border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground">
+              <th className="px-3 py-2 text-left font-semibold">
+                {t("docker.name")}
+              </th>
+              <th className="px-3 py-2 text-left font-semibold">
+                {t("docker.image")}
+              </th>
+              <th className="px-3 py-2 text-left font-semibold">
+                {t("docker.state")}
+              </th>
+              <th className="px-3 py-2 text-left font-semibold">
+                {t("docker.ports")}
+              </th>
+              <th className="px-3 py-2 text-left font-semibold">
+                {t("docker.status")}
+              </th>
+              <th className="px-3 py-2 text-right font-semibold">
+                {t("docker.actions")}
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-border">
+            {filtered.map((container) => {
+              const containerName = container.name.startsWith("/")
+                ? container.name.slice(1)
+                : container.name;
+              const portsList = (container.ports ?? "")
+                .split(",")
+                .map((p) => p.trim())
+                .filter(Boolean);
+              const isSelected = selectedContainerId === container.id;
+              const isPending = pendingId === container.id;
+
+              return (
+                <tr
+                  key={container.id}
+                  onClick={() => onSelectContainer(container.id, "logs")}
+                  className={`cursor-pointer transition-colors hover:bg-muted/40 ${
+                    isSelected ? "bg-accent-brand/5" : ""
+                  }`}
+                >
+                  <td className="px-3 py-2">
+                    <div className="flex items-center gap-2 min-w-0">
+                      <Box
+                        className={`size-3.5 shrink-0 ${container.state === "running" ? "text-accent-brand" : "text-muted-foreground"}`}
+                      />
+                      <span className="min-w-0 truncate font-semibold">
+                        {containerName}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-3 py-2 max-w-[220px]">
+                    <span className="block truncate font-mono text-muted-foreground">
+                      {container.image}
+                    </span>
+                  </td>
+                  <td className="px-3 py-2">
+                    <DockerBadge state={container.state} />
+                  </td>
+                  <td className="px-3 py-2 max-w-[200px]">
+                    {portsList.length > 0 ? (
+                      <div className="flex flex-wrap gap-1">
+                        {portsList.slice(0, 2).map((p) => (
+                          <span
+                            key={p}
+                            className="text-[10px] font-mono px-1 border border-border bg-muted/30"
+                          >
+                            {p}
+                          </span>
+                        ))}
+                        {portsList.length > 2 && (
+                          <span className="text-[10px] text-muted-foreground">
+                            +{portsList.length - 2}
+                          </span>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-[10px] text-muted-foreground italic">
+                        {t("docker.noPorts")}
+                      </span>
+                    )}
+                  </td>
+                  <td className="px-3 py-2 whitespace-nowrap text-muted-foreground">
+                    {container.status}
+                  </td>
+                  <td className="px-3 py-2">
+                    <div
+                      className="flex items-center justify-end gap-1"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        title={t("docker.logs")}
+                        onClick={() => onSelectContainer(container.id, "logs")}
+                      >
+                        <List className="size-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        title={t("docker.stats")}
+                        onClick={() => onSelectContainer(container.id, "stats")}
+                      >
+                        <Box className="size-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        title={t("docker.consoleTab")}
+                        disabled={container.state !== "running"}
+                        onClick={() =>
+                          onSelectContainer(container.id, "console")
+                        }
+                      >
+                        <Terminal className="size-3" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon-xs"
+                        className={
+                          container.state === "running"
+                            ? "text-destructive"
+                            : "text-accent-brand"
+                        }
+                        disabled={isPending}
+                        title={
+                          container.state === "running"
+                            ? t("docker.stop")
+                            : t("docker.start")
+                        }
+                        onClick={(e) => handleToggleRun(e, container)}
+                      >
+                        {isPending ? (
+                          <RefreshCw className="size-3 animate-spin" />
+                        ) : container.state === "running" ? (
+                          <Square className="size-3" />
+                        ) : (
+                          <Play className="size-3" />
+                        )}
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}

src/ui/locales/en.json

@@ -3385,6 +3385,11 @@
     "ports": "Ports",
     "noPorts": "No ports",
     "start": "Start",
+    "stop": "Stop",
+    "status": "Status",
+    "actions": "Actions",
+    "cardView": "Card view",
+    "listView": "List view",
     "confirmRemoveContainer": "Are you sure you want to remove the container '{{name}}'? This action cannot be undone.",
     "runningContainerWarning": "Warning: This container is currently running. Removing it will stop the container first.",
     "loadingContainers": "Loading containers...",