✨ Add key management to admin settings

src/components/settings/expand-section.vue

@@ -24,5 +24,6 @@ defineProps(["title"]);
   user-select: none;
   font-size: 19px;
   margin: 5px 0px;
+  cursor: pointer;
 }
 </style>

src/components/settings/key-card.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { EditIcon } from "lucide-vue-next";
 import { TrashIcon, AlertCircleIcon } from "lucide-vue-next";
 import { ref, watch } from "vue";
 
@@ -9,14 +10,15 @@ watch(deleteConfirm, (value) => {
   }
 });
 
-defineProps(["keyData"]);
-defineEmits(["delete"]);
+defineProps(["keyData", "edit"]);
+defineEmits(["delete", "edit"]);
 </script>
 
 <template>
   <div class="card">
     <div class="info">
       <p class="key">{{ keyData.key }}</p>
+      <p class="notes" v-if="edit">{{ keyData.notes }}</p>
       <div class="permissions">
         <div
           class="permission"
@@ -28,6 +30,7 @@ defineEmits(["delete"]);
       </div>
     </div>
     <div class="button">
+      <EditIcon v-if="edit" @click="$emit('edit')" />
       <TrashIcon v-if="!deleteConfirm" @click="deleteConfirm = true" />
       <AlertCircleIcon color="red" v-else @click="$emit('delete')" />
     </div>
@@ -49,6 +52,12 @@ defineEmits(["delete"]);
   padding: 15px 10px 0px 10px;
 }
 
+.notes {
+  padding: 0px 10px;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
 .permissions {
   display: flex;
   flex-direction: row;