From 734605aec77f8644dd9b4b0cefd1a5b2d9b993f7 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Fri, 2 Feb 2024 00:13:22 +0100
Subject: [PATCH] UPD: Sizing to fit fixed window

---
 src/App.vue                               |  2 +-
 src/components/Navbar.vue                 | 15 ++++++++++-----
 src/components/config/ConfigPane.vue      |  4 ++--
 src/components/device/DevicePreview.vue   |  8 ++++----
 src/components/profile/ProfileManager.vue |  8 ++++----
 src/main.js                               |  5 +++--
 6 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e9684f0..0af71ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@ onMounted(() => {
     <Navbar class="flex-none" />
     <div class="flex-1 min-h-0 flex flex-row">
       <ProfileManager
-        class="basis-1/3 min-w-80 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
+        class="basis-1/3 min-w-60 flex-1 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
       <DevicePreview class="basis-1/3 flex-col flex-1 flex border-solid border-0 border-r" />
       <ConfigPane
         class="flex-1 basis-2/5 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index da2374b..35400c9 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -57,19 +57,21 @@
       <Button variant="outline" class="app-titlebar-button">
         Disconnect
       </Button>
-      <div class="flex h-full w-32">
+      <div class="flex h-full">
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
+          v-if="resizeable"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
-          <Minus class="h-5 w-5 mr-0.5" />
+          <Minus class="h-5 w-5" />
         </button>
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
+          v-if="resizeable"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
           <Square class="h-3.5 w-3.5 mr-0.5" />
         </button>
         <button
-          class="grow flex justify-center items-center app-titlebar-button hover:text-white"
+          class="grow flex justify-center items-center app-titlebar-button hover:text-white px-2"
           @click="oi('Not implemented ¯\\_(ツ)_/¯')">
           <X class="h-5 w-5 mr-0.5" />
         </button>
@@ -90,9 +92,12 @@ import {
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { X, Square, Minus } from 'lucide-vue-next'
 import { Button } from '@/components/ui/button'
+import { ref } from 'vue'
 
 const oi = (msg) => alert(msg)
 
+const resizeable = ref(false)
+
 </script>
 <style scoped>
 .app-titlebar {
diff --git a/src/components/config/ConfigPane.vue b/src/components/config/ConfigPane.vue
index ec4ffc7..bb0ab20 100644
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <div class="flex font-heading">
+    <div class="flex">
       <div v-for="(option, index) in configPageOptions" :key="index" class="flex flex-1 items-center">
         <button
-          class="flex-1 p-4 items-center text-center group"
+          class="flex-1 h-12 items-center text-center group px-1 font-heading"
           :class="index===currentPage ? 'bg-zinc-900': 'hover:bg-zinc-800 text-zinc-200 bg-zinc-950'"
           @click="currentPage = index">
           {{ $t(option.titleKey) }}
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 9af5b3d..ccb4141 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -3,11 +3,11 @@
     <div
       class="bg-contain bg-top bg-no-repeat h-full w-full relative"
       :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.2) 95%, black), url(${RenderNano})`}">
-      <div class="px-4 pt-5 pb-3 flex justify-between items-baseline">
-        <div class="font-heading text-lg">
+      <div class="px-4 h-12 flex justify-between items-center">
+        <h2>
           {{ $t('preview.title') }}
-        </div>
-        <div class="font-mono">
+        </h2>
+        <div v-if="store.selectedProfile" class="font-mono text-sm">
           <span class="text-muted-foreground">Profile: </span>{{ store.selectedProfile.name }}
         </div>
       </div>
diff --git a/src/components/profile/ProfileManager.vue b/src/components/profile/ProfileManager.vue
index 837f6d8..2de5a69 100644
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -2,13 +2,13 @@
   <div>
     <div>
       <div
-        class="w-full p-4 flex items-center justify-between">
-        <h1 class="text-lg">
+        class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
+        <h2 class="mr-2">
           {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ store.profiles.length }}/{{ maxProfiles
           }})</span>
-        </h1>
+        </h2>
         <button
-          class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square w-8 flex justify-center items-center"
+          class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-full aspect-square h-7 flex justify-center items-center"
           @click="store.addProfile">
           <Plus class="h-4" />
         </button>
diff --git a/src/main.js b/src/main.js
index 10354dc..5267e0f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,9 +14,10 @@ if (ess) {
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 1024,
-    height: 768,
+    width: 1000,
+    height: 600,
     titleBarStyle: 'hidden',
+    resizable: false,
     icon: path.join(__dirname, `/assets/favicon.png`),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),