) => React.ReactElement
+ }
+ isTheme?: boolean
+}) {
+ return (
+ -
+
+
+
+
+
+ {item.label}
+
+
+ )
+}
+
+function ThemeConfig() {
+ const { defaultTheme, theme, setTheme } = useTheme()
+ return (
+
+
setTheme(defaultTheme)}
+ resetAriaLabel='Reset theme preference to default'
+ />
+
+ {[
+ {
+ value: 'system',
+ label: 'System',
+ icon: IconThemeSystem,
+ },
+ {
+ value: 'light',
+ label: 'Light',
+ icon: IconThemeLight,
+ },
+ {
+ value: 'dark',
+ label: 'Dark',
+ icon: IconThemeDark,
+ },
+ ].map((item) => (
+
+ ))}
+
+
+ Choose between system preference, light mode, or dark mode
+
+
+ setVariant(defaultVariant)}
+ resetAriaLabel='Reset sidebar style to default'
+ />
+
+ {[
+ {
+ value: 'inset',
+ label: 'Inset',
+ icon: IconSidebarInset,
+ },
+ {
+ value: 'floating',
+ label: 'Floating',
+ icon: IconSidebarFloating,
+ },
+ {
+ value: 'sidebar',
+ label: 'Sidebar',
+ icon: IconSidebarSidebar,
+ },
+ ].map((item) => (
+
+ ))}
+
+
+
+ )
+}
+
+function LayoutConfig() {
+ const { open, setOpen } = useSidebar()
+ const { defaultCollapsible, collapsible, setCollapsible } = useLayout()
+
+ const radioState = open ? 'default' : collapsible
+
+ return (
+
+
{
+ setOpen(true)
+ setCollapsible(defaultCollapsible)
+ }}
+ resetAriaLabel='Reset layout options to default'
+ />
+ {
+ if (v === 'default') {
+ setOpen(true)
+ return
+ }
+ setOpen(false)
+ setCollapsible(v as Collapsible)
+ }}
+ className='grid w-full max-w-md grid-cols-3 gap-4'
+ aria-label='Select layout style'
+ aria-describedby='layout-description'
+ >
+ {[
+ {
+ value: 'default',
+ label: 'Default',
+ icon: IconLayoutDefault,
+ },
+ {
+ value: 'icon',
+ label: 'Compact',
+ icon: IconLayoutCompact,
+ },
+ {
+ value: 'offcanvas',
+ label: 'Full layout',
+ icon: IconLayoutFull,
+ },
+ ].map((item) => (
+
+ ))}
+
+
+ Choose between default expanded, compact icon-only, or full layout mode
+
+
+
setDir(defaultDir)}
+ resetAriaLabel='Reset text direction to default'
+ />
+
+ {[
+ {
+ value: 'ltr',
+ label: 'Left to Right',
+ icon: (props: SVGProps) => (
+
+ ),
+ },
+ {
+ value: 'rtl',
+ label: 'Right to Left',
+ icon: (props: SVGProps) => (
+
+ ),
+ },
+ ].map((item) => (
+
+ ))}
+
+
+ Choose between left-to-right or right-to-left site direction
+
+ {desc}
+
+
+ {children}
+
+
+ {cancelBtnText ?? 'Cancel'}
+
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/components/data-table/bulk-actions.tsx b/aha-ui/src/components/data-table/bulk-actions.tsx
new file mode 100644
index 0000000..ebdeb05
--- /dev/null
+++ b/aha-ui/src/components/data-table/bulk-actions.tsx
@@ -0,0 +1,213 @@
+import { useState, useEffect, useRef } from 'react'
+import { type Table } from '@tanstack/react-table'
+import { X } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+type DataTableBulkActionsProps = {
+ table: Table
+ entityName: string
+ children: React.ReactNode
+}
+
+/**
+ * A modular toolbar for displaying bulk actions when table rows are selected.
+ *
+ * @template TData The type of data in the table.
+ * @param {object} props The component props.
+ * @param {Table} props.table The react-table instance.
+ * @param {string} props.entityName The name of the entity being acted upon (e.g., "task", "user").
+ * @param {React.ReactNode} props.children The action buttons to be rendered inside the toolbar.
+ * @returns {React.ReactNode | null} The rendered component or null if no rows are selected.
+ */
+export function DataTableBulkActions({
+ table,
+ entityName,
+ children,
+}: DataTableBulkActionsProps): React.ReactNode | null {
+ const selectedRows = table.getFilteredSelectedRowModel().rows
+ const selectedCount = selectedRows.length
+ const toolbarRef = useRef(null)
+ const [announcement, setAnnouncement] = useState('')
+
+ // Announce selection changes to screen readers
+ useEffect(() => {
+ if (selectedCount > 0) {
+ const message = `${selectedCount} ${entityName}${selectedCount > 1 ? 's' : ''} selected. Bulk actions toolbar is available.`
+
+ // Use queueMicrotask to defer state update and avoid cascading renders
+ queueMicrotask(() => {
+ setAnnouncement(message)
+ })
+
+ // Clear announcement after a delay
+ const timer = setTimeout(() => setAnnouncement(''), 3000)
+ return () => clearTimeout(timer)
+ }
+ }, [selectedCount, entityName])
+
+ const handleClearSelection = () => {
+ table.resetRowSelection()
+ }
+
+ const handleKeyDown = (event: React.KeyboardEvent) => {
+ const buttons = toolbarRef.current?.querySelectorAll('button')
+ if (!buttons) return
+
+ const currentIndex = Array.from(buttons).findIndex(
+ (button) => button === document.activeElement
+ )
+
+ switch (event.key) {
+ case 'ArrowRight': {
+ event.preventDefault()
+ const nextIndex = (currentIndex + 1) % buttons.length
+ buttons[nextIndex]?.focus()
+ break
+ }
+ case 'ArrowLeft': {
+ event.preventDefault()
+ const prevIndex =
+ currentIndex === 0 ? buttons.length - 1 : currentIndex - 1
+ buttons[prevIndex]?.focus()
+ break
+ }
+ case 'Home':
+ event.preventDefault()
+ buttons[0]?.focus()
+ break
+ case 'End':
+ event.preventDefault()
+ buttons[buttons.length - 1]?.focus()
+ break
+ case 'Escape': {
+ // Check if the Escape key came from a dropdown trigger or content
+ // We can't check dropdown state because Radix UI closes it before our handler runs
+ const target = event.target as HTMLElement
+ const activeElement = document.activeElement as HTMLElement
+
+ // Check if the event target or currently focused element is a dropdown trigger
+ const isFromDropdownTrigger =
+ target?.getAttribute('data-slot') === 'dropdown-menu-trigger' ||
+ activeElement?.getAttribute('data-slot') ===
+ 'dropdown-menu-trigger' ||
+ target?.closest('[data-slot="dropdown-menu-trigger"]') ||
+ activeElement?.closest('[data-slot="dropdown-menu-trigger"]')
+
+ // Check if the focused element is inside dropdown content (which is portaled)
+ const isFromDropdownContent =
+ activeElement?.closest('[data-slot="dropdown-menu-content"]') ||
+ target?.closest('[data-slot="dropdown-menu-content"]')
+
+ if (isFromDropdownTrigger || isFromDropdownContent) {
+ // Escape was meant for the dropdown - don't clear selection
+ return
+ }
+
+ // Escape was meant for the toolbar - clear selection
+ event.preventDefault()
+ handleClearSelection()
+ break
+ }
+ }
+ }
+
+ if (selectedCount === 0) {
+ return null
+ }
+
+ return (
+ <>
+ {/* Live region for screen reader announcements */}
+
+ {announcement}
+
+
+ 1 ? 's' : ''}`}
+ aria-describedby='bulk-actions-description'
+ tabIndex={-1}
+ onKeyDown={handleKeyDown}
+ className={cn(
+ 'fixed bottom-6 left-1/2 z-50 -translate-x-1/2 rounded-xl',
+ 'transition-all delay-100 duration-300 ease-out hover:scale-105',
+ 'focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:outline-none'
+ )}
+ >
+
+
+
+
+
+
+ Clear selection (Escape)
+
+
+
+
+
+
+
+ {selectedCount}
+ {' '}
+
+ {entityName}
+ {selectedCount > 1 ? 's' : ''}
+ {' '}
+ selected
+
+
+
+
+ {children}
+
+
{title}
+ }
+
+ return (
+
+
+
+
+
+
+ column.toggleSorting(false)}>
+
+ Asc
+
+ column.toggleSorting(true)}>
+
+ Desc
+
+ {column.getCanHide() && (
+ <>
+
+ column.toggleVisibility(false)}>
+
+ Hide
+
+
+ )}
+
+
+
+
+
+ {option.icon && (
+
+ )}
+ {option.label}
+ {facets?.get(option.value) && (
+
+ {facets.get(option.value)}
+
+ )}
+
+ )
+ })}
+
+ {selectedValues.size > 0 && (
+ <>
+
+
+ column?.setFilterValue(undefined)}
+ className='justify-center text-center'
+ >
+ Clear filters
+
+
+
+ )}
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/components/data-table/index.ts b/aha-ui/src/components/data-table/index.ts
new file mode 100644
index 0000000..bb1245b
--- /dev/null
+++ b/aha-ui/src/components/data-table/index.ts
@@ -0,0 +1,4 @@
+export { DataTablePagination } from './pagination'
+export { DataTableColumnHeader } from './column-header'
+export { DataTableToolbar } from './toolbar'
+export { DataTableBulkActions } from './bulk-actions'
diff --git a/aha-ui/src/components/data-table/pagination.tsx b/aha-ui/src/components/data-table/pagination.tsx
new file mode 100644
index 0000000..5e5991b
--- /dev/null
+++ b/aha-ui/src/components/data-table/pagination.tsx
@@ -0,0 +1,130 @@
+import {
+ ChevronLeftIcon,
+ ChevronRightIcon,
+ DoubleArrowLeftIcon,
+ DoubleArrowRightIcon,
+} from '@radix-ui/react-icons'
+import { type Table } from '@tanstack/react-table'
+import { cn, getPageNumbers } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select'
+
+type DataTablePaginationProps = {
+ table: Table
+ className?: string
+}
+
+export function DataTablePagination({
+ table,
+ className,
+}: DataTablePaginationProps) {
+ const currentPage = table.getState().pagination.pageIndex + 1
+ const totalPages = table.getPageCount()
+ const pageNumbers = getPageNumbers(currentPage, totalPages)
+
+ return (
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
Rows per page
+
+
+
+
+
+ Page {currentPage} of {totalPages}
+
+
+
+
+
+ {/* Page number buttons */}
+ {pageNumbers.map((pageNumber, index) => (
+
+ {pageNumber === '...' ? (
+ ...
+ ) : (
+
+ )}
+
+ ))}
+
+
+
+
+
+
+
+ {searchKey ? (
+
+ table.getColumn(searchKey)?.setFilterValue(event.target.value)
+ }
+ className='h-8 w-37.5 lg:w-62.5'
+ />
+ ) : (
+
table.setGlobalFilter(event.target.value)}
+ className='h-8 w-37.5 lg:w-62.5'
+ />
+ )}
+
+ {filters.map((filter) => {
+ const column = table.getColumn(filter.columnId)
+ if (!column) return null
+ return (
+
+ )
+ })}
+
+ {isFiltered && (
+
+ )}
+
+
+
+ setOpenMobile(false)}
+ className='grid flex-1 text-start text-sm leading-tight'
+ >
+ Shadcn-Admin
+ Vite + ShadcnUI
+
+
+
+
+
+
+ )
+}
+
+function ToggleSidebar({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps) {
+ const { toggleSidebar } = useSidebar()
+
+ return (
+
+ )
+}
diff --git a/aha-ui/src/components/layout/authenticated-layout.tsx b/aha-ui/src/components/layout/authenticated-layout.tsx
new file mode 100644
index 0000000..003e6e2
--- /dev/null
+++ b/aha-ui/src/components/layout/authenticated-layout.tsx
@@ -0,0 +1,42 @@
+import { Outlet } from '@tanstack/react-router'
+import { getCookie } from '@/lib/cookies'
+import { cn } from '@/lib/utils'
+import { LayoutProvider } from '@/context/layout-provider'
+import { SearchProvider } from '@/context/search-provider'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
+import { AppSidebar } from '@/components/layout/app-sidebar'
+import { SkipToMain } from '@/components/skip-to-main'
+
+type AuthenticatedLayoutProps = {
+ children?: React.ReactNode
+}
+
+export function AuthenticatedLayout({ children }: AuthenticatedLayoutProps) {
+ const defaultOpen = getCookie('sidebar_state') !== 'false'
+ return (
+
+
+
+
+
+
+ {children ?? }
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/components/layout/data/sidebar-data.ts b/aha-ui/src/components/layout/data/sidebar-data.ts
new file mode 100644
index 0000000..b559603
--- /dev/null
+++ b/aha-ui/src/components/layout/data/sidebar-data.ts
@@ -0,0 +1,91 @@
+import {
+ Package,
+ Play,
+ BookOpen,
+ Settings,
+ UserCog,
+ Wrench,
+ Palette,
+ Bell,
+ Monitor,
+
+} from 'lucide-react'
+import { type SidebarData } from '../types'
+
+export const sidebarData: SidebarData = {
+ user: {
+ name: 'AHA User',
+ email: 'user@aha.app',
+ avatar: '/avatars/shadcn.jpg',
+ },
+ teams: [
+ {
+ name: 'AHA Launcher',
+ logo: Play,
+ plan: '模型推理服务启动器',
+ },
+ ],
+ navGroups: [
+ {
+ title: '导航',
+ items: [
+ {
+ title: '模型列表',
+ url: '/',
+ icon: Package,
+ },
+ {
+ title: '启动服务',
+ url: '/launch',
+ icon: Play,
+ },
+ {
+ title: '使用指南',
+ url: '/usage',
+ icon: BookOpen,
+ },
+ ],
+ },
+ {
+ title: '设置',
+ items: [
+ {
+ title: 'Settings',
+ icon: Settings,
+ items: [
+ {
+ title: 'Model',
+ url: '/settings/model',
+ icon: Package,
+ },
+ {
+ title: 'Profile',
+ url: '/settings',
+ icon: UserCog,
+ },
+ {
+ title: 'Account',
+ url: '/settings/account',
+ icon: Wrench,
+ },
+ {
+ title: 'Appearance',
+ url: '/settings/appearance',
+ icon: Palette,
+ },
+ {
+ title: 'Notifications',
+ url: '/settings/notifications',
+ icon: Bell,
+ },
+ {
+ title: 'Display',
+ url: '/settings/display',
+ icon: Monitor,
+ },
+ ],
+ },
+ ],
+ },
+ ],
+}
diff --git a/aha-ui/src/components/layout/header.tsx b/aha-ui/src/components/layout/header.tsx
new file mode 100644
index 0000000..4c07798
--- /dev/null
+++ b/aha-ui/src/components/layout/header.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react'
+import { cn } from '@/lib/utils'
+import { Separator } from '@/components/ui/separator'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+
+type HeaderProps = React.HTMLAttributes & {
+ fixed?: boolean
+ ref?: React.Ref
+}
+
+export function Header({ className, fixed, children, ...props }: HeaderProps) {
+ const [offset, setOffset] = useState(0)
+
+ useEffect(() => {
+ const onScroll = () => {
+ setOffset(document.body.scrollTop || document.documentElement.scrollTop)
+ }
+
+ // Add scroll listener to the body
+ document.addEventListener('scroll', onScroll, { passive: true })
+
+ // Clean up the event listener on unmount
+ return () => document.removeEventListener('scroll', onScroll)
+ }, [])
+
+ return (
+
+ )
+}
diff --git a/aha-ui/src/components/layout/main.tsx b/aha-ui/src/components/layout/main.tsx
new file mode 100644
index 0000000..b3d6d0a
--- /dev/null
+++ b/aha-ui/src/components/layout/main.tsx
@@ -0,0 +1,27 @@
+import { cn } from '@/lib/utils'
+
+type MainProps = React.HTMLAttributes & {
+ fixed?: boolean
+ fluid?: boolean
+ ref?: React.Ref
+}
+
+export function Main({ fixed, className, fluid, ...props }: MainProps) {
+ return (
+
+ )
+}
diff --git a/aha-ui/src/components/layout/nav-group.tsx b/aha-ui/src/components/layout/nav-group.tsx
new file mode 100644
index 0000000..3a0b73c
--- /dev/null
+++ b/aha-ui/src/components/layout/nav-group.tsx
@@ -0,0 +1,185 @@
+import { type ReactNode } from 'react'
+import { Link, useLocation } from '@tanstack/react-router'
+import { ChevronRight } from 'lucide-react'
+import {
+ Collapsible,
+ CollapsibleContent,
+ CollapsibleTrigger,
+} from '@/components/ui/collapsible'
+import {
+ SidebarGroup,
+ SidebarGroupLabel,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ useSidebar,
+} from '@/components/ui/sidebar'
+import { Badge } from '../ui/badge'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '../ui/dropdown-menu'
+import {
+ type NavCollapsible,
+ type NavItem,
+ type NavLink,
+ type NavGroup as NavGroupProps,
+} from './types'
+
+export function NavGroup({ title, items }: NavGroupProps) {
+ const { state, isMobile } = useSidebar()
+ const href = useLocation({ select: (location) => location.href })
+ return (
+
+ {title}
+
+ {items.map((item) => {
+ const key = `${item.title}-${item.url}`
+
+ if (!item.items)
+ return
+
+ if (state === 'collapsed' && !isMobile)
+ return (
+
+ )
+
+ return
+ })}
+
+
+ )
+}
+
+function NavBadge({ children }: { children: ReactNode }) {
+ return {children}
+}
+
+function SidebarMenuLink({ item, href }: { item: NavLink; href: string }) {
+ const { setOpenMobile } = useSidebar()
+ return (
+
+
+ setOpenMobile(false)}>
+ {item.icon && }
+ {item.title}
+ {item.badge && {item.badge}}
+
+
+
+ )
+}
+
+function SidebarMenuCollapsible({
+ item,
+ href,
+}: {
+ item: NavCollapsible
+ href: string
+}) {
+ const { setOpenMobile } = useSidebar()
+ return (
+
+
+
+
+ {item.icon && }
+ {item.title}
+ {item.badge && {item.badge}}
+
+
+
+
+
+ {item.items.map((subItem) => (
+
+
+ setOpenMobile(false)}>
+ {subItem.icon && }
+ {subItem.title}
+ {subItem.badge && {subItem.badge}}
+
+
+
+ ))}
+
+
+
+
+ )
+}
+
+function SidebarMenuCollapsedDropdown({
+ item,
+ href,
+}: {
+ item: NavCollapsible
+ href: string
+}) {
+ return (
+
+
+
+
+ {item.icon && }
+ {item.title}
+ {item.badge && {item.badge}}
+
+
+
+
+
+ {item.title} {item.badge ? `(${item.badge})` : ''}
+
+
+ {item.items.map((sub) => (
+
+
+ {sub.icon && }
+ {sub.title}
+ {sub.badge && (
+ {sub.badge}
+ )}
+
+
+ ))}
+
+
+
+ )
+}
+
+function checkIsActive(href: string, item: NavItem, mainNav = false) {
+ return (
+ href === item.url || // /endpint?search=param
+ href.split('?')[0] === item.url || // endpoint
+ !!item?.items?.filter((i) => i.url === href).length || // if child nav is active
+ (mainNav &&
+ href.split('/')[1] !== '' &&
+ href.split('/')[1] === item?.url?.split('/')[1])
+ )
+}
diff --git a/aha-ui/src/components/layout/nav-user.tsx b/aha-ui/src/components/layout/nav-user.tsx
new file mode 100644
index 0000000..daa75da
--- /dev/null
+++ b/aha-ui/src/components/layout/nav-user.tsx
@@ -0,0 +1,124 @@
+import { Link } from '@tanstack/react-router'
+import {
+ BadgeCheck,
+ Bell,
+ ChevronsUpDown,
+ CreditCard,
+ LogOut,
+ Sparkles,
+} from 'lucide-react'
+import useDialogState from '@/hooks/use-dialog-state'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import {
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ useSidebar,
+} from '@/components/ui/sidebar'
+import { SignOutDialog } from '@/components/sign-out-dialog'
+
+type NavUserProps = {
+ user: {
+ name: string
+ email: string
+ avatar: string
+ }
+}
+
+export function NavUser({ user }: NavUserProps) {
+ const { isMobile } = useSidebar()
+ const [open, setOpen] = useDialogState()
+
+ return (
+ <>
+
+
+
+
+
+
+
+ SN
+
+
+ {user.name}
+ {user.email}
+
+
+
+
+
+
+
+
+
+ SN
+
+
+ {user.name}
+ {user.email}
+
+
+
+ {activeTeam.name}
+
+ {activeTeam.plan}
+
+
+
+
+
+
+ Teams
+
+ {teams.map((team, index) => (
+ setActiveTeam(team)}
+ className='gap-2 p-2'
+ >
+
+
+
+ {team.name}
+ ⌘{index + 1}
+
+ ))}
+
+
+
+ Add team
+
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/components/layout/top-nav.tsx b/aha-ui/src/components/layout/top-nav.tsx
new file mode 100644
index 0000000..9059fec
--- /dev/null
+++ b/aha-ui/src/components/layout/top-nav.tsx
@@ -0,0 +1,70 @@
+import { Link } from '@tanstack/react-router'
+import { Menu } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+
+type TopNavProps = React.HTMLAttributes & {
+ links: {
+ title: string
+ href: string
+ isActive: boolean
+ disabled?: boolean
+ }[]
+}
+
+export function TopNav({ className, links, ...props }: TopNavProps) {
+ return (
+ <>
+
+
+
+
+
+ {links.map(({ title, href, isActive, disabled }) => (
+
+
+ {title}
+
+
+ ))}
+
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/components/layout/types.ts b/aha-ui/src/components/layout/types.ts
new file mode 100644
index 0000000..df34573
--- /dev/null
+++ b/aha-ui/src/components/layout/types.ts
@@ -0,0 +1,44 @@
+import { type LinkProps } from '@tanstack/react-router'
+
+type User = {
+ name: string
+ email: string
+ avatar: string
+}
+
+type Team = {
+ name: string
+ logo: React.ElementType
+ plan: string
+}
+
+type BaseNavItem = {
+ title: string
+ badge?: string
+ icon?: React.ElementType
+}
+
+type NavLink = BaseNavItem & {
+ url: LinkProps['to'] | (string & {})
+ items?: never
+}
+
+type NavCollapsible = BaseNavItem & {
+ items: (BaseNavItem & { url: LinkProps['to'] | (string & {}) })[]
+ url?: never
+}
+
+type NavItem = NavCollapsible | NavLink
+
+type NavGroup = {
+ title: string
+ items: NavItem[]
+}
+
+type SidebarData = {
+ user: User
+ teams: Team[]
+ navGroups: NavGroup[]
+}
+
+export type { SidebarData, NavGroup, NavItem, NavCollapsible, NavLink }
diff --git a/aha-ui/src/components/learn-more.tsx b/aha-ui/src/components/learn-more.tsx
new file mode 100644
index 0000000..54e2785
--- /dev/null
+++ b/aha-ui/src/components/learn-more.tsx
@@ -0,0 +1,44 @@
+import { type Root, type Content, type Trigger } from '@radix-ui/react-popover'
+import { CircleQuestionMark } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover'
+
+type LearnMoreProps = React.ComponentProps & {
+ contentProps?: React.ComponentProps
+ triggerProps?: React.ComponentProps
+}
+
+export function LearnMore({
+ children,
+ contentProps,
+ triggerProps,
+ ...props
+}: LearnMoreProps) {
+ return (
+
+
+
+
+
+ {children}
+
+
+ )
+}
diff --git a/aha-ui/src/components/long-text.tsx b/aha-ui/src/components/long-text.tsx
new file mode 100644
index 0000000..74bf47d
--- /dev/null
+++ b/aha-ui/src/components/long-text.tsx
@@ -0,0 +1,84 @@
+import { useRef, useState } from 'react'
+import { cn } from '@/lib/utils'
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from '@/components/ui/popover'
+import {
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip'
+
+type LongTextProps = {
+ children: React.ReactNode
+ className?: string
+ contentClassName?: string
+}
+
+export function LongText({
+ children,
+ className = '',
+ contentClassName = '',
+}: LongTextProps) {
+ const ref = useRef(null)
+ const [isOverflown, setIsOverflown] = useState(false)
+
+ // Use ref callback to check overflow when element is mounted
+ const refCallback = (node: HTMLDivElement | null) => {
+ ref.current = node
+ if (node && checkOverflow(node)) {
+ queueMicrotask(() => setIsOverflown(true))
+ }
+ }
+
+ if (!isOverflown)
+ return (
+
+ {children}
+
+ )
+
+ return (
+ <>
+
+
+
+
+
+ {children}
+
+
+
+ {children}
+
+
+
+
+
+
+
+ {children}
+
+
+
+ {children}
+
+
+
+
+
+
+ )
+}
diff --git a/aha-ui/src/components/profile-dropdown.tsx b/aha-ui/src/components/profile-dropdown.tsx
new file mode 100644
index 0000000..8d8cb87
--- /dev/null
+++ b/aha-ui/src/components/profile-dropdown.tsx
@@ -0,0 +1,75 @@
+import { Link } from '@tanstack/react-router'
+import useDialogState from '@/hooks/use-dialog-state'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuShortcut,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { SignOutDialog } from '@/components/sign-out-dialog'
+
+export function ProfileDropdown() {
+ const [open, setOpen] = useDialogState()
+
+ return (
+ <>
+
+
+
+
+
+
+
+
satnaing
+
+ satnaingdev@gmail.com
+
+
+
+ {children}
+
+ |
+ )
+ },
+ ...components,
+ }}
+ {...props}
+ />
+ )
+}
+
+function CalendarDayButton({
+ className,
+ day,
+ modifiers,
+ ...props
+}: React.ComponentProps) {
+ const defaultClassNames = getDefaultClassNames()
+
+ const ref = React.useRef(null)
+ React.useEffect(() => {
+ if (modifiers.focused) ref.current?.focus()
+ }, [modifiers.focused])
+
+ return (
+