adminforth 3.35.1 → 4.0.1

package/dist/spa/src/components/GroupsTable.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow dark:shadow-2xl border dark:border-darkFormBorder">
-    <div v-if="group.groupName && !group.noTitle" class="text-md font-semibold px-6 py-3 flex flex-1 items-center dark:border-darkFormBorder text-lightListTableHeadingText bg-lightFormHeading dark:bg-darkFormHeading dark:text-darkListTableHeadingText rounded-t-lg">
+  <div class="rounded-lg shadow-resourseFormShadow dark:shadow-darkResourseFormShadow border border-lightFormBorder bg-lightForm dark:bg-darkForm dark:border-darkFormBorder">
+    <div v-if="group.groupName && !group.noTitle" class="text-sm font-semibold px-5 py-3 flex flex-1 items-center border-b border-lightFormBorder dark:border-darkFormBorder text-lightFormFieldTextColor bg-lightFormHeading dark:bg-darkFormHeading dark:text-darkFormFieldTextColor rounded-t-lg">
       {{ group.groupName }}
     </div>
     <table class="w-full text-sm text-left rtl:text-right text-lightFormFieldTextColor dark:text-darkFormFieldTextColor">
-      <thead v-if="!allColumnsHaveCustomComponent" class="text-xs text-lightListTableHeadingText uppercase dark:text-darkListTableHeadingText bg-lightFormHeading dark:bg-darkFormHeading block md:table-row-group ">
+      <thead v-if="!allColumnsHaveCustomComponent" class="text-xs font-medium text-lightListTablePaginationHelpText dark:text-darkListTablePaginationHelpText bg-lightFormHeading dark:bg-darkFormHeading block md:table-row-group border-b border-lightFormBorder dark:border-darkFormBorder">
         <tr>
-          <th scope="col" :class="{'rounded-tl-lg': !group.groupName}" class="px-6 py-3 hidden md:w-52 md:table-cell">
+          <th scope="col" :class="{'rounded-tl-lg': !group.groupName}" class="px-5 py-2.5 font-medium hidden md:w-56 md:table-cell">
               {{ $t('Field') }}
           </th>
-          <th scope="col" :class="{'rounded-tr-lg': !group.groupName}" class="px-6 py-3 hidden md:table-cell">
+          <th scope="col" :class="{'rounded-tr-lg': !group.groupName}" class="px-5 py-2.5 font-medium hidden md:table-cell">
               {{ $t('Value') }}
           </th>
         </tr>
@@ -19,17 +19,17 @@
           v-for="(column, i) in group.columns"
           :key="column.name"
           v-if="currentValues !== null"
-          class="bg-lightForm dark:bg-darkForm dark:border-darkFormBorder block md:table-row"
+          class="bg-lightForm dark:bg-darkForm border-lightFormBorder dark:border-darkFormBorder block md:table-row"
           :class="{ 'border-b': i !== group.columns.length - 1}"
         >
-          <td class="px-6 py-4 flex items-center block pb-0 md:pb-4 relative md:table-cell" 
+          <td class="px-5 py-3 flex items-center block pb-0 md:pb-3 relative md:table-cell" 
               :class="{'rounded-bl-lg border-b-none': i === group.columns.length - 1}"> <!--align-top-->
-            <div class="absolute inset-0 flex items-center overflow-hidden px-6 py-4 max-h-32">
-              <span class="flex items-center gap-1">                     
+            <div class="absolute inset-0 flex items-center overflow-hidden px-5 py-3 max-h-32">
+              <span class="flex items-center gap-1 font-medium">                     
                 {{ column.label }}
                 <Tooltip v-if="column.required[mode]">
 
-                  <IconExclamationCircleSolid v-if="column.required[mode]" class="w-4 h-4" 
+                  <IconAsterisk v-if="column.required[mode]" class="w-3 h-3" 
                     :class="(columnsWithErrors[column.name] && validatingMode && !isValidating) ? 'text-lightInputErrorColor dark:text-darkInputErrorColor' : 'text-lightRequiredIconColor dark:text-darkRequiredIconColor'"
                   />
 
@@ -41,7 +41,7 @@
             </div>
           </td>
           <td
-            class="px-6 py-4  whitespace-pre-wrap relative block md:table-cell"
+            class="px-5 py-3  whitespace-pre-wrap relative block md:table-cell"
             :class="{'rounded-br-lg': i === group.columns.length - 1}"
           >
             <ColumnValueInputWrapper
@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-  import { IconExclamationCircleSolid, IconPlusOutline } from '@iconify-prerendered/vue-flowbite';
+  import { IconAsterisk } from '@iconify-prerendered/vue-lucide';
   import { Tooltip } from '@/afcl';
   import { ref, computed, watch, nextTick, type Ref } from 'vue';
   import { useI18n } from 'vue-i18n';

package/dist/spa/src/components/ListActionsThreeDots.vue

@@ -1,115 +1,93 @@
 <template>
-  <div class="relative inline-block">
-    <div
-      ref="triggerRef"
-      class="border border-gray-300 dark:border-gray-700 dark:border-opacity-0 border-opacity-0 hover:border-opacity-100 dark:hover:border-opacity-100 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
-      @click="toggleMenu"
+  <DropdownMenu
+    v-model:open="showMenu"
+    placement="bottom-end"
+    teleportToBody
+    :contentClass="['af-list-actions-three-dots z-40 min-w-[10rem]', THREE_DOTS_MENU_CONTENT_CLASSES]"
+  >
+    <template #trigger>
+      <Button variant="ghost" size="sm" iconOnly>
+        <IconEllipsis />
+      </Button>
+    </template>
+
+    <DropdownMenuItem
+      v-if="isBaseActionInMenu('show')"
+      :class="THREE_DOTS_MENU_ITEM_CLASSES"
+      :to="{ name: 'resource-show', params: { resourceId: props.resourceId, primaryKey: record._primaryKeyValue } }"
+    >
+      <template #icon><IconEye /></template>
+      {{ $t('Show item') }}
+    </DropdownMenuItem>
+    <DropdownMenuItem
+      v-if="isBaseActionInMenu('edit')"
+      :class="THREE_DOTS_MENU_ITEM_CLASSES"
+      :to="{ name: 'resource-edit', params: { resourceId: props.resourceId, primaryKey: record._primaryKeyValue } }"
+    >
+      <template #icon><IconPencil /></template>
+      {{ $t('Edit item') }}
+    </DropdownMenuItem>
+    <DropdownMenuItem
+      v-if="isBaseActionInMenu('delete')"
+      :class="THREE_DOTS_MENU_ITEM_CLASSES"
+      @click="deleteRecord(record)"
+    >
+      <template #icon><IconTrash2 /></template>
+      {{ $t('Delete item') }}
+    </DropdownMenuItem>
+
+    <DropdownMenuItem
+      v-for="action in menuActions"
+      :key="action.id"
+      :class="THREE_DOTS_MENU_ITEM_CLASSES"
+      @click="actionItemClick(action.id, $event)"
     >
-      <IconDotsHorizontalOutline class="w-6 h-6 text-lightPrimary dark:text-darkPrimary dark:brightness-150" />
-    </div>
-    <teleport to="body">
-      <div
-        v-if="showMenu"
-        ref="menuRef"
-        class="af-list-actions-three-dots z-40 bg-white dark:bg-gray-900 rounded-md shadow-lg border dark:border-gray-700 py-1"
-        :style="menuStyles"
+      <component
+        :ref="(el: any) => { actionRefs[action.id] = el; }"
+        :is="action.customComponent ? getCustomComponent(formatComponent(action.customComponent)) : CallActionWrapper"
+        :meta="formatComponent(action.customComponent).meta"
+        :row="record"
+        :resource="coreStore.resource"
+        :adminUser="coreStore.adminUser"
+        @callAction="(payload? : Object) => startCustomAction(action.id, record, payload)"
       >
-        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('show'))">
-          <RouterLink
-            v-if="resourceOptions?.allowedActions?.show"
-            class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300"
-            :to="{
-              name: 'resource-show', 
-              params: { 
-                resourceId: props.resourceId, 
-                primaryKey: record._primaryKeyValue,
-              }
-            }"
+        <!-- preventDefault marks the click as handled by the action component -->
+        <span @click.prevent class="flex flex-1 items-center gap-2">
+          <component
+            v-if="action.icon"
+            :is="getIcon(action.icon)"
+            class="w-4 h-4 text-lightInputIconColor dark:text-darkInputIconColor"
+          />
+          {{ $t(action.name) }}
+        </span>
+      </component>
+    </DropdownMenuItem>
 
-          >
-            <IconEyeSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
-            {{ $t('Show item') }}
-          </RouterLink>
-        </template>
-        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('edit'))">
-          <RouterLink
-            v-if="resourceOptions?.allowedActions?.edit"
-            class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300"
-            :to="{ 
-              name: 'resource-edit', 
-              params: { 
-                resourceId: props.resourceId, 
-                primaryKey: record._primaryKeyValue,
-              }
-            }"
-          >
-            <IconPenSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
-            {{ $t('Edit item') }}
-          </RouterLink>
-        </template>
-        <template v-if="!resourceOptions?.baseActionsAsQuickIcons || (resourceOptions?.baseActionsAsQuickIcons && !resourceOptions?.baseActionsAsQuickIcons.includes('delete'))">
-          <button
-            v-if="resourceOptions?.allowedActions?.delete"
-            class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300"
-            @click="deleteRecord(record)"
-          >
-            <IconTrashBinSolid class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary"/>
-            {{ $t('Delete item') }}
-          </button>
-        </template>
-        <div v-for="action in (resourceOptions.actions ?? []).filter((a: AdminForthActionInput) => a.showIn?.listThreeDotsMenu)" :key="action.id" >
-            <button class="flex text-nowrap p-1 hover:bg-gray-100 dark:hover:bg-gray-800 w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-300" @click="() => { startCustomAction(action.id, record); showMenu = false; }">
-              <component
-                :is="action.customComponent ? getCustomComponent(action.customComponent) : CallActionWrapper"
-                :meta="action.customComponent?.meta"
-                :row="record"
-                :resource="coreStore.resource"
-                :adminUser="coreStore.adminUser"
-                @callAction="(payload? : Object) => startCustomAction(action.id, record, payload)"
-              >
-                <component
-                  v-if="action.icon"
-                  :is="getIcon(action.icon)"
-                  class="w-5 h-5 mr-2 text-lightPrimary dark:text-darkPrimary dark:brightness-200"
-                />
-                {{ $t(action.name) }}
-              </component>               
-            </button>
-        </div>
-        <template v-if="customActionIconsThreeDotsMenuItems">
-            <component 
-                v-for="c in customActionIconsThreeDotsMenuItems"
-                :is="getCustomComponent(formatComponent(c))"
-                :meta="formatComponent(c).meta"
-                :resource="coreStore.resource" 
-                :adminUser="coreStore.adminUser"
-                :record="record"
-                :updateRecords="props.updateRecords"
-            />
-        </template>
-      </div>
-    </teleport>
-  </div>
+    <component
+      v-for="c in customActionIconsThreeDotsMenuItems"
+      :is="getCustomComponent(formatComponent(c))"
+      :meta="formatComponent(c).meta"
+      :resource="coreStore.resource"
+      :adminUser="coreStore.adminUser"
+      :record="record"
+      :updateRecords="props.updateRecords"
+    />
+  </DropdownMenu>
 </template>
 
 <script lang="ts" setup>
-import {
-  IconEyeSolid,
-  IconPenSolid,
-  IconTrashBinSolid,
-  IconDotsHorizontalOutline
-} from '@iconify-prerendered/vue-flowbite';
-import { onMounted, onBeforeUnmount, ref, nextTick, watch } from 'vue';
+import { IconEye, IconPencil, IconTrash2, IconEllipsis } from '@iconify-prerendered/vue-lucide';
+import { computed, ref } from 'vue';
 import { getIcon, getCustomComponent, formatComponent } from '@/utils';
+import { THREE_DOTS_MENU_CONTENT_CLASSES, THREE_DOTS_MENU_ITEM_CLASSES } from '@/utils/threeDotsMenu';
 import { useCoreStore } from '@/stores/core';
+import { Button, DropdownMenu, DropdownMenuItem } from '@/afcl';
 import CallActionWrapper from '@/components/CallActionWrapper.vue'
-import { type AdminForthActionInput, type AdminForthComponentDeclaration, type AdminForthComponentDeclarationFull } from '@/types/Common';
+import { type AdminForthActionFront, type AdminForthComponentDeclaration } from '@/types/Common';
 
 const coreStore = useCoreStore();
 const showMenu = ref(false);
-const triggerRef = ref<HTMLElement | null>(null);
-const menuRef = ref<HTMLElement | null>(null);
-const menuStyles = ref<Record<string, string>>({});
+const actionRefs: Record<string, any> = {};
 
 const props = defineProps<{
     resourceOptions: any;
@@ -121,116 +99,20 @@ const props = defineProps<{
     startCustomAction: (actionId: string, row: any, extraData?: Record<string, any>) => void;
 }>();
 
-onMounted(() => {
-  window.addEventListener('scroll', handleScrollOrResize, true);
-  window.addEventListener('resize', handleScrollOrResize);
-  document.addEventListener('click', handleOutsideClick, true);
-});
+const menuActions = computed<AdminForthActionFront[]>(
+  () => (props.resourceOptions.actions ?? []).filter((a: AdminForthActionFront) => a.showIn?.listThreeDotsMenu)
+);
 
-onBeforeUnmount(() => {
-  window.removeEventListener('scroll', handleScrollOrResize, true);
-  window.removeEventListener('resize', handleScrollOrResize);
-  document.removeEventListener('click', handleOutsideClick, true);
-});
-
-watch(showMenu, async (isOpen) => {
-  if (isOpen) {
-    await nextTick();
-    // First pass: after DOM mount
-    updateMenuPosition();
-    // Second pass: after layout/paint to catch width changes (fonts/icons)
-    requestAnimationFrame(() => {
-      updateMenuPosition();
-      // Final safety: one micro-delay retry if width was still 0
-      setTimeout(() => updateMenuPosition(), 0);
-    });
-  }
-});
-
-function toggleMenu() {
-  if (!showMenu.value) {
-    // Provisional position to avoid flashing at left:0 on first open
-    const el = triggerRef.value;
-    if (el) {
-      const rect = el.getBoundingClientRect();
-      const gap = 8;
-      menuStyles.value = {
-        position: 'fixed',
-        top: `${Math.round(rect.bottom)}px`,
-        left: `${Math.round(rect.left)}px`,
-      };
-    }
-  }
-  showMenu.value = !showMenu.value;
+// a base action is listed here unless it is rendered as a quick icon in the row
+function isBaseActionInMenu(action: 'show' | 'edit' | 'delete') {
+  return props.resourceOptions?.allowedActions?.[action] && !props.resourceOptions?.baseActionsAsQuickIcons?.includes(action);
 }
 
-function updateMenuPosition() {
-  const el = triggerRef.value;
-  if (!el) return;
-  const rect = el.getBoundingClientRect();
-  const margin = 8; // gap around the trigger/menu
-  const menuEl = menuRef.value;
-  // Measure current menu size to align and decide flipping
-  let menuWidth = rect.width; // fallback to trigger width
-  let menuHeight = 0;
-  if (menuEl) {
-    const menuRect = menuEl.getBoundingClientRect();
-    // Prefer bounding rect; fallback to offset/scroll width if needed
-    const measuredW = menuRect.width || menuEl.offsetWidth || menuEl.scrollWidth;
-    if (measuredW > 0) menuWidth = measuredW;
-    const measuredH = menuRect.height || menuEl.offsetHeight || menuEl.scrollHeight;
-    if (measuredH > 0) menuHeight = measuredH;
+// a click on the item padding is forwarded to the action component (see `click` expose of custom action components),
+// clicks on its content are already handled by the component itself
+function actionItemClick(actionId: string, event: MouseEvent) {
+  if (!event.defaultPrevented) {
+    actionRefs[actionId]?.click?.();
   }
-  // Right-align: right edge of menu == right edge of trigger
-  let left = rect.right - menuWidth;
-  // Clamp within viewport with small margin so it doesn't render off-screen
-  const minLeft = margin;
-  const maxLeft = Math.max(minLeft, window.innerWidth - margin - menuWidth);
-  left = Math.min(Math.max(left, minLeft), maxLeft);
-
-  // Determine whether to place above or below based on available space
-  const spaceBelow = window.innerHeight - rect.bottom - margin;
-  const spaceAbove = rect.top - margin;
-  const maxMenuHeight = Math.max(0, window.innerHeight - 2 * margin);
-
-  let top: number;
-  if (menuHeight === 0) {
-    // Unknown height yet (first pass). Prefer placing below; a subsequent pass will correct if needed.
-    top = rect.bottom + margin;
-  } else if (menuHeight <= spaceBelow) {
-    // Enough space below
-    top = rect.bottom + margin;
-  } else if (menuHeight <= spaceAbove) {
-    // Not enough below but enough above -> flip
-    top = rect.top - margin - menuHeight;
-  } else {
-    // Not enough space on either side: pick the side with more room and clamp within viewport
-    if (spaceBelow >= spaceAbove) {
-      top = Math.min(rect.bottom + margin, window.innerHeight - margin - menuHeight);
-    } else {
-      top = Math.max(margin, rect.top - margin - menuHeight);
-    }
-  }
-
-  menuStyles.value = {
-    position: 'fixed',
-    top: `${Math.round(top)}px`,
-    left: `${Math.round(left)}px`,
-    maxHeight: `${Math.round(maxMenuHeight)}px`,
-    overflowY: 'auto',
-  };
 }
-
-function handleScrollOrResize() {
-  showMenu.value = false;
-}
-
-function handleOutsideClick(e: MouseEvent) {
-  const target = e.target as Node | null;
-  if (!target) return;
-  if (menuRef.value?.contains(target)) return;
-  if (triggerRef.value?.contains(target)) return;
-  showMenu.value = false;
-}
-
-</script>
+</script>

package/dist/spa/src/components/MenuLink.vue

@@ -5,55 +5,58 @@
         ? { href: item.url }
         : { to: item.url || { name: item.resourceId ? 'resource-list' : item.path, params: item.resourceId ? { resourceId: item.resourceId }: {} } }"
       :target="item.isOpenInNewTab ? '_blank' : '_self'"
-      class="af-menu-link flex group relative items-center py-2 text-lightSidebarText dark:text-darkSidebarText rounded-default transition-all duration-200 ease-in-out"
+      class="af-menu-link flex group relative items-center py-1.5 text-lightSidebarText dark:text-darkSidebarText rounded-default transition-colors duration-150 ease-in-out"
       :class="{
-        'hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarActive dark:active:bg-darkSidebarHover': !['divider', 'gap', 'heading'].includes(item.type),
-        'pl-6 pr-3.5': (isChild && !isSidebarIconOnly && !isSidebarHovering) || (isChild && isSidebarIconOnly && isSidebarHovering),
+        'hover:bg-lightSidebarItemHover hover:text-lightSidebarTextHover dark:hover:bg-darkSidebarItemHover dark:hover:text-darkSidebarTextHover active:bg-lightSidebarItemActive dark:active:bg-darkSidebarItemActive': !['divider', 'gap', 'heading'].includes(item.type),
+        'pl-2.5 pr-3': isChild && !isSidebarIconOnly && !isSidebarHovering,
+        'pl-6 pr-3': isChild && isSidebarIconOnly && isSidebarHovering,
         'w-full': !isSidebarIconOnly || isSidebarHovering,
-        'px-3.5': !isChild && (!isSidebarIconOnly || isSidebarHovering),
-        'w-10 h-10 ml-1 px-2.5': isSidebarIconOnly && !isSidebarHovering,
-        'bg-lightSidebarItemActive dark:bg-darkSidebarItemActive': isItemActive(item)
+        'px-3': !isChild && (!isSidebarIconOnly || isSidebarHovering),
+        'w-10 h-9 ml-1 px-3': isSidebarIconOnly && !isSidebarHovering,
+        'bg-lightSidebarItemActive text-lightSidebarTextActive font-medium dark:bg-darkSidebarItemActive dark:text-darkSidebarTextActive': isItemActive(item)
       }"
   >
-    <component v-if="item.icon" :is="getIcon(item.icon)" 
-      class="min-w-5 min-h-5 text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-all duration-200 ease-in-out"
+    <component v-if="item.icon" :is="getIcon(item.icon)"
+      class="min-w-4 w-4 h-4 text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-colors duration-150 ease-in-out"
+      :class="{ 'text-lightSidebarIconsHover dark:text-darkSidebarIconsHover': isItemActive(item) }"
     >
     </component>
-    <IconFileImageOutline v-else
-      class="min-w-5 min-h-5 text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-all duration-200 ease-in-out"
+    <IconFileImage v-else-if="!isChild || isSidebarIconOnly"
+      class="min-w-4 w-4 h-4 text-lightSidebarIcons dark:text-darkSidebarIcons group-hover:text-lightSidebarIconsHover dark:group-hover:text-darkSidebarIconsHover transition-colors duration-150 ease-in-out"
     />
     <div 
       class="overflow-hidden block ms-3 pr-4 text-left rtl:text-right transition-all duration-200 ease-in-out"
       :class="{
         'opacity-0 ms-0 translate-x-4 flex-none': isSidebarIconOnly && !isSidebarHovering,
         'opacity-100 ms-3 translate-x-0 flex-1': !isSidebarIconOnly || (isSidebarIconOnly && isSidebarHovering),
+        '!ms-0': isChild && !item.icon && !isSidebarIconOnly,
       }"
       :style="isSidebarIconOnly ? { 
         minWidth: isChild 
-          ? `calc(${expandedWidth} - 0.75rem*2 - 1.5rem*2 - 1.25rem - 0.75rem)`
-          : `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`,
+          ? `calc(${expandedWidth} - 0.75rem*2 - 1.5rem*2 - 1rem - 0.75rem)`
+          : `calc(${expandedWidth} - 0.75rem*2 - 0.75rem*2 - 1rem - 0.75rem)`,
         width: isChild 
-          ? `calc(${expandedWidth} - 0.75rem*2 - 1.5rem*2 - 1.25rem - 0.75rem)`
-          : `calc(${expandedWidth} - 0.75rem*2 - 0.875rem*2 - 1.25rem - 0.75rem)`
+          ? `calc(${expandedWidth} - 0.75rem*2 - 1.5rem*2 - 1rem - 0.75rem)`
+          : `calc(${expandedWidth} - 0.75rem*2 - 0.75rem*2 - 1rem - 0.75rem)`
       } : {}"
     >
       {{ item.label }}
     </div>
     <span class="absolute flex items-center justify-center right-1 top-1/2 -translate-y-1/2" v-if="(item.badge || item.badge === 0) && showExpandedBadge ">
       <Tooltip v-if="item.badgeTooltip">
-        <div class="af-badge inline-flex items-center justify-center h-3 py-2.5 px-1 ms-3 text-xs font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-        fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
+        <div class="af-badge inline-flex items-center justify-center h-5 px-1.5 ms-2 text-[11px] font-medium tabular-nums rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+        fill-lightAnnouncementText dark:fill-darkAnnouncementText text-lightAnnouncementText dark:text-darkAnnouncementText min-w-[1.25rem] max-w-[3rem]">{{ item.badge }}</div>
         <template #tooltip>
           {{ item.badgeTooltip }}
         </template>
       </Tooltip>
       <template v-else>
-        <div class="af-badge inline-flex items-center justify-center h-3 py-2.5 px-1 ms-3 text-xs font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-        fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent min-w-[1.5rem] max-w-[3rem]">{{ item.badge }}</div>
+        <div class="af-badge inline-flex items-center justify-center h-5 px-1.5 ms-2 text-[11px] font-medium tabular-nums rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
+        fill-lightAnnouncementText dark:fill-darkAnnouncementText text-lightAnnouncementText dark:text-darkAnnouncementText min-w-[1.25rem] max-w-[3rem]">{{ item.badge }}</div>
       </template>
     </span>
     <div v-if="(item.badge || item.badge === 0) && isSidebarIconOnly && !isSidebarHovering"  class="af-badge absolute right-0.5 bottom-1 -translate-y-1/2 inline-flex items-center justify-center h-2 w-2 text-sm font-medium rounded-full bg-lightAnnouncementBG dark:bg-darkAnnouncementBG 
-      fill-lightAnnouncementText dark:fill-darkAccent text-lightAnnouncementText dark:text-darkAccent">
+      fill-lightAnnouncementText dark:fill-darkAnnouncementText text-lightAnnouncementText dark:text-darkAnnouncementText">
     </div>
   </component>
 </template>
@@ -63,7 +66,7 @@ import { getIcon } from '@/utils';
 import { Tooltip } from '@/afcl';
 import { ref, watch, computed } from 'vue';
 import { useCoreStore } from '@/stores/core';
-import { IconFileImageOutline } from '@iconify-prerendered/vue-flowbite';
+import { IconFileImage } from '@iconify-prerendered/vue-lucide';
 import { useRoute, RouterLink } from 'vue-router';
 
 const isExternalUrl = (url: string ) => /^https?:\/\//.test(url || '');

package/dist/spa/src/components/RangePicker.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="range-slider" ref="trackRef" @mousedown="onTrackMouseDown">
-    <div class="track"></div>
-    <div class="range bg-lightPrimary/30" :style="rangeStyle"></div>
+    <div class="track bg-lightProgressBarUnfilledColor dark:bg-darkProgressBarUnfilledColor"></div>
+    <div class="range bg-lightPrimary dark:bg-darkPrimary" :style="rangeStyle"></div>
 
     <div
-      class="bg-lightPrimary thumb"
+      class="thumb bg-white border border-lightInputBorderHover shadow-[0_1px_2px_rgba(24,24,27,0.2)] dark:border-darkInputBorder"
       :style="minThumbStyle"
       @mousedown.stop.prevent="startDrag('min', $event)"
       @mouseenter="minHovered = true"
@@ -13,7 +13,7 @@
     <div v-if="minHovered || activeThumb === 'min'" class="thumb-tooltip" :style="minTooltipStyle">{{ minVal }}</div>
 
     <div
-      class="bg-lightPrimary thumb"
+      class="thumb bg-white border border-lightInputBorderHover shadow-[0_1px_2px_rgba(24,24,27,0.2)] dark:border-darkInputBorder"
       :style="maxThumbStyle"
       @mousedown.stop.prevent="startDrag('max', $event)"
       @mouseenter="maxHovered = true"
@@ -34,8 +34,8 @@ const props = defineProps({
   },
   min: { type: Number, default: 0 },
   max: { type: Number, default: 100 },
-  dotSize: { type: Number, default: 20 },
-  height: { type: String, default: '8px' }
+  dotSize: { type: Number, default: 16 },
+  height: { type: String, default: '4px' }
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -184,14 +184,13 @@ onBeforeUnmount(() => {
 .track {
   position: absolute;
   width: 100%;
-  height: 8px;
-  background: #e5e7eb;
+  height: 4px;
   border-radius: 9999px;
 }
 
 .range {
   position: absolute;
-  height: 8px;
+  height: 4px;
   border-radius: 9999px;
 }
 
@@ -209,7 +208,7 @@ onBeforeUnmount(() => {
   transform: translateX(-50%);
   background: rgba(0, 0, 0, 0.75);
   color: #fff;
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
   line-height: 1;
   padding: 6px 6px;