verstak-desktop/frontend/src/lib/shell/Sidebar.svelte

<script>
  import { onMount } from 'svelte';
  import * as App from '../../../wailsjs/go/api/App';
  import WorkspaceTree from './WorkspaceTree.svelte';
  import Icon from '../ui/Icon.svelte';

  let plugins = [];
  let vaultStatus = { status: 'unknown', path: '', vaultId: '' };
  let sidebarItems = [];
  let errorMessage = '';

  let navItems = [
    { id: 'plugin-manager', label: 'Plugin Manager', icon: 'puzzle' },
  ];

  $: vaultOpen = vaultStatus.status === 'open';

  onMount(async () => {
    let contribErr = false;
    try {
      const [p, v, contribs] = await Promise.all([
        App.GetPlugins().catch(() => []),
        App.GetVaultStatus().catch(() => ({ status: 'unknown', path: '', vaultId: '' })),
        App.GetContributions().catch(() => { contribErr = true; return {}; }),
      ]);
      plugins = p || [];
      vaultStatus = v;
      if (contribErr) {
        errorMessage = 'Failed to load plugin contributions';
      }
      sidebarItems = (contribs.sidebarItems || []).filter(item => {
        const plugin = plugins.find(p => p.manifest?.id === item.pluginId);
        if (!plugin) return false;
        return plugin.status !== 'disabled' && plugin.status !== 'failed' && plugin.status !== 'incompatible' && plugin.status !== 'missing-required-capability';
      });
      sidebarItems.sort((a, b) => (a.position || 100) - (b.position || 100));
    } catch (e) {
      console.error('[Sidebar] load error:', e);
      errorMessage = 'Failed to load sidebar';
    }
  });

  function handleNav(id) {
    window.dispatchEvent(new CustomEvent('verstak:nav', { detail: { viewId: id } }));
  }

  function handleSidebarItem(item) {
    // Use item.view (the view contribution ID) if available, fall back to item.id
    const viewId = item.view || item.id;
    window.dispatchEvent(new CustomEvent('verstak:open-view', { detail: { viewId, pluginId: item.pluginId } }));
  }
</script>

<aside class="sidebar">
  <div class="sidebar-header">
    <Icon name="logo" size={20} className="sidebar-logo" />
    <span class="sidebar-title">Verstak</span>
  </div>

  <nav class="sidebar-nav">
    {#each navItems as item}
      <button
        class="nav-item"
        on:click={() => handleNav(item.id)}
        type="button"
      >
        <Icon name={item.icon} size={16} className="nav-icon" />
        <span class="nav-label">{item.label}</span>
      </button>
    {/each}
  </nav>

  {#if sidebarItems.length > 0}
    <div class="sidebar-section">
      <span class="section-label">Plugins</span>
      {#each sidebarItems as item}
        <button
          class="nav-item plugin-item"
          on:click={() => handleSidebarItem(item)}
          type="button"
        >
          <Icon name={item.icon || 'plugin'} size={16} className="nav-icon icon-plugin" />
          <span class="nav-label">{item.title || item.id}</span>
        </button>
      {/each}
    </div>
  {/if}

  {#if vaultOpen}
    <WorkspaceTree />
  {/if}

  <div class="sidebar-footer">
    {#if errorMessage}
      <span class="sidebar-error">
        <Icon name="warning" size={10} className="sidebar-error-icon" />
        Plugin UI error
      </span>
    {/if}
    {#if vaultStatus.status !== 'unknown'}
      <span class="vault-indicator" class:vault-open={vaultStatus.status === 'open'} class:vault-closed={vaultStatus.status !== 'open'}>
        ● Vault: {vaultStatus.status}
      </span>
    {/if}
  </div>
</aside>

<style>
  .sidebar {
    width: 220px;
    min-width: 220px;
    background: #16213e;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #0f3460;
    overflow: hidden;
  }

  .sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #0f3460;
  }

  .sidebar-logo {
    width: 1.2rem;
    height: 1.2rem;
    color: #4ecca3;
    flex-shrink: 0;
  }

  .sidebar-title {
    color: #e0e0f0;
    font-size: 1rem;
    font-weight: 600;
  }

  .sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    gap: 0.15rem;
  }

  .sidebar-section {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.75rem;
    gap: 0.15rem;
    border-top: 1px solid #0f3460;
    margin-top: 0.25rem;
  }

  :global(workspace-tree) {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .section-label {
    color: #666;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.5rem;
  }

  .nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.75rem;
    background: none;
    border: none;
    color: #a0a0b8;
    font-size: 0.85rem;
    cursor: pointer;
    border-radius: 6px;
    text-align: left;
    width: 100%;
    transition: background 0.15s, color 0.15s;
  }

  .nav-item:hover {
    background: #0f3460;
    color: #e0e0f0;
  }

  .nav-icon {
    width: 1.2rem;
    height: 1.2rem;
    flex-shrink: 0;
    color: currentColor;
  }
  .nav-icon.icon-plugin {
    color: #a78bfa;
  }

  .nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sidebar-footer {
    margin-top: auto;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #0f3460;
  }

  .vault-indicator {
    font-size: 0.7rem;
    color: #666;
  }

  .vault-indicator.vault-open {
    color: #4ecca3;
  }

  .vault-indicator.vault-closed {
    color: #a0a0b8;
  }

  .sidebar-error {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    color: #e94560;
    margin-bottom: 0.25rem;
  }
  .sidebar-error-icon {
    color: #e94560;
  }
</style>