From 82d9a8132faa1d29093eaf436d5e9d5295102825 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Mon, 29 Jan 2024 17:47:12 +0100
Subject: [PATCH] UPD: Big layout changes. App now looks like an app.

---
 src/App.vue                               |  19 ++--
 src/assets/main.css                       |  21 ++++-
 src/components/config/ConfigPane.vue      |   6 +-
 src/components/device/DevicePreview.vue   |   4 +-
 src/components/profile/ProfileButton.vue  |   2 +-
 src/components/profile/ProfileManager.vue |  30 ++++---
 src/data/nanoConfig.json                  | 104 ++++++++++++++++++++++
 src/lang/en.json                          |   6 +-
 src/main.js                               |   4 +-
 9 files changed, 162 insertions(+), 34 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 7375e12..1574a27 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,18 +12,17 @@ const currentConfigPage = ref('profile_settings')
 
 </script>
 <template>
-  <main class="select-none">
-    <Navbar />
-    <div class="grid grid-cols-11">
-      <ProfileManager class="col-span-3 border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
-      <div class="col-span-4 border-solid border-0 border-r">
-        <DevicePreview />
-        <ConfigSection :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt">
-          <ConfigSelect v-model="currentConfigPage" />
-        </ConfigSection>
+  <main class="select-none w-screen h-screen flex flex-col">
+    <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" />
+      <div class="basis-1/3 flex-1 flex flex-col border-solid border-0 border-r">
+        <DevicePreview class="flex-col flex flex-none" />
+        <ConfigSection class="flex-none" :title="$t('config_options.title')" :foldable="false" :icon-component="Bolt" />
+        <ConfigSelect v-model="currentConfigPage" class="overflow-y-auto flex-1" />
       </div>
       <ConfigPane
-        class="col-span-4 border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
+        class="flex-1 basis-1/3 flex flex-col border-solid border-0 border-r bg-zinc-900 bg-opacity-30"
         :page="currentConfigPage" />
     </div>
   </main>
diff --git a/src/assets/main.css b/src/assets/main.css
index 40fffb1..6689889 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -4,6 +4,25 @@
     input[type="number"]::-webkit-inner-spin-button,
     input[type="number"]::-webkit-outer-spin-button {
         -webkit-appearance: none;
-        margin: 0;
     }
+}
+
+body {
+    overflow: hidden;
+    --scrollbar-foreground: rgb(39 39 42);
+    --scrollbar-background: black;
+    scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
+}
+
+::-webkit-scrollbar {
+    width: 0.5em;
+    height: 0.5em;
+}
+
+::-webkit-scrollbar-thumb { /* Foreground */
+    background: var(--scrollbar-foreground);
+}
+
+::-webkit-scrollbar-track { /* Background */
+    background: var(--scrollbar-background);
 }
\ No newline at end of file
diff --git a/src/components/config/ConfigPane.vue b/src/components/config/ConfigPane.vue
index 0bd005d..bf16c0c 100644
--- a/src/components/config/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
+      class="flex-none px-6 h-20 flex items-center bg-zinc-900 bg-opacity-40">
       <div>
         <h1 class="text-lg">
           <ScrambleText class="align-middle" :text="$t(`config_options.${page}.title`)" />
@@ -11,7 +11,9 @@
         </p>
       </div>
     </div>
-    <component :is="configPages[page]" />
+    <div class="overflow-y-auto">
+      <component :is="configPages[page]" />
+    </div>
   </div>
 </template>
 <script setup>
diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 6c108e9..fbfe2e2 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="px-4 py-5">
+    <div class="px-4 pt-5 pb-3">
       <h1 class="text-lg">
         {{ $t('preview.title') }}
       </h1>
     </div>
     <div class="flex justify-center">
       <div
-        class="flex bg-cover m-6 w-full aspect-square"
+        class="flex bg-cover mb-6 w-72 aspect-square"
         style="background-image: url(src/assets/gui-ico/xl-bg-ico.svg)">
         <div class="flex flex-col w-full justify-center p-10 rounded-full overflow-hidden">
           <div class="self-center w-8 mb-1 opacity-50">
diff --git a/src/components/profile/ProfileButton.vue b/src/components/profile/ProfileButton.vue
index f5628c4..7b5d0ec 100644
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="h-12 flex profile-row"
+    class="h-12 flex"
     @mouseenter="hover=true" @mouseleave="hover=false">
     <form
       v-if="nameEditable && editing"
diff --git a/src/components/profile/ProfileManager.vue b/src/components/profile/ProfileManager.vue
index e1bd687..a0fc242 100644
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -1,18 +1,20 @@
 <template>
   <div>
-    <div
-      class="w-full px-4 h-20 flex items-center">
-      <div>
-        <h1 class="text-lg">
-          {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
-          }})</span>
-        </h1>
-        <p class="text-xs text-muted-foreground">
-          {{ $t(`profiles.subtitle`) }}
-        </p>
+    <div>
+      <div
+        class="w-full px-4 h-20 flex items-center">
+        <div>
+          <h1 class="text-lg">
+            {{ $t(`profiles.title`) }}<span class="text-sm text-zinc-600"> ({{ profiles.length }}/{{ maxProfiles
+            }})</span>
+          </h1>
+          <p class="text-xs text-muted-foreground">
+            {{ $t(`profiles.subtitle`) }}
+          </p>
+        </div>
       </div>
+      <Separator />
     </div>
-    <Separator />
     <div>
       <div class="flex w-full h-12 items-center">
         <label for="filter" class="flex h-full items-center cursor-text">
@@ -22,13 +24,15 @@
           id="filter"
           v-model="filter"
           :placeholder="$t('profiles.filter_placeholder')"
-          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
+          class="grow h-full bg-transparent text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0">
         <button
           class="h-full flex text-zinc-200 bg-zinc-900 justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-800">
           <Plus />
         </button>
       </div>
       <Separator />
+    </div>
+    <div class="overflow-y-auto">
       <div v-if="filteredProfiles.length === 0">
         <div class="flex flex-col items-center justify-center h-32">
           <ScrambleText
@@ -36,7 +40,7 @@
             :text="$t('profiles.not_found')" />
         </div>
       </div>
-      <div>
+      <div v-else>
         <Collapsible
           v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag"
           v-model:open="collapse[profileTag]"
diff --git a/src/data/nanoConfig.json b/src/data/nanoConfig.json
index b86c842..4c14ea0 100644
--- a/src/data/nanoConfig.json
+++ b/src/data/nanoConfig.json
@@ -314,6 +314,110 @@
       "guiConfig": {
         "guiEnable": true
       }
+    },
+    {
+      "id": "1337",
+      "name": "Brought to you by...",
+      "profileTag": "Custom",
+      "profileConfig": {
+        "profileDesc": "Hwhawdhuawhdaddjwidjaiwdiawjdijaidjiawjdj",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
+    },
+    {
+      "id": "0420",
+      "name": "Overflow Testing Inc.",
+      "profileTag": "Custom",
+      "profileConfig": {
+        "profileDesc": "whaduwhawhdwadhwaudhuwahdu huwadhuawhduhwadhuawhu dwaijdwajiawjdijawidiwajidawidiawjddhawgdjzgesfgkhsfsza",
+        "profileType": 1,
+        "showDesc": true
+      },
+      "feedbackConfig": {
+        "feedbackEn": true,
+        "feedbackType": "fd",
+        "multiRev": false,
+        "feedbackStrength": 1,
+        "endstopStrength": 1,
+        "outputRamp": 10000,
+        "pos": 140,
+        "secondaryHaptic": true,
+        "secondaryVol": 5
+      },
+      "mappingConfig": {
+        "internalMacro": false,
+        "knobMap": "arrL",
+        "switchA": "shift",
+        "switchB": "ctrl",
+        "switchC": "alt",
+        "switchD": "esc"
+      },
+      "ledConfig": {
+        "ledEnable": true,
+        "ledBrightness": 100,
+        "ledMode": 1,
+        "primary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "secondary": {
+          "h": 255,
+          "s": 255,
+          "v": 100
+        },
+        "pointer": {
+          "h": 255,
+          "s": 255,
+          "v": 10
+        }
+      },
+      "guiConfig": {
+        "guiEnable": true
+      }
     }
   ]
 }
\ No newline at end of file
diff --git a/src/lang/en.json b/src/lang/en.json
index b43422f..024122b 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -22,7 +22,7 @@
         "output_ramp_dampening": "Output Ramp Dampening",
         "title": "Haptic Response"
       },
-      "subtitle": "Feedback mode selector and parameter adjustment",
+      "subtitle": "Adjust haptic and auditory feedback",
       "title": "Feedback Designer",
       "total_positions": "Total Positions"
     },
@@ -98,9 +98,9 @@
   },
   "profiles": {
     "filter_placeholder": "Filter Profiles...",
+    "name_placeholder": "Profile name",
     "not_found": "No profiles found ;-;",
     "subtitle": "Customize to your heart's content",
-    "title": "Device Profiles",
-    "name_placeholder": "Profile name"
+    "title": "Device Profiles"
   }
 }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index c89e819..847d29d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,8 +14,8 @@ if (ess) {
 const createWindow = () => {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
-    width: 1100,
-    height: 912,
+    width: 1024,
+    height: 768,
     icon: path.join(__dirname, `/assets/favicon.png`),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),