🛂 Add key-based permission system

src/components/settings/key-card.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { TrashIcon, AlertCircleIcon } from "lucide-vue-next";
+import { ref, watch } from "vue";
+
+const deleteConfirm = ref(false);
+watch(deleteConfirm, (value) => {
+  if (value) {
+    setTimeout(() => (deleteConfirm.value = false), 2000);
+  }
+});
+
+defineProps(["keyData"]);
+defineEmits(["delete"]);
+</script>
+
+<template>
+  <div class="card">
+    <div class="info">
+      <p class="key">{{ keyData.key }}</p>
+      <div class="permissions">
+        <div
+          class="permission"
+          v-for="permission in keyData.permissions"
+          :key="permission"
+        >
+          {{ permission }}
+        </div>
+      </div>
+    </div>
+    <div class="button">
+      <TrashIcon v-if="!deleteConfirm" @click="deleteConfirm = true" />
+      <AlertCircleIcon color="red" v-else @click="$emit('delete')" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  background-color: var(--element-color);
+  border-radius: 10px;
+  display: grid;
+  grid-template-columns: minmax(90%, auto) 50px;
+  align-items: center;
+}
+
+.key {
+  font-family: monospace;
+  font-size: 15px;
+  padding: 15px 10px 0px 10px;
+}
+
+.permissions {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  padding: 5px 10px 0px 10px;
+  user-select: none;
+  max-width: 90%;
+  overflow-x: scroll;
+}
+
+.permission {
+  padding: 10px;
+  background-color: var(--element-color-hover);
+  border-radius: 5px;
+}
+
+.button {
+  margin-right: 20px;
+  cursor: pointer;
+}
+</style>