diff --git a/Client/tauri-client/src/components/ServerStrip.ts b/Client/tauri-client/src/components/ServerStrip.ts deleted file mode 100644 index 4118d478..00000000 --- a/Client/tauri-client/src/components/ServerStrip.ts +++ /dev/null @@ -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 }; -} diff --git a/Client/tauri-client/src/styles/app.css b/Client/tauri-client/src/styles/app.css index 90cc4989..f67cf417 100644 --- a/Client/tauri-client/src/styles/app.css +++ b/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 ────────────────────────────────────── */ diff --git a/Client/tauri-client/tests/unit/server-strip.test.ts b/Client/tauri-client/tests/unit/server-strip.test.ts deleted file mode 100644 index ea08f14f..00000000 --- a/Client/tauri-client/tests/unit/server-strip.test.ts +++ /dev/null @@ -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; - - 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(); - }); -});