From d86b01d3cae919ab751cdc41648e5f5506a11bce Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Thu, 25 Jan 2024 01:05:23 +0100
Subject: [PATCH] UPD: Visual upgrades

---
 src/App.vue                                   |  4 +--
 src/components/ProfileManager.vue             | 29 ++++++++++++-------
 src/components/{ => config}/ConfigPane.vue    |  8 ++---
 src/components/{ => config}/ConfigSelect.vue  |  4 ++-
 .../config/{ => pages}/HapticConfig.vue       |  8 ++---
 .../config/{ => pages}/LEDsConfig.vue         |  8 ++---
 .../config/{ => pages}/MappingConfig.vue      |  8 ++---
 src/main.js                                   |  7 ++++-
 8 files changed, 46 insertions(+), 30 deletions(-)
 rename src/components/{ => config}/ConfigPane.vue (75%)
 rename src/components/{ => config}/ConfigSelect.vue (91%)
 rename src/components/config/{ => pages}/HapticConfig.vue (97%)
 rename src/components/config/{ => pages}/LEDsConfig.vue (96%)
 rename src/components/config/{ => pages}/MappingConfig.vue (97%)

diff --git a/src/App.vue b/src/App.vue
index 0d90466..e9edb43 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,9 @@
 <script setup>
 import ProfileManager from '@/components/ProfileManager.vue'
 import DevicePreview from '@/components/device/DevicePreview.vue'
-import ConfigPane from '@/components/ConfigPane.vue'
+import ConfigPane from '@/components/config/ConfigPane.vue'
 import Navbar from '@/components/Navbar.vue'
-import ConfigSelect from '@/components/ConfigSelect.vue'
+import ConfigSelect from '@/components/config/ConfigSelect.vue'
 import { ref } from 'vue'
 
 const currentConfigPage = ref('profile_settings')
diff --git a/src/components/ProfileManager.vue b/src/components/ProfileManager.vue
index fd75fdc..a6b4395 100644
--- a/src/components/ProfileManager.vue
+++ b/src/components/ProfileManager.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div
-      class="px-4 h-20 flex items-center">
+      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
@@ -23,19 +23,23 @@
           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">
+        <button class="h-full flex justify-center items-center aspect-square border-solid border-0 border-l hover:bg-zinc-900">
+          <Plus />
+        </button>
       </div>
       <Separator />
       <div v-if="filteredProfiles.length === 0">
         <div class="flex flex-col items-center justify-center h-32">
-          <ScrambleText scramble-on-mount fill-interval="5" class="text-sm text-muted-foreground" :text="$t('profiles.not_found')" />
+          <ScrambleText
+            scramble-on-mount fill-interval="5" class="text-sm text-muted-foreground"
+            :text="$t('profiles.not_found')" />
         </div>
       </div>
       <div>
         <Collapsible
-          v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag" :default-open="true"
-          :open="collapse[profileTag]">
+          v-for="[profileTag, tagProfiles] in filteredProfilesByTag" :key="profileTag" v-model:open="collapse[profileTag]"
+          :default-open="true">
           <CollapsibleTrigger
-            v-model="collapse[profileTag]"
             class="w-full h-12 py-2 text-left text-muted-foreground text-sm hover:bg-zinc-900">
             <ChevronRight class="chevrot h-4 w-4 mb-0.5 ml-4 inline-block transition-transform" />
             {{ profileTag }}<span class="font-heading text-sm text-zinc-600"> ({{ tagProfiles.length }})</span>
@@ -56,7 +60,12 @@
               </button>
               <button
                 :data-selected="currentProfile===profile.id"
-                class="h-full bg-orange-950 hover:bg-orange-700 aspect-square text-black hidden justify-center items-center delete-button data-[selected=true]:bg-orange-600 hover:data-[selected=true]:bg-orange-500">
+                class="flex w-0 h-12 transition-all text-zinc-100 justify-center items-center profile-button hover:bg-opacity-100 bg-opacity-50 bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black">
+                <Copy class="h-4 w-4" />
+              </button>
+              <button
+                :data-selected="currentProfile===profile.id"
+                class="flex w-0 h-12 transition-all  bg-orange-900 text-zinc-100 justify-center items-center profile-button hover:bg-orange-700 data-[selected=true]:bg-orange-600 hover:data-[selected=true]:bg-orange-500 data-[selected=true]:text-black">
                 <Trash2 class="h-4 w-4" />
               </button>
             </div>
@@ -70,7 +79,7 @@
 <script setup>
 import SchemaTest from '@/components/SchemaTest.vue'
 import { Separator } from '@/components/ui/separator/index.js'
-import { FileDigit, ChevronRight, Search, Trash2 } from 'lucide-vue-next'
+import { FileDigit, ChevronRight, Search, Trash2, Copy, Plus } from 'lucide-vue-next'
 import axios from 'axios'
 import { computed, onMounted, ref } from 'vue'
 import {
@@ -126,12 +135,12 @@ onMounted(() => {
   fetchProfiles()
 })
 </script>
-<style>
+<style scoped>
 [data-state=open] > .chevrot {
   transform: rotate(90deg);
 }
 
-.profile-row:hover .delete-button {
-  display: flex;
+.profile-row:hover .profile-button {
+  width: 3rem /* 48px */;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ConfigPane.vue b/src/components/config/ConfigPane.vue
similarity index 75%
rename from src/components/ConfigPane.vue
rename to src/components/config/ConfigPane.vue
index ec455d7..0bd005d 100644
--- a/src/components/ConfigPane.vue
+++ b/src/components/config/ConfigPane.vue
@@ -15,10 +15,10 @@
   </div>
 </template>
 <script setup>
-import LEDsConfig from '@/components/config/LEDsConfig.vue'
-import ProfileConfig from '@/components/config/ProfileConfig.vue'
-import MappingConfig from '@/components/config/MappingConfig.vue'
-import HapticConfig from '@/components/config/HapticConfig.vue'
+import LEDsConfig from '@/components/config/pages/LEDsConfig.vue'
+import ProfileConfig from '@/components/config/pages/ProfileConfig.vue'
+import MappingConfig from '@/components/config/pages/MappingConfig.vue'
+import HapticConfig from '@/components/config/pages/HapticConfig.vue'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 
 defineProps({
diff --git a/src/components/ConfigSelect.vue b/src/components/config/ConfigSelect.vue
similarity index 91%
rename from src/components/ConfigSelect.vue
rename to src/components/config/ConfigSelect.vue
index 602e6a9..af3aa63 100644
--- a/src/components/ConfigSelect.vue
+++ b/src/components/config/ConfigSelect.vue
@@ -7,7 +7,7 @@
       class="px-4 h-20 flex items-center hover:bg-zinc-900 data-[selected=true]:bg-zinc-200 hover:data-[selected=true]:bg-zinc-100 data-[selected=true]:text-black border-solid border-0 border-b"
       :class="config.disabled ? 'cursor-not-allowed' : 'cursor-pointer'"
       @click="current_tab=config.disabled ? current_tab : config.id; $refs.configSelect[index].scramble()">
-      <div>
+      <div class="w-full">
         <h1 class="text-lg" :class="{'text-muted-foreground': config.disabled}">
           <ScrambleText ref="configSelect" class="align-middle" :text="$t(`config_options.${config.id}.title`)" />
           <Badge
@@ -19,6 +19,7 @@
           {{ $t(`config_options.${config.id}.subtitle`) }}
         </p>
       </div>
+      <ChevronRight v-if="current_tab === config.id" class="float-right" />
     </div>
   </div>
 </template>
@@ -26,6 +27,7 @@
 import { ref } from 'vue'
 import ScrambleText from '@/components/effects/ScrambleText.vue'
 import { Badge } from '@/components/ui/badge/index.js'
+import { ChevronRight } from 'lucide-vue-next'
 
 const config_tabs = ref([
   { id: 'profile_settings' },
diff --git a/src/components/config/HapticConfig.vue b/src/components/config/pages/HapticConfig.vue
similarity index 97%
rename from src/components/config/HapticConfig.vue
rename to src/components/config/pages/HapticConfig.vue
index 75fc1dd..d14a0e4 100644
--- a/src/components/config/HapticConfig.vue
+++ b/src/components/config/pages/HapticConfig.vue
@@ -18,7 +18,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-fd.svg">
+                  <img src="../../../assets/gui-ico/ico-fd.svg">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
@@ -28,7 +28,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-cd.svg">
+                  <img src="../../../assets/gui-ico/ico-cd.svg">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
@@ -38,7 +38,7 @@
             <TabsTrigger value="vr">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-vf.svg">
+                  <img src="../../../assets/gui-ico/ico-vf.svg">
                 </div>
                 <span
                   class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
@@ -48,7 +48,7 @@
             <TabsTrigger value="rt">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-rc.svg">
+                  <img src="../../../assets/gui-ico/ico-rc.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}
diff --git a/src/components/config/LEDsConfig.vue b/src/components/config/pages/LEDsConfig.vue
similarity index 96%
rename from src/components/config/LEDsConfig.vue
rename to src/components/config/pages/LEDsConfig.vue
index 0a6fcf9..75c4021 100644
--- a/src/components/config/LEDsConfig.vue
+++ b/src/components/config/pages/LEDsConfig.vue
@@ -17,7 +17,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-fd.svg">
+                  <img src="../../../assets/gui-ico/ico-fd.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Fine Detents
@@ -27,7 +27,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-cd.svg">
+                  <img src="../../../assets/gui-ico/ico-cd.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Coarse Detents
@@ -37,7 +37,7 @@
             <TabsTrigger value="vr">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-vf.svg">
+                  <img src="../../../assets/gui-ico/ico-vf.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Viscous Rotation
@@ -47,7 +47,7 @@
             <TabsTrigger value="rt">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-rc.svg">
+                  <img src="../../../assets/gui-ico/ico-rc.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
         Return to Center
diff --git a/src/components/config/MappingConfig.vue b/src/components/config/pages/MappingConfig.vue
similarity index 97%
rename from src/components/config/MappingConfig.vue
rename to src/components/config/pages/MappingConfig.vue
index d62b3a1..2cb102e 100644
--- a/src/components/config/MappingConfig.vue
+++ b/src/components/config/pages/MappingConfig.vue
@@ -18,7 +18,7 @@
             <TabsTrigger value="fd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center ">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-key-o.svg">
+                  <img src="../../../assets/gui-ico/ico-key-o.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
@@ -29,7 +29,7 @@
             <TabsTrigger value="cd">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-key.svg">
+                  <img src="../../../assets/gui-ico/ico-key.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
@@ -40,7 +40,7 @@
             <TabsTrigger value="vr">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-key-g.svg">
+                  <img src="../../../assets/gui-ico/ico-key-g.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
@@ -51,7 +51,7 @@
             <TabsTrigger value="rt">
               <div class="grid grid-flow-row auto-rows-max justify-items-center">
                 <div class="size-16 mb-2">
-                  <img src="../../assets/gui-ico/ico-key-d.svg">
+                  <img src="../../../assets/gui-ico/ico-key-d.svg">
                 </div>
                 <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
diff --git a/src/main.js b/src/main.js
index 1c2abd1..f5bee19 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,7 +13,12 @@ import Ajv from 'ajv'
 // Create a new store instance
 const store = createStore({
   state() {
-    return {}
+    return {
+      device: {
+        connected: false,
+        profiles: [],
+      },
+    }
   },
   mutations: {},
 })