feat: refine widget interactions

packages/widgets/src/docker/layout.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, test } from "vitest";
 
-import { getDockerColumnVisibility } from "./layout";
+import { getDockerColumnVisibility, getDockerFooterVisibility } from "./layout";
 
 const columns = ["name", "state", "host", "cpuUsage", "memoryUsage", "actions"] as const;
 
@@ -8,7 +8,7 @@ describe("getDockerColumnVisibility", () => {
   test("keeps only essential columns in a narrow compact widget", () => {
     expect(getDockerColumnVisibility(columns, 240, false)).toEqual({
       name: true,
-      state: true,
+      state: false,
       host: false,
       cpuUsage: false,
       memoryUsage: false,
@@ -17,13 +17,17 @@ describe("getDockerColumnVisibility", () => {
   });
 
   test("reveals compact metrics as width becomes available", () => {
-    expect(getDockerColumnVisibility(columns, 380, false)).toMatchObject({
+    expect(getDockerColumnVisibility(columns, 440, false)).toMatchObject({
       host: false,
       cpuUsage: true,
-      memoryUsage: true,
+      memoryUsage: false,
     });
   });
 
+  test("keeps a configured state column when there is no name column for the inline dot", () => {
+    expect(getDockerColumnVisibility(["state"], 240, false).state).toBe(true);
+  });
+
   test("uses every expert column in advanced mode", () => {
     expect(getDockerColumnVisibility([], 240, true)).toEqual({
       name: true,
@@ -35,3 +39,14 @@ describe("getDockerColumnVisibility", () => {
     });
   });
 });
+
+describe("getDockerFooterVisibility", () => {
+  test("reveals totals only when they fit", () => {
+    expect(getDockerFooterVisibility(300, false)).toEqual({ footer: true, cpu: false, memory: false });
+    expect(getDockerFooterVisibility(400, false)).toEqual({ footer: true, cpu: true, memory: false });
+  });
+
+  test("keeps every total in advanced mode", () => {
+    expect(getDockerFooterVisibility(240, true)).toEqual({ footer: true, cpu: true, memory: true });
+  });
+});

packages/widgets/src/docker/layout.ts

@@ -10,10 +10,16 @@ export const getDockerColumnVisibility = (
 
   return {
     name: isVisible("name"),
-    state: isVisible("state"),
-    host: isVisible("host") && (isAdvanced || width >= 440),
-    cpuUsage: isVisible("cpuUsage") && (isAdvanced || width >= 280),
-    memoryUsage: isVisible("memoryUsage") && (isAdvanced || width >= 360),
+    state: isVisible("state") && (isAdvanced || width >= 340 || !configured.has("name")),
+    host: isVisible("host") && (isAdvanced || width >= 640),
+    cpuUsage: isVisible("cpuUsage") && (isAdvanced || width >= 420),
+    memoryUsage: isVisible("memoryUsage") && (isAdvanced || width >= 520),
     actions: isVisible("actions"),
   };
 };
+
+export const getDockerFooterVisibility = (width: number, isAdvanced: boolean) => ({
+  footer: isAdvanced || width > 256,
+  cpu: isAdvanced || width >= 360,
+  memory: isAdvanced || width >= 480,
+});