Spaces:
Sleeping
Sleeping
File size: 4,096 Bytes
f871fed |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
'use client'
import { useState } from 'react'
import { NotebookResponse } from '@/lib/types/api'
import { Button } from '@/components/ui/button'
import { Badge } from '@/components/ui/badge'
import { Archive, ArchiveRestore, Trash2 } from 'lucide-react'
import { useUpdateNotebook, useDeleteNotebook } from '@/lib/hooks/use-notebooks'
import { ConfirmDialog } from '@/components/common/ConfirmDialog'
import { formatDistanceToNow } from 'date-fns'
import { InlineEdit } from '@/components/common/InlineEdit'
interface NotebookHeaderProps {
notebook: NotebookResponse
}
export function NotebookHeader({ notebook }: NotebookHeaderProps) {
const [showDeleteDialog, setShowDeleteDialog] = useState(false)
const updateNotebook = useUpdateNotebook()
const deleteNotebook = useDeleteNotebook()
const handleUpdateName = async (name: string) => {
if (!name || name === notebook.name) return
await updateNotebook.mutateAsync({
id: notebook.id,
data: { name }
})
}
const handleUpdateDescription = async (description: string) => {
if (description === notebook.description) return
await updateNotebook.mutateAsync({
id: notebook.id,
data: { description: description || undefined }
})
}
const handleArchiveToggle = () => {
updateNotebook.mutate({
id: notebook.id,
data: { archived: !notebook.archived }
})
}
const handleDelete = () => {
deleteNotebook.mutate(notebook.id)
setShowDeleteDialog(false)
}
return (
<>
<div className="border-b pb-6">
<div className="space-y-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3 flex-1">
<InlineEdit
value={notebook.name}
onSave={handleUpdateName}
className="text-2xl font-bold"
inputClassName="text-2xl font-bold"
placeholder="Notebook name"
/>
{notebook.archived && (
<Badge variant="secondary">Archived</Badge>
)}
</div>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={handleArchiveToggle}
>
{notebook.archived ? (
<>
<ArchiveRestore className="h-4 w-4 mr-2" />
Unarchive
</>
) : (
<>
<Archive className="h-4 w-4 mr-2" />
Archive
</>
)}
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setShowDeleteDialog(true)}
className="text-red-600 hover:text-red-700"
>
<Trash2 className="h-4 w-4 mr-2" />
Delete
</Button>
</div>
</div>
<InlineEdit
value={notebook.description || ''}
onSave={handleUpdateDescription}
className="text-muted-foreground"
inputClassName="text-muted-foreground"
placeholder="Add a description..."
multiline
emptyText="Add a description..."
/>
<div className="text-sm text-muted-foreground">
Created {formatDistanceToNow(new Date(notebook.created), { addSuffix: true })} •
Updated {formatDistanceToNow(new Date(notebook.updated), { addSuffix: true })}
</div>
</div>
</div>
<ConfirmDialog
open={showDeleteDialog}
onOpenChange={setShowDeleteDialog}
title="Delete Notebook"
description={`Are you sure you want to delete "${notebook.name}"? This action cannot be undone and will delete all sources, notes, and chat sessions.`}
confirmText="Delete Forever"
confirmVariant="destructive"
onConfirm={handleDelete}
/>
</>
)
} |