scrollbars

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,

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,