diff --git a/index.html b/index.html index cc1751e..cbec5b1 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,16 @@ - - - - - - - - Grateful Journal - - -
- - + + + + + Grateful Journal + + +
+ + diff --git a/src/App.css b/src/App.css index 09a2e97..741214f 100644 --- a/src/App.css +++ b/src/App.css @@ -21,14 +21,14 @@ align-items: center; justify-content: center; gap: 1rem; - background: #f5f0e8; - color: #9ca3af; + background: #eef6ee; + color: #6b9a6b; } .protected-route__spinner { width: 28px; height: 28px; - border: 3px solid #e5e7eb; + border: 3px solid #bbf7d0; border-top-color: #22c55e; border-radius: 50%; animation: spin 0.7s linear infinite; @@ -48,7 +48,7 @@ display: flex; align-items: center; justify-content: center; - background: linear-gradient(160deg, #f5f0e8 0%, #dcfce7 100%); + background: linear-gradient(160deg, #eef6ee 0%, #d1fae5 50%, #bbf7d0 100%); padding: 1.5rem; overflow: hidden; } @@ -64,7 +64,7 @@ .login-page__spinner { width: 28px; height: 28px; - border: 3px solid #e5e7eb; + border: 3px solid #bbf7d0; border-top-color: #22c55e; border-radius: 50%; animation: spin 0.7s linear infinite; @@ -75,7 +75,7 @@ padding: 2rem; border-radius: 20px; border-top: 4px solid #22c55e; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08); + box-shadow: 0 8px 32px rgba(34, 197, 94, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); width: 100%; max-width: 360px; text-align: center; @@ -91,7 +91,7 @@ font-weight: 700; color: #22c55e; letter-spacing: -0.02em; - font-family: "Playfair Display", Georgia, serif; + font-family: "Sniglet", system-ui; } .login-card__tagline { @@ -128,7 +128,7 @@ font-weight: 500; color: #3c4043; background: #fff; - border: 1px solid #dadce0; + border: 1px solid #d1e7d1; border-radius: 10px; cursor: pointer; transition: @@ -138,8 +138,9 @@ } .google-sign-in-btn:hover:not(:disabled) { - background: #f8f9fa; - box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1); + background: #f0fdf4; + box-shadow: 0 1px 6px rgba(34, 197, 94, 0.15); + border-color: #22c55e; } .google-sign-in-btn:disabled { opacity: 0.7; @@ -176,7 +177,7 @@ overflow: hidden; display: flex; flex-direction: column; - background: #f5f0e8; + background: #eef6ee; } /* ============================ @@ -201,7 +202,8 @@ background: #fff; border-radius: 20px; padding: 1.625rem 1.5rem; - box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); + box-shadow: 0 2px 16px rgba(34, 197, 94, 0.1), 0 1px 4px rgba(0, 0, 0, 0.04); + border: 1px solid rgba(34, 197, 94, 0.08); flex: 1; min-height: 0; display: flex; @@ -214,11 +216,7 @@ letter-spacing: 0.14em; color: #22c55e; text-transform: uppercase; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; margin: 0 0 1rem; } @@ -229,7 +227,7 @@ line-height: 1.2; color: #1a1a1a; letter-spacing: -0.02em; - font-family: "Playfair Display", Georgia, "Times New Roman", serif; + font-family: "Sniglet", system-ui; } .journal-writing-area { @@ -242,26 +240,23 @@ .journal-title-input { width: 100%; padding: 0 0 0.875rem; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; font-size: 1rem; font-weight: 400; color: #374151; background: transparent; border: none; - border-bottom: 1px solid #f0ece4; + border-bottom: 1px solid #d1e7d1; outline: none; - transition: border-color 0.2s; + transition: border-color 0.2s, box-shadow 0.2s; } .journal-title-input::placeholder { - color: #c4bfb5; + color: #9ec49e; } .journal-title-input:focus { border-bottom-color: #22c55e; + box-shadow: 0 1px 0 0 rgba(34, 197, 94, 0.3); } .journal-entry-textarea { @@ -269,7 +264,7 @@ min-height: 0; width: 100%; padding: 0.875rem 0; - font-family: "Lora", Georgia, serif; + font-family: "Sniglet", system-ui; font-size: 1rem; line-height: 1.75; color: #374151; @@ -277,11 +272,11 @@ border: none; outline: none; resize: none; - caret-color: #374151; + caret-color: #22c55e; } .journal-entry-textarea::placeholder { - color: #c4bfb5; + color: #9ec49e; font-style: italic; } @@ -301,11 +296,7 @@ cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3); - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; white-space: nowrap; } @@ -337,8 +328,8 @@ -webkit-tap-highlight-color: transparent; } .journal-icon-btn:hover { - color: #6b7280; - background: rgba(0, 0, 0, 0.05); + color: #22c55e; + background: rgba(34, 197, 94, 0.08); } /* ============================ @@ -348,7 +339,7 @@ flex-shrink: 0; position: relative; /* NOT fixed — lives in the flex column */ background: rgba(255, 255, 255, 0.96); - border-top: 1px solid rgba(0, 0, 0, 0.07); + border-top: 1px solid rgba(34, 197, 94, 0.12); padding: 8px 12px 12px; display: flex; align-items: center; @@ -371,11 +362,7 @@ color: #9ca3af; transition: all 0.18s ease; min-height: 44px; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; -webkit-tap-highlight-color: transparent; } @@ -394,7 +381,8 @@ } .bottom-nav-btn:hover { - color: #6b7280; + color: #22c55e; + background: rgba(34, 197, 94, 0.06); } .bottom-nav-btn-active { @@ -429,18 +417,14 @@ font-weight: 700; color: #1a1a1a; letter-spacing: -0.02em; - font-family: "Playfair Display", Georgia, serif; + font-family: "Sniglet", system-ui; } .history-subtitle { margin: 0; font-size: 0.875rem; color: #6b7280; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .history-search-btn { @@ -451,15 +435,16 @@ align-items: center; justify-content: center; background: #fff; - border: 1px solid #e5e7eb; + border: 1px solid #d1e7d1; border-radius: 50%; cursor: pointer; color: #6b7280; transition: all 0.2s ease; } .history-search-btn:hover { - background: #f9fafb; - color: #374151; + background: #f0fdf4; + color: #22c55e; + border-color: #22c55e; } /* scrollable content area for history */ @@ -480,7 +465,8 @@ background: #fff; border-radius: 18px; padding: 1.125rem 1rem; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); + box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03); + border: 1px solid rgba(34, 197, 94, 0.08); margin-bottom: 1.125rem; } @@ -496,7 +482,7 @@ font-size: 1.0625rem; font-weight: 600; color: #1a1a1a; - font-family: "Playfair Display", Georgia, serif; + font-family: "Sniglet", system-ui; } .calendar-nav { @@ -518,8 +504,8 @@ transition: all 0.15s ease; } .calendar-nav-btn:hover { - background: #f3f4f6; - color: #374151; + background: #f0fdf4; + color: #22c55e; } .calendar-grid { @@ -534,11 +520,7 @@ color: #9ca3af; text-align: center; padding: 4px 0; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .calendar-day { @@ -554,11 +536,7 @@ border-radius: 50%; cursor: pointer; transition: all 0.15s ease; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .calendar-day-empty { @@ -607,11 +585,7 @@ letter-spacing: 0.12em; color: #9ca3af; text-transform: uppercase; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .entries-list { @@ -625,7 +599,7 @@ padding: 1rem 1rem 1rem 0.875rem; border-radius: 14px; border-left: 4px solid #22c55e; - box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); + box-shadow: 0 2px 8px rgba(34, 197, 94, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04); cursor: pointer; transition: all 0.2s ease; text-align: left; @@ -633,7 +607,8 @@ } .entry-card:hover { transform: translateY(-2px); - box-shadow: 0 5px 16px rgba(0, 0, 0, 0.09); + box-shadow: 0 6px 20px rgba(34, 197, 94, 0.15), 0 2px 6px rgba(0, 0, 0, 0.05); + border-left-color: #16a34a; } .entry-header { @@ -650,21 +625,13 @@ letter-spacing: 0.08em; color: #6b7280; text-transform: uppercase; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .entry-time { font-size: 0.6875rem; color: #9ca3af; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .entry-title { @@ -673,7 +640,7 @@ font-weight: 600; color: #1a1a1a; line-height: 1.3; - font-family: "Playfair Display", Georgia, serif; + font-family: "Sniglet", system-ui; } .entry-preview { @@ -681,11 +648,7 @@ font-size: 0.8125rem; line-height: 1.5; color: #6b7280; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; @@ -706,18 +669,14 @@ font-weight: 700; color: #1a1a1a; letter-spacing: -0.02em; - font-family: "Playfair Display", Georgia, serif; + font-family: "Sniglet", system-ui; } .settings-subtitle { margin: 0; font-size: 0.875rem; color: #6b7280; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } /* scrollable content area for settings */ @@ -742,7 +701,8 @@ background: #fff; border-radius: 18px; padding: 1rem 1.125rem; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); + box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03); + border: 1px solid rgba(34, 197, 94, 0.08); } .settings-avatar { @@ -762,7 +722,7 @@ width: 100%; height: 100%; border-radius: 50%; - background: linear-gradient(135deg, #f9a8d4 0%, #f472b6 100%); + background: linear-gradient(135deg, #86efac 0%, #22c55e 100%); display: flex; align-items: center; justify-content: center; @@ -781,7 +741,7 @@ font-size: 1.0625rem; font-weight: 700; color: #1a1a1a; - font-family: "Playfair Display", Georgia, serif; + font-family: "Sniglet", system-ui; } .settings-profile-badge { @@ -793,11 +753,7 @@ color: #fff; background: #22c55e; border-radius: 100px; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; text-transform: uppercase; } @@ -812,17 +768,14 @@ letter-spacing: 0.12em; color: #9ca3af; text-transform: uppercase; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .settings-card { background: #fff; border-radius: 18px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); + box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03); + border: 1px solid rgba(34, 197, 94, 0.06); overflow: hidden; } @@ -842,7 +795,7 @@ transition: background 0.15s ease; } .settings-item-button:hover { - background: #f9fafb; + background: #f0fdf4; } .settings-item-icon { @@ -882,22 +835,14 @@ font-size: 0.9375rem; font-weight: 600; color: #1a1a1a; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .settings-item-subtitle { margin: 0; font-size: 0.75rem; color: #9ca3af; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; } .settings-item-arrow { @@ -907,7 +852,7 @@ .settings-divider { height: 1px; - background: #f3f4f6; + background: #e0f2e0; margin: 0 1.125rem; } @@ -1007,7 +952,7 @@ border-radius: 14px; cursor: pointer; transition: background 0.2s; - font-family: "Inter", sans-serif; + font-family: "Sniglet", system-ui; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .settings-clear-btn:hover { @@ -1027,11 +972,11 @@ border-radius: 14px; cursor: pointer; transition: background 0.2s; - font-family: "Inter", sans-serif; + font-family: "Sniglet", system-ui; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); } .settings-signout-btn:hover { - background: #f9fafb; + background: #f0fdf4; color: #374151; } @@ -1044,9 +989,211 @@ color: #d1d5db; margin: 0.75rem 0 0.5rem; text-transform: uppercase; - font-family: - "Inter", - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: "Sniglet", system-ui; +} + +/* ============================ + ENTRY DETAIL MODAL + ============================ */ + +/* Overlay – full-screen backdrop */ +.entry-modal-overlay { + position: fixed; + inset: 0; + z-index: 1000; + background: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(4px); + -webkit-backdrop-filter: blur(4px); + display: flex; + align-items: flex-end; + justify-content: center; + padding: env(safe-area-inset-top) env(safe-area-inset-right) + env(safe-area-inset-bottom) env(safe-area-inset-left); + animation: modalFadeIn 0.2s ease; +} + +@keyframes modalFadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes modalSlideUp { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} + +/* Modal panel – bottom sheet on mobile, centred card on desktop */ +.entry-modal { + background: #fff; + border-radius: 20px 20px 0 0; + width: 100%; + max-height: 85vh; + overflow-y: auto; + padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)); + box-shadow: 0 -4px 32px rgba(34, 197, 94, 0.12), 0 -1px 8px rgba(0, 0, 0, 0.06); + border-top: 3px solid #22c55e; + animation: modalSlideUp 0.25s ease; + -webkit-overflow-scrolling: touch; +} + +/* Header row */ +.entry-modal-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1rem; +} + +.entry-modal-meta { + display: flex; + align-items: center; + gap: 0.625rem; +} + +.entry-modal-date { + font-size: 0.625rem; + font-weight: 700; + letter-spacing: 0.1em; + color: #6b7280; + text-transform: uppercase; + font-family: "Sniglet", system-ui; +} + +.entry-modal-time { + font-size: 0.6875rem; + color: #9ca3af; + font-family: "Sniglet", system-ui; +} + +/* Close button */ +.entry-modal-close { + display: flex; + align-items: center; + justify-content: center; + width: var(--touch-min); + height: var(--touch-min); + border: none; + border-radius: 50%; + background: #f0fdf4; + color: #6b7280; + cursor: pointer; + transition: + background 0.2s, + color 0.2s; + flex-shrink: 0; +} +.entry-modal-close:hover { + background: #dcfce7; + color: #16a34a; +} + +/* Title */ +.entry-modal-title { + margin: 0 0 1rem; + font-size: 1.375rem; + font-weight: 700; + line-height: 1.3; + color: #1a1a1a; + font-family: "Sniglet", system-ui; +} + +/* Body content */ +.entry-modal-content { + font-family: "Sniglet", system-ui; + font-size: 1rem; + line-height: 1.75; + color: #374151; +} + +.entry-modal-content p { + margin: 0 0 0.75rem; +} + +.entry-modal-content p:last-child { + margin-bottom: 0; +} + +.entry-modal-empty { + color: #9ca3af; + font-style: italic; +} + +/* Decrypt error state */ +.entry-modal-error { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.875rem 1rem; + border-radius: 12px; + background: #fef2f2; + color: #b91c1c; + font-size: 0.875rem; + font-family: "Sniglet", system-ui; +} + +/* E2E encrypted badge */ +.entry-modal-badge { + display: inline-flex; + align-items: center; + gap: 0.375rem; + margin-top: 1.25rem; + padding: 0.375rem 0.75rem; + border-radius: 999px; + background: var(--color-accent-light, #dcfce7); + color: #15803d; + font-size: 0.6875rem; + font-weight: 600; + letter-spacing: 0.02em; + font-family: "Sniglet", system-ui; +} + +/* ---- Responsive: tablet+ (≥ 768px) ---- */ +@media (min-width: 768px) { + .entry-modal-overlay { + align-items: center; + padding: 2rem; + } + + .entry-modal { + border-radius: 20px; + max-width: 560px; + max-height: 80vh; + padding: 1.75rem; + animation: modalScaleIn 0.2s ease; + } + + @keyframes modalScaleIn { + from { + opacity: 0; + transform: scale(0.95); + } + to { + opacity: 1; + transform: scale(1); + } + } + + .entry-modal-title { + font-size: 1.5rem; + } +} + +/* ---- Responsive: desktop (≥ 1024px) ---- */ +@media (min-width: 1024px) { + .entry-modal { + max-width: 620px; + padding: 2rem; + } + + .entry-modal-content { + font-size: 1.0625rem; + } } diff --git a/src/index.css b/src/index.css index 31698b5..300dc60 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Sniglet&display=swap"); + /* Grateful Journal – enhanced green palette */ *, *::before, @@ -6,9 +8,7 @@ } :root { - font-family: - -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", - "Helvetica Neue", sans-serif; + font-family: "Sniglet", system-ui, sans-serif; line-height: 1.5; font-weight: 400; /* Fixed 16px – we're always rendering at phone scale */ @@ -18,15 +18,16 @@ --color-primary: #22c55e; --color-primary-hover: #16a34a; - --color-bg-soft: #f5f0e8; + --color-bg-soft: #eef6ee; --color-surface: #ffffff; --color-accent-light: #dcfce7; --color-text: #1a1a1a; --color-text-muted: #6b7280; - --color-border: #e5e7eb; + --color-border: #d4e8d4; color: var(--color-text); background-color: var(--color-bg-soft); + caret-color: #22c55e; font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; @@ -53,7 +54,7 @@ body { min-height: 100dvh; overflow: hidden; /* Desktop: show as phone on a desk surface */ - background: #ccc8c0; + background: #c0ccc0; } /* ── Phone shell on desktop ───────────────────────────── */ @@ -62,7 +63,7 @@ body { display: flex; align-items: center; justify-content: center; - background: #bbb7af; + background: #b0bfb0; } #root { diff --git a/src/pages/HistoryPage.tsx b/src/pages/HistoryPage.tsx index 08eaa4f..c9c4a55 100644 --- a/src/pages/HistoryPage.tsx +++ b/src/pages/HistoryPage.tsx @@ -17,6 +17,7 @@ export default function HistoryPage() { const [selectedDate, setSelectedDate] = useState(new Date()) const [entries, setEntries] = useState([]) const [loadingEntries, setLoadingEntries] = useState(false) + const [selectedEntry, setSelectedEntry] = useState(null) // Fetch entries on mount and when userId changes useEffect(() => { @@ -244,13 +245,13 @@ export default function HistoryPage() { {loadingEntries ? ( -

+

Loading entries…

) : (
{selectedDateEntries.length === 0 ? ( -

+

No entries for this day yet. Start writing!

) : ( @@ -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)} >
{formatDate(entry.createdAt)} {formatTime(entry.createdAt)}

{entry.decryptedTitle || entry.title || '[Untitled]'}

+ {entry.decryptedContent && ( +

{entry.decryptedContent}

+ )} )) )} @@ -274,6 +278,69 @@ export default function HistoryPage() { + {/* Entry Detail Modal */} + {selectedEntry && ( +
{ + if (e.target === e.currentTarget) setSelectedEntry(null) + }} + > +
+
+
+ {formatDate(selectedEntry.createdAt)} + {formatTime(selectedEntry.createdAt)} +
+ +
+ +

+ {selectedEntry.decryptedTitle || selectedEntry.title || '[Untitled]'} +

+ + {selectedEntry.decryptError ? ( +
+ + + + + {selectedEntry.decryptError} +
+ ) : ( +
+ {selectedEntry.decryptedContent + ? selectedEntry.decryptedContent.split('\n').map((line, i) => ( +

{line || '\u00A0'}

+ )) + :

No content

+ } +
+ )} + + {selectedEntry.encryption?.encrypted && ( +
+ + + + + End-to-end encrypted +
+ )} +
+
+ )} +
) diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index 3acedf0..66ffe16 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,6 +1,6 @@ import { useAuth } from '../contexts/AuthContext' import { Link } from 'react-router-dom' -import { useState } from 'react' +import { useState, useRef } from 'react' import { createEntry } from '../lib/api' import { encryptEntry } from '../lib/crypto' import BottomNav from '../components/BottomNav' @@ -11,6 +11,9 @@ export default function HomePage() { const [title, setTitle] = useState('') const [saving, setSaving] = useState(false) const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null) + + const titleInputRef = useRef(null) + const contentTextareaRef = useRef(null) if (loading) { return ( @@ -23,7 +26,7 @@ export default function HomePage() { if (!user) { return (
-

Grateful Journal

+

Grateful Journal

Sign in to start your journal.

Go to login
@@ -36,6 +39,20 @@ export default function HomePage() { .toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' }) .toUpperCase() + const handleTitleKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && title.trim()) { + e.preventDefault() + contentTextareaRef.current?.focus() + } + } + + const handleContentKeyDown = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && entry.trim()) { + e.preventDefault() + handleWrite() + } + } + const handleWrite = async () => { if (!userId || !title.trim() || !entry.trim()) { setMessage({ type: 'error', text: 'Please add a title and entry content' }) @@ -109,13 +126,17 @@ export default function HomePage() { placeholder="Title your thoughts..." value={title} onChange={(e) => setTitle(e.target.value)} + onKeyDown={handleTitleKeyDown} + ref={titleInputRef} disabled={saving} />