Navigation Model

import type { NavGroup } from '@comitor/ui/shell'
import {
  Activity,
  CalendarDays,
  FolderKanban,
  Inbox,
  LayoutDashboard,
  Settings,
  Users,
} from 'lucide-react'

export const TASKS_NAV: NavGroup[] = [
  {
    id: 'main',
    // No label — the first group is usually unlabelled and never collapsible.
    items: [
      { id: 'overview', label: 'Overview', href: '/tasks', icon: LayoutDashboard },
      { id: 'inbox', label: 'Inbox', href: '/tasks/inbox', icon: Inbox, badge: 4 },
      { id: 'today', label: 'Today', href: '/tasks/today', icon: CalendarDays },
    ],
  },
  {
    id: 'workspace',
    label: 'Workspace',
    items: [
      {
        id: 'projects',
        label: 'Projects',
        href: '/tasks/projects',
        icon: FolderKanban,
        // Children render inside a Collapsible; clicking the parent only toggles.
        children: [
          { id: 'projects-active', label: 'Active', href: '/tasks/projects/active' },
          { id: 'projects-archived', label: 'Archived', href: '/tasks/projects/archived' },
        ],
      },
      { id: 'members', label: 'Members', href: '/tasks/members', icon: Users },
    ],
  },
  {
    id: 'settings',
    label: 'Settings',
    defaultCollapsed: true,
    items: [
      { id: 'settings-general', label: 'General', href: '/tasks/settings', icon: Settings },
      { id: 'settings-notifications', label: 'Notifications', href: '/tasks/settings?tab=notifications' },
      {
        id: 'settings-billing',
        label: 'Billing',
        href: '/tasks/settings?tab=billing',
        badge: 'Pro',
        badgeVariant: 'warning',
      },
      {
        id: 'status',
        label: 'System status',
        href: 'https://status.comitor.vn',
        icon: Activity,
        external: true,
      },
    ],
  },
]

'use client'

import type { ReactNode } from 'react'
import { useSearchParams } from 'next/navigation'
import { AppShell } from '@comitor/ui/shell'
import { TASKS_NAV } from './nav'

export function Shell({ children }: { children: ReactNode }) {
  // The shell never calls useSearchParams() itself — that would force every
  // page under it into a Suspense boundary. The app opts in, from a client
  // component that already has one.
  const searchParams = useSearchParams()

  return (
    <AppShell nav={TASKS_NAV} searchParams={searchParams}>
      {children}
    </AppShell>
  )
}

import { flattenNavItems, toNavGroups } from '@comitor/ui/shell'
import type { NavGroup, NavItem, ShellNav } from '@comitor/ui/shell'

// ShellNav = NavItem[] | NavGroup[] — a small app can skip groups entirely.
const flat: ShellNav = [
  { id: 'inbox', label: 'Inbox', href: '/tasks/inbox' },
  { id: 'today', label: 'Today', href: '/tasks/today' },
]

const groups: NavGroup[] = toNavGroups(flat)
// → [{ id: 'default', items: [ …the two items… ] }]

const siblings: NavItem[] = flattenNavItems(groups)
// → every item of every group, children included, in render order

import { Contact, House } from 'lucide-react'
import { appAccentStyle, resolveCurrentApp } from '@comitor/ui/shell'
import type { AppDescriptor } from '@comitor/ui/shell'

export const APPS: AppDescriptor[] = [
  { id: 'home', name: 'Home', icon: House, href: '/' },
  {
    id: 'crm',
    name: 'CRM',
    icon: Contact,
    href: '/crm',
    // All three roles, or the ink stays gold while the fill turns teal.
    accent: 'var(--color-teal)',
    accentForeground: 'var(--color-teal-foreground)',
    accentInk: 'var(--color-teal-ink)',
  },
]

export function AppScope({ pathname, children }: { pathname: string; children: React.ReactNode }) {
  // Longest path prefix wins, so '/crm/deals' never falls back to the app at '/'.
  const currentApp = resolveCurrentApp(APPS, pathname)

  // undefined when the app declares no colours — the theme defaults stand.
  return <div style={appAccentStyle(currentApp)}>{children}</div>
}

'use client'

import { ShellNavLink } from '@comitor/ui/shell'

// Inside the shell, this is the link every nav row uses. It reads LinkComponent
// off the shell context and fires onNavigate(href) after each click, which is
// how the mobile menu and the app launcher close themselves.
export function NavLinks() {
  return (
    <>
      <ShellNavLink href="/tasks/inbox" aria-current="page">
        Inbox
      </ShellNavLink>

      {/* external → a plain <a target="_blank">; a router cannot go off-domain. */}
      <ShellNavLink href="https://status.comitor.vn" external>
        System status
      </ShellNavLink>
    </>
  )
}

import type { ReactNode } from 'react'
import { Link as RouterLink, useLocation } from 'react-router-dom'
import { AppShell } from '@comitor/ui/shell'
import type { ShellLinkProps } from '@comitor/ui/shell'
import { TASKS_NAV } from './nav'

// The shell defaults to next/link. Outside Next — Vite, Remix, Storybook —
// supply any component that accepts { href: string } plus anchor props.
function ReactRouterLink({ href, ...props }: ShellLinkProps) {
  return <RouterLink to={href} {...props} />
}

export function Shell({ children }: { children: ReactNode }) {
  const location = useLocation()

  return (
    <AppShell
      nav={TASKS_NAV}
      LinkComponent={ReactRouterLink}
      // usePathname() returns null without an App Router — pass the path yourself.
      pathname={location.pathname}
    >
      {children}
    </AppShell>
  )
}

'use client'

import { MobileMenu } from '@comitor/ui/shell'

// AppShell already renders MobileMenu. Mount it yourself only when you are
// assembling the frame by hand out of ShellProvider + Sidebar + AppHeader.
export function Menu() {
  return (
    <MobileMenu
      showAppLauncher
      showThemeToggle
      footer={<p className="text-xs text-muted-foreground">v1.4.0</p>}
    />
  )
}