Jakob Wennberg
9686b54b41
Seven radii were in circulation (4/5/6/8/12/16px + pill) with no rule for which went where; one toolbar row on /transactions mixed four shape languages. This locks a 4-tier ladder (design.md convention 16): - pill: interactive toolbar controls (buttons, chips, pickers, segmented controls, toolbar search, count nubs) - rounded-xl (12px): overlay tier: page panel, dialogs, slide-overs - rounded-lg (8px): cards, form fields, popover/menu content, boxes - rounded-sm (4px): nested leaves (menu items, checkboxes, kbd/code nubs) Changes: - New SegmentedControl primitive (pill-in-pill tablist, h-8) replaces the hand-rolled bg-muted/70 tablist copied across 11 files - New ToolbarSearch primitive (pill, h-8) adopted on 9 page toolbars; dialog/picker searches keep the rounded-lg Input - dialog.tsx 8px -> 12px, matching SettingsModal/slide-over/CommandPalette - ContextPicker chips at the shared h-8 toolbar height - ~300 rounded-md / bare rounded call sites remapped by role; auth icon tiles and the mobile nav sheet come down from 16px to 12px - rounded-md, bare rounded, rounded-2xl and rounded-[Npx] are dead vocabulary, enforced by a new off-ladder-radius check in check:guards Verified: lint 0 errors, 14422 unit tests pass, check:guards green, tsc clean on all changed files, sandbox screenshots of transactions/ bookkeeping/granskning toolbars and the Ny verifikation dialog. Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com> Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
284 lines
12 KiB
TypeScript
284 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState, useTransition } from 'react'
|
|
import Link from 'next/link'
|
|
import { usePathname, useRouter } from 'next/navigation'
|
|
import { Pin, PinOff, Archive, Pencil, Search, X, PanelLeftOpen, PanelLeftClose } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import { useAgentSheet } from './AgentSheetProvider'
|
|
import AgentAvatar from './AgentAvatar'
|
|
import {
|
|
type ConversationRow,
|
|
BUCKET_LABELS,
|
|
relativeTime,
|
|
intentLabel,
|
|
} from './conversation-display'
|
|
import { useConversationList } from './use-conversation-list'
|
|
|
|
interface Props {
|
|
initialConversations: ConversationRow[]
|
|
}
|
|
|
|
export default function ChatSidebar({ initialConversations }: Props) {
|
|
const router = useRouter()
|
|
const pathname = usePathname()
|
|
const { openAgentSheet, identity } = useAgentSheet()
|
|
const agentName = identity.displayName?.trim() || null
|
|
// State + all three mutations live in the shared hook so this surface and the
|
|
// in-sheet list cannot drift apart again. Pin/archive/rename here used to be
|
|
// fire-and-forget with no rollback.
|
|
const {
|
|
conversations,
|
|
query,
|
|
setQuery,
|
|
grouped,
|
|
togglePin,
|
|
archive: archiveConversation,
|
|
editingId,
|
|
editValue,
|
|
setEditValue,
|
|
startEdit,
|
|
cancelEdit,
|
|
commitEdit,
|
|
} = useConversationList(initialConversations)
|
|
const [, startTransition] = useTransition()
|
|
// Collapsed by default; persisted across reloads so power users keep
|
|
// their preference. Hidden behind a thin rail when collapsed so the
|
|
// conversation pane runs nearly edge-to-edge.
|
|
const [collapsed, setCollapsed] = useState(true)
|
|
useEffect(() => {
|
|
const stored = localStorage.getItem('Accounted:chat-sidebar-collapsed')
|
|
if (stored === 'false') setCollapsed(false)
|
|
}, [])
|
|
const toggleCollapsed = () => {
|
|
setCollapsed(c => {
|
|
const next = !c
|
|
try { localStorage.setItem('Accounted:chat-sidebar-collapsed', next ? 'true' : 'false') } catch {}
|
|
return next
|
|
})
|
|
}
|
|
|
|
const activeId = pathname?.startsWith('/chat/') ? pathname.split('/')[2] : null
|
|
const isConversationOpen = !!activeId
|
|
|
|
|
|
async function archive(id: string) {
|
|
const removed = await archiveConversation(id)
|
|
if (removed && activeId === id) startTransition(() => router.push('/chat'))
|
|
}
|
|
|
|
// Collapsed rail (desktop only). Mobile keeps the existing behavior where
|
|
// the sidebar IS the page when no conversation is open, so the rail is
|
|
// hidden below md. On desktop the rail keeps a thin column with toggle
|
|
// + new-chat buttons so the conversation pane runs near-edge-to-edge.
|
|
const railAside = collapsed ? (
|
|
<aside
|
|
className="hidden md:flex md:w-12 flex-col items-center border-r border-border bg-card/40 shrink-0 py-3 gap-2"
|
|
aria-label="Konversationer (hopfälld)"
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={toggleCollapsed}
|
|
aria-label="Visa konversationer"
|
|
title="Visa konversationer"
|
|
className="inline-flex h-9 w-9 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors"
|
|
>
|
|
<PanelLeftOpen className="h-4 w-4" />
|
|
</button>
|
|
<div className="h-px w-6 bg-border" />
|
|
<button
|
|
type="button"
|
|
onClick={() => openAgentSheet({ intentId: 'general.help' })}
|
|
aria-label="Ny konversation"
|
|
title="Ny konversation"
|
|
className="inline-flex h-9 w-9 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors text-lg"
|
|
>
|
|
+
|
|
</button>
|
|
</aside>
|
|
) : null
|
|
|
|
return (
|
|
<>
|
|
{railAside}
|
|
<aside
|
|
className={cn(
|
|
'flex-col border-r border-border bg-card/40 shrink-0',
|
|
// Mobile: sidebar IS the page when no conversation; hidden otherwise.
|
|
isConversationOpen ? 'hidden' : 'flex w-full',
|
|
// Desktop: hidden if collapsed (rail takes its place); else 320px.
|
|
collapsed ? 'md:hidden' : 'md:flex md:w-80',
|
|
)}
|
|
>
|
|
<div className="border-b border-border px-5 py-4 space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<AgentAvatar avatarId={identity.avatarId} size="sm" alt={agentName ?? 'Assistent'} />
|
|
<div className="flex-1 min-w-0">
|
|
<h2 className="font-display text-base tracking-tight truncate">
|
|
{agentName ?? 'Din assistent'}
|
|
</h2>
|
|
<p className="text-[11px] text-muted-foreground">Konversationer</p>
|
|
</div>
|
|
<button
|
|
onClick={toggleCollapsed}
|
|
aria-label="Dölj konversationer"
|
|
title="Dölj konversationer"
|
|
className="hidden md:inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-secondary/60 transition-colors"
|
|
>
|
|
<PanelLeftClose className="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => openAgentSheet({ intentId: 'general.help' })}
|
|
className="text-xs uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
+ Ny
|
|
</button>
|
|
</div>
|
|
<div className="relative">
|
|
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
|
|
<input
|
|
type="text"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
placeholder="Sök…"
|
|
className="w-full rounded-lg border border-border bg-background pl-8 pr-7 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
{query.length > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setQuery('')}
|
|
aria-label="Rensa sökning"
|
|
className="absolute right-1 top-1/2 -translate-y-1/2 inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground hover:bg-secondary hover:text-foreground"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{grouped.length === 0 ? (
|
|
<div className="p-6 text-sm text-muted-foreground">
|
|
{conversations.length === 0
|
|
? 'Inga konversationer ännu. Klicka på + Ny för att börja.'
|
|
: 'Inga träffar.'}
|
|
</div>
|
|
) : (
|
|
grouped.map(({ bucket, rows }) => (
|
|
<section key={bucket} className="py-2">
|
|
<p className="px-4 pb-1 text-[10px] uppercase tracking-wider text-muted-foreground">
|
|
{BUCKET_LABELS[bucket]}
|
|
</p>
|
|
<ul className="space-y-1">
|
|
{rows.map((c) => (
|
|
<li key={c.id}>
|
|
{editingId === c.id ? (
|
|
<div className="px-4 py-2">
|
|
<input
|
|
autoFocus
|
|
value={editValue}
|
|
onChange={(e) => setEditValue(e.target.value)}
|
|
onBlur={() => void commitEdit(c.id)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault()
|
|
;(e.target as HTMLInputElement).blur()
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault()
|
|
cancelEdit()
|
|
}
|
|
}}
|
|
placeholder="Namnge konversationen…"
|
|
maxLength={200}
|
|
aria-label="Nytt namn på konversationen"
|
|
className="w-full rounded-lg border border-border bg-background px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</div>
|
|
) : (
|
|
<Link
|
|
href={`/chat/${c.id}`}
|
|
className={cn(
|
|
'group flex items-start gap-2 px-4 py-2 hover:bg-secondary/60 transition-colors border-l-2',
|
|
activeId === c.id
|
|
? 'bg-secondary/50 border-foreground'
|
|
: 'border-transparent',
|
|
)}
|
|
>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-1.5">
|
|
<p className="text-sm font-medium truncate flex-1 min-w-0">
|
|
{c.title ?? intentLabel(c.intent_id)}
|
|
</p>
|
|
<p className="text-[11px] text-muted-foreground tabular-nums shrink-0">
|
|
{relativeTime(c.last_message_at ?? c.created_at)}
|
|
</p>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground line-clamp-1 mt-0.5">
|
|
{c.last_message_preview ?? intentLabel(c.intent_id)}
|
|
</p>
|
|
</div>
|
|
{/* Always-visible action icons. Touch-friendly, no
|
|
hover-only invisibility on mobile. Laid out
|
|
horizontally so three icons don't stack and inflate
|
|
the row height. */}
|
|
<div className="flex items-center gap-1 shrink-0 -mr-1">
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
startEdit(c)
|
|
}}
|
|
title="Byt namn"
|
|
aria-label="Byt namn på konversation"
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground/50 hover:text-foreground hover:bg-secondary transition-colors"
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</button>
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
void togglePin(c.id, c.pinned)
|
|
}}
|
|
title={c.pinned ? 'Avfäst' : 'Fäst'}
|
|
aria-label={c.pinned ? 'Avfäst konversation' : 'Fäst konversation'}
|
|
className={cn(
|
|
'inline-flex h-8 w-8 items-center justify-center rounded-sm transition-colors',
|
|
c.pinned
|
|
? 'text-foreground'
|
|
: 'text-muted-foreground/50 hover:text-foreground hover:bg-secondary',
|
|
)}
|
|
>
|
|
{c.pinned ? (
|
|
<Pin className="h-3 w-3" fill="currentColor" />
|
|
) : (
|
|
<PinOff className="h-3 w-3" />
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={(e) => {
|
|
e.preventDefault()
|
|
e.stopPropagation()
|
|
void archive(c.id)
|
|
}}
|
|
title="Arkivera"
|
|
aria-label="Arkivera konversation"
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-sm text-muted-foreground/50 hover:text-foreground hover:bg-secondary transition-colors"
|
|
>
|
|
<Archive className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</section>
|
|
))
|
|
)}
|
|
</div>
|
|
</aside>
|
|
</>
|
|
)
|
|
}
|