jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling changes

Browse Source
This commit is contained in:
Jeet Debnath
2026-03-09 11:19:12 +05:30
parent 6720e28d08
commit 530c2b6f0a
5 changed files with 391 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/HistoryPage.tsx
View File

@@ -17,6 +17,7 @@ export default function HistoryPage() {
const [selectedDate, setSelectedDate] = useState(new Date())
const [entries, setEntries] = useState<DecryptedEntry[]>([])
const [loadingEntries, setLoadingEntries] = useState(false)
const [selectedEntry, setSelectedEntry] = useState<DecryptedEntry | null>(null)
// Fetch entries on mount and when userId changes
useEffect(() => {
@@ -244,13 +245,13 @@ export default function HistoryPage() {
</h3>
{loadingEntries ? (
<p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
<p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
Loading entries…
</p>
) : (
<div className="entries-list">
{selectedDateEntries.length === 0 ? (
<p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: 'Inter, sans-serif' }}>
<p style={{ color: '#9ca3af', fontSize: '0.875rem', textAlign: 'center', padding: '1.5rem 0', fontFamily: '"Sniglet", system-ui' }}>
No entries for this day yet. Start writing!
</p>
) : (
@@ -259,13 +260,16 @@ export default function HistoryPage() {
key={entry.id}
type="button"
className="entry-card"
onClick={() => console.log('Open entry', entry.id)}
onClick={() => setSelectedEntry(entry)}
>
<div className="entry-header">
<span className="entry-date">{formatDate(entry.createdAt)}</span>
<span className="entry-time">{formatTime(entry.createdAt)}</span>
</div>
<h4 className="entry-title">{entry.decryptedTitle || entry.title || '[Untitled]'}</h4>
{entry.decryptedContent && (
<p className="entry-preview">{entry.decryptedContent}</p>
)}
</button>
))
)}
@@ -274,6 +278,69 @@ export default function HistoryPage() {
</section>
</main>
{/* Entry Detail Modal */}
{selectedEntry && (
<div
className="entry-modal-overlay"
onClick={(e) => {
if (e.target === e.currentTarget) setSelectedEntry(null)
}}
>
<div className="entry-modal">
<div className="entry-modal-header">
<div className="entry-modal-meta">
<span className="entry-modal-date">{formatDate(selectedEntry.createdAt)}</span>
<span className="entry-modal-time">{formatTime(selectedEntry.createdAt)}</span>
</div>
<button
type="button"
className="entry-modal-close"
onClick={() => setSelectedEntry(null)}
title="Close"
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
</div>
<h2 className="entry-modal-title">
{selectedEntry.decryptedTitle || selectedEntry.title || '[Untitled]'}
</h2>
{selectedEntry.decryptError ? (
<div className="entry-modal-error">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
</svg>
{selectedEntry.decryptError}
</div>
) : (
<div className="entry-modal-content">
{selectedEntry.decryptedContent
? selectedEntry.decryptedContent.split('\n').map((line, i) => (
<p key={i}>{line || '\u00A0'}</p>
))
: <p className="entry-modal-empty">No content</p>
}
</div>
)}
{selectedEntry.encryption?.encrypted && (
<div className="entry-modal-badge">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
<path d="M7 11V7a5 5 0 0 1 10 0v4" />
</svg>
End-to-end encrypted
</div>
)}
</div>
</div>
)}
<BottomNav />
</div>
)