From 06481d0c26a0cf4f9ff70d6cb35b8f45b4b66294 Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 22:48:18 -0500
Subject: [PATCH] fix: scroll-to-top visible class + reading progress dark mode

- Wire visible state to className in ScrollToTop component
- Replace hard-coded rgba with color-mix() for theme-aware background
- Dark mode reading progress uses 15% ink color mix
---
 app/globals.css               | 17 +++++++----------
 components/ui/ScrollToTop.tsx |  2 +-
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index fdad8ca..ba4e6fc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -396,16 +396,13 @@ html.dark code[data-theme*=" "] span {
 
 /* === Reading progress vertical bar === */
 .reading-progress {
-  position: fixed;
-  right: 12px;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 3px;
-  height: 60px;
-  background: rgba(0, 0, 0, 0.08);
-  border-radius: 2px;
-  z-index: 9998;
-  overflow: hidden;
+  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
+  width: 3px; height: 60px;
+  background: color-mix(in oklch, var(--color-ink) 8%, transparent);
+  border-radius: 2px; z-index: 9998; overflow: hidden;
+}
+.dark .reading-progress {
+  background: color-mix(in oklch, var(--color-ink) 15%, transparent);
 }
 .reading-progress-fill {
   width: 100%;
diff --git a/components/ui/ScrollToTop.tsx b/components/ui/ScrollToTop.tsx
index b550942..c4ea94e 100644
--- a/components/ui/ScrollToTop.tsx
+++ b/components/ui/ScrollToTop.tsx
@@ -19,7 +19,7 @@ export function ScrollToTop() {
       onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
       whileHover={{ scale: 1.1 }}
       whileTap={{ scale: 0.95 }}
-      className="scroll-to-top"
+      className={`scroll-to-top ${visible ? 'visible' : ''}`}
       aria-label="Scroll to top"
     >
       <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="18 15 12 9 6 15"/></svg>