Cleaning up

package.json

@@ -23,7 +23,7 @@
     "url": "git+https://github.com/opencor/webapp.git"
   },
   "type": "module",
-  "version": "0.20260119.2",
+  "version": "0.20260120.0",
   "scripts": {
     "archive:web": "bun src/renderer/scripts/archive.web.js",
     "build": "electron-vite build",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@napi-rs/keyring": "^1.2.0",
-    "@primeuix/themes": "^2.0.2",
+    "@primeuix/themes": "^2.0.3",
     "@primevue/auto-import-resolver": "4.2.5",
     "@vueuse/core": "14.1.0",
     "crypto-js": "^4.2.0",
@@ -84,7 +84,7 @@
     "stylelint-config-standard": "^40.0.0",
     "tailwindcss": "^4.1.18",
     "tailwindcss-primeui": "^0.6.1",
-    "tar": "^7.5.3",
+    "tar": "^7.5.4",
     "unplugin-vue-components": "^31.0.0",
     "vite": "7.2.7"
   }

src/renderer/package.json

@@ -39,7 +39,7 @@
     },
     "./style.css": "./dist/opencor.css"
   },
-  "version": "0.20260119.2",
+  "version": "0.20260120.0",
   "scripts": {
     "build": "vite build",
     "build:lib": "vite build --config vite.lib.config.ts && cp index.d.ts dist/index.d.ts",
@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@napi-rs/keyring": "^1.2.0",
-    "@primeuix/themes": "^2.0.2",
+    "@primeuix/themes": "^2.0.3",
     "@primevue/auto-import-resolver": "4.2.5",
     "@vueuse/core": "14.1.0",
     "crypto-js": "^4.2.0",

src/renderer/src/common/vueCommon.ts

@@ -67,46 +67,3 @@ export const useTheme = vueusecore.createGlobalState(() => {
     useDarkMode
   };
 });
-
-// A method to retrieve the name of a tracked CSS variable.
-
-export function trackedCssVariableName(id: string): string {
-  return `--${(id.split('_')[0] ?? '').replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}-height`;
-}
-
-// A method to track the height of a given element.
-
-export function trackElementHeight(id: string): ResizeObserver | undefined {
-  const element = document.getElementById(id);
-
-  if (element) {
-    const resizeObserver = new ResizeObserver(() => {
-      let elementHeight = window.getComputedStyle(element).height;
-
-      if (!elementHeight || elementHeight === 'auto') {
-        elementHeight = '0px';
-      }
-
-      const cssVariableName = trackedCssVariableName(id);
-      const oldElementHeight = document.documentElement.style.getPropertyValue(cssVariableName);
-
-      if (!oldElementHeight || (elementHeight !== '0px' && oldElementHeight !== elementHeight)) {
-        document.documentElement.style.setProperty(cssVariableName, elementHeight);
-      }
-    });
-
-    resizeObserver.observe(element);
-
-    return resizeObserver;
-  }
-
-  return undefined;
-}
-
-// A method to retrieve the value of a tracked CSS variable.
-
-export function trackedCssVariableValue(id: string): number {
-  const propertyValue = document.documentElement.style.getPropertyValue(trackedCssVariableName(id));
-
-  return propertyValue ? parseFloat(propertyValue) : 0;
-}

src/renderer/src/components/ContentsComponent.vue

@@ -1,16 +1,9 @@
 <template>
   <div v-if="simulationOnly" class="h-full">
-    <div v-for="fileTab in fileTabs" :key="`tabPanel_${fileTab.file.path()}`" :value="fileTab.file.path()">
-      <IssuesView
-        v-if="fileTab.file.issues().length"
-        :width="width"
-        :height="height"
-        :issues="fileTab.file.issues()"
+    <div v-for="fileTab in fileTabs" :key="`tabPanel_${fileTab.file.path()}`" class="h-full" :value="fileTab.file.path()">
+      <IssuesView v-if="fileTab.file.issues().length" class="h-full" :issues="fileTab.file.issues()"
       />
-      <SimulationExperimentView
-        v-else
-        :width="width"
-        :height="height"
+      <SimulationExperimentView v-else class="h-full"
         :isActive="isActive"
         :uiEnabled="uiEnabled"
         :file="fileTab.file"
@@ -20,16 +13,14 @@
       />
     </div>
   </div>
-  <div v-else class="h-full">
-    <BackgroundComponent v-show="!fileTabs.length" :style="{ height: height + 'px' }" />
-    <Tabs
-      v-show="fileTabs.length"
-      id="fileTabs"
+  <div v-else class="h-full flex flex-col">
+    <BackgroundComponent v-show="!fileTabs.length" class="h-full" />
+    <Tabs v-show="fileTabs.length" id="fileTabs" class="h-full flex flex-col"
       v-model:value="activeFile"
       :scrollable="true"
       :selectOnFocus="true"
     >
-      <TabList :id="fileTablistId" class="border-b border-b-primary">
+      <TabList :id="fileTablistId" class="border-b border-b-primary shrink-0">
         <Tab
           v-for="fileTab in fileTabs"
           :id="`tab_${fileTab.file.path()}`"
@@ -46,22 +37,15 @@
           </div>
         </Tab>
       </TabList>
-      <TabPanels class="p-0!">
-        <TabPanel
-          v-for="fileTab in fileTabs"
+      <TabPanels class="p-0! grow min-h-0">
+        <TabPanel v-for="fileTab in fileTabs" class="h-full"
           :key="`tabPanel_${fileTab.file.path()}`"
           :value="fileTab.file.path()"
         >
-          <IssuesView
-            v-if="fileTab.file.issues().length"
-            :width="width"
-            :height="heightMinusFileTablist"
+          <IssuesView v-if="fileTab.file.issues().length" class="h-full"
             :issues="fileTab.file.issues()"
           />
-          <SimulationExperimentView
-            v-else
-            :width="width"
-            :height="heightMinusFileTablist"
+          <SimulationExperimentView v-else class="h-full"
             :isActive="isActive"
             :uiEnabled="uiEnabled"
             :file="fileTab.file"
@@ -80,18 +64,14 @@ import * as vueusecore from '@vueuse/core';
 import * as vue from 'vue';
 
 import * as common from '../common/common.ts';
-import { SHORT_DELAY } from '../common/constants.ts';
 import { electronApi } from '../common/electronApi.ts';
-import * as vueCommon from '../common/vueCommon.ts';
 import * as locApi from '../libopencor/locApi.ts';
 export interface IFileTab {
   file: locApi.File;
   uiJson?: locApi.IUiJson;
 }
 
 const props = defineProps<{
-  width: number;
-  height: number;
   isActive: boolean;
   simulationOnly?: boolean;
   uiEnabled: boolean;
@@ -110,7 +90,6 @@ export interface IContentsComponent {
 const fileTablistId = vue.ref('contentsComponentFileTablist');
 const fileTabs = vue.ref<IFileTab[]>([]);
 const activeFile = vue.ref<string>('');
-const heightMinusFileTablist = vue.ref<number>(0);
 
 const filePaths = vue.computed(() => {
   const res: string[] = [];
@@ -227,47 +206,6 @@ vue.onMounted(() => {
   // Customise our IDs.
 
   fileTablistId.value = `contentsComponentFileTablist${String(crtInstance?.uid)}`;
-
-  // Track the height of our file tablist.
-
-  let fileTablistResizeObserver: ResizeObserver | undefined;
-
-  setTimeout(() => {
-    fileTablistResizeObserver = vueCommon.trackElementHeight(fileTablistId.value);
-  }, SHORT_DELAY);
-
-  // Monitor "our" contents size.
-
-  function resizeOurselves() {
-    heightMinusFileTablist.value = props.height - vueCommon.trackedCssVariableValue(fileTablistId.value);
-  }
-
-  vue.watch(
-    () => props.height,
-    () => {
-      resizeOurselves();
-    }
-  );
-
-  let oldFileTablistHeight = vueCommon.trackedCssVariableValue(fileTablistId.value);
-
-  const mutationObserver = new MutationObserver(() => {
-    const newFileTablistHeight = vueCommon.trackedCssVariableValue(fileTablistId.value);
-
-    if (newFileTablistHeight !== oldFileTablistHeight) {
-      oldFileTablistHeight = newFileTablistHeight;
-
-      resizeOurselves();
-    }
-  });
-
-  mutationObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['style'] });
-
-  vue.onUnmounted(() => {
-    mutationObserver.disconnect();
-
-    fileTablistResizeObserver?.disconnect();
-  });
 });
 
 // Keyboard shortcuts.