Make note cards clickable in NotesBrowser to open files

Author: html-proof

src/components/public/NotesBrowser.tsx

@@ -267,17 +267,22 @@ export default function NotesBrowser() {
                             ) : (
                                 <div className={styles.notesGrid}>
                                     {searchResults.map(note => (
-                                        <div key={note.id} className={styles.noteCard}>
+                                        <div
+                                            key={note.id}
+                                            className={styles.noteCard}
+                                            onClick={() => window.open(note.fileUrl, '_blank')}
+                                            style={{ cursor: "pointer" }}
+                                        >
                                             <div className={styles.preview}>
                                                 {getPreview(note)}
                                             </div>
                                             <div className={styles.noteContent}>
                                                 <h4 className={styles.noteName} title={note.title}>{note.title}</h4>
                                                 <p className={styles.noteMeta}>{new Date(note.createdAt?.seconds * 1000).toLocaleDateString()}</p>
                                                 <div className={styles.actions}>
-                                                    <a href={note.fileUrl} target="_blank" rel="noopener noreferrer" className={styles.btn} title="View"><Eye size={18} /></a>
-                                                    <a href={note.fileUrl} download target="_blank" rel="noopener noreferrer" className={styles.btn} title="Download"><Download size={18} /></a>
-                                                    <button onClick={() => handleShare(note.fileUrl)} className={styles.btn} title="Share Link"><Share2 size={18} /></button>
+                                                    <a href={note.fileUrl} target="_blank" rel="noopener noreferrer" className={styles.btn} title="View" onClick={(e) => e.stopPropagation()}><Eye size={18} /></a>
+                                                    <a href={note.fileUrl} download target="_blank" rel="noopener noreferrer" className={styles.btn} title="Download" onClick={(e) => e.stopPropagation()}><Download size={18} /></a>
+                                                    <button onClick={(e) => { e.stopPropagation(); handleShare(note.fileUrl); }} className={styles.btn} title="Share Link"><Share2 size={18} /></button>
                                                 </div>
                                             </div>
                                         </div>
@@ -417,17 +422,22 @@ export default function NotesBrowser() {
                                 ) : (
                                     <div className={styles.notesGrid}>
                                         {filteredNotes.map(note => (
-                                            <div key={note.id} className={styles.noteCard}>
+                                            <div
+                                                key={note.id}
+                                                className={styles.noteCard}
+                                                onClick={() => window.open(note.fileUrl, '_blank')}
+                                                style={{ cursor: "pointer" }}
+                                            >
                                                 <div className={styles.preview}>
                                                     {getPreview(note)}
                                                 </div>
                                                 <div className={styles.noteContent}>
                                                     <h4 className={styles.noteName} title={note.title}>{note.title}</h4>
                                                     <p className={styles.noteMeta}>{new Date(note.createdAt?.seconds * 1000).toLocaleDateString()}</p>
                                                     <div className={styles.actions}>
-                                                        <a href={note.fileUrl} target="_blank" rel="noopener noreferrer" className={styles.btn} title="View"><Eye size={18} /></a>
-                                                        <a href={note.fileUrl} download target="_blank" rel="noopener noreferrer" className={styles.btn} title="Download"><Download size={18} /></a>
-                                                        <button onClick={() => handleShare(note.fileUrl)} className={styles.btn} title="Share Link"><Share2 size={18} /></button>
+                                                        <a href={note.fileUrl} target="_blank" rel="noopener noreferrer" className={styles.btn} title="View" onClick={(e) => e.stopPropagation()}><Eye size={18} /></a>
+                                                        <a href={note.fileUrl} download target="_blank" rel="noopener noreferrer" className={styles.btn} title="Download" onClick={(e) => e.stopPropagation()}><Download size={18} /></a>
+                                                        <button onClick={(e) => { e.stopPropagation(); handleShare(note.fileUrl); }} className={styles.btn} title="Share Link"><Share2 size={18} /></button>
                                                     </div>
                                                 </div>
                                             </div>