✨ Blur keys by default

src/components/settings/key-card.vue

@@ -1,6 +1,11 @@
 <script setup>
 import { EditIcon } from "lucide-vue-next";
-import { TrashIcon, AlertCircleIcon } from "lucide-vue-next";
+import {
+  TrashIcon,
+  AlertCircleIcon,
+  EyeIcon,
+  EyeOffIcon,
+} from "lucide-vue-next";
 import { ref, watch } from "vue";
 
 const deleteConfirm = ref(false);
@@ -10,14 +15,22 @@ watch(deleteConfirm, (value) => {
   }
 });
 
-defineProps(["keyData", "edit"]);
+const props = defineProps(["keyData", "edit"]);
 defineEmits(["delete", "edit"]);
+
+const blurKey = ref(!props.edit);
 </script>
 
 <template>
   <div class="card">
     <div class="info">
-      <p class="key">{{ keyData.key }}</p>
+      <div class="key-container">
+        <p class="key" :class="blurKey ? 'blur' : ''">{{ keyData.key }}</p>
+        <div @click="blurKey = !blurKey" class="icons">
+          <EyeIcon v-if="blurKey" :size="18" />
+          <EyeOffIcon v-else :size="18" />
+        </div>
+      </div>
       <p class="notes" v-if="edit">{{ keyData.notes }}</p>
       <div class="permissions">
         <div
@@ -46,10 +59,23 @@ defineEmits(["delete", "edit"]);
   align-items: center;
 }
 
+.key-container {
+  padding: 15px 10px 0px 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+}
+
 .key {
   font-family: monospace;
   font-size: 15px;
-  padding: 15px 10px 0px 10px;
+  transition: 0.3s filter;
+}
+
+.key.blur {
+  filter: blur(8px);
+  user-select: none;
 }
 
 .notes {
@@ -78,4 +104,11 @@ defineEmits(["delete", "edit"]);
   margin-right: 20px;
   cursor: pointer;
 }
+
+.icons {
+  cursor: pointer;
+  opacity: 0.6;
+  display: flex;
+  align-items: center;
+}
 </style>