Polish UI with antialiased text, flash fade-out, and softer agenda shadow
Antialiased font smoothing produces crisper text with IBM Plex Mono.
Flash bar fades out over 300ms instead of vanishing abruptly.
Agenda week uses a subtle two-layer shadow instead of a hard border.

Ref: https://jakub.kr/writing/details-that-make-interfaces-feel-better

Assisted-by: Claude Opus 4.6 via pi
change vrssttquvttypqpusztksovqntluopqw
commit 6f7201b372a4f5c6f72c7c25e1abdb6ea88cfb38
author Alpha Chen <alpha@kejadlen.dev>
date
parent ykkwwmmz
diff --git a/lib/ketchup/views/layout.rb b/lib/ketchup/views/layout.rb
index 0832a24..8b0940a 100644
--- a/lib/ketchup/views/layout.rb
+++ b/lib/ketchup/views/layout.rb
@@ -86,7 +86,10 @@ module Ketchup
             var undo = bar.querySelector('.flash-undo-btn');
             var close = bar.querySelector('.flash-close-btn');
             var path = bar.dataset.undoPath;
-            function dismiss() { bar.remove(); }
+            function dismiss() {
+              bar.classList.add('flash-bar--dismissing');
+              bar.addEventListener('transitionend', function() { bar.remove(); });
+            }
             if (undo && path) {
               undo.addEventListener('click', function() {
                 fetch(path, {method: 'DELETE'}).then(function() { location.reload(); });
diff --git a/public/css/app.css b/public/css/app.css
index b956a3e..628d704 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -24,6 +24,8 @@ body {
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 a {
@@ -124,6 +126,11 @@ h2 { font-size: var(--step-0); font-weight: 600; }
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   min-width: 20rem;
+  transition: opacity 0.3s ease-out;
+}
+
+.flash-bar--dismissing {
+  opacity: 0;
 }
 
 .flash-message {
@@ -210,9 +217,11 @@ h2 { font-size: var(--step-0); font-weight: 600; }
 .agenda-week {
   display: flex;
   margin-block-end: var(--space-m);
-  border: 1px solid var(--color-border-light);
   border-radius: 6px;
   overflow: hidden;
+  box-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.04),
+    0 1px 4px rgba(0, 0, 0, 0.06);
 }
 
 .agenda-week-day {