refactor: remove ServerStrip component and CSS (replaced by unified sidebar)

- Delete ServerStrip.ts and its unit test
- Remove all .server-strip / .server-icon / .server-separator CSS rules
- Remove @media (max-width: 600px) responsive rule for .server-strip

Client/tauri-client/src/components/ServerStrip.ts

@@ -1,48 +0,0 @@
-/**
- * ServerStrip component — vertical strip on the far left showing server icons.
- * Single-server for now: Home button, separator, add server button.
- */
-
-import { createElement, appendChildren } from "@lib/dom";
-import type { MountableComponent } from "@lib/safe-render";
-
-export function createServerStrip(): MountableComponent {
-  const ac = new AbortController();
-  let root: HTMLDivElement | null = null;
-
-  function mount(container: Element): void {
-    root = createElement("div", { class: "server-strip", "data-testid": "server-strip" });
-
-    const homeIcon = createElement(
-      "div",
-      { class: "server-icon active", style: "background: var(--accent)" },
-      "O",
-    );
-
-    const separator = createElement("div", { class: "server-separator" });
-
-    const addIcon = createElement("div", { class: "server-icon add" }, "+");
-
-    // Add server button click — placeholder for future multi-server support
-    addIcon.addEventListener(
-      "click",
-      () => {
-        // No-op for single-server mode
-      },
-      { signal: ac.signal },
-    );
-
-    appendChildren(root, homeIcon, separator, addIcon);
-    container.appendChild(root);
-  }
-
-  function destroy(): void {
-    ac.abort();
-    if (root !== null) {
-      root.remove();
-      root = null;
-    }
-  }
-
-  return { mount, destroy };
-}

Client/tauri-client/src/styles/app.css

@@ -10,42 +10,6 @@
   flex-shrink: 0;
 }
 
-/* ── Server Strip ── */
-.server-strip {
-  width: 72px; background: var(--bg-tertiary);
-  display: flex; flex-direction: column; align-items: center;
-  padding: 12px 0; gap: 8px; flex-shrink: 0; overflow-y: auto;
-}
-.server-strip::-webkit-scrollbar { width: 4px; }
-.server-icon {
-  width: 48px; height: 48px; border-radius: var(--radius-pill);
-  display: flex; align-items: center; justify-content: center;
-  font-weight: 700; font-size: 18px; color: white;
-  cursor: pointer; transition: all .2s ease;
-  position: relative; flex-shrink: 0;
-}
-.server-icon:hover, .server-icon.active { border-radius: var(--radius-lg); }
-.server-icon::before {
-  content: ''; position: absolute; left: -16px;
-  width: 4px; border-radius: 0 4px 4px 0;
-  background: white; transition: all .2s;
-  height: 0; opacity: 0;
-}
-.server-icon:hover::before { height: 20px; opacity: 1; }
-.server-icon.active::before { height: 36px; opacity: 1; }
-.server-icon .badge {
-  position: absolute; bottom: -2px; right: -2px;
-  background: var(--red); color: white;
-  font-size: 10px; font-weight: 700;
-  min-width: 18px; height: 18px; border-radius: 9px;
-  display: flex; align-items: center; justify-content: center;
-  padding: 0 4px; border: 3px solid var(--bg-tertiary);
-}
-.server-icon .badge:empty { display: none; }
-.server-separator { width: 32px; height: 2px; background: var(--border); border-radius: 1px; flex-shrink: 0; }
-.server-icon.add { background: transparent; color: var(--green); border: 2px dashed var(--border-strong); font-size: 24px; }
-.server-icon.add:hover { border-color: var(--green); background: var(--green); color: white; border-style: solid; }
-
 /* ── Unified Sidebar ── */
 .unified-sidebar {
   width: 260px; background: var(--bg-secondary);
@@ -2007,9 +1971,7 @@
 @media (max-width: 800px) {
   .channel-sidebar { width: 0; overflow: hidden; }
 }
-@media (max-width: 600px) {
-  .server-strip { width: 0; overflow: hidden; }
-}
+
 
 /* ── Video Grid ────────────────────────────────────── */
 

Client/tauri-client/tests/unit/server-strip.test.ts

@@ -1,69 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach } from "vitest";
-import { createServerStrip } from "@components/ServerStrip";
-
-describe("ServerStrip", () => {
-  let container: HTMLDivElement;
-  let comp: ReturnType<typeof createServerStrip>;
-
-  beforeEach(() => {
-    container = document.createElement("div");
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    comp?.destroy?.();
-    container.remove();
-  });
-
-  it("mounts with server-strip class", () => {
-    comp = createServerStrip();
-    comp.mount(container);
-
-    expect(container.querySelector(".server-strip")).not.toBeNull();
-  });
-
-  it('renders home icon with "O"', () => {
-    comp = createServerStrip();
-    comp.mount(container);
-
-    const icons = container.querySelectorAll(".server-icon");
-    const homeIcon = icons[0];
-    expect(homeIcon).not.toBeUndefined();
-    expect(homeIcon?.textContent).toBe("O");
-  });
-
-  it("renders separator", () => {
-    comp = createServerStrip();
-    comp.mount(container);
-
-    expect(container.querySelector(".server-separator")).not.toBeNull();
-  });
-
-  it('renders add icon with "+"', () => {
-    comp = createServerStrip();
-    comp.mount(container);
-
-    const addIcon = container.querySelector(".server-icon.add");
-    expect(addIcon).not.toBeNull();
-    expect(addIcon?.textContent).toBe("+");
-  });
-
-  it("home icon has active class", () => {
-    comp = createServerStrip();
-    comp.mount(container);
-
-    const icons = container.querySelectorAll(".server-icon");
-    const homeIcon = icons[0];
-    expect(homeIcon?.classList.contains("active")).toBe(true);
-  });
-
-  it("destroy removes DOM", () => {
-    comp = createServerStrip();
-    comp.mount(container);
-
-    expect(container.querySelector(".server-strip")).not.toBeNull();
-
-    comp.destroy?.();
-    expect(container.querySelector(".server-strip")).toBeNull();
-  });
-});