Red/bg selector widget

frontend/app/block/block.tsx

@@ -26,6 +26,7 @@ import {
 import { getWaveObjectAtom, makeORef, useWaveObjectValue } from "@/store/wos";
 import { focusedBlockId, getElemAsStr } from "@/util/focusutil";
 import { isBlank, useAtomValueSafe } from "@/util/util";
+import { Background, BackgroundModel, makeBackgroundModel } from "@/view/background/background";
 import { HelpView, HelpViewModel, makeHelpViewModel } from "@/view/helpview/helpview";
 import { QuickTipsView, QuickTipsViewModel } from "@/view/quicktipsview/quicktipsview";
 import { TermViewModel, TerminalView, makeTerminalModel } from "@/view/term/term";
@@ -61,6 +62,9 @@ function makeViewModel(blockId: string, blockView: string, nodeModel: BlockNodeM
     if (blockView === "help") {
         return makeHelpViewModel(blockId, nodeModel);
     }
+    if (blockView === "background") {
+        return makeBackgroundModel(blockId, nodeModel);
+    }
     return makeDefaultViewModel(blockId, blockView);
 }
 
@@ -110,6 +114,9 @@ function getViewElem(
     if (blockView == "vdom") {
         return <VDomView key={blockId} blockId={blockId} model={viewModel as VDomModel} />;
     }
+    if (blockView == "background") {
+        return <Background key={blockId} model={viewModel as BackgroundModel} />;
+    }
     return <CenteredDiv>Invalid View "{blockView}"</CenteredDiv>;
 }
 

frontend/app/view/background/background.scss

@@ -0,0 +1,37 @@
+@use "../../mixins.scss";
+
+.background {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+
+    .background-inner {
+        max-width: 300px;
+
+        .bg-item {
+            cursor: pointer;
+            padding: 8px 12px;
+            border-radius: 4px;
+            display: flex;
+            flex-direction: row;
+            align-items: flex-start;
+            justify-content: flex-start;
+
+            &:hover {
+                background-color: var(--button-grey-hover-bg);
+            }
+
+            .bg-preview {
+                width: 20px;
+                height: 20px;
+                margin-right: 10px;
+                border-radius: 50%;
+            }
+
+            .bg-label {
+				@include mixins.ellipsis();
+            }
+        }
+    }
+}

frontend/app/view/background/background.tsx

@@ -0,0 +1,87 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { BlockNodeModel } from "@/app/block/blocktypes";
+import { atoms, globalStore } from "@/app/store/global";
+import * as services from "@/store/services";
+import * as WOS from "@/store/wos";
+import { Atom, atom, useAtomValue } from "jotai";
+
+import "./background.scss";
+
+type BackgroundType = {
+    label: string;
+    color: string;
+    click: () => void;
+};
+
+class BackgroundModel implements ViewModel {
+    viewType: string;
+    blockId: string;
+    blockAtom: Atom<Block>;
+    viewIcon: Atom<string | IconButtonDecl>;
+    viewName: Atom<string>;
+    viewText: Atom<HeaderElem[]>;
+    constructor(blockId: string, nodeModel: BlockNodeModel) {
+        this.viewText = atom((get) => {
+            return [];
+        });
+        this.viewType = "background";
+        this.viewIcon = atom("fill-drip");
+        this.viewName = atom("Background");
+    }
+}
+
+function makeBackgroundModel(blockId: string, nodeModel: BlockNodeModel) {
+    return new BackgroundModel(blockId, nodeModel);
+}
+
+function Background({ model }: { model: BackgroundModel }) {
+    const tabId = useAtomValue(atoms.staticTabId);
+    const backgrounds: BackgroundType[] = [];
+    const fullConfig = globalStore.get(atoms.fullConfigAtom);
+    const bgPresets: string[] = [];
+    for (const key in fullConfig?.presets ?? {}) {
+        if (key.startsWith("bg@")) {
+            bgPresets.push(key);
+        }
+    }
+    bgPresets.sort((a, b) => {
+        const aOrder = fullConfig.presets[a]["display:order"] ?? 0;
+        const bOrder = fullConfig.presets[b]["display:order"] ?? 0;
+        return aOrder - bOrder;
+    });
+    if (bgPresets.length > 0) {
+        const oref = WOS.makeORef("tab", tabId);
+        for (const presetName of bgPresets) {
+            const preset = fullConfig.presets[presetName];
+            if (preset == null) {
+                continue;
+            }
+            backgrounds.push({
+                label: preset["display:name"] ?? presetName,
+                color: preset["bg"] ?? "var(--main-bg-color)",
+                click: () => {
+                    services.ObjectService.UpdateObjectMeta(oref, preset);
+                },
+            });
+        }
+    }
+
+    return (
+        <div className="background">
+            <div className="background-inner">
+                {backgrounds.map((bg, index) => {
+                    return (
+                        <div key={`${bg.label}-${index}`} className="bg-item" onClick={() => bg.click()}>
+                            <div className="bg-preview" style={{ background: bg.color }}></div>
+                            <div className="bg-label">{bg.label}</div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+export { Background, BackgroundModel, makeBackgroundModel };

pkg/wconfig/defaultconfig/widgets.json

@@ -50,5 +50,15 @@
                 "view": "sysinfo"
             }
         }
+    },
+    "defwidget@background": {
+        "display:order": 5,
+        "icon": "fill-drip",
+        "label": "bg",
+        "blockdef": {
+            "meta": {
+                "view": "background"
+            }
+        }
     }
 }