@necrolab/dashboard 0.5.15 → 0.5.16

package/src/components/Auth/LoginForm.vue

@@ -1,41 +1,26 @@
 <template>
     <div class="form-section">
         <!-- Username -->
-        <div class="input-container mb-3">
+        <div class="form-field-labeled mb-3">
             <div class="flex items-center gap-2">
                 <ProfileIcon class="w-4 h-4" />
                 <span class="text-light-300 font-medium text-sm">Username</span>
             </div>
             <div class="flex-1 flex items-center">
-                <input
-                    type="text"
-                    class="login-input"
-                    v-model="user"
-                    autocapitalize="off"
-                    autocorrect="off"
-                    autocomplete="username"
-                />
+                <input type="text" class="form-input-minimal" v-model="user" autocapitalize="off" autocorrect="off" autocomplete="username" aria-label="Username" />
             </div>
         </div>
         <!-- Password -->
-        <div class="input-container mb-4">
+        <div class="form-field-labeled mb-4">
             <div class="flex items-center gap-2">
                 <KeyIcon class="w-4 h-4" />
                 <span class="text-light-300 font-medium text-sm">Password</span>
             </div>
             <div class="flex-1 flex items-center">
-                <input
-                    type="password"
-                    class="login-input"
-                    v-model="password"
-                />
+                <input type="password" class="form-input-minimal" v-model="password" aria-label="Password" />
             </div>
         </div>
-        <button
-            class="login-btn mt-6 mx-auto"
-            @click="login()"
-            :disabled="buttonDisabled"
-        >
+        <button class="login-btn w-48 mt-6 mx-auto" @click="login()" :disabled="buttonDisabled">
             <span v-if="!buttonDisabled">Login</span>
             <svg v-if="!buttonDisabled" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-5 h-5">
                 <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4M10 17l5-5-5-5M13.8 12H3"/>
@@ -68,67 +53,3 @@ async function login() {
     buttonDisabled.value = false;
 }
 </script>
-
-<style lang="scss" scoped>
-.login-btn {
-    @apply flex items-center justify-center gap-2 rounded-lg transition-all duration-150;
-    background: oklch(0.72 0.15 145);
-    border: 2px solid oklch(0.72 0.15 145);
-    color: oklch(1 0 0);
-    height: 3rem;
-    width: 12rem;
-    font-size: 0.9375rem;
-    font-weight: 600;
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-
-    &:hover:not(:disabled) {
-        background: oklch(0.68 0.15 145);
-        border-color: oklch(0.68 0.15 145);
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px oklch(0.72 0.15 145 / 0.3);
-    }
-
-    &:active:not(:disabled) {
-        transform: translateY(0);
-        box-shadow: 0 2px 4px oklch(0.72 0.15 145 / 0.2);
-    }
-
-    &:disabled {
-        opacity: 0.7;
-        cursor: not-allowed;
-    }
-}
-
-.input-container {
-    @apply text-white bg-dark-500 px-3 rounded-lg border-2 border-dark-550 flex items-center justify-between h-11;
-    overflow: visible;
-    transition: border-color 0.15s ease;
-
-    &:hover {
-        border-color: oklch(0.30 0 0);
-    }
-
-    &:focus-within {
-        border-color: oklch(0.72 0.15 145) !important;
-        outline: 1px solid oklch(0.72 0.15 145);
-        outline-offset: 0;
-    }
-}
-
-.login-input {
-    @apply w-full h-full text-sm text-white bg-transparent border-0 outline-none px-2 py-1;
-
-    &:focus {
-        @apply outline-none border-0 shadow-none bg-transparent;
-    }
-
-    &:hover:not(:focus) {
-        background: transparent;
-    }
-
-    &::placeholder {
-        color: oklch(0.50 0 0);
-    }
-}
-</style>

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

@@ -11,12 +11,12 @@
                 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, 'Copied email')">
+            <h4 class="mx-auto text-center 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, 'Copied password')">
-            <h4 class="text-white">
+            <h4 class="text-center text-white">
                 {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
             </h4>
         </div>
@@ -25,7 +25,7 @@
         </div>
 
         <div class="col-span-1 hidden lg:block">
-            <h4 class="flex justify-center gap-1 text-white">
+            <h4 class="flex justify-center gap-1 text-center text-white">
                 <TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
             </h4>
         </div>
@@ -51,14 +51,9 @@
         </div>
     </Row>
 </template>
-<style lang="scss" scoped>
-h4 {
-    @apply text-center;
-}
-</style>
 <script setup>
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import { 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";
@@ -71,7 +66,10 @@ const ui = useUIStore();
 const { copy } = useCopyToClipboard();
 
 const props = defineProps({
-    account: { type: Object }
+    account: {
+        type: Object,
+        required: true
+    }
 });
 
 const enable = async () => await ui.addAccount({ ...props.account, enabled: true });

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

@@ -8,7 +8,7 @@
         <div>
             <div class="form-grid mb-4 mt-7">
                 <div class="input-wrapper relative-positioned z-tooltip col-span-8">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Account Tag
                         <TagIcon />
                     </label>
@@ -23,11 +23,11 @@
                 </div>
 
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Threads
                         <EditIcon />
                     </label>
-                    <div :class="`input-default ${errors.includes('threads') ? 'error' : ''}`">
+                    <div :class="`input-default ${errors.includes('threads') ? 'border-2 border-error-300' : ''}`">
                         <input placeholder="1" type="number" min="1" max="50" v-model="creatorConfig.threads" />
                         <div class="input-incrementer">
                             <button @click="creatorConfig.threads++">
@@ -40,20 +40,20 @@
                     </div>
                 </div>
                 <div class="input-wrapper col-span-8">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Email catchall
                         <MailIcon />
                     </label>
-                    <div :class="`input-default ${errors.includes('catchall') ? 'error' : ''}`">
+                    <div :class="`input-default ${errors.includes('catchall') ? 'border-2 border-error-300' : ''}`">
                         <input placeholder="example.com" v-model="creatorConfig.catchall" />
                     </div>
                 </div>
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Catchall amount
                         <BagIcon />
                     </label>
-                    <div :class="`input-default ${errors.includes('number') ? 'error' : ''}`">
+                    <div :class="`input-default ${errors.includes('number') ? 'border-2 border-error-300' : ''}`">
                         <input placeholder="1" type="number" min="0" max="5000" v-model="creatorConfig.number" />
                         <div class="input-incrementer">
                             <button @click="creatorConfig.number++">
@@ -66,71 +66,28 @@
                     </div>
                 </div>
                 <div class="input-wrapper col-span-12">
-                    <label class="label-override mb-2">
+                    <label class="label-override mb-2 flex">
                         Emails
                         <MailIcon />
                     </label>
-                    <div :class="`${errors.includes('emails') ? 'error-border' : ''}`">
-                        <textarea
-                            v-model="creatorConfig.emails"
-                            class="proxy-editor"
-                            spellcheck="false"
-                            style="max-height: 250px; min-height: 150px"
-                            placeholder="Enter emails here - One per line"></textarea>
-                    </div>
+                    <textarea
+                        v-model="creatorConfig.emails"
+                        :class="['textarea-emails', errors.includes('emails') && 'textarea-error']"
+                        spellcheck="false"
+                        style="max-height: 250px; min-height: 150px; line-height: 1.6; tab-size: 4; font-family: 'JetBrains Mono', 'Fira Code', 'Menlo', 'Monaco', 'Courier New', monospace"
+                        placeholder="Enter emails here - One per line"></textarea>
                 </div>
             </div>
-            <button
-                class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
-                @click="done()">
+            <button class="btn-modal ml-auto mt-4" @click="done()">
                 Start
                 <EditIcon />
             </button>
         </div>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.input-wrapper {
-    label {
-        @apply flex;
-    }
-}
-.error {
-    border-width: 2px !important;
-    border-color: rgb(238 130 130) !important;
-}
-
-.error-border {
-    border: 2px solid rgb(238 130 130) !important;
-    border-radius: 8px;
-}
-
-/* Proxy editor styles */
-.proxy-editor {
-    width: 100%;
-    background-color: oklch(0.19 0 0);
-    color: oklch(0.90 0 0);
-    font-family: "JetBrains Mono", "Fira Code", "Menlo", "Monaco", "Courier New", monospace;
-    padding: 12px;
-    border: none;
-    resize: none;
-    font-size: 14px;
-    line-height: 1.6;
-    tab-size: 4;
-    outline: none;
-    border: 1px solid oklch(0.26 0 0);
-    border-radius: 8px;
-    overflow: auto;
-}
-
-.proxy-editor:focus {
-    border-color: oklch(0.28 0 0);
-    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon, TagIcon, SpinnerIcon, UpIcon, DownIcon, MailIcon, BagIcon } from "@/components/icons";
+import { EditIcon, TagIcon, UpIcon, DownIcon, MailIcon, BagIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
 
@@ -168,3 +125,15 @@ function done() {
     ui.createAcconts(creatorConfig.value);
 }
 </script>
+<style scoped>
+.textarea-emails {
+    @apply w-full rounded border bg-dark-350 p-3 font-mono text-light-300;
+    @apply outline-none resize-none overflow-auto text-sm;
+    @apply border border-dark-550 hover:border-dark-650;
+    @apply focus:border-dark-700 focus:shadow-focus-ring;
+}
+
+.textarea-error {
+    @apply border-2 border-error-300 hover:border-error-300;
+}
+</style>

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

@@ -1,94 +1,71 @@
 <template>
-    <Table>
-        <Header class="sticky top-0 z-10 grid-cols-5 bg-dark-400 text-center md:grid-cols-7">
-            <div class="col-span-3 flex lg:col-span-2">
+    <div class="table-component relative box-border flex flex-col rounded-lg bg-dark-500 bg-clip-padding overflow-hidden shadow-sm">
+        <Header class="sticky top-0 z-10 grid-cols-5 text-center md:grid-cols-7">
+            <div class="col-span-3 flex items-center justify-start lg:col-span-2">
                 <Checkbox
-                    class="mr-3"
+                    class="ml-2 mr-4 flex-shrink-0"
                     :toggled="ui.mainCheckbox.accounts"
                     @valueUpdate="ui.toggleMainCheckbox('accounts')"
                     :isHeader="true" />
-                <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
+                <div class="mx-auto flex cursor-pointer items-center" @click="ui.toggleSort('eventId')">
                     <MailIcon class="mr-0 h-4 w-4 md:mr-3" />
-                    <h4 class="hidden md:flex">Email</h4>
+                    <h4 class="hidden text-white md:flex">Email</h4>
                 </div>
             </div>
             <div class="col-span-2 hidden items-center justify-center md:flex" v-once>
                 <KeyIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Password</h4>
+                <h4 class="hidden text-white md:flex">Password</h4>
             </div>
-            <div class="col-span-1 flex items-center justify-center" v-once>
+            <div class="grid-cell-center" v-once>
                 <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Enabled</h4>
+                <h4 class="hidden text-white md:flex">Enabled</h4>
             </div>
             <div class="col-span-1 hidden items-center justify-center lg:flex" v-once>
                 <TicketIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Tags</h4>
+                <h4 class="hidden text-white md:flex">Tags</h4>
             </div>
-            <div class="col-span-1 flex items-center justify-center" v-once>
+            <div class="grid-cell-center" v-once>
                 <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
-                <h4 class="hidden md:flex">Actions</h4>
+                <h4 class="hidden text-white md:flex">Actions</h4>
             </div>
         </Header>
         <div
             v-if="toRender.length != 0"
-            class="hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
+            class="hidden-scrollbars flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden transition-colors duration-150 table-scroll"
             :style="{ maxHeight: dynamicTableHeight }">
-            <div v-for="(account, i) in toRender" :key="account.id || account.index" class="account-row-container">
+            <div
+                v-for="(account, i) in toRender"
+                :key="account.id || account.index"
+                class="min-h-16 flex-shrink-0 hover:bg-dark-550">
                 <Account
                     :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
                     :account="account" />
             </div>
         </div>
-        <div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
-            <MailIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
-            <p class="text-sm text-light-400">No accounts found</p>
-            <p class="mt-1 text-xs text-light-500">Create accounts to get started</p>
-        </div>
-    </Table>
+        <EmptyState v-else :icon="MailIcon" message="No accounts found" subtitle="Create accounts to get started" />
+    </div>
 </template>
-<style lang="scss" scoped>
-.account-row-container {
-    min-height: 64px;
-    flex-shrink: 0;
-    transition: background-color 0.15s ease;
-
-    &:hover {
-        @apply bg-dark-550 !important;
-    }
-}
-
-h4 {
-    @apply text-white;
-}
-
-.stop-pan {
-    touch-action: pan-y pan-up pan-down;
-}
-
-.empty-state {
-    font-size: 14px;
-    font-weight: 500;
-}
-</style>
 <script setup>
-import { Table, Header } from "@/components/Table";
+import { Header } from "@/components/Table";
 import {
-    EventIcon,
     TicketIcon,
-    StatusIcon,
     ClickIcon,
-    DownIcon,
     MailIcon,
     KeyIcon,
     CheckmarkIcon
 } from "@/components/icons";
 import Account from "./Account.vue";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
+import EmptyState from "@/components/ui/EmptyState.vue";
 import { useUIStore } from "@/stores/ui";
-import { computed, ref, onMounted, onUnmounted } from "vue";
+import { useDynamicTableHeight } from "@/composables/useDynamicTableHeight";
+import { computed, ref } from "vue";
 
 const props = defineProps({
-    accounts: { type: Object }
+    accounts: {
+        type: Object,
+        required: true
+    }
 });
 const ui = useUIStore();
 
@@ -110,43 +87,18 @@ const toRender = computed(() => {
     return rendered;
 });
 
-// Dynamic height calculation for perfect item fitting
-const windowHeight = ref(window.innerHeight);
-const windowWidth = ref(window.innerWidth);
-
-const updateDimensions = () => {
-    windowHeight.value = window.innerHeight;
-    windowWidth.value = window.innerWidth;
+// Layout constants for dynamic table height calculation
+const LAYOUT_CONSTANTS = {
+    TOP_RESERVED_SPACE: 180, // Page header + search controls + gaps (router-wrapper handles navbar, no UTILS section)
+    BOTTOM_BUFFER: 50, // Margin at bottom to prevent overflow
+    ROW_HEIGHT: 64, // Account row height in pixels
+    MIN_ROWS_TO_SHOW: 2 // Minimum number of rows to display
 };
 
-onMounted(() => {
-    window.addEventListener("resize", updateDimensions);
-});
-
-onUnmounted(() => {
-    window.removeEventListener("resize", updateDimensions);
-});
-
-const dynamicTableHeight = computed(() => {
-    // Calculate available space for accounts table with conservative buffer
-    const headerHeight = 60; // Header + navbar
-    const titleHeight = 50; // Accounts title and controls
-    const searchHeight = 50; // Search and filter controls
-    const margins = windowWidth.value >= 1024 ? 40 : 25;
-    const bufferSpace = 50; // Conservative buffer to prevent partial items
-
-    const totalUsedSpace = headerHeight + titleHeight + searchHeight + margins + bufferSpace;
-    const availableHeight = windowHeight.value - totalUsedSpace;
-
-    // Account row height is always 64px
-    const rowHeight = 64;
-    const minRowsToShow = 2;
-    const minHeight = minRowsToShow * rowHeight;
-
-    // Calculate exact number of complete rows that fit with conservative approach
-    const maxCompleteRows = Math.floor(Math.max(availableHeight, minHeight) / rowHeight);
-    const exactHeight = maxCompleteRows * rowHeight;
-
-    return exactHeight + "px";
+const { dynamicTableHeight } = useDynamicTableHeight({
+    topReservedSpace: LAYOUT_CONSTANTS.TOP_RESERVED_SPACE,
+    bottomBuffer: LAYOUT_CONSTANTS.BOTTOM_BUFFER,
+    rowHeight: LAYOUT_CONSTANTS.ROW_HEIGHT,
+    minRowsToShow: LAYOUT_CONSTANTS.MIN_ROWS_TO_SHOW
 });
 </script>

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

@@ -9,11 +9,7 @@
         <div>
             <div class="my-3 grid grid-cols-12 gap-3">
                 <!-- Account tag -->
-                <div class="input-wrapper col-span-4">
-                    <label class="label-override mb-2">
-                        Account Tag
-                        <TagIcon />
-                    </label>
+                <FormField label="Account Tag" :icon="TagIcon" z-index="0" class="col-span-12 md:col-span-4" noWrapper>
                     <Dropdown
                         :class="`input-default dropdown w-full p-4`"
                         :default="ui.profile.tags[0]"
@@ -22,10 +18,10 @@
                         :capitalize="true"
                         :allowDefault="false"
                         :chosen="account.tag" />
-                </div>
+                </FormField>
 
                 <!-- Email -->
-                <FormField label="Email" :icon="MailIcon" required :error="errors.includes('email')" z-index="0" class="col-span-8">
+                <FormField label="Email" :icon="MailIcon" required :error="errors.includes('email')" z-index="0" class="col-span-12 md:col-span-8">
                     <input
                         placeholder="email@example.com"
                         type="email"
@@ -54,47 +50,15 @@
             </div>
 
             <!-- Readonly fields when editing -->
-            <div v-if="ui.currentlyEditing?.email" class="mt-6 grid grid-cols-12 gap-3 pt-4 border-t border-dark-600">
-                <div v-if="ui.currentlyEditing.tags && ui.currentlyEditing.tags.length > 0" class="col-span-6">
-                    <label class="label-override mb-2">Tags</label>
-                    <div class="flex gap-2 flex-wrap">
-                        <TagLabel v-for="tag in ui.currentlyEditing.tags" :key="tag" :text="tag" />
-                    </div>
-                </div>
-                <div class="col-span-6">
-                    <label class="label-override mb-2">Status</label>
-                    <div class="flex items-center gap-3 h-10">
-                        <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>
-                    </div>
-                </div>
-            </div>
+            <ReadonlyFieldsSection v-if="ui.currentlyEditing?.email" :data="ui.currentlyEditing" />
         </div>
 
-        <button
-            class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
-            @click="done()">
+        <button class="btn-modal ml-auto mt-4 w-48" @click="done()">
             Save
-            <EditIcon />
+            <EditIcon class="ml-2" />
         </button>
     </Modal>
 </template>
-<style lang="scss" scoped>
-.label-override {
-    @apply flex items-center;
-    color: #e1e1e4 !important;
-
-    svg {
-        @apply ml-2;
-
-        path {
-            fill: #e1e1e4 !important;
-        }
-    }
-}
-</style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
 import FormField from "@/components/ui/FormField.vue";
@@ -102,17 +66,11 @@ import {
     EditIcon,
     MailIcon,
     KeyIcon,
-    ProfileIcon,
-    TimerIcon,
-    SandclockIcon,
-    TagIcon,
-    ScannerIcon
+    TagIcon
 } 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 ReadonlyFieldsSection from "@/components/ui/ReadonlyFieldsSection.vue";
 import { ref } from "vue";
 
 const ui = useUIStore();