Potential fix for some tab weirdness

src/components/Game.vue

@@ -36,9 +36,8 @@ const layerKeys = computed(() => Object.keys(layers));
 const useHeader = projInfo.useHeader;
 
 function gatherLayerProps(layer: GenericLayer) {
-    const { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay } =
+    const { display, minimized, name, color, minimizable, nodes, minimizedDisplay } = layer;
-        layer;
+    return { display, minimized, name, color, minimizable, nodes, minimizedDisplay };
-    return { display, minimized, minWidth, name, color, minimizable, nodes, minimizedDisplay };
 }
 </script>
 

src/components/Layer.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="layer-container" :style="{ '--layer-color': unref(color) }">
-        <button v-if="showGoBack" class="goBack" @click="goBack">←</button>
+        <button v-if="showGoBack" class="goBack" @click="goBack">❌</button>
-        <button class="layer-tab minimized" v-if="minimized.value" @click="minimized.value = false">
+
+        <button class="layer-tab minimized" v-if="unref(minimized)" @click="setMinimized(false)">
             <component v-if="minimizedComponent" :is="minimizedComponent" />
             <div v-else>{{ unref(name) }}</div>
         </button>
@@ -34,10 +35,6 @@ export default defineComponent({
             type: Number,
             required: true
         },
-        tab: {
-            type: Function as PropType<() => HTMLElement | undefined>,
-            required: true
-        },
         display: {
             type: processedPropType<CoercableComponent>(Object, String, Function),
             required: true
@@ -47,10 +44,6 @@ export default defineComponent({
             type: Object as PropType<Persistent<boolean>>,
             required: true
         },
-        minWidth: {
-            type: processedPropType<number | string>(Number, String),
-            required: true
-        },
         name: {
             type: processedPropType<string>(String),
             required: true
@@ -63,7 +56,7 @@ export default defineComponent({
         }
     },
     setup(props) {
-        const { display, index, minimized, minWidth, tab, minimizedDisplay } = toRefs(props);
+        const { display, index, minimized, minimizedDisplay } = toRefs(props);
 
         const component = computeComponent(display);
         const minimizedComponent = computeOptionalComponent(minimizedDisplay);
@@ -75,60 +68,24 @@ export default defineComponent({
             player.tabs.splice(unref(props.index), Infinity);
         }
 
-        nextTick(() => updateTab(minimized.value, unref(minWidth.value)));
-        watch([minimized, wrapRef(minWidth)], ([minimized, minWidth]) =>
-            updateTab(minimized, minWidth)
-        );
-
         function updateNodes(nodes: Record<string, FeatureNode | undefined>) {
             props.nodes.value = nodes;
         }
 
-        function updateTab(minimized: boolean, minWidth: number | string) {
-            const width =
-                typeof minWidth === "number" || Number.isNaN(parseInt(minWidth))
-                    ? minWidth + "px"
-                    : minWidth;
-            const tabValue = tab.value();
-            if (tabValue != undefined) {
-                if (minimized) {
-                    tabValue.style.flexGrow = "0";
-                    tabValue.style.flexShrink = "0";
-                    tabValue.style.width = "60px";
-                    tabValue.style.minWidth = tabValue.style.flexBasis = "";
-                    tabValue.style.margin = "0";
-                } else {
-                    tabValue.style.flexGrow = "";
-                    tabValue.style.flexShrink = "";
-                    tabValue.style.width = "";
-                    tabValue.style.minWidth = tabValue.style.flexBasis = width;
-                    tabValue.style.margin = "";
-                }
-            }
-        }
-
         return {
             component,
             minimizedComponent,
             showGoBack,
             updateNodes,
             unref,
-            goBack
+            goBack,
+            setMinimized
         };
     }
 });
 </script>
 
 <style scoped>
-.layer-container {
-    min-width: 100%;
-    min-height: 100%;
-    margin: 0;
-    flex-grow: 1;
-    display: flex;
-    isolation: isolate;
-}
-
 .layer-tab:not(.minimized) {
     padding-top: 20px;
     padding-bottom: 20px;

src/game/layers.tsx

@@ -21,7 +21,7 @@ import type {
 } from "util/computed";
 import { processComputable } from "util/computed";
 import { createLazyProxy } from "util/proxies";
-import type { InjectionKey, Ref } from "vue";
+import { computed, InjectionKey, Ref } from "vue";
 import { ref, shallowReactive, unref } from "vue";
 
 /** A feature's node in the DOM that has its size tracked. */
@@ -231,6 +231,8 @@ export function createLayer<T extends LayerOptions>(
 
         processComputable(layer as T, "color");
         processComputable(layer as T, "display");
+        processComputable(layer as T, "classes");
+        processComputable(layer as T, "style");
         processComputable(layer as T, "name");
         setDefault(layer, "name", layer.id);
         processComputable(layer as T, "minWidth");
@@ -239,6 +241,34 @@ export function createLayer<T extends LayerOptions>(
         setDefault(layer, "minimizable", true);
         processComputable(layer as T, "minimizedDisplay");
 
+        const style = layer.style as ProcessedComputable<StyleValue> | undefined;
+        layer.style = computed(() => {
+            let width = unref(layer.minWidth as ProcessedComputable<number | string>);
+            if (typeof width === "number" || !Number.isNaN(parseInt(width))) {
+                width = width + "px";
+            }
+            return [
+                unref(style) ?? "",
+                layer.minimized?.value
+                    ? {
+                          flexGrow: "0",
+                          flexShrink: "0",
+                          width: "60px",
+                          minWidth: "",
+                          flexBasis: "",
+                          margin: "0"
+                      }
+                    : {
+                          flexGrow: "",
+                          flexShrink: "",
+                          width: "",
+                          minWidth: width,
+                          flexBasis: width,
+                          margin: ""
+                      }
+            ];
+        }) as Ref<StyleValue>;
+
         return layer as unknown as Layer<T>;
     });
 }