@necrolab/dashboard 0.5.12 → 0.5.13

package/src/assets/css/main.scss

@@ -12,6 +12,7 @@
 @use "components/toasts";
 @use "components/modals";
 @use "components/tables";
+@use "components/search-groups";
 
 /* ==========================================================================
    BODY LAYOUT & BACKGROUND
@@ -51,10 +52,6 @@ body {
     }
 }
 
-img {
-    pointer-events: none;
-}
-
 /* Global icon color consistency */
 svg {
     color: oklch(0.9 0 0) !important;
@@ -199,19 +196,6 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
     }
 }
 
-/* ==========================================================================
-   SCROLLBAR UTILITIES
-   ========================================================================== */
-
-.hidden-scrollbars {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}
-
 /* ==========================================================================
    DYNAMIC HEIGHTS & RESPONSIVE DESIGN
    ========================================================================== */
@@ -270,20 +254,10 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 }
 
 /* ==========================================================================
-   MOBILE RESPONSIVE OPTIMIZATIONS
+   STATUS INDICATOR RESPONSIVE SIZES
    ========================================================================== */
 
 @screen md {
-    .btn-primary,
-    .btn-secondary {
-        @apply px-3 py-1.5 text-sm;
-    }
-
-    .btn-action {
-        @apply h-12 px-6 text-sm;
-        min-height: 48px;
-    }
-
     .status-indicator {
         width: 6px;
         height: 6px;
@@ -293,13 +267,6 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
 }
 
 @screen mobile-portrait {
-    .btn-action {
-        @apply h-14 px-8 text-base;
-        min-height: 56px;
-        font-weight: 600;
-        border-radius: 8px;
-    }
-
     .status-indicator {
         width: 5px;
         height: 5px;
@@ -307,11 +274,3 @@ svg:not([stroke]):not([fill="none"]) polygon:not([fill]) {
         min-height: 5px;
     }
 }
-
-@screen mobile-landscape {
-    .btn-action {
-        @apply h-14 px-8 text-base;
-        min-height: 56px;
-        font-weight: 600;
-    }
-}

package/src/components/Editors/Account/Account.vue

@@ -11,22 +11,17 @@
                 class="ml-0 mr-4"
                 :toggled="props.account.selected"
                 @valueUpdate="ui.toggleAccountSelected(props.account.id)" />
-            <h4 class="mx-auto text-white" @click="copy(props.account.email)">
+            <h4 class="mx-auto text-white" @click="copy(props.account.email, 'Copied email')">
                 {{ props.account.email }}
             </h4>
         </div>
-        <div class="col-span-2 hidden md:block" @click="copy(props.account.password)">
+        <div class="col-span-2 hidden md:block" @click="copy(props.account.password, 'Copied password')">
             <h4 class="text-white">
                 {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
             </h4>
         </div>
-        <div class="col-span-1">
-            <div v-if="props.account.enabled" class="enabled-badge">
-                <CheckmarkIcon class="w-3.5 h-3.5" />
-            </div>
-            <div v-else class="disabled-badge">
-                <CloseXIcon class="w-3.5 h-3.5" />
-            </div>
+        <div class="col-span-1 flex justify-center">
+            <StatusBadge :enabled="props.account.enabled" size="small" />
         </div>
 
         <div class="col-span-1 hidden lg:block">
@@ -36,7 +31,7 @@
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="account-buttons">
+            <ActionButtonGroup>
                 <li>
                     <button @click="edit">
                         <EditIcon />
@@ -52,203 +47,33 @@
                         <img class="h-4 w-4" src="/img/controls/enable.svg" />
                     </button>
                 </li>
-            </ul>
+            </ActionButtonGroup>
         </div>
     </Row>
 </template>
 <style lang="scss" scoped>
-.enabled-badge {
-    @apply flex items-center justify-center mx-auto rounded-full;
-    background: oklch(0.72 0.15 145 / 0.12);
-    border: 1.5px solid oklch(0.72 0.15 145);
-    width: 24px;
-    height: 24px;
-    padding: 0;
-
-    svg {
-        color: oklch(0.72 0.15 145) !important;
-        width: 12px !important;
-        height: auto !important;
-        max-height: 12px !important;
-        display: block;
-        margin: 0;
-    }
-
-    svg path {
-        stroke: oklch(0.72 0.15 145) !important;
-        fill: oklch(0.72 0.15 145) !important;
-    }
-}
-
-.disabled-badge {
-    @apply flex items-center justify-center mx-auto rounded-full;
-    background: oklch(0.60 0.20 25 / 0.12);
-    border: 1.5px solid oklch(0.60 0.20 25);
-    width: 24px;
-    height: 24px;
-    padding: 0;
-    color: oklch(0.60 0.20 25) !important;
-
-    svg {
-        color: oklch(0.60 0.20 25) !important;
-        width: 12px !important;
-        height: 12px !important;
-        display: block;
-        margin: 0;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-
-    svg path {
-        stroke: oklch(0.60 0.20 25) !important;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-}
-
 h4 {
     @apply text-center;
 }
-.account-buttons {
-    @apply mx-auto flex items-center justify-center rounded;
-    background: oklch(0.2046 0 0);
-    border: 2px solid oklch(0.2809 0 0);
-    padding: 3px;
-    gap: 2px;
-    flex-shrink: 0;
-    overflow: visible;
-
-    button {
-        @apply relative flex items-center justify-center rounded border-0 outline-0 transition-all duration-150;
-        background: transparent;
-        width: 28px;
-        height: 28px;
-        color: oklch(0.90 0 0);
-        border-radius: 6px;
-
-        &:hover {
-            background: oklch(0.72 0.15 145 / 0.15);
-            color: oklch(1 0 0);
-        }
-
-        &:active {
-            background: oklch(0.72 0.15 145 / 0.25);
-        }
-    }
-
-    svg,
-    img {
-        width: 16px;
-        height: 16px;
-        position: relative;
-        z-index: 1;
-    }
-
-    svg path {
-        fill: currentColor;
-    }
-}
-
-// Tablet sizing - medium buttons
-@media (min-width: 768px) and (max-width: 1023px) {
-    .account-buttons {
-        padding: 2px;
-        gap: 1px;
-        border-radius: 6px;
-
-        button {
-            width: 26px;
-            height: 26px;
-            border-radius: 5px;
-        }
-
-        svg,
-        img {
-            width: 14px;
-            height: 14px;
-        }
-    }
-}
-
-// Desktop sizing - large buttons
-@media (min-width: 1024px) {
-    .account-buttons {
-        padding: 3px;
-        gap: 2px;
-        border-radius: 8px;
-
-        button {
-            width: 28px;
-            height: 28px;
-            border-radius: 6px;
-        }
-
-        svg,
-        img {
-            width: 16px;
-            height: 16px;
-        }
-    }
-}
-
-// Mobile specific styling
-@media (max-width: 640px) {
-    .account-buttons {
-        padding: 1px;
-        gap: 1px;
-        border-radius: 4px;
-        border: 2px solid oklch(0.2809 0 0) !important;
-        max-width: 100%;
-        min-height: 28px;
-        height: auto;
-        flex-wrap: wrap;
-        justify-content: center;
-        align-items: center;
-        background: oklch(0.2046 0 0);
-
-        button {
-            width: 20px;
-            height: 20px;
-            border-radius: 3px;
-            min-width: 20px;
-            border: none !important;
-            flex-shrink: 0;
-            margin: 0.5px;
-            background: transparent;
-
-            &:hover {
-                background: oklch(0.72 0.15 145 / 0.15);
-            }
-
-            &:active {
-                background: oklch(0.72 0.15 145 / 0.25);
-            }
-        }
-
-        svg,
-        img {
-            width: 12px;
-            height: 12px;
-        }
-    }
-}
 </style>
 <script setup>
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, CheckmarkIcon, CloseXIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import StatusBadge from "@/components/ui/StatusBadge.vue";
+import ActionButtonGroup from "@/components/ui/ActionButtonGroup.vue";
 import { useUIStore } from "@/stores/ui";
 import TagLabel from "@/components/Editors/TagLabel.vue";
+import { useRowSelection } from "@/composables/useRowSelection";
+import { useCopyToClipboard } from "@/composables/useCopyToClipboard";
 
 const ui = useUIStore();
+const { copy } = useCopyToClipboard();
 
 const props = defineProps({
     account: { type: Object }
 });
 
-const copy = (txt) => {
-    if (!txt) return;
-    navigator.clipboard.writeText(txt);
-    ui.showSuccess("Copied text");
-};
 const enable = async () => await ui.addAccount({ ...props.account, enabled: true });
 const disable = async () => await ui.addAccount({ ...props.account, enabled: false });
 const edit = () => {
@@ -257,38 +82,7 @@ const edit = () => {
 };
 
 // Double-click/tap selection
-let lastTapTime = 0;
-const DOUBLE_TAP_DELAY = 300; // ms
-
-const handleDoubleClick = (event) => {
-    // Prevent if clicking on buttons or checkbox
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-        return;
-    }
+const { handleDoubleClick, handleTouchStart, handleTouchEnd } = useRowSelection(() => {
     ui.toggleAccountSelected(props.account.id);
-};
-
-const handleTouchStart = (event) => {
-    // Store touch time for double-tap detection
-    const currentTime = Date.now();
-    const tapGap = currentTime - lastTapTime;
-
-    if (tapGap < DOUBLE_TAP_DELAY && tapGap > 0) {
-        // Double-tap detected
-        if (!event.target.closest('button') && !event.target.closest('.checkbox')) {
-            event.preventDefault(); // Prevent zoom
-            ui.toggleAccountSelected(props.account.id);
-        }
-    }
-
-    lastTapTime = currentTime;
-};
-
-const handleTouchEnd = (event) => {
-    // Prevent default to avoid potential zoom issues
-    // but only if not interacting with buttons/checkbox
-    if (event.target.closest('button') || event.target.closest('.checkbox')) {
-        return;
-    }
-};
+});
 </script>

package/src/components/Editors/Account/AccountCreator.vue

@@ -127,10 +127,6 @@
     border-color: oklch(0.28 0 0);
     box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
 }
-
-.z-inf {
-    z-index: 99999999999999;
-}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";

package/src/components/Editors/Account/AccountView.vue

@@ -66,7 +66,6 @@ h4 {
 }
 
 .empty-state {
-    color: #969696;
     font-size: 14px;
     font-weight: 500;
 }

package/src/components/Editors/Account/CreateAccount.vue

@@ -9,7 +9,7 @@
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
                 <!-- Account tag -->
-                <div class="input-wrapper relative-positioned z-tooltip col-span-4">
+                <div class="input-wrapper col-span-4">
                     <label class="label-override mb-2">
                         Account Tag
                         <TagIcon />
@@ -25,44 +25,32 @@
                 </div>
 
                 <!-- Email -->
-                <div class="input-wrapper z-0 col-span-8">
-                    <label class="label-override mb-2">
-                        Email
-                        <MailIcon />
-                    </label>
-                    <div :class="`input-default required ${errors.includes('email') ? 'error' : ''}`">
-                        <input
-                            placeholder="email@example.com"
-                            type="email"
-                            v-model="account.email"
-                            required
-                            autocomplete="new-password"
-                            name="not-email-field-random-12345"
-                            data-dashlane-rid=""
-                            data-dashlane-label=""
-                            data-dashlane-classification=""
-                            data-form-type="other"
-                            role="textbox"
-                            inputmode="email" />
-                    </div>
-                </div>
+                <FormField label="Email" :icon="MailIcon" required :error="errors.includes('email')" z-index="0" class="col-span-8">
+                    <input
+                        placeholder="email@example.com"
+                        type="email"
+                        v-model="account.email"
+                        required
+                        autocomplete="new-password"
+                        name="not-email-field-random-12345"
+                        data-dashlane-rid=""
+                        data-dashlane-label=""
+                        data-dashlane-classification=""
+                        data-form-type="other"
+                        role="textbox"
+                        inputmode="email" />
+                </FormField>
 
                 <!-- Password -->
-                <div class="input-wrapper z-0 col-span-12">
-                    <label class="label-override mb-2">
-                        Password
-                        <KeyIcon />
-                    </label>
-                    <div :class="`input-default required ${errors.includes('password') ? 'error' : ''}`">
-                        <input
-                            placeholder="***********"
-                            type="password"
-                            v-model="account.password"
-                            required
-                            autocomplete="off"
-                            name="account_password_disableautocomplete" />
-                    </div>
-                </div>
+                <FormField label="Password" :icon="KeyIcon" required :error="errors.includes('password')" z-index="0" class="col-span-12">
+                    <input
+                        placeholder="***********"
+                        type="password"
+                        v-model="account.password"
+                        required
+                        autocomplete="off"
+                        name="account_password_disableautocomplete" />
+                </FormField>
             </div>
 
             <!-- Readonly fields when editing -->
@@ -76,12 +64,7 @@
                 <div class="col-span-6">
                     <label class="label-override mb-2">Status</label>
                     <div class="flex items-center gap-3 h-10">
-                        <div v-if="ui.currentlyEditing.enabled" class="enabled-badge-large">
-                            <CheckmarkIcon />
-                        </div>
-                        <div v-else class="disabled-badge-large">
-                            <CloseXIcon />
-                        </div>
+                        <StatusBadge :enabled="ui.currentlyEditing.enabled" size="large" />
                         <span class="text-sm font-medium" :class="ui.currentlyEditing.enabled ? 'text-green-400' : 'text-red-400'">
                             {{ ui.currentlyEditing.enabled ? 'Enabled' : 'Disabled' }}
                         </span>
@@ -99,75 +82,22 @@
     </Modal>
 </template>
 <style lang="scss" scoped>
-.enabled-badge-large {
-    @apply flex items-center justify-center rounded-full;
-    background: oklch(0.72 0.15 145 / 0.12);
-    border: 1.5px solid oklch(0.72 0.15 145);
-    width: 26px;
-    height: 26px;
-    padding: 0;
-
-    svg {
-        color: oklch(0.72 0.15 145) !important;
-        width: 14px !important;
-        height: auto !important;
-        max-height: 14px !important;
-        display: block;
-        margin: 0;
-    }
-
-    svg path {
-        stroke: oklch(0.72 0.15 145) !important;
-        fill: oklch(0.72 0.15 145) !important;
-    }
-}
-
-.disabled-badge-large {
-    @apply flex items-center justify-center rounded-full;
-    background: oklch(0.60 0.20 25 / 0.12);
-    border: 1.5px solid oklch(0.60 0.20 25);
-    width: 26px;
-    height: 26px;
-    padding: 0;
-    color: oklch(0.60 0.20 25) !important;
+.label-override {
+    @apply flex items-center;
+    color: #e1e1e4 !important;
 
     svg {
-        color: oklch(0.60 0.20 25) !important;
-        width: 14px !important;
-        height: 14px !important;
-        display: block;
-        margin: 0;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-
-    svg path {
-        stroke: oklch(0.60 0.20 25) !important;
-        fill: oklch(0.60 0.20 25) !important;
-    }
-}
+        @apply ml-2;
 
-.input-wrapper {
-    label {
-        @apply flex;
+        path {
+            fill: #e1e1e4 !important;
+        }
     }
 }
-.z-0 {
-    z-index: 0 !important;
-}
-.z-1 {
-    z-index: 1 !important;
-}
-.z-2 {
-    z-index: 2 !important;
-}
-
-.error {
-    border-width: 2px !important;
-    border-color: rgb(238 130 130) !important;
-}
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
+import FormField from "@/components/ui/FormField.vue";
 import {
     EditIcon,
     MailIcon,
@@ -176,12 +106,11 @@ import {
     TimerIcon,
     SandclockIcon,
     TagIcon,
-    ScannerIcon,
-    CheckmarkIcon,
-    CloseXIcon
+    ScannerIcon
 } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import StatusBadge from "@/components/ui/StatusBadge.vue";
 import TagLabel from "@/components/Editors/TagLabel.vue";
 
 import { ref } from "vue";