bg selector widget

frontend/app/block/block.tsx

@@ -17,6 +17,7 @@ import {
 import { getWaveObjectAtom, makeORef, useWaveObjectValue } from "@/store/wos";
 import { focusedBlockId, getElemAsStr } from "@/util/focusutil";
 import { isBlank } 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";
@@ -54,6 +55,9 @@ function makeViewModel(blockId: string, blockView: string, nodeModel: NodeModel)
     if (blockView === "help") {
         return makeHelpViewModel(blockId, nodeModel);
     }
+    if (blockView === "background") {
+        return makeBackgroundModel(blockId, nodeModel);
+    }
     return makeDefaultViewModel(blockId, blockView);
 }
 
@@ -100,6 +104,9 @@ function getViewElem(
     if (blockView == "tips") {
         return <QuickTipsView key={blockId} model={viewModel as QuickTipsViewModel} />;
     }
+    if (blockView == "background") {
+        return <Background key={blockId} model={viewModel as BackgroundModel} />;
+    }
     return <CenteredDiv>Invalid View "{blockView}"</CenteredDiv>;
 }
 

frontend/app/view/background/background.less

@@ -0,0 +1,26 @@
+@import "../../mixins.less";
+
+.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;
+
+            &:hover {
+                background-color: var(--button-grey-hover-bg);
+            }
+
+            .bg-label {
+                .ellipsis();
+            }
+        }
+    }
+}

frontend/app/view/background/background.tsx

@@ -0,0 +1,82 @@
+// Copyright 2024, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { atoms, globalStore } from "@/app/store/global";
+import { WebViewModel } from "@/app/view/webview/webview";
+import { NodeModel } from "@/layout/index";
+import * as services from "@/store/services";
+import * as WOS from "@/store/wos";
+import { atom, useAtomValue } from "jotai";
+
+import "./background.less";
+
+type BackgroundType = {
+    label: string;
+    click: () => void;
+};
+
+class BackgroundModel extends WebViewModel {
+    constructor(blockId: string, nodeModel: NodeModel) {
+        super(blockId, nodeModel);
+
+        this.viewText = atom((get) => {
+            return [];
+        });
+        this.viewType = "background";
+        this.viewIcon = atom("fill-drip");
+        this.viewName = atom("Background");
+    }
+}
+
+function makeBackgroundModel(blockId: string, nodeModel: NodeModel) {
+    return new BackgroundModel(blockId, nodeModel);
+}
+
+function Background({ model }: { model: BackgroundModel }) {
+    const tabId = useAtomValue(atoms.activeTabId);
+    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,
+                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={{ backgroundColor: bg.label }}></div>
+                            <div className="bg-label">{bg.label}</div>
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    );
+}
+
+export { Background, BackgroundModel, makeBackgroundModel };

pkg/wconfig/defaultconfig/defaultwidgets.json

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