feat: enhance icons and components for improved UI

- Updated `GlobalUploadIndicator.vue` to include `watch` for better state management.
- Modified `CoinsIcon.vue`, `Globe.vue`, and `VideoPlayIcon.vue` to support filled and outlined states.
- Added new icons: `hard-drive.vue` and `shield-user.vue`.
- Improved `AppDialog.vue` to include `ClientOnly` for hydration mismatch handling.
- Refactored `BaseTable.vue` to include `ref` for better reactivity.
- Changed route redirection in `index.ts` for better clarity.
- Enhanced `Billing.vue` and `BillingTopupDialog.vue` with new icons and improved UI elements.
- Updated `PaymentHistory.tsx` and `PlanSelection.tsx` to use new icon components.
- Refined `Settings.vue` to utilize new icons and improve layout.
- Adjusted `Upload.vue` and `Videos.vue` for better component organization and imports.
- Cleaned up `auth.ts` store to include `computed` for better state management.
- Updated `tsconfig.json` to streamline TypeScript configuration.
- Removed unnecessary console log in `vite-plugin-ssr-middleware.ts`.

src/routes/settings/Billing/Billing.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import CoinsIcon from '@/components/icons/CoinsIcon.vue';
+import PlusIcon from '@/components/icons/PlusIcon.vue';
 import AppButton from '@/components/ui/AppButton.vue';
 import { useUsageQuery } from '@/composables/useUsageQuery';
 import BillingTopupDialog from '@/routes/settings/Billing/components/BillingTopupDialog.vue';
@@ -69,7 +71,7 @@ const openTopupDialog = () => {
             :description="$t('settings.billing.currentBalance', { balance: auth.formatMoney(walletBalance) })"
             iconBoxClass="bg-primary/10">
             <template #icon>
-                <CoinsIcon class="w-5 h-5 text-primary" />
+                <CoinsIcon filled class="w-5 h-5 text-primary" />
             </template>
 
             <template #actions>

src/routes/settings/Billing/components/BillingTopupDialog.vue

@@ -9,6 +9,7 @@ import { useUsageQuery } from '@/composables/useUsageQuery';
 import { getApiErrorMessage } from '@/lib/utils';
 import { useAuthStore } from '@/stores/auth';
 import { useTranslation } from 'i18next-vue';
+import { ref } from 'vue';
 
 const visible = defineModel<boolean>();
 const toast = useAppToast();

src/routes/settings/Billing/components/BillingUsageSection.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import ActivityIcon from '@/components/icons/ActivityIcon.vue';
+import HardDrive from '@/components/icons/hard-drive.vue';
 import Video from '@/components/icons/Video.vue';
 import { useUsageQuery } from '@/composables/useUsageQuery';
 import { formatBytes } from '@/lib/utils';
+import { computed } from 'vue';
 
 defineProps<{}>();
 const { data: usageSnapshot } = useUsageQuery();
@@ -11,7 +12,7 @@ const dataList = computed(() => [
         id: 'storage',
         title: 'settings.billing.storage',
         description: { key: 'settings.billing.storageUsedOfLimit', params: { used: formatBytes(usageSnapshot.value?.totalStorage ?? 0) } },
-        icon: ActivityIcon,
+        icon: HardDrive,
     },
     {
         id: 'videos',
@@ -27,7 +28,7 @@ const dataList = computed(() => [
         <div class="px-6 py-4 hover:bg-muted/30 transition-all grid grid-cols-1 md:grid-cols-2 gap-6 rounded-md">
             <div v-for="item in dataList" :key="item.id" class="flex items-center gap-4">
                 <div class="w-10 h-10 rounded-md bg-accent/10 flex items-center justify-center shrink-0">
-                    <component :is="item.icon" class="w-5 h-5 text-accent" />
+                    <component :is="item.icon" filled class="w-5 h-5 text-accent" />
                 </div>
                 <div class="hover:underline">
                     <p class="text-sm font-medium text-foreground">{{ $t(item.title) }}</p>

src/routes/settings/Billing/components/PaymentHistory.tsx

@@ -1,16 +1,16 @@
 import { client } from "@/api/rpcclient";
 import DownloadIcon from "@/components/icons/DownloadIcon.vue";
 import ListIcon from "@/components/icons/ListIcon.vue";
+import AppButton from "@/components/ui/AppButton.vue";
 import BaseTable from "@/components/ui/BaseTable.vue";
 import { useAppToast } from "@/composables/useAppToast";
 import { getApiErrorMessage, getStatusStyles } from "@/lib/utils";
 import { PaymentHistoryItem } from "@/server/gen/proto/app/v1/common";
 import { useAuthStore } from "@/stores/auth";
 import { useQuery } from "@pinia/colada";
-import { useTranslation } from "i18next-vue";
 import type { ColumnDef } from "@tanstack/vue-table";
+import { useTranslation } from "i18next-vue";
 import { computed, defineComponent, ref } from "vue";
-import AppButton from "@/components/ui/AppButton.vue";
 
 const pageSizeOptions = [5, 10, 20, 50] as const;
 
@@ -227,7 +227,7 @@ const PaymentHistory = defineComponent({
             <div class="px-6 py-4">
                 <div class="flex items-center gap-4 mb-4">
                     <div class="w-10 h-10 rounded-md bg-accent/10 flex items-center justify-center shrink-0">
-                        <ListIcon class="w-6 h-6 text-primary" />
+                        <ListIcon filled class="w-6 h-6 text-primary" />
                     </div>
                     <div>
                         <p class="text-sm font-medium text-foreground">{t('settings.billing.paymentHistory')}</p>

src/routes/settings/Billing/components/PlanSelection.tsx

@@ -1,6 +1,6 @@
 import { client as rpcClient } from '@/api/rpcclient';
 import CheckIcon from '@/components/icons/CheckIcon.vue';
-import CreditCardIcon from '@/components/icons/CreditCardIcon.vue';
+import Credit from '@/components/icons/Credit.vue';
 import { cn } from '@/lib/utils';
 import type { Plan as ModelPlan } from '@/server/gen/proto/app/v1/common';
 import { useAuthStore } from '@/stores/auth';
@@ -89,7 +89,7 @@ const PlanSelection = defineComponent({
       <div class="px-6 py-4">
         <div class="mb-4 flex items-center gap-4">
           <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-primary/10">
-            <CreditCardIcon class="h-5 w-5 text-primary" />
+            <Credit filled class="h-5 w-5 text-primary" />
           </div>
           <div>
             <p class="text-sm font-medium text-foreground">{t('settings.billing.availablePlans')}</p>