Skip to content

Commit f920433

Browse files
rob-at-cortexrob-at-cortex
committed
chat working
1 parent e85b044 commit f920433

8 files changed

Lines changed: 470 additions & 109 deletions

File tree

‎src/components/AdvancedComponents/app-header.tsx‎

Lines changed: 51 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ interface AppHeaderProps {
2323
onTabChange?: (tab: string) => void
2424
showTabs?: boolean
2525
tabOptions?: TabOption[]
26+
// New props for enhanced functionality
27+
onActionClick?: () => void
28+
actionIcon?: React.ReactNode
29+
actionText?: string
30+
onNotificationRemove?: (id: string) => void
31+
onRemoveAll?: () => void
32+
logo?: string
33+
appName?: string
34+
tagline?: string
2635
}
2736

2837
export function AppHeader({
@@ -43,23 +52,28 @@ export function AppHeader({
4352
{ value: "knowledge", label: "Knowledge" },
4453
// { value: "files", label: "Files" },
4554
],
55+
onActionClick,
56+
actionIcon = <Bot className="mr-2 h-4 w-4" />,
57+
actionText = "Action",
58+
onNotificationRemove,
59+
onRemoveAll,
60+
logo = "/headerlogo.png",
61+
appName = "Nuvia",
62+
tagline = "Collaboration Platform",
4663
}: AppHeaderProps) {
4764
const [notificationsPanelOpen, setNotificationsPanelOpen] = useState(false)
4865
const [notificationsData, setNotificationsData] = useState<Notification[]>(notifications)
4966

5067
const unreadCount = notificationsData.filter((notification) => !notification.read).length
5168

52-
const handleMarkAllAsRead = () => {
53-
setNotificationsData(
54-
notificationsData.map((notification) => ({
55-
...notification,
56-
read: true,
57-
})),
58-
)
69+
const handleNotificationRemove = (id: string) => {
70+
setNotificationsData(prev => prev.filter(notification => notification.id !== id))
71+
onNotificationRemove?.(id)
5972
}
6073

61-
const handleClearAll = () => {
62-
setNotificationsData([])
74+
const handleRemoveAll = () => {
75+
setNotificationsData(prev => prev.filter(notification => notification.read))
76+
onRemoveAll?.()
6377
}
6478

6579
return (
@@ -73,6 +87,25 @@ export function AppHeader({
7387
<Button variant="ghost" size="icon" className="hidden md:flex" onClick={onToggleSidebar}>
7488
<PanelLeft className="h-5 w-5" />
7589
</Button>
90+
91+
{/* Logo and Title - shown when sidebar is closed */}
92+
{!sidebarOpen && (
93+
<motion.div
94+
className="flex items-center gap-3"
95+
initial={{ opacity: 0, x: -20 }}
96+
animate={{ opacity: 1, x: 0 }}
97+
transition={{ duration: 0.3 }}
98+
>
99+
<div className="flex h-10 w-10 items-center justify-center">
100+
<img src={logo} alt="Logo" className="h-10 w-10 object-contain" />
101+
</div>
102+
<div>
103+
<h2 className="font-semibold text-sm">{appName}</h2>
104+
<p className="text-xs text-muted-foreground">{tagline}</p>
105+
</div>
106+
</motion.div>
107+
)}
108+
76109
<div className="flex flex-1 items-center">
77110
{/* Navigation Tabs */}
78111
{showTabs && (
@@ -95,12 +128,13 @@ export function AppHeader({
95128
whileTap={{ scale: 0.95 }}
96129
transition={{ type: "spring", stiffness: 400, damping: 17 }}
97130
>
98-
<Link href="/ai-assistant">
99-
<Button className="rounded-2xl transition-all duration-200 hover:shadow-md">
100-
<Bot className="mr-2 h-4 w-4" />
101-
Copilot
102-
</Button>
103-
</Link>
131+
<Button
132+
className="rounded-2xl transition-all duration-200 hover:shadow-md"
133+
onClick={onActionClick}
134+
>
135+
{actionIcon}
136+
{actionText}
137+
</Button>
104138
</motion.div>
105139
{/* <motion.div
106140
whileHover={{ scale: 1.05 }}
@@ -191,8 +225,8 @@ export function AppHeader({
191225
notifications={notificationsData}
192226
open={notificationsPanelOpen}
193227
onClose={() => setNotificationsPanelOpen(false)}
194-
onMarkAllAsRead={handleMarkAllAsRead}
195-
onClearAll={handleClearAll}
228+
onNotificationRemove={handleNotificationRemove}
229+
onRemoveAll={handleRemoveAll}
196230
/>
197231
</>
198232
)

‎src/components/AdvancedComponents/notifications-panel.stories.tsx‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@ const meta: Meta<typeof NotificationsPanel> = {
77
component: NotificationsPanel,
88
parameters: {
99
layout: "fullscreen",
10+
docs: {
11+
description: {
12+
component: "A notifications panel that only shows unread notifications. Users can dismiss notifications individually or use 'Dismiss all' for bulk actions.",
13+
},
14+
},
1015
},
1116
argTypes: {
1217
open: {
@@ -23,8 +28,8 @@ export const Default: Story = {
2328
notifications: mockNotifications,
2429
open: true,
2530
onClose: () => console.log("Close clicked"),
26-
onMarkAllAsRead: () => console.log("Mark all as read clicked"),
27-
onClearAll: () => console.log("Clear all clicked"),
31+
onNotificationRemove: (id: string) => console.log("Notification removed:", id),
32+
onRemoveAll: () => console.log("Remove all clicked"),
2833
},
2934
}
3035

@@ -33,7 +38,17 @@ export const Empty: Story = {
3338
notifications: [],
3439
open: true,
3540
onClose: () => console.log("Close clicked"),
36-
onMarkAllAsRead: () => console.log("Mark all as read clicked"),
37-
onClearAll: () => console.log("Clear all clicked"),
41+
onNotificationRemove: (id: string) => console.log("Notification removed:", id),
42+
onRemoveAll: () => console.log("Remove all clicked"),
43+
},
44+
}
45+
46+
export const OnlyReadNotifications: Story = {
47+
args: {
48+
notifications: mockNotifications.map(n => ({ ...n, read: true })),
49+
open: true,
50+
onClose: () => console.log("Close clicked"),
51+
onNotificationRemove: (id: string) => console.log("Notification removed:", id),
52+
onRemoveAll: () => console.log("Remove all clicked"),
3853
},
3954
}

‎src/components/AdvancedComponents/notifications-panel.tsx‎

Lines changed: 34 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,22 @@ interface NotificationsPanelProps {
2121
notifications: Notification[]
2222
open: boolean
2323
onClose: () => void
24-
onMarkAllAsRead: () => void
25-
onClearAll: () => void
24+
onNotificationRemove?: (id: string) => void
25+
onRemoveAll?: () => void
2626
className?: string
2727
}
2828

2929
export function NotificationsPanel({
3030
notifications,
3131
open,
3232
onClose,
33-
onMarkAllAsRead,
34-
onClearAll,
33+
onNotificationRemove,
34+
onRemoveAll,
3535
className,
3636
}: NotificationsPanelProps) {
37-
const unreadCount = notifications.filter((notification) => !notification.read).length
37+
// Only show unread notifications
38+
const unreadNotifications = notifications.filter((notification) => !notification.read)
39+
const unreadCount = unreadNotifications.length
3840

3941
const getNotificationIcon = (type: Notification["type"]) => {
4042
switch (type) {
@@ -92,31 +94,45 @@ export function NotificationsPanel({
9294
</div>
9395

9496
{/* Actions */}
95-
<div className="flex items-center justify-between border-b p-2">
96-
<Button variant="ghost" size="sm" onClick={onMarkAllAsRead} className="text-sm">
97-
Mark all as read
98-
</Button>
99-
<Button variant="ghost" size="sm" onClick={onClearAll} className="text-sm">
100-
Clear all
101-
</Button>
102-
</div>
103-
97+
{unreadCount > 0 && (
98+
<div className="flex items-center justify-between border-b p-2">
99+
<span className="text-sm text-muted-foreground">
100+
{unreadCount} unread notification{unreadCount !== 1 ? 's' : ''}
101+
</span>
102+
<Button variant="ghost" size="sm" onClick={onRemoveAll} className="text-sm">
103+
Dismiss all
104+
</Button>
105+
</div>
106+
)}
107+
104108
{/* Notifications List */}
105-
{notifications.length > 0 ? (
109+
{unreadNotifications.length > 0 ? (
106110
<ScrollArea className="flex-1">
107111
<div className="divide-y">
108-
{notifications.map((notification) => (
112+
{unreadNotifications.map((notification) => (
109113
<div
110114
key={notification.id}
111-
className={cn("flex gap-3 p-4 transition-colors", !notification.read && "bg-muted/50")}
115+
className={cn("flex gap-3 p-4 transition-colors bg-muted/50")}
112116
>
113117
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-muted">
114118
{getNotificationIcon(notification.type)}
115119
</div>
116120
<div className="flex-1 space-y-1">
117121
<div className="flex items-center justify-between">
118122
<p className="font-medium">{notification.title}</p>
119-
<p className="text-xs text-muted-foreground">{notification.time}</p>
123+
<div className="flex items-center gap-2">
124+
<p className="text-xs text-muted-foreground">{notification.time}</p>
125+
{/* Dismiss button */}
126+
<Button
127+
variant="ghost"
128+
size="sm"
129+
className="h-6 w-6 p-0"
130+
onClick={() => onNotificationRemove?.(notification.id)}
131+
title="Dismiss"
132+
>
133+
<Check className="h-3 w-3" />
134+
</Button>
135+
</div>
120136
</div>
121137
<p className="text-sm text-muted-foreground">{notification.description}</p>
122138
{notification.actionLabel && (

0 commit comments

Comments
 (0)