From 58968d458e1b72517b233436ee818b8a27b13e5f Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Fri, 9 Feb 2024 11:52:32 +0100
Subject: [PATCH] ADD: Profile/category add button mock

---
 src/components/navbar/Navbar.vue          |  2 +-
 src/components/profile/ProfileManager.vue | 33 ++++++++++++++++-------
 src/lang/en.json                          |  4 +--
 3 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index d20eaa8..0f074fe 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -43,7 +43,7 @@
               <MenubarShortcut>⌘N</MenubarShortcut>
             </MenubarItem>
             <MenubarSeparator />
-            <MenubarItem class="flex justify-between" @click.prevent="store.cycleScreenOrientation">
+            <MenubarItem class="flex justify-between" @click="store.cycleScreenOrientation">
               <p>Orientation: </p>
               <p>{{ store.screenOrientation }}°</p>
             </MenubarItem>
diff --git a/src/components/profile/ProfileManager.vue b/src/components/profile/ProfileManager.vue
index 2cbc284..9c10521 100644
--- a/src/components/profile/ProfileManager.vue
+++ b/src/components/profile/ProfileManager.vue
@@ -3,7 +3,9 @@
     <div>
       <div
         class="w-full h-12 px-4 flex items-center justify-between flex-nowrap text-nowrap bg-zinc-900">
-        <button class="flex flex-1 items-center h-full min-w-0 font-heading" @click="showProfileConfig=store.selectedProfile && !showProfileConfig">
+        <button
+          class="flex flex-1 items-center h-full min-w-0 font-heading"
+          @click="showProfileConfig=store.selectedProfile && !showProfileConfig">
           <component :is="showProfileConfig ? ArrowLeft : List" class="w-5 h-full mr-1 shrink-0" />
           <ScrambleText
             :text="showProfileConfig ? store.selectedProfile?.name : $t('profiles.title')"
@@ -15,14 +17,26 @@
             :delay="500"
             :text="`(${store.profiles.length}/${ maxProfiles})`" />
         </button>
-        <Transition name="fade">
-          <button
-            v-if="!showProfileConfig"
-            class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-lg h-8 aspect-square flex justify-center items-center"
-            @click="store.addProfile">
-            <Plus class="h-4" />
-          </button>
-        </Transition>
+        <DropdownMenu>
+          <DropdownMenuTrigger>
+            <Transition name="fade">
+              <button
+                v-if="!showProfileConfig"
+                class="bg-zinc-200 text-black hover:bg-zinc-100 rounded-lg h-8 aspect-square flex justify-center items-center"
+                @click="store.addProfile">
+                <Plus class="h-4" />
+              </button>
+            </Transition>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem>
+              Profile
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              Category
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
       <Separator />
     </div>
@@ -99,6 +113,7 @@ import { useStore } from '@/store.js'
 import ProfileButton from '@/components/profile/ProfileButton.vue'
 import ProfileConfig from '@/components/profile/ProfileConfig.vue'
 import draggable from 'vuedraggable'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
 
 defineProps({
   showFilter: {
diff --git a/src/lang/en.json b/src/lang/en.json
index 900b84a..46f63c6 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -90,8 +90,8 @@
       "about": "About Device",
       "connect": "Connect",
       "disconnect": "Disconnect",
-      "export": "Export Profiles",
-      "import": "Import Profiles",
+      "export": "Export Settings",
+      "import": "Import Settings",
       "preferences": "Preferences",
       "quit": "Quit",
       "title": "Device"