ADD: Profile properties dialog

src/renderer/src/components/profile/ProfileButton.vue

@@ -82,6 +82,17 @@
       >
         <PenLine class="size-4" />
       </button>
+      <button
+        :class="{
+          'bg-zinc-300 text-black hover:bg-zinc-200': selected,
+          'text-zinc-100 hover:bg-zinc-800': !selected,
+          'group-focus-within:w-12 group-hover:w-12': !editing
+        }"
+        class="flex w-0 shrink-0 items-center justify-center rounded-lg transition-all"
+        @click="dialog?.show"
+      >
+        <Settings class="size-4" />
+      </button>
       <button
         :class="{
           'bg-zinc-300 text-black hover:bg-zinc-200': selected,
@@ -130,23 +141,35 @@
         <X class="size-4" />
       </button>
     </template>
+    <ProfileDialog
+      ref="dialog"
+      :profile="profile"
+      @update:name="(name) => $emit('rename', profile.name, name.toUpperCase())"
+      @update:description="
+        (description) => $emit('description', profile.name, description.toUpperCase())
+      "
+    />
   </div>
 </template>
 <script setup>
-import { Check, Copy, PenLine, Trash2, X, GripHorizontal } from 'lucide-vue-next'
+import { Check, Copy, PenLine, Trash2, X, GripHorizontal, Settings } from 'lucide-vue-next'
 import ScrambleText from '@renderer/components/common/ScrambleText.vue'
 import { nextTick, ref } from 'vue'
+import ProfileDialog from '@renderer/components/profile/ProfileDialog.vue'
 
-defineEmits(['select', 'rename', 'duplicate', 'delete'])
+defineEmits(['select', 'rename', 'description', 'duplicate', 'delete'])
 
 const nameSubmitButton = ref(null)
 
+const dialog = ref(null)
+
 const props = defineProps({
   profile: {
     type: Object,
     default: () => ({
       id: '1234',
-      name: 'PROFILE NAME'
+      name: 'PROFILE NAME',
+      desc: 'PROFILE DESCRIPTION'
     }),
     required: true
   },
@@ -160,7 +183,7 @@ const props = defineProps({
   },
   nameEditable: {
     type: Boolean,
-    default: true
+    default: false
   },
   initEditing: {
     type: Boolean,

src/renderer/src/components/profile/ProfileCategory.vue

@@ -80,6 +80,11 @@
                   }
                 }
               "
+              @description="
+                (profileName, description) => {
+                  deviceStore.updateProfileDescription(profileName, description)
+                }
+              "
               @duplicate="
                 (originalName, profile) => {
                   deviceStore.duplicateProfile(originalName, profile)

src/renderer/src/components/profile/ProfileDialog.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@renderer/components/ui/dialog'
+import { Input } from '@renderer/components/ui/input'
+import { Textarea } from '@renderer/components/ui/textarea'
+import { ref } from 'vue'
+
+const open = ref(false)
+
+const show = () => {
+  open.value = true
+}
+
+const props = defineProps({
+  profile: {
+    type: Object,
+    default: () => ({
+      id: '1234',
+      name: 'PROFILE NAME',
+      desc: 'PROFILE DESCRIPTION'
+    }),
+    required: true
+  }
+})
+
+const nameInput = ref(props.profile.name)
+const descriptionInput = ref(props.profile.desc)
+
+defineExpose({ show })
+defineEmits(['update:name', 'update:description'])
+</script>
+
+<template>
+  <Dialog :open="open" @update:open="(v) => (open = v)">
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Profile properties</DialogTitle>
+      </DialogHeader>
+      <div>
+        <span class="font-mono text-sm text-muted-foreground">Title:</span>
+        <Input
+          v-model="nameInput"
+          class="my-2 uppercase"
+          type="text"
+          @update:model-value="(name) => $emit('update:name', name)"
+        />
+      </div>
+      <div>
+        <span class="font-mono text-sm text-muted-foreground">Description:</span>
+        <Textarea
+          v-model="descriptionInput"
+          maxlength="40"
+          class="my-2 max-h-64 uppercase"
+          @update:model-value="(description) => $emit('update:description', description)"
+        />
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

src/renderer/src/deviceStore.ts

@@ -293,6 +293,23 @@ export const useDeviceStore = defineStore('device', {
         this.setDirtyState(true)
       }
     },
+    updateProfileDescription(
+      profileName: string,
+      description: string,
+      updateDevice: boolean = true
+    ) {
+      const profile = this.profiles.find((p) => p.name === profileName)
+      if (profile) {
+        profile.desc = description
+        if (updateDevice) {
+          nanoIpc.send(
+            this.currentDeviceId!,
+            JSON.stringify({ profile: profileName, updates: { desc: description } })
+          )
+          this.setDirtyState(true)
+        }
+      }
+    },
     detachDevice(deviceId: string) {
       const index = this.attachedDeviceIds.indexOf(deviceId)
       if (index !== -1) {