From 80cd8d6c7bceaac37d66436bece5df101a3c6c53 Mon Sep 17 00:00:00 2001
From: Dustin Swan <dustin@dustinswan.com>
Date: Fri, 13 Feb 2026 21:39:00 -0700
Subject: [PATCH] scrollbars

---
 src/cg/03-ui-components.cg | 26 ++++++++++++++++++++++++++
 src/cg/05-palette.cg       |  3 ++-
 2 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/cg/03-ui-components.cg b/src/cg/03-ui-components.cg
index ec8ccfe..88463ae 100644
--- a/src/cg/03-ui-components.cg
+++ b/src/cg/03-ui-components.cg
@@ -24,6 +24,32 @@ button = config \
     }
   };
 
+# scrollable
+scrollable = config \
+  barHeight = max 20 (config.h * config.h / config.totalHeight);
+  barY = config.scrollY * config.h / config.totalHeight;
+  showBar = config.totalHeight > config.h;
+
+  ui.stack {
+    children = [
+      ui.scrollable {
+        w = config.w,
+        h = config.h,
+        scrollX = 0,
+        scrollY = config.scrollY,
+        onScroll = config.onScroll,
+        child = config.child
+      },
+      ...(showBar
+        | True \ [ui.positioned {
+            x = config.w - 4,
+            y = barY,
+            child = ui.rect { w = 4, h = barHeight, color = "rgba(255,255,255,0.3)", radius = 2 }
+          }]
+        | False \ [])
+    ]
+  };
+
 box = config \
   defaults = {
     w = 100,
diff --git a/src/cg/05-palette.cg b/src/cg/05-palette.cg
index 55af6e1..e9b62a3 100644
--- a/src/cg/05-palette.cg
+++ b/src/cg/05-palette.cg
@@ -114,9 +114,10 @@ palette = config \
                     onChange = text \ batch [paletteState.query := text],
                   },
 
-                  ui.scrollable {
+                  scrollable {
                     w = contentWidth,
                     h = listHeight,
+                    totalHeight = totalHeight,
                     scrollX = 0,
                     scrollY = paletteState.scrollOffset,
                     onScroll = onScroll,