@@ -30,6 +30,7 @@ export function NotesContent() {
30
30
prevPage,
31
31
nextPage,
32
32
goToPage,
33
+ notesToDisplay,
33
34
} = useNoteManagement ( { selectedWorkspaceId, selectedProjectId } ) ;
34
35
35
36
const [ showAddDialog , setShowAddDialog ] = useState ( false ) ;
@@ -67,53 +68,64 @@ export function NotesContent() {
67
68
< div className = "text-base" > Start by adding your first secure note.</ div >
68
69
</ div >
69
70
) : (
70
- < div className = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" >
71
- { filteredNotes . map ( ( note ) => (
72
- < div
73
- key = { note . doc_id }
74
- className = "group p-5 border rounded-2xl bg-card cursor-pointer hover:shadow-xl hover:bg-accent/40 transition-all duration-200 relative flex flex-col min-h-[180px]"
75
- onClick = { ( ) => setViewNote ( note ) }
76
- >
77
- < div className = "flex items-center justify-between mb-2" >
78
- < h2 className = "text-lg font-bold truncate max-w-[60%]" > { note . title } </ h2 >
79
- < div className = "flex items-center gap-2" >
80
- < span className = "text-xs text-muted-foreground font-medium whitespace-nowrap" > { new Date ( note . updated_at || note . created_at ) . toLocaleDateString ( ) } </ span >
81
- < button
82
- className = "p-1 rounded-full hover:bg-primary/10 text-primary opacity-70 hover:opacity-100 transition"
83
- onClick = { e => { e . stopPropagation ( ) ; setEditNote ( note ) ; } }
84
- title = "Edit Note"
85
- >
86
- < Pencil className = "h-4 w-4" />
87
- </ button >
88
- < button
89
- className = "p-1 rounded-full hover:bg-destructive/10 text-destructive opacity-70 hover:opacity-100 transition"
90
- onClick = { e => { e . stopPropagation ( ) ; setDeleteNote ( note ) ; } }
91
- title = "Delete Note"
92
- >
93
- < Trash className = "h-4 w-4" />
94
- </ button >
71
+ < div className = "flex flex-col min-h-[400px]" >
72
+ < div className = "flex-1" >
73
+ < div className = "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6" >
74
+ { notesToDisplay . map ( ( note ) => (
75
+ < div
76
+ key = { note . doc_id }
77
+ className = "group p-5 border rounded-2xl bg-card cursor-pointer hover:shadow-xl hover:bg-accent/40 transition-all duration-200 relative flex flex-col min-h-[180px]"
78
+ onClick = { ( ) => setViewNote ( note ) }
79
+ >
80
+ < div className = "flex items-center justify-between mb-2" >
81
+ < h2 className = "text-lg font-bold truncate max-w-[60%]" > { note . title } </ h2 >
82
+ < div className = "flex items-center gap-2" >
83
+ < span className = "text-xs text-muted-foreground font-medium whitespace-nowrap" > { new Date ( note . updated_at || note . created_at ) . toLocaleDateString ( ) } </ span >
84
+ < button
85
+ className = "p-1 rounded-full hover:bg-primary/10 text-primary opacity-70 hover:opacity-100 transition"
86
+ onClick = { e => { e . stopPropagation ( ) ; setEditNote ( note ) ; } }
87
+ title = "Edit Note"
88
+ >
89
+ < Pencil className = "h-4 w-4" />
90
+ </ button >
91
+ < button
92
+ className = "p-1 rounded-full hover:bg-destructive/10 text-destructive opacity-70 hover:opacity-100 transition"
93
+ onClick = { e => { e . stopPropagation ( ) ; setDeleteNote ( note ) ; } }
94
+ title = "Delete Note"
95
+ >
96
+ < Trash className = "h-4 w-4" />
97
+ </ button >
98
+ </ div >
99
+ </ div >
100
+ < div className = "mb-2 text-sm text-muted-foreground line-clamp-4 prose prose-sm prose-neutral max-w-full overflow-hidden" style = { { minHeight : 60 } }
101
+ dangerouslySetInnerHTML = { {
102
+ __html : ( ( ) => {
103
+ try {
104
+ return generateHTML ( JSON . parse ( note . data ) , [ StarterKit ] ) ;
105
+ } catch {
106
+ return '' ;
107
+ }
108
+ } ) ( ) ,
109
+ } }
110
+ />
111
+ < div className = "flex gap-2 flex-wrap mt-auto pt-2" >
112
+ { note . tags ?. map ( ( tag ) => (
113
+ < Badge key = { tag } variant = "secondary" className = "rounded-full px-3 py-1 text-xs font-medium bg-primary/10 text-primary" >
114
+ { tag }
115
+ </ Badge >
116
+ ) ) }
117
+ </ div >
95
118
</ div >
96
- </ div >
97
- < div className = "mb-2 text-sm text-muted-foreground line-clamp-4 prose prose-sm prose-neutral max-w-full overflow-hidden" style = { { minHeight : 60 } }
98
- dangerouslySetInnerHTML = { {
99
- __html : ( ( ) => {
100
- try {
101
- return generateHTML ( JSON . parse ( note . data ) , [ StarterKit ] ) ;
102
- } catch {
103
- return '' ;
104
- }
105
- } ) ( ) ,
106
- } }
107
- />
108
- < div className = "flex gap-2 flex-wrap mt-auto pt-2" >
109
- { note . tags ?. map ( ( tag ) => (
110
- < Badge key = { tag } variant = "secondary" className = "rounded-full px-3 py-1 text-xs font-medium bg-primary/10 text-primary" >
111
- { tag }
112
- </ Badge >
113
- ) ) }
114
- </ div >
119
+ ) ) }
120
+ </ div >
121
+ </ div >
122
+ { totalPages > 1 && (
123
+ < div className = "flex justify-center items-center gap-4 mt-8" >
124
+ < Button onClick = { prevPage } disabled = { currentPage === 1 } variant = "outline" > Previous</ Button >
125
+ < span className = "text-sm" > Page { currentPage } of { totalPages } </ span >
126
+ < Button onClick = { nextPage } disabled = { currentPage === totalPages } variant = "outline" > Next</ Button >
115
127
</ div >
116
- ) ) }
128
+ ) }
117
129
</ div >
118
130
) }
119
131
</ div >
@@ -138,7 +150,7 @@ export function NotesContent() {
138
150
< DialogHeader >
139
151
< DialogTitle className = "text-2xl font-bold" > { viewNote ?. title } </ DialogTitle >
140
152
</ DialogHeader >
141
- < div className = "prose prose-lg max-w-full mb-4" dangerouslySetInnerHTML = { {
153
+ < div className = "prose prose-lg max-w-full mb-4 overflow-y-auto max-h-[60vh] " dangerouslySetInnerHTML = { {
142
154
__html : ( ( ) => {
143
155
try {
144
156
return generateHTML ( JSON . parse ( viewNote . data ) , [ StarterKit ] ) ;
0 commit comments