Add white theme, post delete, and passkey authentication

- Rewrite CSS to light/white theme
- Add delete button (auth-gated) with confirm dialog
- Add passkey register/login/logout routes via @simplewebauthn
- Gate compose form and delete behind session authentication
- Add credentials table to SQLite schema
- Add SESSION_SECRET and WebAuthn env vars to docker-compose

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 121 insertions, 41 deletions

diff --git a/app/app.css b/app/app.css
index d289252..92f0933 100644
--- a/app/app.css
+++ b/app/app.css
@@ -2,30 +2,30 @@
 
 html {
   font-family: ui-serif, Georgia, 'Times New Roman', Times, serif;
-  background: #0c0e14;
-  color: #c9cdd6;
+  background: #ffffff;
+  color: #1a1a1a;
   line-height: 1.6;
 }
 
 textarea {
   font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;
   font-size: .875rem;
-  background: #161924;
-  color: #c9cdd6;
-  border: 1px solid #2a2f3e;
+  background: #f9fafb;
+  color: #1a1a1a;
+  border: 1px solid #d1d5db;
   border-radius: 4px;
   padding: .75rem 1rem;
   resize: vertical;
   width: 100%;
   line-height: 1.6;
 }
-textarea:focus { outline: 1px solid #5c6bc0; border-color: #5c6bc0; }
-textarea::placeholder { color: #3d4560; }
+textarea:focus { outline: 1px solid #2563eb; border-color: #2563eb; }
+textarea::placeholder { color: #9ca3af; }
 
 button[type="submit"] {
-  background: #1e2640;
-  border: 1px solid #3d4f7c;
-  color: #8899cc;
+  background: #f3f4f6;
+  border: 1px solid #d1d5db;
+  color: #374151;
   border-radius: 4px;
   padding: .375rem 1.125rem;
   font-size: .8125rem;
@@ -33,7 +33,7 @@ button[type="submit"] {
   cursor: pointer;
   letter-spacing: .02em;
 }
-button[type="submit"]:hover { background: #253058; color: #aabce0; border-color: #5068a0; }
+button[type="submit"]:hover { background: #e5e7eb; color: #111827; border-color: #9ca3af; }
 button[type="submit"]:disabled { opacity: .4; cursor: not-allowed; }
 
 /* ── Layout ── */
@@ -42,109 +42,189 @@ button[type="submit"]:disabled { opacity: .4; cursor: not-allowed; }
 
 /* ── Header ── */
 
-.site-header { margin-bottom: 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #1a1d29; }
+.site-header {
+  margin-bottom: 2.5rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid #e5e7eb;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
 .site-header h1 {
   font-size: .875rem;
   font-weight: 400;
-  color: #4b5267;
+  color: #9ca3af;
   letter-spacing: .12em;
   text-transform: lowercase;
   font-family: ui-monospace, monospace;
 }
 
+/* ── Auth header actions ── */
+
+.header-nav { display: flex; gap: .75rem; align-items: center; }
+
+.auth-link {
+  font-size: .75rem;
+  font-family: ui-monospace, monospace;
+  color: #9ca3af;
+  text-decoration: none;
+  letter-spacing: .04em;
+}
+.auth-link:hover { color: #374151; }
+
+.logout-btn {
+  font-size: .75rem;
+  font-family: ui-monospace, monospace;
+  color: #9ca3af;
+  background: none;
+  border: none;
+  cursor: pointer;
+  letter-spacing: .04em;
+  padding: 0;
+}
+.logout-btn:hover { color: #374151; }
+
 /* ── Compose form ── */
 
 .compose { margin-bottom: 2.75rem; }
 .compose textarea { margin-bottom: .5rem; min-height: 96px; }
 .compose-row { display: flex; justify-content: space-between; align-items: center; }
-.hint { font-size: .6875rem; color: #32384d; font-family: ui-monospace, monospace; letter-spacing: .04em; }
-.error-msg { font-size: .8125rem; color: #e06c75; margin-top: .375rem; margin-bottom: .375rem; }
+.hint { font-size: .6875rem; color: #9ca3af; font-family: ui-monospace, monospace; letter-spacing: .04em; }
+.error-msg { font-size: .8125rem; color: #dc2626; margin-top: .375rem; margin-bottom: .375rem; }
 
 /* ── Feed ── */
 
 .feed { display: flex; flex-direction: column; }
 
-.post { padding: 1.375rem 0; border-top: 1px solid #15182200; }
-.feed > .post:first-child { border-top: 1px solid #1a1d29; }
-.post + .post { border-top: 1px solid #1a1d29; }
-.post:last-child { border-bottom: 1px solid #1a1d29; }
+.post { padding: 1.375rem 0; border-top: 1px solid transparent; }
+.feed > .post:first-child { border-top: 1px solid #e5e7eb; }
+.post + .post { border-top: 1px solid #e5e7eb; }
+.post:last-child { border-bottom: 1px solid #e5e7eb; }
+
+.post-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin-bottom: .625rem;
+}
 
 .post-meta {
-  display: block;
   font-size: .6875rem;
-  color: #3d4560;
+  color: #9ca3af;
   font-family: ui-monospace, monospace;
-  margin-bottom: .625rem;
   letter-spacing: .04em;
 }
 
+.delete-btn {
+  font-size: .6875rem;
+  font-family: ui-monospace, monospace;
+  color: #d1d5db;
+  background: none;
+  border: none;
+  cursor: pointer;
+  letter-spacing: .04em;
+  padding: 0;
+  line-height: 1;
+}
+.delete-btn:hover { color: #dc2626; }
+
 /* ── Prose (rendered markdown) ── */
 
 .prose { font-size: .9375rem; }
-.prose p { margin-bottom: .75rem; color: #c9cdd6; line-height: 1.8; }
+.prose p { margin-bottom: .75rem; color: #1a1a1a; line-height: 1.8; }
 .prose p:last-child { margin-bottom: 0; }
 
-.prose h1 { font-size: 1.25rem; color: #e8eaf0; margin: 1.25rem 0 .5rem; font-weight: 600; }
-.prose h2 { font-size: 1.0625rem; color: #e8eaf0; margin: 1.125rem 0 .375rem; font-weight: 600; }
-.prose h3 { font-size: .9375rem; color: #dde1ed; margin: 1rem 0 .25rem; font-weight: 600; }
+.prose h1 { font-size: 1.25rem; color: #111827; margin: 1.25rem 0 .5rem; font-weight: 600; }
+.prose h2 { font-size: 1.0625rem; color: #111827; margin: 1.125rem 0 .375rem; font-weight: 600; }
+.prose h3 { font-size: .9375rem; color: #1f2937; margin: 1rem 0 .25rem; font-weight: 600; }
 .prose h1:first-child,
 .prose h2:first-child,
 .prose h3:first-child { margin-top: 0; }
 
-.prose strong { color: #dde1ed; font-weight: 600; }
+.prose strong { color: #111827; font-weight: 600; }
 .prose em { font-style: italic; }
-.prose del { color: #6b7280; }
+.prose del { color: #9ca3af; }
 
-.prose a { color: #7aa2f7; }
-.prose a:hover { color: #9db8ff; text-decoration: underline; }
+.prose a { color: #2563eb; }
+.prose a:hover { color: #1d4ed8; text-decoration: underline; }
 
 .prose code {
   font-family: ui-monospace, monospace;
   font-size: .8125rem;
-  background: #1a1d29;
-  color: #a9b1d6;
+  background: #f3f4f6;
+  color: #1f2937;
   padding: .1em .35em;
   border-radius: 3px;
 }
 
 .prose pre {
-  background: #161924;
-  border: 1px solid #2a2f3e;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
   border-radius: 4px;
   padding: .875rem 1rem;
   overflow-x: auto;
   margin-bottom: .75rem;
 }
-.prose pre code { background: none; padding: 0; color: #a9b1d6; font-size: .8125rem; }
+.prose pre code { background: none; padding: 0; color: #1f2937; font-size: .8125rem; }
 
 .prose ul { padding-left: 1.5rem; margin-bottom: .75rem; list-style: disc; }
 .prose ol { padding-left: 1.5rem; margin-bottom: .75rem; list-style: decimal; }
 .prose li { margin-bottom: .25rem; line-height: 1.75; }
 
 .prose blockquote {
-  border-left: 2px solid #2a2f3e;
+  border-left: 2px solid #d1d5db;
   padding-left: .875rem;
-  color: #7a8099;
+  color: #6b7280;
   margin-bottom: .75rem;
   font-style: italic;
 }
 
-.prose hr { border: none; border-top: 1px solid #1a1d29; margin: 1.25rem 0; }
+.prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.25rem 0; }
 
 .prose table { width: 100%; border-collapse: collapse; font-size: .875rem; margin-bottom: .75rem; }
 .prose th,
-.prose td { padding: .375rem .75rem; border: 1px solid #2a2f3e; text-align: left; }
-.prose th { background: #161924; color: #c9cdd6; }
+.prose td { padding: .375rem .75rem; border: 1px solid #e5e7eb; text-align: left; }
+.prose th { background: #f9fafb; color: #374151; }
 
 .prose img { max-width: 100%; border-radius: 4px; }
 
 /* ── Empty state ── */
 
 .empty {
-  color: #32384d;
+  color: #9ca3af;
   font-size: .875rem;
   padding: 2.5rem 0;
   text-align: center;
   font-style: italic;
   font-family: ui-monospace, monospace;
 }
+
+/* ── Auth pages ── */
+
+.auth-box { max-width: 380px; }
+.auth-box h2 { font-size: 1rem; font-weight: 600; margin-bottom: .625rem; }
+.auth-box p { font-size: .875rem; color: #6b7280; margin-bottom: 1.25rem; line-height: 1.6; }
+
+.btn {
+  display: inline-block;
+  background: #1a1a1a;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: .5rem 1.25rem;
+  font-size: .875rem;
+  font-family: ui-monospace, monospace;
+  cursor: pointer;
+  letter-spacing: .02em;
+}
+.btn:hover { background: #374151; }
+.btn:disabled { opacity: .4; cursor: not-allowed; }
+
+.auth-sub {
+  margin-top: 1rem;
+  font-size: .8125rem;
+  color: #9ca3af;
+  font-family: ui-monospace, monospace;
+}
+.auth-sub a { color: #6b7280; }
+.auth-sub a:hover { color: #1a1a1a; }