nandi / dashboard

import { LitElement, html, css } from "lit";
import { customElement, state } from "lit/decorators.js";
import { store } from "./store";

// Import pages
import "./pages/app-session-page";
import "./pages/app-source-data-page";
import "./pages/app-taste-profile-page";
import "./pages/app-smart-feed-page";
import "./pages/app-signals-page";
import "./pages/app-ranked-feed-page";
import "./pages/app-feed-view-page";
import "./pages/app-list-analysis-page";

@customElement("app-root")
export class AppRoot extends LitElement {
  @state()
  private currentPath = window.location.pathname;

  static styles = css`
    :host {
      display: block;
      min-height: 100vh;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      line-height: 1.5;
      color: #1f2937;
      background: #f9fafb;
    }

    * {
      box-sizing: border-box;
    }

    .shell {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .shell-header {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      padding: 0.75rem 1rem;
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
    }

    @media (min-width: 768px) {
      .shell-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
      }
    }

    .brand {
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .brand-kicker {
      font-size: 0.75rem;
      font-weight: 600;
      color: #3b82f6;
      text-transform: uppercase;
      letter-spacing: 0.025em;
    }

    .brand strong {
      font-size: 0.9375rem;
      font-weight: 500;
      color: #111827;
    }

    .top-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0.25rem 1rem;
    }

    .top-nav__link {
      font-size: 0.8125rem;
      color: #4b5563;
      text-decoration: none;
      padding: 0.25rem 0;
      border-bottom: 2px solid transparent;
      transition: color 0.15s, border-color 0.15s;
    }

    .top-nav__link:hover {
      color: #3b82f6;
    }

    .top-nav__link.is-active {
      color: #3b82f6;
      border-bottom-color: #3b82f6;
      font-weight: 500;
    }

    .shell-body {
      flex: 1;
      padding: 1rem;
      max-width: 1000px;
      width: 100%;
      margin: 0 auto;
    }
  `;

  connectedCallback() {
    super.connectedCallback();
    window.addEventListener("popstate", this.handlePopState);
    // Listen for store changes to re-render
    this.unsubscribe = store.subscribe(() => this.requestUpdate());
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    window.removeEventListener("popstate", this.handlePopState);
    this.unsubscribe?.();
  }

  private handlePopState = () => {
    this.currentPath = window.location.pathname;
  };

  private navigate = (e: MouseEvent) => {
    const target = e.target as HTMLElement;
    const anchor = target.closest("a[data-link]");
    if (anchor) {
      e.preventDefault();
      const href = anchor.getAttribute("href")!;
      window.history.pushState({}, "", href);
      this.currentPath = href;
    }
  };

  private unsubscribe?: () => void;

  render() {
    return html`
      <div class="shell" @click=${this.navigate}>
        <header class="shell-header">
          <div class="brand">
            <div class="brand-kicker">Bluesky Feed Ops</div>
            <strong>Custom dashboard for OAuth-backed feed views</strong>
          </div>
          <nav class="top-nav" aria-label="Primary">
            ${this.renderNavLink("/session", "Session")}
            ${this.renderNavLink("/source-data", "Source Data")}
            ${this.renderNavLink("/taste-profile", "Taste Profile")}
            ${this.renderNavLink("/smart-feed", "Smart Feed")}
            ${this.renderNavLink("/signals", "Signals")}
            ${this.renderNavLink("/ranked-feed", "Ranked Feed")}
            ${this.renderNavLink("/feed-view", "Feed")}
            ${this.renderNavLink("/list-analysis", "List Analysis")}
          </nav>
        </header>
        <main class="shell-body">
          ${this.renderRoute()}
        </main>
      </div>
    `;
  }

  private renderNavLink(href: string, label: string) {
    const isActive = this.currentPath === href;
    return html`
      <a href="${href}" class="top-nav__link ${isActive ? "is-active" : ""}" data-link>
        ${label}
      </a>
    `;
  }

  private renderRoute() {
    switch (this.currentPath) {
      case "/":
      case "/session":
        return html`<app-session-page></app-session-page>`;
      case "/source-data":
        return html`<app-source-data-page></app-source-data-page>`;
      case "/taste-profile":
        return html`<app-taste-profile-page></app-taste-profile-page>`;
      case "/smart-feed":
        return html`<app-smart-feed-page></app-smart-feed-page>`;
      case "/signals":
        return html`<app-signals-page></app-signals-page>`;
      case "/ranked-feed":
        return html`<app-ranked-feed-page></app-ranked-feed-page>`;
      case "/feed-view":
        return html`<app-feed-view-page></app-feed-view-page>`;
      case "/list-analysis":
        return html`<app-list-analysis-page></app-list-analysis-page>`;
      default:
        return html`<app-session-page></app-session-page>`;
    }
  }
}

@customElement("app-container")
export class AppContainer extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  render() {
    return html`<app-root></app-root>`;
  }
}