feat: update icons and improve loading states in various components

- Updated `hard-drive.vue` and `shield-user.vue` icons to use `currentColor` for better color management.
- Enhanced `BaseTable.vue` to support skeleton loading rows and improved loading state rendering.
- Refactored notification components to use new icon components (`Inbox`, `Video`, `Credit`, `BellOff`, `BellDot`) instead of icon classes.
- Added new icons for `BellDot` and `BellOff`.
- Improved the `QuickActions.vue` component for better hover effects.
- Updated various settings components to use consistent icon styling and improved accessibility.
- Refactored `AdsVastTable.tsx`, `DangerZone.vue`, `DomainsDnsTable.vue`, `PlayerConfigsTable.vue`, and `PopupAdsTable.tsx` to streamline loading states and skeleton rendering.

src/components/NotificationDrawer.vue

@@ -4,6 +4,7 @@ import { useNotifications } from '@/composables/useNotifications';
 import { onClickOutside } from '@vueuse/core';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useTranslation } from 'i18next-vue';
+import BellOff from './icons/BellOff.vue';
 
 const isMounted = ref(false);
 onMounted(() => {
@@ -98,7 +99,7 @@ defineExpose({ toggle });
                     </template>
 
                     <div v-else class="py-12 text-center">
-                        <span class="i-lucide-bell-off w-12 h-12 text-gray-300 mx-auto block mb-3"></span>
+                         <BellOff class="w-12 h-12 text-gray-300 mx-auto block mb-3" />
                         <p class="text-gray-500 text-sm">{{ t('notification.empty.title') }}</p>
                     </div>
                 </div>