hyungi_document_server/frontend/src/lib/components/Sidebar.svelte

<script>
  // Sidebar — §2 재구성.
  //
  // 구조:
  //   1) 카테고리 내비 (Section 2 — documents.category 1차 진입점)
  //      · 문서 / 자료실 / 뉴스 / 메모 / (Audio §3) / (Video §3) / 검색
  //      · count 배지: GET /api/documents/stats/category-counts
  //      · 자료실에는 pending suggestion 배지 별도 표시
  //   2) 도메인 트리 (기존 Phase 2 기능 — /documents 페이지 필터링)
  //   3) 스마트 그룹 + Inbox (기존)
  //
  // 제약: audio/video 는 §3 에서 채우므로 여기서는 주석 자리로 둔다.
  import { page } from '$app/stores';
  import { goto } from '$app/navigation';
  import { api } from '$lib/api';
  import {
    ChevronRight,
    ChevronDown,
    FolderOpen,
    FolderTree,
    Inbox,
    Clock,
    Mail,
    Scale,
    StickyNote,
    Newspaper,
    Search,
  } from 'lucide-svelte';

  // ─── 도메인 트리 (기존) ───

  let tree = $state([]);
  let treeLoading = $state(true);
  let expanded = $state({});

  let activeDomain = $derived($page.url.searchParams.get('domain'));
  let currentPath = $derived($page.url.pathname);

  const DOMAIN_COLORS = {
    'Philosophy': 'var(--domain-philosophy)',
    'Language': 'var(--domain-language)',
    'Engineering': 'var(--domain-engineering)',
    'Industrial_Safety': 'var(--domain-safety)',
    'Programming': 'var(--domain-programming)',
    'General': 'var(--domain-general)',
    'Reference': 'var(--domain-reference)',
  };

  async function loadTree() {
    treeLoading = true;
    try {
      tree = await api('/documents/tree');
    } catch (err) {
      console.error('트리 로딩 실패:', err);
    } finally {
      treeLoading = false;
    }
  }

  // ─── 카테고리 count (§2 신규) ───

  let categoryCounts = $state({});
  let libraryPending = $state(0);
  let countsLoading = $state(true);

  async function loadCategoryCounts() {
    countsLoading = true;
    try {
      const res = await api('/documents/stats/category-counts');
      categoryCounts = res?.counts ?? {};
      libraryPending = res?.library_pending_suggestions ?? 0;
    } catch {
      // §1 미적용 환경에서는 엔드포인트가 없을 수 있다 — 배지만 숨기고 내비는 유지.
      categoryCounts = {};
      libraryPending = 0;
    } finally {
      countsLoading = false;
    }
  }

  function toggleExpand(path) {
    expanded[path] = !expanded[path];
  }

  function navigateDomain(path) {
    const params = new URLSearchParams($page.url.searchParams);
    params.delete('page');
    if (path) {
      params.set('domain', path);
    } else {
      params.delete('domain');
    }
    params.delete('sub_group');
    for (const [key, val] of [...params.entries()]) {
      if (!val) params.delete(key);
    }
    const qs = params.toString();
    goto(`/documents${qs ? '?' + qs : ''}`, { noScroll: true });
  }

  $effect(() => { loadTree(); });
  $effect(() => { loadCategoryCounts(); });

  $effect(() => {
    if (activeDomain) {
      const parts = activeDomain.split('/');
      let path = '';
      for (const part of parts) {
        path = path ? `${path}/${part}` : part;
        expanded[path] = true;
      }
    }
  });

  // 도메인 트리 전체 count (stats 엔드포인트가 죽어있을 때 문서 배지 fallback 으로도 사용)
  let treeTotal = $derived(tree.reduce((sum, n) => sum + n.count, 0));
  let documentCount = $derived(categoryCounts.document ?? treeTotal);

  function handleTreeKeydown(e) {
    if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') return;
    const root = e.currentTarget;
    const rows = Array.from(root.querySelectorAll('[data-tree-row]'));
    if (rows.length === 0) return;
    const active = document.activeElement;
    const idx = active ? rows.indexOf(active) : -1;
    let next;
    if (e.key === 'ArrowDown') {
      next = idx < 0 ? 0 : Math.min(idx + 1, rows.length - 1);
    } else {
      next = idx <= 0 ? 0 : idx - 1;
    }
    e.preventDefault();
    rows[next].focus();
  }
</script>

<aside class="h-full flex flex-col bg-sidebar border-r border-default overflow-y-auto">
  <div class="px-4 py-3 border-b border-default">
    <h2 class="text-sm font-semibold text-dim uppercase tracking-wider">카테고리</h2>
  </div>

  <!-- 카테고리 내비 (§2) -->
  <nav class="px-2 py-2 flex flex-col gap-0.5">
    <a
      href="/documents"
      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
        {currentPath === '/documents' ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
    >
      <span class="flex items-center gap-2">
        <FolderOpen size={16} />
        문서
      </span>
      {#if documentCount > 0}
        <span class="text-xs text-dim">{documentCount}</span>
      {/if}
    </a>

    <a
      href="/library"
      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
        {currentPath.startsWith('/library') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
    >
      <span class="flex items-center gap-2">
        <FolderTree size={16} />
        자료실
      </span>
      <span class="flex items-center gap-1.5">
        {#if libraryPending > 0}
          <span
            class="text-[10px] font-medium bg-warning/15 text-warning border border-warning/30 rounded px-1.5 py-0.5"
            title="승인 대기 제안"
          >
            제안 {libraryPending}
          </span>
        {/if}
        {#if categoryCounts.library > 0}
          <span class="text-xs text-dim">{categoryCounts.library}</span>
        {/if}
      </span>
    </a>

    <a
      href="/news"
      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
        {currentPath.startsWith('/news') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
    >
      <span class="flex items-center gap-2">
        <Newspaper size={16} />
        뉴스
      </span>
      {#if categoryCounts.news > 0}
        <span class="text-xs text-dim">{categoryCounts.news}</span>
      {/if}
    </a>

    <a
      href="/memos"
      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
        {currentPath.startsWith('/memos') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
    >
      <span class="flex items-center gap-2">
        <StickyNote size={16} />
        메모
      </span>
      {#if categoryCounts.memo > 0}
        <span class="text-xs text-dim">{categoryCounts.memo}</span>
      {/if}
    </a>

    <!--
      §3 에서 채울 자리 — audio/video 네비:
      <a href="/audio">Audio · {categoryCounts.audio}</a>
      <a href="/video">Video · {categoryCounts.video}</a>
    -->

    <a
      href="/ask"
      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
        {currentPath.startsWith('/ask') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface-hover'}"
    >
      <span class="flex items-center gap-2">
        <Search size={16} />
        검색 · 질문
      </span>
    </a>
  </nav>

  <!-- 도메인 트리 (기존 /documents 필터 용) -->
  <div class="px-4 pt-3 pb-1 border-t border-default">
    <h3 class="text-[10px] font-semibold text-dim uppercase tracking-wider">도메인</h3>
  </div>
  <nav
    class="px-2 py-1 flex-shrink-0 max-h-[40vh] overflow-y-auto"
    onkeydown={handleTreeKeydown}
  >
    <button
      onclick={() => navigateDomain(null)}
      class="w-full flex items-center justify-between px-3 py-1.5 rounded-md text-sm transition-colors
        {!activeDomain && currentPath === '/documents' ? 'bg-accent/15 text-accent' : 'text-dim hover:bg-surface hover:text-text'}"
    >
      <span>전체 도메인</span>
      {#if treeTotal > 0}
        <span class="text-xs">{treeTotal}</span>
      {/if}
    </button>

    {#if treeLoading}
      {#each Array(3) as _}
        <div class="h-7 bg-surface rounded-md animate-pulse mx-1 mb-1"></div>
      {/each}
    {:else}
      {#each tree as node}
        {@const color = DOMAIN_COLORS[node.name] || 'var(--text-dim)'}
        {#snippet treeNode(n, depth)}
          {@const isActive = activeDomain === n.path}
          {@const isParent = activeDomain?.startsWith(n.path + '/')}
          {@const hasChildren = n.children.length > 0}
          {@const isExpanded = expanded[n.path]}

          <div class="flex items-center" style="padding-left: {depth * 16}px">
            {#if hasChildren}
              <button
                onclick={() => toggleExpand(n.path)}
                class="p-0.5 rounded hover:bg-surface text-dim"
              >
                {#if isExpanded}
                  <ChevronDown size={14} />
                {:else}
                  <ChevronRight size={14} />
                {/if}
              </button>
            {:else}
              <span class="w-5"></span>
            {/if}

            <button
              onclick={() => navigateDomain(n.path)}
              data-tree-row
              aria-current={isActive ? 'page' : undefined}
              class="flex-1 flex items-center justify-between px-2 py-1 rounded-md text-sm transition-colors
                {isActive ? 'bg-accent/15 text-accent' : isParent ? 'text-text' : 'text-dim hover:bg-surface hover:text-text'}"
            >
              <span class="flex items-center gap-2">
                {#if depth === 0}
                  <span class="w-2 h-2 rounded-full shrink-0" style="background: {color}"></span>
                {/if}
                <span class="truncate">{n.name}</span>
              </span>
              <span class="text-xs text-dim shrink-0 ml-2">{n.count}</span>
            </button>
          </div>

          {#if hasChildren && isExpanded}
            {#each n.children as child}
              {@render treeNode(child, depth + 1)}
            {/each}
          {/if}
        {/snippet}
        {@render treeNode(node, 0)}
      {/each}
    {/if}
  </nav>

  <!-- 스마트 그룹 -->
  <div class="px-2 py-2 border-t border-default">
    <h3 class="px-3 py-1 text-[10px] font-semibold text-dim uppercase tracking-wider">스마트 그룹</h3>
    <button
      onclick={() => goto('/documents', { noScroll: true })}
      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-dim hover:bg-surface hover:text-text"
    >
      <Clock size={14} /> 최근 7일
    </button>
    <button
      onclick={() => { const p = new URLSearchParams(); p.set('source', 'law_monitor'); goto(`/documents?${p}`, { noScroll: true }); }}
      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-dim hover:bg-surface hover:text-text"
    >
      <Scale size={14} /> 법령 알림
    </button>
    <button
      onclick={() => { const p = new URLSearchParams(); p.set('source', 'email'); goto(`/documents?${p}`, { noScroll: true }); }}
      class="w-full flex items-center gap-2 px-3 py-1.5 rounded-md text-sm text-dim hover:bg-surface hover:text-text"
    >
      <Mail size={14} /> 이메일
    </button>
  </div>

  <!-- Inbox -->
  <div class="px-2 py-2 border-t border-default">
    <a
      href="/inbox"
      class="flex items-center justify-between px-3 py-2 rounded-md text-sm transition-colors
        {currentPath.startsWith('/inbox') ? 'bg-accent/15 text-accent' : 'text-text hover:bg-surface'}"
    >
      <span class="flex items-center gap-2">
        <Inbox size={16} />
        받은편지함
      </span>
    </a>
  </div>
</aside>