@necrolab/dashboard 0.4.220 → 0.5.1

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

@@ -1,54 +1,52 @@
 <template>
     <Row
-        class="relative text-white grid grid-cols-5 ipadlg:grid-cols-7 grid-template-colums h-16"
+        class="relative h-16 grid-cols-5 text-white md:grid-cols-7"
         @click="ui.setOpenContextMenu('')"
-        @click.right.prevent="ui.setOpenContextMenu('')"
-    >
-        <div class="col-span-3 lg:col-span-2 flex">
+        @click.right.prevent="ui.setOpenContextMenu('')">
+        <div class="col-span-3 flex lg:col-span-2">
             <Checkbox
                 class="ml-0 mr-4"
-                :toggled="props.task.selected"
-                @valueUpdate="ui.toggleAccountSelected(props.task._id)"
-            />
-            <h4 class="mx-auto text-white" @click="copy(props.task.email)">
-                {{ props.task.email }}
+                :toggled="props.account.selected"
+                @valueUpdate="ui.toggleAccountSelected(props.account.id)" />
+            <h4 class="mx-auto text-white" @click="copy(props.account.email)">
+                {{ props.account.email }}
             </h4>
         </div>
-        <div class="col-span-2 hidden ipadlg:block" @click="copy(props.task.password)">
+        <div class="col-span-2 hidden md:block" @click="copy(props.account.password)">
             <h4 class="text-white">
-                {{ props.task.privacy ? "•".repeat(props.task.password.length) : props.task.password }}
+                {{ props.account.privacy ? "•".repeat(props.account.password.length) : props.account.password }}
             </h4>
         </div>
         <div class="col-span-1">
-            <h4 v-if="props.task.enabled" class="text-green-400 flex justify-center">
-                <img width="12px" height="12px" class="green" src="/img/controls/enable.svg" />
+            <h4 v-if="props.account.enabled" class="flex justify-center text-green-400">
+                <img class="green h-3 w-3" src="/img/controls/enable.svg" />
             </h4>
-            <h4 v-else class="text-red-400 flex justify-center">
-                <img width="12px" height="12px" class="fill-red-400" src="/img/close.svg" />
+            <h4 v-else class="flex justify-center text-red-400">
+                <img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
             </h4>
         </div>
 
         <div class="col-span-1 hidden lg:block">
-            <h4 class="text-white flex justify-center gap-1">
-                <TagLabel v-for="tag in props.task.tags" :key="tag" :text="tag" />
+            <h4 class="flex justify-center gap-1 text-white">
+                <TagLabel v-for="tag in props.account.tags" :key="tag" :text="tag" />
             </h4>
         </div>
 
         <div class="col-span-1 flex">
-            <ul class="task-buttons bg-dark-600 px-2 rounded-full shadow-3xl py-1 items-center">
+            <ul class="account-buttons">
                 <li>
                     <button @click="edit">
                         <EditIcon />
                     </button>
                 </li>
-                <li v-if="props.task.enabled">
+                <li v-if="props.account.enabled">
                     <button @click="disable">
-                        <img width="16px" height="16px" class="mt-0.5" src="/img/controls/disable.svg" />
+                        <img class="h-4 w-4" src="/img/controls/disable.svg" />
                     </button>
                 </li>
                 <li v-else>
                     <button @click="enable">
-                        <img width="16px" height="16px" class="mt-0.5" src="/img/controls/enable.svg" />
+                        <img class="h-4 w-4" src="/img/controls/enable.svg" />
                     </button>
                 </li>
             </ul>
@@ -59,33 +57,111 @@
 h4 {
     @apply text-center;
 }
-.task-buttons {
-    @apply flex mx-auto gap-x-3;
-    svg {
-        width: 15px;
-        height: 15px;
+.account-buttons {
+    @apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
+    padding: 3px;
+    gap: 2px;
+
+    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.82 0 0);
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.1);
+            color: #ffffff;
+            transform: scale(1.05);
+        }
+
+        &:active {
+            background: rgba(255, 255, 255, 0.2);
+            transform: scale(0.95);
+        }
+    }
+
+    svg,
+    img {
+        width: 16px;
+        height: 16px;
+        position: relative;
+        z-index: 1;
     }
-}
 
-svg {
-    width: 15px;
-    height: 15px;
+    svg path {
+        fill: currentColor;
+    }
 }
 
+// Tablet optimization
 @media (max-width: 1024px) {
     h4 {
         font-size: 10px !important;
     }
-    .task-buttons {
-        @apply gap-x-3;
+
+    .account-buttons {
+        padding: 3px;
+        gap: 2px;
+
+        button {
+            width: 26px;
+            height: 26px;
+        }
+
+        svg,
+        img {
+            width: 14px;
+            height: 14px;
+        }
     }
-    .task-id {
+
+    .account-id {
         font-size: 6px !important;
         margin-right: -12px;
         margin-top: 20px;
     }
-    .task-id-alt {
-        font-size: 7px !important;
+}
+
+// Mobile optimization
+@media (max-width: 768px) {
+    .account-buttons {
+        padding: 2px;
+        gap: 1px;
+
+        button {
+            width: 22px;
+            height: 22px;
+        }
+
+        svg,
+        img {
+            width: 12px;
+            height: 12px;
+        }
+    }
+}
+
+// iPhone vertical (portrait) specific
+@media (max-width: 480px) and (orientation: portrait) {
+    .account-buttons {
+        padding: 2px;
+        gap: 1px;
+
+        button {
+            width: 18px;
+            height: 18px;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+
+        svg,
+        img {
+            width: 10px;
+            height: 10px;
+        }
     }
 }
 </style>
@@ -94,12 +170,12 @@ import { Row } from "@/components/Table";
 import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
-import TagLabel from "@/components/editors/TagLabel.vue";
+import TagLabel from "@/components/Editors/TagLabel.vue";
 
 const ui = useUIStore();
 
 const props = defineProps({
-    task: { type: Object }
+    account: { type: Object }
 });
 
 const copy = (txt) => {
@@ -107,10 +183,10 @@ const copy = (txt) => {
     navigator.clipboard.writeText(txt);
     ui.showSuccess("Copied text");
 };
-const enable = async () => await ui.addAccount({ ...props.task, enabled: true });
-const disable = async () => await ui.addAccount({ ...props.task, enabled: false });
+const enable = async () => await ui.addAccount({ ...props.account, enabled: true });
+const disable = async () => await ui.addAccount({ ...props.account, enabled: false });
 const edit = () => {
-    ui.currentlyEditing = props.task;
+    ui.currentlyEditing = props.account;
     ui.toggleModal("create-account");
 };
 </script>

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

@@ -6,63 +6,85 @@
         </template>
 
         <div>
-            <div class="my-3 grid grid-cols-12 gap-3 mt-7 mb-4">
-                <div class="input-wrapper col-span-8 z-inf">
-                    <label class="label-override">Account Tag </label>
-                    <div :class="`input-default ${errors.includes('accountTag') ? 'error' : ''}`">
-                        <Dropdown
-                            class="text-xs w-64 h-8"
-                            :default="ui.profile.accountTags[0]"
-                            :options="ui.profile.accountTags"
-                            :onClick="(f) => (creatorConfig.tag = f)"
-                            :capitalize="true"
-                            rightAmount="right-6 lg:right-2 top-2"
-                        />
-                    </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">
+                        Account Tag
+                        <TagIcon />
+                    </label>
+                    <Dropdown
+                        class="input-default dropdown w-full p-4"
+                        :default="ui.profile.tags[0]"
+                        :options="ui.profile.tags"
+                        :onClick="(f) => (creatorConfig.tag = f)"
+                        :capitalize="true"
+                        :allowDefault="false"
+                        :chosen="creatorConfig.tag" />
                 </div>
 
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override">Threads</label>
+                    <label class="label-override mb-2">
+                        Threads
+                        <EditIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('threads') ? 'error' : ''}`">
                         <input placeholder="1" type="number" min="1" max="50" v-model="creatorConfig.threads" />
+                        <div class="input-incrementer">
+                            <button @click="creatorConfig.threads++">
+                                <UpIcon />
+                            </button>
+                            <button @click="if (creatorConfig.threads > 1) creatorConfig.threads--;">
+                                <DownIcon />
+                            </button>
+                        </div>
                     </div>
                 </div>
                 <div class="input-wrapper col-span-8">
-                    <label class="label-override">Email catchall</label>
+                    <label class="label-override mb-2">
+                        Email catchall
+                        <MailIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('catchall') ? 'error' : ''}`">
-                        <input placeholder="mycatchall.com" v-model="creatorConfig.catchall" />
+                        <input placeholder="example.com" v-model="creatorConfig.catchall" />
                     </div>
                 </div>
                 <div class="input-wrapper col-span-4">
-                    <label class="label-override">Catchall amount</label>
+                    <label class="label-override mb-2">
+                        Catchall amount
+                        <BagIcon />
+                    </label>
                     <div :class="`input-default ${errors.includes('number') ? 'error' : ''}`">
                         <input placeholder="1" type="number" min="0" max="5000" v-model="creatorConfig.number" />
+                        <div class="input-incrementer">
+                            <button @click="creatorConfig.number++">
+                                <UpIcon />
+                            </button>
+                            <button @click="if (creatorConfig.number > 0) creatorConfig.number--;">
+                                <DownIcon />
+                            </button>
+                        </div>
                     </div>
                 </div>
                 <div class="input-wrapper col-span-12">
-                    <div class="flex items-center gap-2">
-                        <label class="label-override">Emails </label>
+                    <label class="label-override mb-2">
+                        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>
-                    <!-- <div :class="`input-default ${errors.includes('email') ? 'error' : ''}`"> -->
-                    <!-- <input placeholder="email@example.com" type="email" v-model="account.email" /> -->
-
-                    <CodeEditor
-                        v-model="creatorConfig.emails"
-                        width="100%"
-                        spellcheck="false"
-                        :hide_header="true"
-                        :language_selector="false"
-                        :languages="[['text']]"
-                        theme="dark"
-                        :class="`${errors.includes('emails') ? 'error' : ''} max-h-60`"
-                    ></CodeEditor>
                 </div>
             </div>
             <button
-                class="button-default hover:opacity-70 active:opacity-50 bg-dark-400 w-48 text-xs flex items-center justify-center gap-x-2 ml-auto mt-4"
-                @click="done()"
-            >
-                Start <EditIcon />
+                class="button-default ml-auto mt-4 flex w-48 items-center justify-center gap-x-2 bg-dark-400 text-xs"
+                @click="done()">
+                Start
+                <EditIcon />
             </button>
         </div>
     </Modal>
@@ -78,16 +100,43 @@
     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);
+}
+
 .z-inf {
     z-index: 99999999999999;
 }
 </style>
 <script setup>
 import Modal from "@/components/ui/Modal.vue";
-import { EditIcon } from "@/components/icons";
+import { EditIcon, TagIcon, SpinnerIcon, UpIcon, DownIcon, MailIcon, BagIcon } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
-import CodeEditor from "simple-code-editor";
 
 import { ref } from "vue";
 
@@ -96,7 +145,7 @@ const creatorConfig = ref({
     threads: 5,
     catchall: "",
     emails: "",
-    tag: ui.profile.accountTags[0],
+    tag: ui.profile.tags[0],
     number: 0
 });
 

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

@@ -1,59 +1,62 @@
 <template>
     <Table>
-        <Header class="text-center grid-cols-5 ipadlg:grid-cols-7">
-            <div class="lg:col-span-2 col-span-3 flex">
+        <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">
                 <Checkbox
                     class="mr-3"
                     :toggled="ui.mainCheckbox.accounts"
                     @valueUpdate="ui.toggleMainCheckbox('accounts')"
-                />
+                    :isHeader="true" />
                 <div class="mx-auto flex items-center" @click="ui.toggleSort('eventId')">
-                    <img src="/img/mail.svg" class="mr-0 ipadlg:mr-3" />
-                    <h4 class="hidden ipadlg:flex">Email</h4>
+                    <MailIcon class="mr-0 h-4 w-4 md:mr-3" />
+                    <h4 class="hidden md:flex">Email</h4>
                 </div>
             </div>
-            <div class="col-span-2 items-center justify-center hidden ipadlg:flex" v-once>
-                <img src="/img/key.svg" class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Password</h4>
+            <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>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <img src="/img/controls/enable.svg" width="14" class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Enabled</h4>
+                <CheckmarkIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <h4 class="hidden md:flex">Enabled</h4>
             </div>
-            <div class="col-span-1 hidden lg:flex items-center justify-center" v-once>
-                <TicketIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Tags</h4>
+            <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>
             </div>
             <div class="col-span-1 flex items-center justify-center" v-once>
-                <ClickIcon class="mr-0 ipadlg:mr-3" />
-                <h4 class="hidden ipadlg:flex">Actions</h4>
+                <ClickIcon class="mr-0 h-4 w-4 md:mr-3" />
+                <h4 class="hidden md:flex">Actions</h4>
             </div>
         </Header>
-        <div v-if="toRender.length > 0">
+        <div
+            v-if="toRender.length != 0"
+            class="hidden-scrollbars stop-pan overflow-y-auto overflow-x-hidden"
+            :style="{ maxHeight: dynamicTableHeight }">
             <RecycleScroller
                 :items="toRender"
                 :item-size="64"
-                key-field="_id"
-                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y-2 divide-border max-h-big overflow-y-auto hidden-scrollbars overflow-x-hidden stop-pan"
-            >
+                key-field="index"
+                class="scroller vue-recycle-scroller ready direction-vertical flex flex-col divide-y divide-dark-650">
                 <template #default="props">
-                    <div class="task" :key="i[props.item._id]">
+                    <div class="account" :key="`account-${props.item.id || props.item.index}`">
                         <Account
-                            @click="i[props.item._id]++"
-                            :class="[props.item.index % 2 == 1 ? 'bg-dark-500' : 'bg-dark-550']"
-                            :task="props.item"
-                        />
+                            @click="i[props.item.index]++"
+                            :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
+                            :account="props.item" />
                     </div>
                 </template>
             </RecycleScroller>
         </div>
-        <div v-else class="flex justify-center text-light-400 py-2 bg-dark-500 border-b-2 border-border">
-            No accounts found
+        <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>
 </template>
 <style lang="scss" scoped>
-.task {
+.account {
     height: 64px;
 }
 h4 {
@@ -63,25 +66,90 @@ h4 {
 .stop-pan {
     touch-action: pan-y pan-up pan-down;
 }
+
+.empty-state {
+    color: #969696;
+    font-size: 14px;
+    font-weight: 500;
+}
 </style>
 <script setup>
 import { Table, Header } from "@/components/Table";
-import { EventIcon, TicketIcon, StatusIcon, ClickIcon, DownIcon } from "@/components/icons";
+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 { useUIStore } from "@/stores/ui";
-import { computed, ref } from "vue";
+import { computed, ref, onMounted, onUnmounted } from "vue";
 
 const props = defineProps({
-    tasks: { type: Object }
+    accounts: { type: Object }
 });
-const i = ref({});
-props.tasks.forEach((t) => (i.value[t._id] = 0));
-
 const ui = useUIStore();
 
+const i = ref({});
 const toRender = computed(() => {
     let c = 0;
-    return props.tasks.map((t) => ({ ...t, index: c++ }));
+    const rendered = props.accounts.map((t) => ({ ...t, index: c++ }));
+
+    // Initialize reactive refs for click tracking
+    rendered.forEach((t) => {
+        if (t.id && !(t.id in i.value)) {
+            i.value[t.id] = 0;
+        }
+        if (!(t.index in i.value)) {
+            i.value[t.index] = 0;
+        }
+    });
+
+    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;
+};
+
+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";
 });
 </script>