From 118dcc01221f6818f2ab87b031a05d4a404f8c8e Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Thu, 14 Mar 2024 17:54:48 +0100
Subject: [PATCH] ADD: Creating profiles

---
 .../src/components/common/ConfigSection.vue   | 13 ++---
 .../components/profile/ProfileCategory.vue    | 18 +++----
 .../src/components/profile/ProfileManager.vue |  3 +-
 src/renderer/src/deviceStore.ts               | 20 ++++++++
 src/renderer/src/randomName.ts                | 49 +++++++++++++++++++
 5 files changed, 83 insertions(+), 20 deletions(-)
 create mode 100644 src/renderer/src/randomName.ts

diff --git a/src/renderer/src/components/common/ConfigSection.vue b/src/renderer/src/components/common/ConfigSection.vue
index 6c116ac..400c98f 100644
--- a/src/renderer/src/components/common/ConfigSection.vue
+++ b/src/renderer/src/components/common/ConfigSection.vue
@@ -1,6 +1,6 @@
 <template>
   <Collapsible v-model:open="collapse" :default-open="true">
-    <div class="flex h-12 w-full border-b border-zinc-800 bg-zinc-900 hover:bg-zinc-800">
+    <div class="flex h-12 w-full border-b border-zinc-800 bg-zinc-900">
       <div
         class="flex flex-1 items-center px-4"
         :class="{ 'cursor-pointer hover:bg-zinc-800': showToggle }"
@@ -17,9 +17,11 @@
       </div>
       <CollapsibleTrigger
         v-if="foldable"
-        class="flex aspect-square h-12 items-center justify-center"
+        class="group flex aspect-square h-12 items-center justify-center hover:bg-zinc-800"
       >
-        <ChevronLeft class="chevrot mt-0.5 size-4 text-muted-foreground transition-transform" />
+        <ChevronLeft
+          class="mt-0.5 size-4 text-muted-foreground transition-transform group-data-[state='open']:-rotate-90"
+        />
       </CollapsibleTrigger>
     </div>
     <CollapsibleContent>
@@ -63,8 +65,3 @@ defineProps({
   }
 })
 </script>
-<style scoped>
-[data-state='open'] > .chevrot {
-  transform: rotate(-90deg);
-}
-</style>
diff --git a/src/renderer/src/components/profile/ProfileCategory.vue b/src/renderer/src/components/profile/ProfileCategory.vue
index ab2342e..08933f8 100644
--- a/src/renderer/src/components/profile/ProfileCategory.vue
+++ b/src/renderer/src/components/profile/ProfileCategory.vue
@@ -4,9 +4,11 @@
     <div
       class="group flex h-12 w-full items-center justify-between border-0 border-b bg-zinc-900 py-2 text-left text-sm text-muted-foreground"
     >
-      <CollapsibleTrigger class="flex flex-1 items-center">
-        <ChevronRight class="chevrot mb-0.5 ml-4 inline-block size-4 transition-transform" />
-        {{ categoryName
+      <CollapsibleTrigger class="group flex min-w-0 items-center gap-2">
+        <ChevronRight
+          class="mb-0.5 ml-4 inline-block size-4 shrink-0 transition-transform group-data-[state='open']:rotate-90"
+        />
+        {{ categoryName ? categoryName : 'Uncategorized'
         }}<span class="font-heading text-sm text-zinc-600">
           ({{ deviceStore.profilesByTag[categoryName].length || 0 }})</span
         >
@@ -16,11 +18,11 @@
       >
         <template v-if="!confirmDelete">
           <Button
-            class="aspect-square border border-zinc-800 bg-transparent p-1 text-muted-foreground hover:bg-orange-900 hover:text-zinc-100"
+            class="aspect-square border border-zinc-800 bg-zinc-900 p-1 text-muted-foreground hover:bg-orange-900 hover:text-zinc-100"
             ><PenLine class="size-4"
           /></Button>
           <Button
-            class="aspect-square border border-zinc-800 bg-transparent p-1 text-muted-foreground hover:bg-orange-900 hover:text-zinc-100"
+            class="aspect-square border border-zinc-800 bg-zinc-900 p-1 text-muted-foreground hover:bg-orange-900 hover:text-zinc-100"
             @click="confirmDelete = true"
             ><Trash2 class="size-4"
           /></Button>
@@ -54,7 +56,7 @@
         @change="(event) => onProfileDrop(event, categoryIndex)"
       >
         <template #header>
-          <div class="hideable-header m-2 flex h-12 items-center justify-center">
+          <div class="m-2 hidden h-12 items-center justify-center only:flex">
             <MoreHorizontal class="w-4 text-zinc-600" />
           </div>
         </template>
@@ -155,10 +157,6 @@ const onProfileDrop = (event, categoryIndex) => {
 </script>
 
 <style scoped>
-[data-state='open'] > .chevrot {
-  transform: rotate(90deg);
-}
-
 .hideable-header:not(:only-child) {
   display: none;
 }
diff --git a/src/renderer/src/components/profile/ProfileManager.vue b/src/renderer/src/components/profile/ProfileManager.vue
index 3b2bded..94e3f88 100644
--- a/src/renderer/src/components/profile/ProfileManager.vue
+++ b/src/renderer/src/components/profile/ProfileManager.vue
@@ -37,14 +37,13 @@
               <button
                 v-if="!appStore.showProfileConfig"
                 class="flex aspect-square h-8 items-center justify-center rounded-lg border border-zinc-100 bg-zinc-300 text-black hover:bg-zinc-200"
-                @click="console.log('Add profile not implemented!')"
               >
                 <Plus class="h-4" />
               </button>
             </Transition>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <DropdownMenuItem> Profile </DropdownMenuItem>
+            <DropdownMenuItem @click="deviceStore.createProfile"> Profile </DropdownMenuItem>
             <DropdownMenuItem> Category </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
diff --git a/src/renderer/src/deviceStore.ts b/src/renderer/src/deviceStore.ts
index 29fff83..35d6cd0 100644
--- a/src/renderer/src/deviceStore.ts
+++ b/src/renderer/src/deviceStore.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { useDebounceFn } from '@vueuse/core'
 import { useAppStore } from '@renderer/appStore'
+import { randomName } from '@renderer/randomName'
 
 export interface Profile {
   version: number
@@ -99,6 +100,25 @@ export const useDeviceStore = defineStore('device', {
         nanoIpc.send(this.currentDeviceId!, JSON.stringify({ current: profileName }))
       }
     },
+    createProfile() {
+      let name = randomName()
+      let count = 0
+      while (this.profileNames.includes(name) && count < 10) {
+        name = randomName()
+        count++
+      }
+      if (this.profileNames.includes(name)) {
+        let index = 0
+        while (this.profileNames.includes(`name (${index})`)) {
+          index++
+        }
+        name = `name (${index})`
+      }
+      nanoIpc.send(this.currentDeviceId!, JSON.stringify({ profile: name }))
+      setTimeout(() => {
+        this.selectProfile(name)
+      }, 1000)
+    },
     addProfile(profile: Profile, updateDevice: boolean = true) {
       if (!this.profileNames.includes(profile.name)) {
         this.profileNames.push(profile.name)
diff --git a/src/renderer/src/randomName.ts b/src/renderer/src/randomName.ts
new file mode 100644
index 0000000..f518e16
--- /dev/null
+++ b/src/renderer/src/randomName.ts
@@ -0,0 +1,49 @@
+const firstParts = [
+  'Cyber',
+  'Data',
+  'Hacker',
+  'Net',
+  'Web',
+  'System',
+  'Code',
+  'Crypto',
+  'Info',
+  'Tech',
+  'Haptic',
+  'Virtual',
+  'Quantum',
+  'Zero',
+  'Digital',
+  'Neural',
+  'Space',
+  'Binaris',
+  'Nano',
+  'Micro',
+  'Mega',
+  'Kosro'
+]
+
+const secondParts = [
+  'Punk',
+  'Ninja',
+  'Runner',
+  'Hacker',
+  'Pirate',
+  'Coder',
+  'Geek',
+  'Ghost',
+  'Phreak',
+  'Bot',
+  'Byte',
+  'Link',
+  'Logic',
+  'Storm',
+  'Buster',
+  'Byte'
+]
+
+export const randomName = () => {
+  const first = firstParts[Math.floor(Math.random() * firstParts.length)]
+  const second = secondParts[Math.floor(Math.random() * secondParts.length)]
+  return `${first} ${second}`
+}