@miozu/jera 0.3.0 → 0.4.2

package/src/components/navigation/SidebarGroup.svelte

@@ -0,0 +1,230 @@
+<!--
+  @component SidebarGroup
+
+  Expandable navigation group with subroutes.
+  Shows chevron indicator and animates subnav list.
+  Triggers hover popover when sidebar is collapsed.
+
+  @example
+  <SidebarGroup
+    icon={Settings}
+    label="Settings"
+    items={[
+      { href: '/settings/general', label: 'General' },
+      { href: '/settings/security', label: 'Security' },
+      { href: '/settings/billing', label: 'Billing', badge: 'New' }
+    ]}
+    activeMatcher={(item) => currentPath.startsWith(item.href)}
+  />
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { slide, fade, fly } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { SIDEBAR_CONTEXT_KEY } from '../../utils/sidebar.svelte.js';
+
+  let {
+    id = null,
+    icon: Icon = null,
+    label = '',
+    expanded = $bindable(false),
+    items = [],
+    activeMatcher = null,
+    class: className = ''
+  } = $props();
+
+  const sidebar = getContext(SIDEBAR_CONTEXT_KEY);
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+
+  // Generate unique ID if not provided
+  const groupId = $derived(id || label.toLowerCase().replace(/\s+/g, '-'));
+
+  function toggleExpanded() {
+    expanded = !expanded;
+  }
+
+  function handleMouseEnter(event) {
+    if (!isCollapsed || !sidebar?.showPopover) return;
+
+    const rect = event.currentTarget.getBoundingClientRect();
+    sidebar.showPopover(groupId, {
+      top: rect.top,
+      left: rect.right + 8
+    });
+  }
+
+  function handleMouseLeave() {
+    if (sidebar?.hidePopover) {
+      sidebar.hidePopover();
+    }
+  }
+
+  function isItemActive(item) {
+    if (activeMatcher) return activeMatcher(item);
+    return false;
+  }
+</script>
+
+<li>
+  <button
+    type="button"
+    class="nav-item expandable {isCollapsed ? 'collapsed' : ''} {className}"
+    onclick={toggleExpanded}
+    onmouseenter={handleMouseEnter}
+    onmouseleave={handleMouseLeave}
+    title={isCollapsed ? label : null}
+    aria-expanded={expanded}
+  >
+    {#if Icon}
+      <Icon size={18} class="nav-icon" />
+    {/if}
+    {#if !isCollapsed}
+      <span class="nav-label" transition:fly={{ x: -20, duration: 200, delay: 50 }}>{label}</span>
+      <span class="expand-icon-wrapper" transition:fly={{ x: -15, duration: 200, delay: 75 }}>
+        <svg
+          class="expand-icon {expanded ? 'rotate-180' : ''}"
+          xmlns="http://www.w3.org/2000/svg"
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </span>
+    {/if}
+  </button>
+
+  {#if expanded && !isCollapsed && items.length > 0}
+    <ul class="subnav-list" transition:slide={{ duration: 200, easing: cubicOut }}>
+      {#each items as item}
+        <li>
+          <a
+            href={item.href}
+            class="subnav-item {isItemActive(item) ? 'active' : ''}"
+          >
+            {item.label}
+            {#if item.badge}
+              <span class="subnav-badge">{item.badge}</span>
+            {/if}
+          </a>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</li>
+
+<style>
+  li {
+    list-style: none;
+  }
+
+  .nav-item {
+    width: calc(100% - 1rem);
+    padding: 0.375rem 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+    cursor: pointer;
+    border-radius: 0.375rem;
+    margin: 0 0.5rem;
+    transition: all 200ms ease;
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    position: relative;
+  }
+
+  .nav-item:hover {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 10%, transparent);
+  }
+
+  .nav-item.collapsed {
+    justify-content: center;
+    padding: 0.5rem;
+    margin: 0 0.25rem;
+    width: calc(100% - 0.5rem);
+  }
+
+  .nav-item:hover .nav-icon,
+  .nav-item:hover .expand-icon {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+  }
+
+  .nav-icon {
+    flex-shrink: 0;
+    transition: color 150ms ease;
+  }
+
+  .nav-label {
+    flex: 1;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .expand-icon-wrapper {
+    margin-left: auto;
+    flex-shrink: 0;
+  }
+
+  .expand-icon {
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    transition: all 200ms ease;
+  }
+
+  .expand-icon.rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  /* Subnav list */
+  .subnav-list {
+    margin-left: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+  }
+
+  .subnav-item {
+    display: block;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    text-decoration: none;
+    border-radius: 0.375rem;
+    transition: all 200ms ease;
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .subnav-item:hover {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 10%, transparent);
+  }
+
+  .subnav-item.active {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    font-weight: 500;
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 15%, transparent);
+  }
+
+  .subnav-badge {
+    display: inline-block;
+    margin-left: 0.5rem;
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    border-radius: 9999px;
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 10%, transparent);
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+  }
+</style>

package/src/components/navigation/SidebarGroupSwitcher.svelte

@@ -0,0 +1,262 @@
+<!--
+  @component SidebarGroupSwitcher
+
+  Investment group switcher with create group functionality.
+  Matches dash.selify.ai group switching behavior.
+
+  @example
+  <SidebarGroupSwitcher
+    groups={investmentGroups}
+    currentGroup={currentGroup}
+    onGroupChange={(group) => switchToGroup(group)}
+    onCreateGroup={() => showCreateModal = true}
+    bind:expanded={groupsExpanded}
+  />
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { fade, fly, slide } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+  import { SIDEBAR_CONTEXT_KEY } from '../../utils/sidebar.svelte.js';
+
+  let {
+    groups = [],
+    currentGroup = null,
+    expanded = $bindable(false),
+    onGroupChange = null,
+    onCreateGroup = null,
+    searchQuery = '',
+    class: className = ''
+  } = $props();
+
+  const sidebar = getContext(SIDEBAR_CONTEXT_KEY);
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+
+  // Filter groups based on search
+  const filteredGroups = $derived(
+    groups.filter(group =>
+      !searchQuery ||
+      group.name?.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  );
+
+  function toggleExpanded() {
+    expanded = !expanded;
+  }
+
+  function handleGroupClick(group) {
+    if (onGroupChange) {
+      onGroupChange(group);
+    }
+    // Close mobile overlay if in mobile mode
+    if (sidebar?.closeMobileOverlay) {
+      sidebar.closeMobileOverlay();
+    }
+  }
+
+  function handleCreateGroup() {
+    if (onCreateGroup) {
+      onCreateGroup();
+    }
+  }
+
+  function isGroupActive(group) {
+    return currentGroup?.id === group.id;
+  }
+</script>
+
+{#if groups.length > 0}
+  <div class="sidebar-section {className}">
+    <button
+      class="section-header"
+      onclick={toggleExpanded}
+      aria-expanded={expanded}
+    >
+      <span class="section-title">Groups</span>
+      <span class="section-count">{groups.length}</span>
+      <svg
+        class="section-chevron {expanded ? 'rotate-180' : ''}"
+        xmlns="http://www.w3.org/2000/svg"
+        width="14"
+        height="14"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    </button>
+
+    {#if expanded}
+      <div class="groups-list" transition:slide={{ duration: 200, easing: cubicOut }}>
+        {#each filteredGroups as group}
+          <button
+            class="group-item {isGroupActive(group) ? 'active' : ''}"
+            onclick={() => handleGroupClick(group)}
+            title={group.name}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="14"
+              height="14"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <path d="M16 10a4 4 0 0 1-8 0"></path>
+            </svg>
+            <span class="group-name">{group.name}</span>
+          </button>
+        {/each}
+
+        <button class="add-group" onclick={handleCreateGroup} title="Create new group">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          <span>Create Group</span>
+        </button>
+      </div>
+    {/if}
+  </div>
+{/if}
+
+<style>
+  .sidebar-section {
+    padding: 0.125rem 0;
+  }
+
+  .section-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-text-muted, var(--color-base04, #737E99));
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: all 200ms ease;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    justify-content: flex-start;
+  }
+
+  .section-header:hover {
+    color: var(--color-text, var(--color-base05, #D0D2DB));
+  }
+
+  .section-title {
+    flex: 1;
+    text-align: left;
+  }
+
+  .section-count {
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    background-color: var(--color-surface-alt, var(--color-base02, #3E4359));
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+
+  .section-chevron {
+    color: var(--color-text-muted, var(--color-base04, #737E99));
+    transition: all 200ms ease;
+    flex-shrink: 0;
+  }
+
+  .section-chevron.rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  .groups-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0 0.5rem;
+  }
+
+  .group-item {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.875rem;
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: all 200ms ease;
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    text-align: left;
+  }
+
+  .group-item:hover {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 10%, transparent);
+  }
+
+  .group-item.active {
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 15%, transparent);
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    font-weight: 500;
+  }
+
+  .group-name {
+    flex: 1;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+  }
+
+  .add-group {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    justify-content: center;
+    font-size: 0.875rem;
+    color: var(--color-text-muted, var(--color-base05, #D0D2DB));
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: all 200ms ease;
+    border: 1px solid color-mix(in srgb, var(--color-base03, #565E78) 30%, transparent);
+    background: transparent;
+    font-family: inherit;
+  }
+
+  .add-group:hover {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 5%, transparent);
+    border-color: var(--color-primary, var(--color-base0D, #83D2FC));
+  }
+</style>

package/src/components/navigation/SidebarItem.svelte

@@ -0,0 +1,210 @@
+<!--
+  @component SidebarItem
+
+  Navigation link or button item within sidebar.
+  Supports icons, badges, and active states.
+
+  @example Link item
+  <SidebarItem
+    href="/settings"
+    icon={Settings}
+    label="Settings"
+    active={currentPath === '/settings'}
+  />
+
+  @example Button item
+  <SidebarItem
+    onclick={() => doSomething()}
+    icon={Plus}
+    label="Add New"
+  />
+
+  @example With badge
+  <SidebarItem
+    href="/messages"
+    icon={Mail}
+    label="Messages"
+    badge={5}
+    badgeVariant="primary"
+  />
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { fade, fly } from 'svelte/transition';
+  import { SIDEBAR_CONTEXT_KEY } from '../../utils/sidebar.svelte.js';
+
+  let {
+    href = null,
+    onclick = null,
+    icon: Icon = null,
+    label = '',
+    badge = null,
+    badgeVariant = 'default',
+    active = false,
+    disabled = false,
+    variant = 'default',
+    class: className = ''
+  } = $props();
+
+  const sidebar = getContext(SIDEBAR_CONTEXT_KEY);
+  const isCollapsed = $derived(sidebar?.collapsed ?? false);
+
+  const isLink = $derived(href !== null);
+  const itemClass = $derived([
+    'nav-item',
+    active && 'active',
+    disabled && 'disabled',
+    variant !== 'default' && `variant-${variant}`,
+    isCollapsed && 'collapsed',
+    className
+  ].filter(Boolean).join(' '));
+</script>
+
+<li>
+  {#if isLink}
+    <a
+      {href}
+      class={itemClass}
+      title={isCollapsed ? label : null}
+      aria-current={active ? 'page' : undefined}
+      aria-disabled={disabled}
+    >
+      {#if Icon}
+        <Icon size={18} class="nav-icon" />
+      {/if}
+      {#if !isCollapsed}
+        <span class="nav-label" transition:fly={{ x: -20, duration: 200, delay: 50 }}>{label}</span>
+        {#if badge !== null}
+          <span class="nav-badge badge-{badgeVariant}" transition:fly={{ x: -15, duration: 200, delay: 75 }}>
+            {badge}
+          </span>
+        {/if}
+      {/if}
+    </a>
+  {:else}
+    <button
+      type="button"
+      class={itemClass}
+      {onclick}
+      {disabled}
+      title={isCollapsed ? label : null}
+    >
+      {#if Icon}
+        <Icon size={18} class="nav-icon" />
+      {/if}
+      {#if !isCollapsed}
+        <span class="nav-label" transition:fly={{ x: -20, duration: 200, delay: 50 }}>{label}</span>
+        {#if badge !== null}
+          <span class="nav-badge badge-{badgeVariant}" transition:fly={{ x: -15, duration: 200, delay: 75 }}>
+            {badge}
+          </span>
+        {/if}
+      {/if}
+    </button>
+  {/if}
+</li>
+
+<style>
+  li {
+    list-style: none;
+  }
+
+  .nav-item {
+    width: calc(100% - 1rem);
+    padding: 0.375rem 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text, var(--color-base06, #F3F4F7));
+    cursor: pointer;
+    border-radius: 0.375rem;
+    margin: 0 0.5rem;
+    transition: all 200ms ease;
+    overflow: hidden;
+    text-decoration: none;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+  }
+
+  .nav-item:hover {
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 10%, transparent);
+  }
+
+  .nav-item.collapsed {
+    justify-content: center;
+    padding: 0.5rem;
+    margin: 0 0.25rem;
+    width: calc(100% - 0.5rem);
+  }
+
+  .nav-item.active {
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 15%, transparent);
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+    font-weight: 500;
+  }
+
+  .nav-item.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* Variant: warning */
+  .nav-item.variant-warning {
+    color: var(--color-warning, var(--color-base0A, #E8D176));
+  }
+
+  .nav-item.variant-warning:hover {
+    color: var(--color-warning, var(--color-base0A, #E8D176));
+    background-color: color-mix(in srgb, var(--color-warning, var(--color-base0A, #E8D176)) 15%, transparent);
+  }
+
+  /* Variant: danger */
+  .nav-item.variant-danger {
+    color: var(--color-error, var(--color-base08, #EB3137));
+  }
+
+  .nav-item.variant-danger:hover {
+    color: var(--color-error, var(--color-base08, #EB3137));
+    background-color: color-mix(in srgb, var(--color-error, var(--color-base08, #EB3137)) 15%, transparent);
+  }
+
+  .nav-icon {
+    flex-shrink: 0;
+    transition: color 200ms ease;
+  }
+
+  .nav-label {
+    flex: 1;
+    text-align: left;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .nav-badge {
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    border-radius: 9999px;
+    background-color: color-mix(in srgb, var(--color-primary, var(--color-base0D, #83D2FC)) 10%, transparent);
+    color: var(--color-primary, var(--color-base0D, #83D2FC));
+  }
+
+  .nav-badge.badge-success {
+    background-color: color-mix(in srgb, var(--color-success, var(--color-base0B, #6DD672)) 10%, transparent);
+    color: var(--color-success, var(--color-base0B, #6DD672));
+  }
+
+  .nav-badge.badge-warning {
+    background-color: color-mix(in srgb, var(--color-warning, var(--color-base0A, #E8D176)) 10%, transparent);
+    color: var(--color-warning, var(--color-base0A, #E8D176));
+  }
+
+  .nav-badge.badge-danger {
+    background-color: color-mix(in srgb, var(--color-error, var(--color-base08, #EB3137)) 10%, transparent);
+    color: var(--color-error, var(--color-base08, #EB3137));
+  }
+</style>