@necrolab/dashboard 0.5.5 → 0.5.7

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

@@ -64,6 +64,30 @@
                     </div>
                 </div>
             </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">
+                        <div v-if="ui.currentlyEditing.enabled" class="enabled-badge-large">
+                            <CheckmarkIcon />
+                        </div>
+                        <div v-else class="disabled-badge-large">
+                            <CloseXIcon />
+                        </div>
+                        <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>
         </div>
 
         <button
@@ -75,6 +99,53 @@
     </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;
+
+    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;
+    }
+}
+
 .input-wrapper {
     label {
         @apply flex;
@@ -105,10 +176,13 @@ import {
     TimerIcon,
     SandclockIcon,
     TagIcon,
-    ScannerIcon
+    ScannerIcon,
+    CheckmarkIcon,
+    CloseXIcon
 } from "@/components/icons";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";
+import TagLabel from "@/components/Editors/TagLabel.vue";
 
 import { ref } from "vue";
 

package/src/components/Editors/Profile/CreateProfile.vue

@@ -44,7 +44,7 @@
                 <div class="input-wrapper col-span-2">
                     <label class="label-override mb-2">
                         Country
-                        <SandclockIcon />
+                        <StadiumIcon />
                     </label>
                     <ProfileCountryChooser
                         class="h-8"
@@ -187,6 +187,30 @@
                     </div>
                 </div>
             </div>
+
+            <!-- Readonly fields when editing -->
+            <div v-if="ui.currentlyEditing?.profileName" 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">
+                        <div v-if="ui.currentlyEditing.enabled" class="enabled-badge-large">
+                            <CheckmarkIcon />
+                        </div>
+                        <div v-else class="disabled-badge-large">
+                            <CloseXIcon />
+                        </div>
+                        <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>
         </div>
 
         <button
@@ -198,6 +222,53 @@
     </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;
+
+    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;
+    }
+}
+
 .input-wrapper {
     label {
         @apply flex;
@@ -231,9 +302,12 @@ import {
     SandclockIcon,
     TimerIcon,
     TagIcon,
-    WildcardIcon
+    WildcardIcon,
+    CheckmarkIcon,
+    CloseXIcon
 } from "@/components/icons";
 import { EditIcon } from "@/components/icons";
+import TagLabel from "@/components/Editors/TagLabel.vue";
 import ProfileCountryChooser from "@/components/Editors/Profile/ProfileCountryChooser.vue";
 import { useUIStore } from "@/stores/ui";
 import Dropdown from "@/components/ui/controls/atomic/Dropdown.vue";

package/src/components/Editors/Profile/Profile.vue

@@ -33,12 +33,12 @@
             <h4 class="text-white">{{ expDate() }}</h4>
         </div>
         <div class="col-span-1">
-            <h4 v-if="props.profile.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="flex justify-center text-red-400">
-                <img class="h-3 w-3 fill-red-400" src="/img/close.svg" />
-            </h4>
+            <div v-if="props.profile.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>
 
         <div class="col-span-1 hidden lg:block">
@@ -72,34 +72,80 @@
     </Row>
 </template>
 <style lang="scss" scoped>
-.green svg path {
-    fill: rgb(68 183 68);
+.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;
 }
 .profile-buttons {
-    @apply mx-auto flex items-center justify-center rounded border border-dark-650 bg-dark-500;
+    @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.82 0 0);
+        color: oklch(0.90 0 0);
+        border-radius: 6px;
 
         &:hover {
-            background: rgba(255, 255, 255, 0.1);
-            color: #ffffff;
-            transform: scale(1.05);
+            background: oklch(0.72 0.15 145 / 0.15);
+            color: oklch(1 0 0);
         }
 
         &:active {
-            background: rgba(255, 255, 255, 0.2);
-            transform: scale(0.95);
+            background: oklch(0.72 0.15 145 / 0.25);
         }
     }
 
@@ -116,19 +162,17 @@ h4 {
     }
 }
 
-// Tablet optimization
-@media (max-width: 1024px) {
-    h4 {
-        font-size: 10px !important;
-    }
-
+// Tablet sizing - medium buttons
+@media (min-width: 768px) and (max-width: 1023px) {
     .profile-buttons {
-        padding: 3px;
-        gap: 2px;
+        padding: 2px;
+        gap: 1px;
+        border-radius: 6px;
 
         button {
             width: 26px;
             height: 26px;
+            border-radius: 5px;
         }
 
         svg,
@@ -137,59 +181,74 @@ h4 {
             height: 14px;
         }
     }
-
-    .profile-id {
-        font-size: 6px !important;
-        margin-right: -12px;
-        margin-top: 20px;
-    }
 }
 
-// Mobile optimization
-@media (max-width: 768px) {
+// Desktop sizing - large buttons
+@media (min-width: 1024px) {
     .profile-buttons {
-        padding: 2px;
-        gap: 1px;
+        padding: 3px;
+        gap: 2px;
+        border-radius: 8px;
 
         button {
-            width: 22px;
-            height: 22px;
+            width: 28px;
+            height: 28px;
+            border-radius: 6px;
         }
 
         svg,
         img {
-            width: 12px;
-            height: 12px;
+            width: 16px;
+            height: 16px;
         }
     }
 }
 
-// iPhone vertical (portrait) specific
-@media (max-width: 480px) and (orientation: portrait) {
+// Mobile specific styling
+@media (max-width: 640px) {
     .profile-buttons {
-        padding: 2px;
+        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: 18px;
-            height: 18px;
+            width: 20px;
+            height: 20px;
+            border-radius: 3px;
+            min-width: 20px;
+            border: none !important;
+            flex-shrink: 0;
+            margin: 0.5px;
+            background: transparent;
 
             &:hover {
-                transform: scale(1.1);
+                background: oklch(0.72 0.15 145 / 0.15);
+            }
+
+            &:active {
+                background: oklch(0.72 0.15 145 / 0.25);
             }
         }
 
         svg,
         img {
-            width: 10px;
-            height: 10px;
+            width: 12px;
+            height: 12px;
         }
     }
 }
 </style>
 <script setup>
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, CheckmarkIcon, CloseXIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import { validateCard } from "@/stores/utils";

package/src/components/Editors/Profile/ProfileView.vue

@@ -33,22 +33,15 @@
                 <h4 class="hidden md:flex">Actions</h4>
             </div>
         </Header>
-        <div v-if="toRender.length != 0">
-            <RecycleScroller
-                :items="toRender"
-                :item-size="64"
-                key-field="index"
-                class="scroller vue-recycle-scroller ready direction-vertical hidden-scrollbars stop-pan flex flex-col divide-y divide-dark-650 overflow-y-auto overflow-x-hidden"
-                :style="{ maxHeight: dynamicTableHeight }">
-                <template #default="props">
-                    <div class="profile" :key="`profile-${props.item.id || props.item.index}`">
-                        <Profile
-                            @click="i[props.item.index]++"
-                            :class="props.item.index % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
-                            :profile="props.item" />
-                    </div>
-                </template>
-            </RecycleScroller>
+        <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"
+            :style="{ maxHeight: dynamicTableHeight }">
+            <div v-for="(profile, i) in toRender" :key="profile.id || profile.index" class="profile-row-container">
+                <Profile
+                    :class="i % 2 == 1 ? 'table-row-even' : 'table-row-odd'"
+                    :profile="profile" />
+            </div>
         </div>
         <div v-else class="empty-state flex flex-col items-center justify-center bg-dark-400 py-8 text-center">
             <ProfileIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
@@ -58,9 +51,16 @@
     </Table>
 </template>
 <style lang="scss" scoped>
-.profile {
-    height: 64px;
+.profile-row-container {
+    min-height: 64px;
+    flex-shrink: 0;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+        @apply bg-dark-550 !important;
+    }
 }
+
 h4 {
     @apply text-white;
 }

package/src/components/Editors/TagLabel.vue

@@ -6,63 +6,53 @@
 
 <style lang="scss" scoped>
 .tag-pill {
-    @apply inline-flex items-center justify-center rounded-md transition-all duration-200;
-    background: linear-gradient(145deg, oklch(0.26 0 0), oklch(0.22 0 0));
-    border: 1px solid oklch(0.31 0 0);
-    padding: 0.1875rem 0.5rem;
+    @apply inline-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 / 0.25);
+    padding: 0.25rem 0.625rem;
     min-width: 2rem;
-    max-width: 4.5rem;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
-
-    &:hover {
-        background: linear-gradient(145deg, oklch(0.28 0 0), oklch(0.26 0 0));
-        border-color: oklch(0.33 0 0);
-        transform: translateY(-0.5px);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
-    }
+    max-width: 5rem;
 }
 
 .tag-text {
-    @apply text-white font-semibold truncate;
+    @apply truncate font-semibold;
+    color: oklch(0.72 0.15 145);
     font-size: 0.6875rem;
-    line-height: 1.1;
-    letter-spacing: 0.025em;
-    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
+    line-height: 1.2;
+    letter-spacing: 0.015em;
 }
 
-// Ultra responsive design
+// Responsive design
 @media (max-width: 1024px) {
     .tag-pill {
-        padding: 0.1rem 0.3rem;
-        max-width: 3.5rem;
+        padding: 0.2rem 0.5rem;
+        max-width: 4rem;
     }
 
     .tag-text {
-        font-size: 0.575rem;
+        font-size: 0.625rem;
     }
 }
 
 @media (max-width: 768px) {
     .tag-pill {
-        padding: 0.075rem 0.25rem;
-        max-width: 3rem;
-        min-width: 1.25rem;
+        padding: 0.1875rem 0.4rem;
+        max-width: 3.5rem;
     }
 
     .tag-text {
-        font-size: 0.55rem;
+        font-size: 0.6rem;
     }
 }
 
 @media (max-width: 480px) {
     .tag-pill {
-        padding: 0.05rem 0.2rem;
-        max-width: 2.5rem;
-        min-width: 1rem;
+        padding: 0.15rem 0.35rem;
+        max-width: 3rem;
     }
 
     .tag-text {
-        font-size: 0.5rem;
+        font-size: 0.575rem;
     }
 }
 </style>

package/src/components/Tasks/Task.vue

@@ -10,7 +10,25 @@
                 class="ml-2 mr-4 flex-shrink-0"
                 :toggled="props.task.selected"
                 @valueUpdate="ui.toggleTaskSelected(props.task.taskId)" />
+            <div
+                v-if="props.preferEventName && props.task.eventName"
+                class="event-details hidden cursor-pointer lg:flex flex-col gap-0.5"
+                @click="copy(props.task.eventId)"
+                :title="`Event ID: ${props.task.eventId}`">
+                <div class="event-name text-white text-xs font-semibold leading-tight">
+                    {{ props.task.eventName }}
+                </div>
+                <div v-if="props.task.eventVenue" class="event-venue flex items-center gap-1 text-[10px] text-light-400">
+                    <StadiumIcon class="w-2.5 h-2.5 flex-shrink-0" />
+                    <span class="truncate">{{ props.task.eventVenue }}</span>
+                </div>
+                <div v-if="props.task.eventLocalDate" class="event-date flex items-center gap-1 text-[10px] text-light-400">
+                    <TimerIcon class="w-2.5 h-2.5 flex-shrink-0" />
+                    <span>{{ formatEventDate(props.task.eventLocalDate) }}</span>
+                </div>
+            </div>
             <h4
+                v-else
                 class="task-event-id mx-auto hidden cursor-pointer text-white hover:text-light-300 lg:block"
                 @click="copy(props.task.eventId)">
                 {{ props.task.eventId }}
@@ -90,7 +108,6 @@
             </h4>
         </div>
 
-        <!-- Context menu -->
         <transition name="fade">
             <div
                 v-if="ui.openContextMenu === task.taskId"
@@ -376,7 +393,7 @@ h4 {
 /// <reference path="@/types/index.js" />
 
 import { Row } from "@/components/Table";
-import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon } from "@/components/icons";
+import { PlayIcon, TrashIcon, BagWhiteIcon, PauseIcon, EditIcon, EyeIcon, StadiumIcon, TimerIcon } from "@/components/icons";
 import Checkbox from "@/components/ui/controls/atomic/Checkbox.vue";
 import { useUIStore } from "@/stores/ui";
 import TaskLabel from "@/components/Tasks/TaskLabel.vue";
@@ -387,9 +404,29 @@ const ui = useUIStore();
 
 /** @type {{ task: Task }} */
 const props = defineProps({
-    task: { type: Object }
+    task: { type: Object },
+    preferEventName: { type: Boolean, default: false }
 });
 
+// Format event date for display
+const formatEventDate = (dateString) => {
+    if (!dateString) return '';
+    try {
+        const date = new Date(dateString);
+        const options = {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: 'numeric',
+            minute: '2-digit',
+            hour12: true
+        };
+        return date.toLocaleString('en-US', options).replace(',', '');
+    } catch {
+        return dateString;
+    }
+};
+
 // Context menu positioning
 const contextMenuPosition = ref({});
 const contextMenuRef = ref(null);