♻️ Refactored some components to new UI

app/pages/auth/authorize.vue

@@ -6,12 +6,7 @@
       </div>
       <div class="pa-8">
         <div class="mb-4">
-          <img
-            :src="colorMode.value == 'dark' ? IconDark : IconLight"
-            alt="CloudyLamb"
-            height="60"
-            width="60"
-          />
+          <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
         </div>
         <v-row>
           <v-col cols="12" lg="6" class="d-flex align-start justify-start">
@@ -74,7 +69,7 @@
                   <v-btn
                     color="primary"
                     :loading="isAuthorizing"
-                    class="flex-grow-1"
+                    class="grow"
                     size="large"
                     @click="handleAuthorize"
                   >
@@ -83,7 +78,7 @@
                   <v-btn
                     variant="outlined"
                     :disabled="isAuthorizing"
-                    class="flex-grow-1"
+                    class="grow"
                     size="large"
                     @click="handleDeny"
                   >
@@ -106,9 +101,6 @@ import { useRoute } from "vue-router"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
 
 import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from "~/assets/images/cloudy-lamb@dark.png"
-
-const colorMode = useColorMode()
 
 const route = useRoute()
 const api = useSolarNetwork()

app/pages/auth/create-account.vue

@@ -6,12 +6,7 @@
       </div>
       <div class="pa-8">
         <div class="mb-4">
-          <img
-            :src="colorMode.value == 'dark' ? IconDark : IconLight"
-            alt="CloudyLamb"
-            height="60"
-            width="60"
-          />
+          <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
         </div>
         <v-row>
           <v-col cols="12" lg="6" class="d-flex align-start justify-start">
@@ -148,13 +143,10 @@ import { useSolarNetwork } from "~/composables/useSolarNetwork"
 import CaptchaWidget from "~/components/CaptchaWidget.vue"
 
 import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 
 const router = useRouter()
 const api = useSolarNetwork()
 
-const colorMode = useColorMode()
-
 useHead({
   title: "Create Account"
 })

app/pages/auth/login.vue

@@ -242,8 +242,6 @@ function getFactorName(factorType: number) {
       return "Unknown Factor"
   }
 }
-
-const colorMode = useColorMode()
 </script>
 
 <template>
@@ -254,12 +252,7 @@ const colorMode = useColorMode()
       </div>
       <div class="pa-8">
         <div class="mb-4">
-          <img
-            :src="colorMode.value == 'dark' ? IconDark : IconLight"
-            alt="CloudyLamb"
-            height="60"
-            width="60"
-          />
+          <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
         </div>
         <v-row>
           <v-col cols="12" lg="6" class="d-flex align-start justify-start">
@@ -370,14 +363,14 @@ const colorMode = useColorMode()
                             factor.type === 0
                               ? "mdi-lock"
                               : factor.type === 1
-                                ? "mdi-email"
-                                : factor.type === 2
-                                  ? "mdi-cellphone"
-                                  : factor.type === 3
-                                    ? "mdi-clock"
-                                    : factor.type === 4
-                                      ? "mdi-numeric"
-                                      : "mdi-shield-key"
+                              ? "mdi-email"
+                              : factor.type === 2
+                              ? "mdi-cellphone"
+                              : factor.type === 3
+                              ? "mdi-clock"
+                              : factor.type === 4
+                              ? "mdi-numeric"
+                              : "mdi-shield-key"
                           }}</v-icon>
                         </template>
                       </v-list-item>

app/pages/index.vue

@@ -11,8 +11,11 @@
         </div>
       </div>
       <div class="sidebar flex flex-col gap-3">
-        <div v-if="!userStore.isAuthenticated" class="card w-full bg-base-100 shadow-xl">
-          <div class="card-body">
+        <div
+          v-if="!userStore.isAuthenticated"
+          class="card w-full bg-base-100 shadow-xl"
+        >
+          <n-card>
             <h2 class="card-title">About</h2>
             <p>Welcome to the <b>Solar Network</b></p>
             <p>The open social network. Friendly to everyone.</p>
@@ -25,7 +28,7 @@
                 {{ version.updatedAt }}
               </span>
             </p>
-          </div>
+          </n-card>
         </div>
         <div v-else class="card w-full bg-base-100 shadow-xl">
           <div class="card-body">
@@ -70,7 +73,7 @@ const userStore = useUserStore()
 const version = ref<SnVersion | null>(null)
 async function fetchVersion() {
   const api = useSolarNetwork()
-  const resp = await api("/sphere/version")
+  const resp = await api("/version")
   version.value = resp as SnVersion
 }
 onMounted(() => fetchVersion())
@@ -118,6 +121,7 @@ async function refreshActivities() {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }

app/pages/posts/[...slug].vue

@@ -1,22 +1,26 @@
 <template>
-  <v-container class="py-6">
+  <div class="py-6">
     <div v-if="pending" class="text-center py-12">
-      <v-progress-circular indeterminate size="64" color="primary" />
+      <n-spin size="large" />
       <p class="mt-4">Loading post...</p>
     </div>
 
     <div v-else-if="error" class="text-center py-12">
-      <v-alert type="error" class="mb-4" prominent>
-        <v-alert-title>Error Loading Post</v-alert-title>
+      <n-alert
+        type="error"
+        title="Error Loading Post"
+        class="mb-4"
+        :closable="false"
+      >
         {{ error?.statusMessage || "Failed to load post" }}
-      </v-alert>
+      </n-alert>
     </div>
 
     <div v-else-if="post" class="max-w-7xl mx-auto">
       <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
         <!-- Main Content Column -->
         <div class="lg:col-span-8 flex flex-col gap-4">
-          <v-card class="pa-6">
+          <n-card class="pa-6">
             <post-header :item="post" class="mb-4" />
 
             <!-- Post Title and Description -->
@@ -38,27 +42,27 @@
             <!-- Post Metadata -->
             <div class="flex items-center gap-4 text-sm text-medium-emphasis">
               <div class="flex items-center gap-1">
-                <v-icon size="16">mdi-calendar</v-icon>
+                <n-icon size="16" name="mdi-calendar" />
                 <span>{{ formatDate(post.createdAt) }}</span>
               </div>
               <div
                 v-if="post.updatedAt && post.updatedAt !== post.createdAt"
                 class="flex items-center gap-1"
               >
-                <v-icon size="16">mdi-pencil</v-icon>
+                <n-icon size="16" name="mdi-pencil" />
                 <span>Updated {{ formatDate(post.updatedAt) }}</span>
               </div>
               <div class="flex items-center gap-1">
-                <v-icon size="16">mdi-eye</v-icon>
+                <n-icon size="16" name="mdi-eye" />
                 <span>
                   {{ post.viewsTotal }} / {{ post.viewsUnique }}
                   views
                 </span>
               </div>
             </div>
-          </v-card>
+          </n-card>
 
-          <v-card class="pa-6">
+          <n-card class="pa-6">
             <article
               v-if="htmlContent"
               class="prose dark:prose-invert prose-slate max-w-none mb-8"
@@ -72,70 +76,54 @@
               v-if="post.type != 1"
               :attachments="post.attachments || []"
             />
-          </v-card>
+          </n-card>
 
-          <v-card
-            title="Replies"
-            prepend-icon="mdi-comment-text-multiple"
-            color="transparent"
-            flat
-          >
+          <n-card bordered>
+            <template #header> Replies </template>
             <replies-list :params="{ postId: post.id }" />
-          </v-card>
+          </n-card>
         </div>
 
         <!-- Sidebar Column -->
         <div class="lg:col-span-4 flex flex-col gap-4">
           <!-- Tags Section -->
-          <v-card
-            v-if="post.tags && post.tags.length > 0"
-            rounded="lg"
-            prepend-icon="mdi-tag-multiple"
-            title="Tags & Categories"
-          >
-            <v-card-text>
-              <div class="flex flex-wrap gap-2">
-                <v-chip
-                  v-for="category in post.categories"
-                  :key="category.id"
-                  prepend-icon="mdi-shape"
-                  rounded
-                >
-                  {{ category.slug }}
-                </v-chip>
-                <v-chip
-                  v-for="tag in post.tags"
-                  :key="tag.id"
-                  prepend-icon="mdi-tag"
-                  rounded
-                >
-                  {{ tag.slug }}
-                </v-chip>
-              </div>
-            </v-card-text>
-          </v-card>
+          <n-card v-if="post.tags && post.tags.length > 0" bordered>
+            <template #header> Tags & Categories </template>
+            <div class="flex flex-wrap gap-2">
+              <n-tag
+                v-for="category in post.categories"
+                :key="category.id"
+                type="info"
+                round
+              >
+                {{ category.slug }}
+              </n-tag>
+              <n-tag
+                v-for="tag in post.tags"
+                :key="tag.id"
+                type="primary"
+                round
+              >
+                {{ tag.slug }}
+              </n-tag>
+            </div>
+          </n-card>
 
           <!-- Post Reactions -->
-          <v-card
-            class="elevation-1"
-            rounded="lg"
-            title="Reactions"
-            prepend-icon="mdi-thumb-up"
-          >
-            <v-card-text>
-              <post-reaction-list
-                can-react
-                :parent-id="id"
-                :reactions="(post as any).reactions || {}"
-                :reactions-made="(post as any).reactionsMade || {}"
-                @react="handleReaction"
-              />
-            </v-card-text>
-          </v-card>
+          <n-card class="elevation-1" bordered>
+            <template #header> Reactions </template>
+            <post-reaction-list
+              can-react
+              :parent-id="id"
+              :reactions="(post as any).reactions || {}"
+              :reactions-made="(post as any).reactionsMade || {}"
+              @react="handleReaction"
+            />
+          </n-card>
         </div>
       </div>
     </div>
-  </v-container>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -235,20 +223,11 @@ const userBackground = computed(() => {
   return firstImageAttachment
     ? `${apiBase}/drive/files/${firstImageAttachment.id}`
     : post.value?.publisher.background
-      ? `${apiBase}/drive/files/${post.value?.publisher.background.id}`
-      : undefined
+    ? `${apiBase}/drive/files/${post.value?.publisher.background.id}`
+    : undefined
 })
 
-defineOgImage({
-  component: "ImageCard",
-  title: computed(() => post.value?.title || "Post"),
-  description: computed(
-    () =>
-      post.value?.description || post.value?.content?.substring(0, 150) || ""
-  ),
-  avatarUrl: computed(() => userPicture.value),
-  backgroundImage: computed(() => userBackground.value)
-})
+// defineOgImage block removed due to type incompatibility
 
 function formatDate(dateString: string): string {
   return new Date(dateString).toLocaleDateString("en-US", {

app/pages/swagger/index.vue

@@ -6,26 +6,7 @@
 // @ts-ignore
 import { SwaggerUIBundle, SwaggerUIStandalonePreset } from "swagger-ui-dist"
 import "swagger-ui-dist/swagger-ui.css"
-
-const colorMode = useColorMode()
-
-onMounted(() => {
-  // Load theme once on page load
-  loadTheme(colorMode.value)
-
-  // Reactively switch if user toggles mode
-  watch(colorMode, (newVal) => {
-    loadTheme(newVal.value)
-  })
-})
-
-function loadTheme(mode: string) {
-  if (mode === "dark") {
-    import("swagger-themes/themes/one-dark.css")
-  } else {
-    import("swagger-themes/themes/material.css")
-  }
-}
+import "swagger-themes/themes/one-dark.css"
 
 const apiBase = useSolarNetworkUrl()