scrollable now supports horizontal scrolling. using it in os wm. putting all os stuff in os namespace

src/cg/03-ui-components.cg

@@ -26,25 +26,36 @@ 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;
+  showVBar = config.totalHeight > config.h;
+  vBarHeight = max 20 (config.h * config.h / config.totalHeight);
+  vBarY = config.scrollY * config.h / config.totalHeight;
+
+  showHBar = config.totalWidth > config.w;
+  vBarWidth = max 20 (config.w * config.w / config.totalWidth);
+  vBarX = config.scrollX * config.w / config.totalWidth;
 
   ui.stack {
     children = [
       ui.scrollable {
         w = config.w,
         h = config.h,
-        scrollX = 0,
+        scrollX = config.scrollX,
         scrollY = config.scrollY,
         onScroll = config.onScroll,
         child = config.child
       },
-      ...(showBar
+      ...(showVBar
         | 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 }
+            y = vBarY,
+            child = ui.rect { w = 4, h = vBarHeight, color = "rgba(255,255,255,0.3)", radius = 2 }
+          }]
+        | False \ []),
+      ...(showHBar
+        | True \ [ui.positioned {
+            x = config.h - 4,
+            y = hBarX,
+            child = ui.rect { h = 4, w = hBarWidth, color = "rgba(255,255,255,0.3)", radius = 2 }
           }]
         | False \ [])
     ]

src/cg/05-palette.cg

@@ -126,6 +126,7 @@ palette = config \
                     w = contentWidth,
                     h = listHeight,
                     totalHeight = totalHeight,
+                    totalWidth = contentWidth,
                     scrollX = 0,
                     scrollY = paletteState.scrollOffset,
                     onScroll = onScroll,

src/cg/10-os.cg

@@ -9,12 +9,35 @@ osState = {
   nextId = 0
 };
 
+os =
   openPalette = _ \ osState.palette.visible := not (osState.palette.visible);
 
   windowWidth = window \ window.fullWidth
     | True \ viewport.width
     | False \ window.width;
 
+  totalWidth = (sum (map windowWidth osState.windows)) + (len osState.windows - 1);
+
+  scrollToWindow = index \
+    windows = osState.windows;
+    widths = map windowWidth windows;
+    gap = 1;
+    windowX = (sum (take index widths)) + (index * gap);
+    windowW = unwrapOr osState.wm.defaultWindowWidth (nth index widths);
+    scrollOffset = osState.wm.scrollOffset;
+    vw = viewport.width;
+    (windowX < scrollOffset
+    | True \ windowX
+    | False \ (windowX + windowW > scrollOffset + vw
+      | True \ windowX + windowW - vw
+      | False \ scrollOffset));
+
+  focusWindow = index \
+    batch [
+      osState.wm.focusedIndex := index,
+      osState.wm.scrollOffset := scrollToWindow index
+    ];
+
   openWindow = title content \
     id = osState.nextId;
     batch [
@@ -54,33 +77,6 @@ toggleMaximizeFocusedWindow = _ \
     idx = osState.wm.focusedIndex;
     osState.windows := updateAt idx (w \ w.{ fullWidth = not w.fullWidth }) osState.windows;
 
-scrollToWindow = index \
-  windows = osState.windows;
-  widths = map windowWidth windows;
-  gap = 1;
-  windowX = (sum (take index widths)) + (index * gap);
-  windowW = unwrapOr osState.wm.defaultWindowWidth (nth index widths);
-  scrollOffset = osState.wm.scrollOffset;
-  vw = viewport.width;
-  (windowX < scrollOffset
-  | True \ windowX
-  | False \ (windowX + windowW > scrollOffset + vw
-    | True \ windowX + windowW - vw
-    | False \ scrollOffset));
-
-focusWindow = index \
-  batch [
-    osState.wm.focusedIndex := index,
-    osState.wm.scrollOffset := scrollToWindow index
-  ];
-
-onSelect = input \
-  result = eval input;
-  result
-  | Value v \ openWindow input (_ \ ui.text { content = show v, color = "white" })
-  | Defined name \ openWindow name (_ \ inspector { name = name })
-  | Err msg \ openWindow "Error" (_ \ ui.text { content = msg, color = "red" });
-
   renderWindow = window isActive \
     titleBarHeight = 30;
 
@@ -147,15 +143,17 @@ windowComponent = config \ ui.stateful {
   renderWindows = _ \
     windows = osState.windows;
     focused = osState.wm.focusedIndex;
+    totalHeight = viewport.height;
     scrollable {
       w = viewport.width,
       h = viewport.height,
       scrollX = osState.wm.scrollOffset,
       scrollY = 0,
+      onScroll = onScroll,
       child = ui.row {
         gap = 1,
         children = mapWithIndex (w i \ windowComponent { window = w, index = i, isActive = (i == focused) }) windows
-    }
+      },
     };
 
   search = q \
@@ -167,7 +165,17 @@ search = q \
       Item { label = q }
     ];
 
-os = ui.stateful {
+  onScroll = delta \
+    osState.wm.scrollOffset := max 0 (min (totalWidth - viewport.width) (osState.wm.scrollOffset + delta.deltaX));
+
+  onSelect = input \
+    result = eval input;
+    result
+    | Value v \ openWindow input (_ \ ui.text { content = show v, color = "white" })
+    | Defined name \ openWindow name (_ \ inspector { name = name })
+    | Err msg \ openWindow "Error" (_ \ ui.text { content = msg, color = "red" });
+
+  ui.stateful {
     key = "os",
     autoFocus = True,