fix(downloads): clarify the column menu state

src/renderer/App.tsx

@@ -6445,6 +6445,7 @@ export function App(): ReactElement {
         columnContextMenu={colHeaderCtx ? (
         <ContextMenu
           ariaLabel="Spaltenauswahl"
+          className="md-column-context-menu"
           onClose={() => setColHeaderCtx(null)}
           open
           ref={colHeaderCtxRef}
@@ -6459,7 +6460,7 @@ export function App(): ReactElement {
             return (
               <button
                 key={col}
-                className={`ctx-menu-item${isRequired ? " ctx-menu-disabled" : ""}${isVisible ? " ctx-menu-active" : ""}`}
+                className={`ctx-menu-item${isRequired ? " ctx-menu-disabled" : ""}`}
                 disabled={isRequired}
                 onClick={() => {
                   if (isRequired) return;
@@ -6481,13 +6482,14 @@ export function App(): ReactElement {
                   persistColumnOrder(newOrder);
                   setColumnOrder(newOrder);
                 }}
-              >
+              >
-                {isVisible ? "\u2713 " : "\u2003 "}{def.label}
+                <span aria-hidden="true" className="column-menu-check">{isVisible ? "\u2713" : ""}</span>
-              </button>
+                <span>{def.label}</span>
+              </button>
             );
           })}
           <div className="ctx-menu-sep" />
-          <button className="ctx-menu-item" onClick={() => {
+          <button className="ctx-menu-item column-menu-reset" onClick={() => {
             resetColumnLayout();
             setColHeaderCtx(null);
           }}>Spaltenlayout zurücksetzen</button>

src/renderer/shell/shell.css

@@ -792,10 +792,37 @@
   color: var(--ui-danger);
 }
 
-.md-context-menu .ctx-menu-sep {
+.md-context-menu .ctx-menu-sep {
-  background: var(--ui-border);
+  background: var(--ui-border);
-}
+}
-
+
+.md-column-context-menu .ctx-menu-item {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  align-items: center;
+  gap: 4px;
+}
+
+.md-column-context-menu .ctx-menu-item:not(.ctx-menu-disabled) {
+  color: var(--ui-text);
+}
+
+.md-column-context-menu .ctx-menu-disabled {
+  color: var(--ui-text);
+  opacity: 1;
+}
+
+.md-column-context-menu .column-menu-check {
+  color: var(--ui-success-text);
+  font-weight: 700;
+  text-align: center;
+}
+
+.md-column-context-menu .column-menu-reset {
+  display: block;
+  text-align: center;
+}
+
 .md-toast {
   right: 20px;
   bottom: 84px;

tests/app-shell.test.tsx

@@ -96,6 +96,18 @@ describe("desktop shell", () => {
     expect(menu).toContain("Spaltenlayout zurücksetzen");
     expect(menu).toContain("resetColumnLayout()");
     expect(menu).toContain("setColHeaderCtx(null)");
+    expect(menu).toContain('className="column-menu-check"');
+    expect(menu).toContain('className="ctx-menu-item column-menu-reset"');
+    expect(menu).not.toContain("ctx-menu-active");
+  });
+
+  it("styles checked columns with a green mark and normal text", () => {
+    const shellCss = readFileSync(new URL("../src/renderer/shell/shell.css", import.meta.url), "utf8");
+
+    expect(shellCss).toMatch(/\.md-column-context-menu \.column-menu-check\s*\{[^}]*color:\s*var\(--ui-success-text\);/s);
+    expect(shellCss).toMatch(/\.md-column-context-menu \.ctx-menu-item:not\(\.ctx-menu-disabled\)\s*\{[^}]*color:\s*var\(--ui-text\);/s);
+    expect(shellCss).toMatch(/\.md-column-context-menu \.ctx-menu-disabled\s*\{[^}]*color:\s*var\(--ui-text\);[^}]*opacity:\s*1;/s);
+    expect(shellCss).toMatch(/\.md-column-context-menu \.column-menu-reset\s*\{[^}]*text-align:\s*center;/s);
   });
 
   it("keeps application menus mounted for animated opening and closing", () => {