Merge branch 'main' of github.com:wavetermdev/waveterm into red/tabs-new-design

.github/workflows/publish-release.yml

@@ -38,6 +38,7 @@ jobs:
               shell: bash
     bump-winget:
         if: ${{ startsWith(github.ref, 'refs/tags/') && !contains(github.ref_name, 'beta') }}
+        needs: [publish]
         runs-on: windows-latest
         steps:
             - uses: actions/checkout@v4
@@ -48,8 +49,10 @@ jobs:
                   repo-token: ${{ secrets.GITHUB_TOKEN }}
             - name: Install winget
               uses: Cyberboss/install-winget@v1
+              with:
+                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
             - name: Install wingetcreate
-              run: winget install wingetcreate --accept-package-agreements
+              run: winget install -e --silent --accept-package-agreements --accept-source-agreements wingetcreate
               shell: pwsh
             - name: Submit WinGet version bump
               run: "task artifacts:winget:publish:${{ github.ref_name }}"

.storybook/preview.tsx

@@ -3,9 +3,9 @@ import type { Preview } from "@storybook/react";
 import React from "react";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
-import "../frontend/app/theme.less";
-import "../frontend/app/app.less";
-import "../frontend/app/reset.less";
+import "../frontend/app/theme.scss";
+import "../frontend/app/app.scss";
+import "../frontend/app/reset.scss";
 import "./global.css";
 import { light, dark } from "./theme";
 import { DocsContainer } from "@storybook/addon-docs";

docs/docs/releasenotes.mdx

@@ -19,10 +19,14 @@ New minor release that introduces Wave's connected computing extensions. We've i
 - New block/zone aliases (client, global, block, workspace, temp)
 - `wsh ai` file attachments are now rendered with special handling in the AI block
 - New ephemeral block type for creating modal widgets which will not disturb the underlying layout
+- Editing the AI presets file from the Wave AI block now brings up an ephemeral editor
+- Clicking outside of a magnified bglock will now un-magnify it
 - New button to clear the AI chat (also bound to Cmd-L)
+- New button to reset terminal commands in custom cmd widgets
 - [bugfix] Presets directory was not loading correctly on Windows
 - [bugfix] Magnified blocks were not showing correct on startup
 - [bugfix] Window opacity and background color was not getting applied properly in all cases
+- [bugfix] Fix terminal theming when applying global defaults [#1287](https://github.com/wavetermdev/waveterm/issues/1287)
 - MacOS 10.15 (Catalina) is no longer supported
 - Other bug fixes, docs improvements, and dependency bumps
 

electron.vite.config.ts

@@ -30,6 +30,13 @@ export default defineConfig({
             "process.env.WS_NO_BUFFER_UTIL": "true",
             "process.env.WS_NO_UTF_8_VALIDATE": "true",
         },
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler", // or "modern"
+                },
+            },
+        },
     },
     preload: {
         root: ".",
@@ -76,5 +83,12 @@ export default defineConfig({
                 targets: [{ src: "node_modules/monaco-editor/min/vs/*", dest: "monaco" }],
             }),
         ],
+        css: {
+            preprocessorOptions: {
+                scss: {
+                    api: "modern-compiler", // or "modern"
+                },
+            },
+        },
     },
 });

frontend/app/app.scss

@@ -1,8 +1,8 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "./reset.less";
-@import "./theme.less";
+@use "reset.scss";
+@use "theme.scss";
 
 body {
     display: flex;
@@ -12,7 +12,7 @@ body {
     color: var(--main-text-color);
     font: var(--base-font);
     overflow: hidden;
-    background: var(--main-bg-color);
+    background: rgb(from var(--main-bg-color) r g b / var(--window-opacity));
     -webkit-font-smoothing: auto;
     backface-visibility: hidden;
     transform: translateZ(0);

frontend/app/app.tsx

@@ -17,7 +17,6 @@ import { getElemAsStr } from "@/util/focusutil";
 import * as keyutil from "@/util/keyutil";
 import * as util from "@/util/util";
 import clsx from "clsx";
-import Color from "color";
 import debug from "debug";
 import { Provider, useAtomValue } from "jotai";
 import "overlayscrollbars/overlayscrollbars.css";
@@ -28,7 +27,7 @@ import { AppBackground } from "./app-bg";
 import { CenteredDiv } from "./element/quickelems";
 import { NotificationBubbles } from "./notification/notificationbubbles";
 
-import "./app.less";
+import "./app.scss";
 
 const dlog = debug("wave:app");
 const focusLog = debug("wave:focus");
@@ -130,21 +129,24 @@ function AppSettingsUpdater() {
         const isTransparentOrBlur =
             (windowSettings?.["window:transparent"] || windowSettings?.["window:blur"]) ?? false;
         const opacity = util.boundNumber(windowSettings?.["window:opacity"] ?? 0.8, 0, 1);
-        let baseBgColor = windowSettings?.["window:bgcolor"];
+        const baseBgColor = windowSettings?.["window:bgcolor"];
         const mainDiv = document.getElementById("main");
         // console.log("window settings", windowSettings, isTransparentOrBlur, opacity, baseBgColor, mainDiv);
         if (isTransparentOrBlur) {
             mainDiv.classList.add("is-transparent");
-            const rootStyles = getComputedStyle(document.documentElement);
-            if (baseBgColor == null) {
-                baseBgColor = rootStyles.getPropertyValue("--main-bg-color").trim();
+            if (opacity != null) {
+                document.body.style.setProperty("--window-opacity", `${opacity}`);
+            } else {
+                document.body.style.removeProperty("--window-opacity");
             }
-            const color = new Color(baseBgColor);
-            const rgbaColor = color.alpha(opacity).string();
-            document.body.style.backgroundColor = rgbaColor;
         } else {
             mainDiv.classList.remove("is-transparent");
-            document.body.style.backgroundColor = "var(--main-bg-color)";
+            document.body.style.removeProperty("--window-opacity");
+        }
+        if (baseBgColor != null) {
+            document.body.style.setProperty("--main-bg-color", baseBgColor);
+        } else {
+            document.body.style.removeProperty("--main-bg-color");
         }
     }, [windowSettings]);
     return null;

frontend/app/block/block.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .block {
     display: flex;
@@ -118,7 +118,7 @@
                 }
 
                 .block-frame-text {
-                    .ellipsis();
+                    @include mixins.ellipsis();
                     font: var(--fixed-font);
                     font-size: 11px;
                     opacity: 0.7;
@@ -324,7 +324,7 @@
                     }
 
                     .connstatus-status {
-                        .ellipsis();
+                        @include mixins.ellipsis();
                         display: flex;
                         flex-direction: column;
                         align-items: flex-start;
@@ -333,7 +333,7 @@
                         width: 100%;
 
                         .connstatus-status-text {
-                            .ellipsis();
+                            @include mixins.ellipsis();
                             max-width: 100%;
                             font-size: 11px;
                             font-style: normal;
@@ -344,7 +344,7 @@
                         }
 
                         .connstatus-error {
-                            .ellipsis();
+                            @include mixins.ellipsis();
                             width: 94%;
                             font-size: 11px;
                             font-style: normal;

frontend/app/block/block.tsx

@@ -34,7 +34,7 @@ import { WebView, WebViewModel, makeWebViewModel } from "@/view/webview/webview"
 import clsx from "clsx";
 import { atom, useAtomValue } from "jotai";
 import { Suspense, memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import "./block.less";
+import "./block.scss";
 import { BlockFrame } from "./blockframe";
 import { blockViewToIcon, blockViewToName } from "./blockutil";
 

frontend/app/element/avatar.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .avatar {
     position: relative;
@@ -53,5 +53,5 @@
         }
     }
 
-    .avatar-dims-mixin();
+    @include mixins.avatar-dims-mixin();
 }

frontend/app/element/avatar.tsx

@@ -3,7 +3,7 @@
 import { memo } from "react";
 
 import clsx from "clsx";
-import "./avatar.less";
+import "./avatar.scss";
 
 interface AvatarProps {
     name: string;

frontend/app/element/button.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .button {
     // override default button appearance
@@ -158,9 +158,9 @@
     }
 
     // Include mixins
-    .border-radius-mixin();
-    .vertical-padding-mixin();
-    .horizontal-padding-mixin();
-    .font-size-mixin();
-    .font-weight-mixin();
+    @include mixins.border-radius-mixin();
+    @include mixins.vertical-padding-mixin();
+    @include mixins.horizontal-padding-mixin();
+    @include mixins.font-size-mixin();
+    @include mixins.font-weight-mixin();
 }

frontend/app/element/button.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import { forwardRef, memo, ReactNode, useImperativeHandle, useRef } from "react";
 
-import "./button.less";
+import "./button.scss";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;

frontend/app/element/collapsiblemenu.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .collapsible-menu {
     list-style: none;
@@ -32,7 +32,7 @@
 }
 
 .collapsible-menu-item-text {
-    .ellipsis();
+    @include mixins.ellipsis();
     text-decoration: none;
 }
 

frontend/app/element/collapsiblemenu.tsx

@@ -3,7 +3,7 @@
 
 import clsx from "clsx";
 import React, { memo, useState } from "react";
-import "./collapsiblemenu.less";
+import "./collapsiblemenu.scss";
 
 interface VerticalNavProps {
     items: MenuItem[];

frontend/app/element/copybutton.tsx

@@ -3,7 +3,7 @@
 
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
-import "./copybutton.less";
+import "./copybutton.scss";
 import { IconButton } from "./iconbutton";
 
 type CopyButtonProps = {

frontend/app/element/emojipalette.tsx

@@ -8,7 +8,7 @@ import { Button } from "./button";
 import { Input, InputGroup, InputLeftElement } from "./input";
 import { Popover, PopoverButton, PopoverContent } from "./popover";
 
-import "./emojipalette.less";
+import "./emojipalette.scss";
 
 type EmojiItem = { emoji: string; name: string };
 

frontend/app/element/expandablemenu.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .expandable-menu {
     display: flex;
@@ -20,7 +20,7 @@
     border-radius: 4px;
 
     .label {
-        .ellipsis();
+        @include mixins.ellipsis();
     }
 }
 

frontend/app/element/expandablemenu.tsx

@@ -5,7 +5,7 @@ import { clsx } from "clsx";
 import { atom, useAtom } from "jotai";
 import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useRef } from "react";
 
-import "./expandablemenu.less";
+import "./expandablemenu.scss";
 
 // Define the global atom for managing open groups
 const openGroupsAtom = atom<{ [key: string]: boolean }>({});

frontend/app/element/flyoutmenu.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .menu {
     position: absolute;
@@ -38,7 +38,7 @@
     justify-content: space-between;
 
     .label {
-        .ellipsis();
+        @include mixins.ellipsis();
         text-decoration: none;
     }
 }

frontend/app/element/flyoutmenu.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { createRef, Fragment, memo, ReactNode, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
-import "./flyoutmenu.less";
+import "./flyoutmenu.scss";
 
 type MenuProps = {
     items: MenuItem[];

frontend/app/element/iconbutton.tsx

@@ -5,7 +5,7 @@ import { useLongClick } from "@/app/hook/useLongClick";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
 import { memo, useRef } from "react";
-import "./iconbutton.less";
+import "./iconbutton.scss";
 
 export const IconButton = memo(({ decl, className }: { decl: IconButtonDecl; className?: string }) => {
     const buttonRef = useRef<HTMLDivElement>(null);

frontend/app/element/input.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .input {
     width: 100%;
@@ -28,11 +28,11 @@
     }
 
     // Include mixins
-    .border-radius-mixin();
-    .vertical-padding-mixin();
-    .horizontal-padding-mixin();
-    .font-size-mixin();
-    .font-weight-mixin();
+    @include mixins.border-radius-mixin();
+    @include mixins.vertical-padding-mixin();
+    @include mixins.horizontal-padding-mixin();
+    @include mixins.font-size-mixin();
+    @include mixins.font-weight-mixin();
 }
 
 /* Styles when an InputGroup is present */
@@ -87,7 +87,7 @@
     }
 
     // Include mixins
-    .border-radius-mixin();
-    .font-size-mixin();
-    .font-weight-mixin();
+    @include mixins.border-radius-mixin();
+    @include mixins.font-size-mixin();
+    @include mixins.font-weight-mixin();
 }

frontend/app/element/input.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import React, { forwardRef, memo, useImperativeHandle, useRef, useState } from "react";
 
-import "./input.less";
+import "./input.scss";
 
 interface InputGroupProps {
     children: React.ReactNode;

frontend/app/element/linkbutton.scss

@@ -1,6 +1,6 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-&.link-button {
-    text-decoration: none;
+.link-button {
+  text-decoration: none;
 }

frontend/app/element/linkbutton.tsx

@@ -4,7 +4,7 @@
 import { clsx } from "clsx";
 import * as React from "react";
 
-import "./linkbutton.less";
+import "./linkbutton.scss";
 
 interface LinkButtonProps {
     href: string;

frontend/app/element/magnify.tsx

@@ -3,7 +3,7 @@
 
 import clsx from "clsx";
 import MagnifySVG from "../asset/magnify.svg";
-import "./magnify.less";
+import "./magnify.scss";
 
 interface MagnifyIconProps {
     enabled: boolean;

frontend/app/element/markdown.tsx

@@ -21,7 +21,7 @@ import RemarkFlexibleToc, { TocItem } from "remark-flexible-toc";
 import remarkGfm from "remark-gfm";
 import { openLink } from "../store/global";
 import { IconButton } from "./iconbutton";
-import "./markdown.less";
+import "./markdown.scss";
 
 const Link = ({
     setFocusedHeading,

frontend/app/element/menubutton.tsx

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { memo, useState } from "react";
 import { Button } from "./button";
 import { FlyoutMenu } from "./flyoutmenu";
-import "./menubutton.less";
+import "./menubutton.scss";
 
 const MenuButtonComponent = ({ items, className, text, title }: MenuButtonProps) => {
     const [isOpen, setIsOpen] = useState(false);

frontend/app/element/modal.tsx

@@ -4,7 +4,7 @@
 import { Button } from "@/element/button";
 import React from "react";
 
-import "./modal.less";
+import "./modal.scss";
 
 interface ModalProps {
     id?: string;

frontend/app/element/multilineinput.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import React, { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
 
-import "./multilineinput.less";
+import "./multilineinput.scss";
 
 interface MultiLineInputProps {
     value?: string;

frontend/app/element/popover.scss

@@ -5,7 +5,7 @@
     min-width: 100px;
     min-height: 150px;
     position: absolute;
-    z-index: 1000; // TODO: put this in theme.less
+    z-index: 1000; // TODO: put this in theme.scss
     display: flex;
     padding: 2px;
     gap: 1px;

frontend/app/element/popover.tsx

@@ -26,7 +26,7 @@ import {
     useState,
 } from "react";
 
-import "./popover.less";
+import "./popover.scss";
 
 interface PopoverProps {
     children: ReactNode;

frontend/app/element/quickelems.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from "react";
-import "./quickelems.less";
+import "./quickelems.scss";
 
 function CenteredLoadingDiv() {
     return <CenteredDiv>loading...</CenteredDiv>;

frontend/app/element/quicktips.tsx

@@ -3,7 +3,7 @@
 
 import { MagnifyIcon } from "@/app/element/magnify";
 import { PLATFORM } from "@/app/store/global";
-import "./quicktips.less";
+import "./quicktips.scss";
 
 const KeyBinding = ({ keyDecl }: { keyDecl: string }) => {
     const parts = keyDecl.split(":");

frontend/app/element/toggle.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useRef } from "react";
-import "./toggle.less";
+import "./toggle.scss";
 
 interface ToggleProps {
     checked: boolean;

frontend/app/element/typingindicator.scss

@@ -1,21 +1,21 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@dot-width: 11px;
-@dot-color: var(--success-color);
-@speed: 1.5s;
+$dot-width: 11px;
+$dot-color: var(--success-color);
+$speed: 1.5s;
 
 .typing {
     position: relative;
-    height: @dot-width;
+    height: $dot-width;
 
     span {
         content: "";
-        animation: blink @speed infinite;
+        animation: blink $speed infinite;
         animation-fill-mode: both;
-        height: @dot-width;
-        width: @dot-width;
-        background: @dot-color;
+        height: $dot-width;
+        width: $dot-width;
+        background: $dot-color;
         position: absolute;
         left: 0;
         top: 0;
@@ -23,12 +23,12 @@
 
         &:nth-child(2) {
             animation-delay: 0.2s;
-            margin-left: @dot-width * 1.5;
+            margin-left: $dot-width * 1.5;
         }
 
         &:nth-child(3) {
             animation-delay: 0.4s;
-            margin-left: @dot-width * 3;
+            margin-left: $dot-width * 3;
         }
     }
 }

frontend/app/element/typingindicator.tsx

@@ -3,7 +3,7 @@
 
 import { clsx } from "clsx";
 
-import "./typingindicator.less";
+import "./typingindicator.scss";
 
 type TypingIndicatorProps = {
     className?: string;

frontend/app/element/windowdrag.tsx

@@ -4,7 +4,7 @@
 import { clsx } from "clsx";
 import React, { forwardRef } from "react";
 
-import "./windowdrag.less";
+import "./windowdrag.scss";
 
 interface WindowDragProps {
     className?: string;

frontend/app/mixins.scss

@@ -1,14 +1,14 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-.ellipsis() {
+@mixin ellipsis(){
     display: block;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
-.border-radius-mixin() {
+@mixin border-radius-mixin(){
     &.border-radius-2 {
         border-radius: 4px;
     }
@@ -38,7 +38,7 @@
     }
 }
 
-.vertical-padding-mixin() {
+@mixin vertical-padding-mixin(){
     &.vertical-padding-0 {
         padding-top: 0px;
         padding-bottom: 0px;
@@ -85,7 +85,7 @@
     }
 }
 
-.horizontal-padding-mixin() {
+@mixin horizontal-padding-mixin(){
     &.horizontal-padding-0 {
         padding-left: 0px;
         padding-right: 0px;
@@ -132,7 +132,7 @@
     }
 }
 
-.font-size-mixin() {
+@mixin font-size-mixin(){
     &.font-size-10 {
         font-size: 10px;
     }
@@ -186,7 +186,7 @@
     }
 }
 
-.font-weight-mixin() {
+@mixin font-weight-mixin(){
     &.font-weight-100 {
         font-weight: 100;
     }
@@ -210,7 +210,7 @@
     }
 }
 
-.avatar-dims-mixin() {
+@mixin avatar-dims-mixin(){
     &.size-xs {
         width: 20px;
         height: 20px;

frontend/app/modals/about.tsx

@@ -9,7 +9,7 @@ import { Modal } from "./modal";
 import { isDev } from "@/util/isdev";
 import { useState } from "react";
 import { getApi } from "../store/global";
-import "./about.less";
+import "./about.scss";
 
 interface AboutModalProps {}
 

frontend/app/modals/messagemodal.tsx

@@ -5,7 +5,7 @@ import { Modal } from "@/app/modals/modal";
 import { modalsModel } from "@/app/store/modalmodel";
 
 import { ReactNode } from "react";
-import "./messagemodal.less";
+import "./messagemodal.scss";
 
 const MessageModal = ({ children }: { children: ReactNode }) => {
     function closeModal() {

frontend/app/modals/modal.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { forwardRef } from "react";
 import ReactDOM from "react-dom";
 
-import "./modal.less";
+import "./modal.scss";
 
 interface ModalProps {
     children?: React.ReactNode;

frontend/app/modals/tos.tsx

@@ -13,7 +13,7 @@ import { QuickTips } from "@/app/element/quicktips";
 import { atoms, getApi } from "@/app/store/global";
 import { modalsModel } from "@/app/store/modalmodel";
 import { atom, PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from "jotai";
-import "./tos.less";
+import "./tos.scss";
 
 const pageNumAtom: PrimitiveAtom<number> = atom<number>(1);
 

frontend/app/modals/typeaheadmodal.scss

@@ -1,7 +1,7 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-@import "../mixins.less";
+@use "../mixins.scss";
 
 .type-ahead-modal-backdrop {
     position: absolute;
@@ -97,7 +97,7 @@
             }
 
             .typeahead-item-name {
-                .ellipsis();
+                @include mixins.ellipsis();
                 display: flex;
                 gap: 8px;
                 font-size: 11px;

frontend/app/modals/typeaheadmodal.tsx

@@ -8,7 +8,7 @@ import clsx from "clsx";
 import React, { forwardRef, useLayoutEffect, useRef } from "react";
 import ReactDOM from "react-dom";
 
-import "./typeaheadmodal.less";
+import "./typeaheadmodal.scss";
 
 interface SuggestionsProps {
     suggestions?: SuggestionsType[];

frontend/app/modals/userinputmodal.tsx

@@ -8,7 +8,7 @@ import * as keyutil from "@/util/keyutil";
 import { UserInputService } from "../store/services";
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import "./userinputmodal.less";
+import "./userinputmodal.scss";
 
 const UserInputModal = (userInputRequest: UserInputRequest) => {
     const [responseText, setResponseText] = useState("");

frontend/app/notification/notificationbubbles.tsx

@@ -6,7 +6,7 @@ import { FloatingPortal, useFloating, useInteractions } from "@floating-ui/react
 import clsx from "clsx";
 import { useAtomValue } from "jotai";
 import { useEffect, useState } from "react";
-import "./notificationbubbles.less";
+import "./notificationbubbles.scss";
 import { NotificationItem } from "./notificationitem";
 import { useNotification } from "./usenotification";
 

frontend/app/notification/notificationitem.scss

@@ -1,7 +1,8 @@
 // Copyright 2024, Command Line Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-.notification-title {
+.notification {
+  .notification-title {
     font-size: 13px;
     font-style: normal;
     font-weight: 500;
@@ -9,63 +10,63 @@
     margin-bottom: 3px;
 
     &.green {
-        color: var(--success-color);
+      color: var(--success-color);
     }
 
     &.red {
-        color: var(--error-color);
+      color: var(--error-color);
     }
 
     &.yellow {
-        color: var(--warning-color);
+      color: var(--warning-color);
     }
-}
+  }
 
-.notification-message {
+  .notification-message {
     font-size: 13px;
     font-style: normal;
     font-weight: 400;
     line-height: 18px;
     opacity: 0.7;
-}
+  }
 
-.notification-actions {
+  .notification-actions {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-top: 10px;
 
     i {
-        margin-left: 3px;
-        font-size: 11px;
+      margin-left: 3px;
+      font-size: 11px;
     }
-}
+  }
 
-.close-btn {
+  .close-btn {
     position: absolute;
     top: 5px;
     right: 5px;
-}
+  }
 
-.lock-btn {
+  .lock-btn {
     position: absolute;
     top: 5px;
     right: 5px;
     padding: 10px 8px;
     font-size: 11px;
     color: rgb(from var(--main-text-color) r g b / 0.5);
-}
+  }
 
-.notification {
+  .notification {
     width: 100%;
     color: var(--main-text-color);
     padding: 12px 10px;
     display: flex;
     flex-direction: column;
     position: relative;
-}
+  }
 
-.notification-bubble {
+  .notification-bubble {
     position: relative;
     display: flex;
     width: 380px;
@@ -76,43 +77,43 @@
     border: 0.5px solid rgba(255, 255, 255, 0.12);
     background: #232323;
     box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.25);
-}
+  }
 
-.notification-inner {
+  .notification-inner {
     display: flex;
     align-items: flex-start;
     column-gap: 6px;
 
     .notification-icon {
-        margin-right: 5px;
-        margin-top: 1px;
+      margin-right: 5px;
+      margin-top: 1px;
 
-        i {
-            font-size: 16px;
-        }
+      i {
+        font-size: 16px;
+      }
 
-        i.green {
-            color: var(--success-color);
-        }
+      i.green {
+        color: var(--success-color);
+      }
 
-        i.red {
-            color: var(--error-color);
-        }
+      i.red {
+        color: var(--error-color);
+      }
 
-        i.yellow {
-            color: var(--warning-color);
-        }
+      i.yellow {
+        color: var(--warning-color);
+      }
     }
 
     .notification-timestamp {
-        font-size: 12px;
-        font-weight: 400;
-        line-height: 18px;
-        opacity: 0.5;
-        margin-bottom: 7px;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+      opacity: 0.5;
+      margin-bottom: 7px;
     }
-}
-
-&.hovered {
+  }
+  &.hovered {
     background: #292929;
+  }
 }

frontend/app/notification/notificationitem.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/element/button";
 import { makeIconClass } from "@/util/util";
 import clsx from "clsx";
 
-import "./notificationitem.less";
+import "./notificationitem.scss";
 interface NotificationItemProps {
     notification: NotificationType;
     onRemove: (id: string) => void;

frontend/app/notification/notificationpopover.tsx

@@ -13,7 +13,7 @@ import { NotificationItem } from "./notificationitem";
 import { useUpdateNotifier } from "./updatenotifier";
 import { useNotification } from "./usenotification";
 
-import "./notificationpopover.less";
+import "./notificationpopover.scss";
 
 const NotificationPopover = () => {
     useUpdateNotifier();

frontend/app/store/global.ts

@@ -246,7 +246,7 @@ function useBlockMetaKeyAtom<T extends keyof MetaType>(blockId: string, key: T):
 
 const settingsAtomCache = new Map<string, Atom<any>>();
 
-function makeOverrideConfigAtom<T extends keyof SettingsType>(blockId: string, key: T): Atom<SettingsType[T]> {
+function getOverrideConfigAtom<T extends keyof SettingsType>(blockId: string, key: T): Atom<SettingsType[T]> {
     const blockCache = getSingleBlockAtomCache(blockId);
     const overrideAtomName = "#settingsoverride-" + key;
     let overrideAtom = blockCache.get(overrideAtomName);
@@ -271,7 +271,7 @@ function makeOverrideConfigAtom<T extends keyof SettingsType>(blockId: string, k
 }
 
 function useOverrideConfigAtom<T extends keyof SettingsType>(blockId: string, key: T): SettingsType[T] {
-    return useAtomValue(makeOverrideConfigAtom(blockId, key));
+    return useAtomValue(getOverrideConfigAtom(blockId, key));
 }
 
 function getSettingsKeyAtom<T extends keyof SettingsType>(key: T): Atom<SettingsType[T]> {
@@ -636,6 +636,7 @@ export {
     getConnStatusAtom,
     getHostName,
     getObjectId,
+    getOverrideConfigAtom,
     getSettingsKeyAtom,
     getUserName,
     globalStore,
@@ -643,7 +644,6 @@ export {
     initGlobalWaveEventSubs,
     isDev,
     loadConnStatus,
-    makeOverrideConfigAtom,
     openLink,
     PLATFORM,
     pushFlashError,

frontend/app/tab/tab.tsx

@@ -12,7 +12,7 @@ import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "re
 import { atoms, globalStore, refocusNode } from "@/app/store/global";
 import { RpcApi } from "@/app/store/wshclientapi";
 import { TabRpcClient } from "@/app/store/wshrpcutil";
-import "./tab.less";
+import "./tab.scss";
 
 interface TabProps {
     id: string;

frontend/app/tab/tabbar.tsx

@@ -12,7 +12,7 @@ import { OverlayScrollbars } from "overlayscrollbars";
 import React, { createRef, useCallback, useEffect, useRef, useState } from "react";
 import { debounce } from "throttle-debounce";
 import { Tab } from "./tab";
-import "./tabbar.less";
+import "./tabbar.scss";
 import { UpdateStatusBanner } from "./updatebanner";
 import { WorkspaceSwitcher } from "./workspaceswitcher";
 

frontend/app/tab/tabcontent.tsx

@@ -11,7 +11,7 @@ import * as WOS from "@/store/wos";
 import { atom, useAtomValue } from "jotai";
 import * as React from "react";
 import { useMemo } from "react";
-import "./tabcontent.less";
+import "./tabcontent.scss";
 
 const tileGapSizeAtom = atom((get) => {
     const settings = get(atoms.settingsAtom);

frontend/app/tab/updatebanner.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/element/button";
 import { atoms, getApi } from "@/store/global";
 import { useAtomValue } from "jotai";
 import { memo, useEffect, useState } from "react";
-import "./updatebanner.less";
+import "./updatebanner.scss";
 
 const UpdateStatusBannerComponent = ({ buttonRef }: { buttonRef: React.RefObject<HTMLButtonElement> }) => {
     const appUpdateStatus = useAtomValue(atoms.updaterStatusAtom);

frontend/app/tab/workspaceswitcher.tsx

@@ -22,7 +22,7 @@ import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { memo, useEffect, useRef } from "react";
 import WorkspaceSVG from "../asset/workspace.svg";
 
-import "./workspaceswitcher.less";
+import "./workspaceswitcher.scss";
 
 interface ColorSelectorProps {
     colors: string[];

frontend/app/theme.scss

@@ -7,6 +7,7 @@
 :root {
     --main-text-color: #f7f7f7;
     --title-font-size: 18px;
+    --window-opacity: 1;
     --secondary-text-color: rgb(195, 200, 194);
     --grey-text-color: #666;
     --main-bg-color: rgb(34, 34, 34);

frontend/app/view/chat/channels.tsx

@@ -4,7 +4,7 @@
 import { CollapsibleMenu } from "@/app/element/collapsiblemenu";
 import { memo } from "react";
 
-import "./channels.less";
+import "./channels.scss";
 
 const Channels = memo(({ channels }: { channels: MenuItem[] }) => {
     return <CollapsibleMenu className="channel-list" items={channels}></CollapsibleMenu>;

frontend/app/view/chat/chat.tsx

@@ -10,7 +10,7 @@ import { ChatBox } from "./chatbox";
 import { channels, messages, users } from "./data";
 import { UserList } from "./userlist";
 
-import "./chat.less";
+import "./chat.scss";
 
 class ChatModel {
     viewType: string;

frontend/app/view/chat/chatmessages.stories.tsx

@@ -3,7 +3,7 @@
 
 import type { Meta, StoryObj } from "@storybook/react";
 import { ChatMessages } from "./chatmessages";
-import "./chatmessages.less";
+import "./chatmessages.scss";
 
 export interface ChatMessage {
     id: string;

frontend/app/view/chat/chatmessages.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import { memo, useEffect, useRef } from "react";
 
-import "./chatmessages.less";
+import "./chatmessages.scss";
 
 export interface ChatMessage {
     id: string;

frontend/app/view/chat/userlist.stories.tsx

@@ -4,7 +4,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { UserList } from "./userlist";
 
-import "./userlist.less";
+import "./userlist.scss";
 
 export interface UserStatus {
     text: string;

frontend/app/view/chat/userlist.tsx

@@ -4,7 +4,7 @@
 import clsx from "clsx";
 import { memo } from "react";
 import { Avatar } from "../../element/avatar";
-import "./userlist.less";
+import "./userlist.scss";
 
 export interface UserStatus {
     label: string;

frontend/app/view/codeeditor/codeeditor.tsx

@@ -16,7 +16,7 @@ import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 import ymlWorker from "./yamlworker?worker";
 
-import "./codeeditor.less";
+import "./codeeditor.scss";
 
 // there is a global monaco variable (TODO get the correct TS type)
 declare var monaco: Monaco;

frontend/app/view/helpview/helpview.tsx

@@ -7,7 +7,7 @@ import { WebView, WebViewModel } from "@/app/view/webview/webview";
 import { fireAndForget } from "@/util/util";
 import { atom, useAtomValue } from "jotai";
 import { useCallback } from "react";
-import "./helpview.less";
+import "./helpview.scss";
 
 const docsiteWebUrl = "https://docs.waveterm.dev/";
 const baseUrlRegex = /http[s]?:\/\/([^:\/])+(:\d+)?/;

frontend/app/view/plotview/plotview.tsx

@@ -7,7 +7,7 @@ import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 import * as React from "react";
 
-import "./plotview.less";
+import "./plotview.scss";
 
 function PlotWindow() {
     return <div className="plot-window"></div>;