ADD: Creating profiles

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>

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">
+      <CollapsibleTrigger class="group flex min-w-0 items-center gap-2">
-        <ChevronRight class="chevrot mb-0.5 ml-4 inline-block size-4 transition-transform" />
+        <ChevronRight
-        {{ categoryName
+          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;
 }

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>

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)

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}`
+}