Add setting to show tab bar at bottom

Author: nahoj

frontend/app/tab/tabbar.scss

@@ -122,3 +122,8 @@
         --os-handle-border-radius: 2px;
     }
 }
+
+.tab-bar-wrapper.tab-bar-bottom {
+    padding-top: 3px;
+    padding-bottom: 3px;
+}

frontend/app/tab/tabbar.tsx

@@ -15,6 +15,7 @@ import { debounce } from "throttle-debounce";
 import { IconButton } from "../element/iconbutton";
 import { WorkspaceService } from "../store/services";
 import { Tab } from "./tab";
+import clsx from "clsx";
 import "./tabbar.scss";
 import { UpdateStatusBanner } from "./updatebanner";
 import { WorkspaceSwitcher } from "./workspaceswitcher";
@@ -648,18 +649,21 @@ const TabBar = memo(({ workspace }: TabBarProps) => {
             </div>
         ) : undefined;
 
+    const tabBarPosition = settings?.["window:tabbarposition"];
+    const workspaceSwitcherPlacement = tabBarPosition === "bottom" ? "top-start" : "bottom-start";
+
     const addtabButtonDecl: IconButtonDecl = {
         elemtype: "iconbutton",
         icon: "plus",
         click: handleAddTab,
         title: "Add Tab",
     };
     return (
-        <div ref={tabbarWrapperRef} className="tab-bar-wrapper">
+        <div ref={tabbarWrapperRef} className={clsx("tab-bar-wrapper", tabBarPosition === "bottom" && "tab-bar-bottom")}>
             <WindowDrag ref={draggerLeftRef} className="left" />
             {appMenuButton}
             {devLabel}
-            <WorkspaceSwitcher ref={workspaceSwitcherRef} />
+            <WorkspaceSwitcher ref={workspaceSwitcherRef} placement={workspaceSwitcherPlacement} />
             <div className="tab-bar" ref={tabBarRef} data-overlayscrollbars-initialize>
                 <div className="tabs-wrapper" ref={tabsWrapperRef} style={{ width: `${tabsWrapperWidth}px` }}>
                     {tabIds.map((tabId, index) => {

frontend/app/tab/workspaceswitcher.tsx

@@ -25,6 +25,10 @@ import { waveEventSubscribe } from "../store/wps";
 import { WorkspaceEditor } from "./workspaceeditor";
 import "./workspaceswitcher.scss";
 
+type WorkspaceSwitcherProps = {
+    placement: "top-start" | "bottom-start";
+};
+
 type WorkspaceListEntry = {
     windowId: string;
     workspace: Workspace;
@@ -34,7 +38,7 @@ type WorkspaceList = WorkspaceListEntry[];
 const workspaceMapAtom = atom<WorkspaceList>([]);
 const workspaceSplitAtom = splitAtom(workspaceMapAtom);
 const editingWorkspaceAtom = atom<string>();
-const WorkspaceSwitcher = forwardRef<HTMLDivElement>((_, ref) => {
+const WorkspaceSwitcher = forwardRef<HTMLDivElement, WorkspaceSwitcherProps>(({ placement }, ref) => {
     const setWorkspaceList = useSetAtom(workspaceMapAtom);
     const activeWorkspace = useAtomValueSafe(atoms.workspace);
     const workspaceList = useAtomValue(workspaceSplitAtom);
@@ -93,7 +97,7 @@ const WorkspaceSwitcher = forwardRef<HTMLDivElement>((_, ref) => {
     return (
         <Popover
             className="workspace-switcher-popover"
-            placement="bottom-start"
+            placement={placement}
             onDismiss={() => setEditingWorkspace(null)}
             ref={ref}
         >

frontend/app/workspace/workspace.tsx

@@ -151,8 +151,11 @@ const Widget = memo(({ widget }: { widget: WidgetConfigType }) => {
 const WorkspaceElem = memo(() => {
     const tabId = useAtomValue(atoms.staticTabId);
     const ws = useAtomValue(atoms.workspace);
+    const settings = useAtomValue(atoms.settingsAtom);
+    const tabBarPosition = settings?.["window:tabbarposition"];
+
     return (
-        <div className="flex flex-col w-full flex-grow overflow-hidden">
+        <div className={clsx("flex flex-col w-full flex-grow overflow-hidden", tabBarPosition === "bottom" && "flex-col-reverse")}>
             <TabBar key={ws.oid} workspace={ws} />
             <div className="flex flex-row flex-grow overflow-hidden">
                 <ErrorBoundary key={tabId}>

frontend/types/gotypes.d.ts

@@ -736,6 +736,7 @@ declare global {
         "window:tilegapsize"?: number;
         "window:showmenubar"?: boolean;
         "window:nativetitlebar"?: boolean;
+        "window:tabbarposition"?: string;
         "window:disablehardwareacceleration"?: boolean;
         "window:maxtabcachesize"?: number;
         "window:magnifiedblockopacity"?: number;

pkg/wconfig/defaultconfig/settings.json

@@ -15,6 +15,7 @@
     "window:tilegapsize": 3,
     "window:maxtabcachesize": 10,
     "window:nativetitlebar": true,
+    "window:tabbarposition": "top",
     "window:magnifiedblockopacity": 0.6,
     "window:magnifiedblocksize": 0.9,
     "window:magnifiedblockblurprimarypx": 10,

pkg/wconfig/metaconsts.go

@@ -75,6 +75,7 @@ const (
 	ConfigKey_WindowTileGapSize              = "window:tilegapsize"
 	ConfigKey_WindowShowMenuBar              = "window:showmenubar"
 	ConfigKey_WindowNativeTitleBar           = "window:nativetitlebar"
+	ConfigKey_WindowTabBarPosition           = "window:tabbarposition"
 	ConfigKey_WindowDisableHardwareAcceleration = "window:disablehardwareacceleration"
 	ConfigKey_WindowMaxTabCacheSize          = "window:maxtabcachesize"
 	ConfigKey_WindowMagnifiedBlockOpacity    = "window:magnifiedblockopacity"

pkg/wconfig/settingsconfig.go

@@ -120,6 +120,7 @@ type SettingsType struct {
 	WindowTileGapSize                   *int64   `json:"window:tilegapsize,omitempty"`
 	WindowShowMenuBar                   bool     `json:"window:showmenubar,omitempty"`
 	WindowNativeTitleBar                bool     `json:"window:nativetitlebar,omitempty"`
+	WindowTabBarPosition                *string  `json:"window:tabbarposition,omitempty"`
 	WindowDisableHardwareAcceleration   bool     `json:"window:disablehardwareacceleration,omitempty"`
 	WindowMaxTabCacheSize               int      `json:"window:maxtabcachesize,omitempty"`
 	WindowMagnifiedBlockOpacity         *float64 `json:"window:magnifiedblockopacity,omitempty"`

schema/settings.json

@@ -182,6 +182,9 @@
         "window:nativetitlebar": {
           "type": "boolean"
         },
+        "window:tabbarposition": {
+          "type": "string"
+        },
         "window:disablehardwareacceleration": {
           "type": "boolean"
         },
@@ -232,4 +235,4 @@
       "type": "object"
     }
   }
-}
+}