feat: Refactor icon components to support filled and outlined states

- Updated Add.vue to handle filled and outlined states, merging AddFilled.vue functionality.
- Refactored Bell.vue and BellFilled.vue into a single component with filled state support.
- Created Credit.vue for credit card icon with filled and outlined states.
- Refactored Home.vue and HomeFilled.vue into a single component with filled state support.
- Refactored Layout.vue and LayoutFilled.vue into a single component with filled state support.
- Refactored Upload.vue and UploadFilled.vue into a single component with filled state support.
- Refactored Video.vue and VideoFilled.vue into a single component with filled state support.
- Enhanced index.tsx to include nonce for security in SSR.
- Updated main.ts to handle application data from SSR.
- Improved auth layout to include meta description for SEO.
- Updated routes to include meta information for head management.
- Simplified auth store methods for better readability and error handling.
- Updated UnoCSS configuration to include class prefix for better utility management.

src/routes/auth/layout.vue

@@ -11,7 +11,10 @@
                 {{ content[route.name as keyof typeof content]?.subtitle || '' }}
             </p>
             <vue-head :input="{
-                title: content[route.name as keyof typeof content]?.headTitle || 'Authentication'
+                title: content[route.name as keyof typeof content]?.headTitle || 'Authentication',
+                meta: [
+                    { name: 'description', content: content[route.name as keyof typeof content]?.subtitle || '' }
+                ]
             }" />
         </div>
         <router-view />

src/routes/index.ts

@@ -67,33 +67,57 @@ const routes: RouteData[] = [
             path: "",
             name: "overview",
             component: () => import("./add/Add.vue"),
-            beforeEnter: (to, from, next) => {
-              const head = inject(headSymbol);
-              (head as any).push({
+            meta: {
+              head: {
                 title: 'Overview - Holistream',
-              });
-              next();
+              },
             }
           },
           {
             path: "upload",
             name: "upload",
             component: () => import("./add/Add.vue"),
+            meta: {
+              head: {
+                title: 'Upload - Holistream',
+              },
+            }
           },
           {
             path: "video",
             name: "video",
             component: () => import("./add/Add.vue"),
+            meta: {
+              head: {
+                title: 'Videos - Holistream',
+                meta: [
+                  { name: 'description', content: 'Manage your video content.' },
+                ],
+              },
+            }
           },
           {
-            path: "add",
-            name: "add",
+            path: "plans",
+            name: "plans",
             component: () => import("./add/Add.vue"),
+            meta: {
+              head: {
+                title: 'Plans & Billing',
+                meta: [
+                  { name: 'description', content: 'Manage your plans and billing information.' },
+                ],
+              },
+            }
           },
           {
             path: "notification",
             name: "notification",
             component: () => import("./add/Add.vue"),
+            meta: {
+              head: {
+                title: 'Notification - Holistream',
+              },
+            }
           },
         ],
       },
@@ -115,6 +139,8 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const auth = useAuthStore();
+  const head = inject(headSymbol);
+  (head as any).push(to.meta.head || {});
   if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!auth.user) {
       next({ name: "login" });