👽 Update API path

This reverts commit 0a3e4b75fd.

.dockerignore

@@ -0,0 +1 @@
+node_modules/

.gitignore

@@ -8,6 +8,7 @@ dist
 
 # Node dependencies
 node_modules
+bun.lock
 
 # Logs
 logs

Dockerfile

@@ -0,0 +1,32 @@
+# Stage 1: Build the application
+FROM oven/bun:1 as builder
+WORKDIR /app
+
+# Copy dependency definition files
+COPY package.json ./
+
+# Install dependencies
+RUN bun install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the Nuxt application
+RUN bun run build
+
+# Stage 2: Create the production image
+FROM node:20-slim as runner
+WORKDIR /app
+
+# Copy the built output from the builder stage
+COPY --from=builder /app/.output ./.output
+
+# Set environment variables for the Nuxt server
+ENV HOST=0.0.0.0
+ENV PORT=3000
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# The command to run the application
+CMD ["node", ".output/server/index.mjs"]

app/app.vue

@@ -1,10 +1,22 @@
 <template>
-  <nuxt-loading-indicator :color="colorMode.value == 'dark' ? 'white' : '#3f51b5'" />
-  <nuxt-layout>
-    <nuxt-page />
-  </nuxt-layout>
+  <naive-config>
+    <n-global-style />
+    <n-dialog-provider>
+      <n-notification-provider>
+        <naive-notification />
+        <n-message-provider>
+          <n-loading-bar-provider>
+            <naive-loading-bar navigation />
+            <nuxt-layout>
+              <nuxt-page />
+            </nuxt-layout>
+          </n-loading-bar-provider>
+        </n-message-provider>
+      </n-notification-provider>
+    </n-dialog-provider>
+  </naive-config>
 </template>
 
 <script setup lang="ts">
-const colorMode = useColorMode()
+import "@fontsource-variable/nunito"
 </script>

app/assets/css/main.css

@@ -1,32 +1,52 @@
 @import "tailwindcss";
-
-@layer base {
-  :root {
-    --font-family: "Nunito Variable", "Helvatica", sans-serif;
-  }
-}
-
+@plugin "daisyui";
 @plugin "@tailwindcss/typography";
 
-@import "@fontsource-variable/nunito";
-@import "@mdi/font/css/materialdesignicons.css";
-
 @layer theme, base, components, utilities;
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
 
-html,
-body {
-  font-family: var(--font-family);
-  background-color: rgba(var(--v-theme-background), 1);
+@layer base {
+  :root {
+    --font-family: "Nunito Variable", "Helvatica", sans-serif;
+  }
+
+  html,
+  body {
+    font-family: var(--font-family);
+  }
 }
 
 .page-enter-active,
 .page-leave-active {
   transition: all 0.4s;
 }
+
 .page-enter-from,
 .page-leave-to {
   opacity: 0;
   filter: blur(1rem);
 }
+
+.n-image-preview-toolbar .n-base-icon {
+  padding: 0;
+}
+
+.n-image-preview-toolbar {
+  gap: 1rem;
+}
+
+.h-layout {
+  /* margin of the navbar + actual navbar */
+  height: calc(100vh - 64px*2);
+}
+
+/* for the minimal layout */
+.h-compact-layout {
+  height: calc(100vh - 48px);
+}
+
+.min-h-layout {
+  /* margin of the navbar + actual navbar */
+  min-height: calc(100vh - 64px*2);
+}

app/auto-imports.d.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const useDialog: typeof import('naive-ui').useDialog
+  const useLoadingBar: typeof import('naive-ui').useLoadingBar
+  const useMessage: typeof import('naive-ui').useMessage
+  const useNotification: typeof import('naive-ui').useNotification
+}

app/components.d.ts

@@ -0,0 +1,128 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import { GlobalComponents } from 'vue'
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    NAlert: typeof import('naive-ui')['NAlert']
+    NAvatar: typeof import('naive-ui')['NAvatar']
+    NBtn: typeof import('naive-ui')['NBtn']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCardSection: typeof import('naive-ui')['NCardSection']
+    NCarousel: typeof import('naive-ui')['NCarousel']
+    NCarouselItem: typeof import('naive-ui')['NCarouselItem']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NChip: typeof import('naive-ui')['NChip']
+    NCode: typeof import('naive-ui')['NCode']
+    NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDialog: typeof import('naive-ui')['NDialog']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
+    NIcon: typeof import('naive-ui')['NIcon']
+    NImage: typeof import('naive-ui')['NImage']
+    NImagePreview: typeof import('naive-ui')['NImagePreview']
+    NImg: typeof import('naive-ui')['NImg']
+    NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
+    NInput: typeof import('naive-ui')['NInput']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NProgress: typeof import('naive-ui')['NProgress']
+    NRadio: typeof import('naive-ui')['NRadio']
+    NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NResult: typeof import('naive-ui')['NResult']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NTab: typeof import('naive-ui')['NTab']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
+    NTextarea: typeof import('naive-ui')['NTextarea']
+    NThemeEditor: typeof import('naive-ui')['NThemeEditor']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}
+
+// For TSX support
+declare global {
+  const NAlert: typeof import('naive-ui')['NAlert']
+  const NAvatar: typeof import('naive-ui')['NAvatar']
+  const NBtn: typeof import('naive-ui')['NBtn']
+  const NButton: typeof import('naive-ui')['NButton']
+  const NCard: typeof import('naive-ui')['NCard']
+  const NCardSection: typeof import('naive-ui')['NCardSection']
+  const NCarousel: typeof import('naive-ui')['NCarousel']
+  const NCarouselItem: typeof import('naive-ui')['NCarouselItem']
+  const NCheckbox: typeof import('naive-ui')['NCheckbox']
+  const NChip: typeof import('naive-ui')['NChip']
+  const NCode: typeof import('naive-ui')['NCode']
+  const NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
+  const NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+  const NDatePicker: typeof import('naive-ui')['NDatePicker']
+  const NDialog: typeof import('naive-ui')['NDialog']
+  const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+  const NDivider: typeof import('naive-ui')['NDivider']
+  const NDrawer: typeof import('naive-ui')['NDrawer']
+  const NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+  const NDropdown: typeof import('naive-ui')['NDropdown']
+  const NEmpty: typeof import('naive-ui')['NEmpty']
+  const NForm: typeof import('naive-ui')['NForm']
+  const NFormItem: typeof import('naive-ui')['NFormItem']
+  const NGlobalStyle: typeof import('naive-ui')['NGlobalStyle']
+  const NIcon: typeof import('naive-ui')['NIcon']
+  const NImage: typeof import('naive-ui')['NImage']
+  const NImagePreview: typeof import('naive-ui')['NImagePreview']
+  const NImg: typeof import('naive-ui')['NImg']
+  const NInfiniteScroll: typeof import('naive-ui')['NInfiniteScroll']
+  const NInput: typeof import('naive-ui')['NInput']
+  const NList: typeof import('naive-ui')['NList']
+  const NListItem: typeof import('naive-ui')['NListItem']
+  const NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+  const NMenu: typeof import('naive-ui')['NMenu']
+  const NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+  const NModal: typeof import('naive-ui')['NModal']
+  const NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+  const NPopover: typeof import('naive-ui')['NPopover']
+  const NProgress: typeof import('naive-ui')['NProgress']
+  const NRadio: typeof import('naive-ui')['NRadio']
+  const NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+  const NResult: typeof import('naive-ui')['NResult']
+  const NSelect: typeof import('naive-ui')['NSelect']
+  const NSpace: typeof import('naive-ui')['NSpace']
+  const NSpin: typeof import('naive-ui')['NSpin']
+  const NTab: typeof import('naive-ui')['NTab']
+  const NTabPane: typeof import('naive-ui')['NTabPane']
+  const NTabs: typeof import('naive-ui')['NTabs']
+  const NTag: typeof import('naive-ui')['NTag']
+  const NTextarea: typeof import('naive-ui')['NTextarea']
+  const NThemeEditor: typeof import('naive-ui')['NThemeEditor']
+  const NTooltip: typeof import('naive-ui')['NTooltip']
+  const RouterLink: typeof import('vue-router')['RouterLink']
+  const RouterView: typeof import('vue-router')['RouterView']
+}

app/components/Attachment/AttachmentItem.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="relative rounded-md overflow-hidden" :style="containerStyle">
-    <template v-if="itemType == 'image'">
+    <div
+      v-if="itemType == 'image'"
+      class="flex flex-col items-center justify-center"
+    >
       <!-- Blurhash placeholder -->
       <div
         v-if="blurhash"
@@ -15,19 +18,18 @@
         />
       </div>
       <!-- Main image -->
-      <img
+      <n-image
         :src="remoteSource"
         class="w-full h-auto rounded-md transition-opacity duration-500 object-cover cursor-pointer"
         :class="{ 'opacity-0': !imageLoaded && blurhash }"
         @load="imageLoaded = true"
         @error="imageLoaded = true"
-        @click="openExternally"
       />
-    </template>
+    </div>
 
     <audio
       v-else-if="itemType == 'audio'"
-      class="w-full h-auto"
+      class="w-full"
       :src="remoteSource"
       controls
     />
@@ -60,7 +62,7 @@ const aspectRatio = computed(
     props.item.fileMeta?.ratio ??
     (imageWidth.value && imageHeight.value
       ? imageHeight.value / imageWidth.value
-      : 1)
+      : null)
 )
 const imageLoaded = ref(false)
 
@@ -77,7 +79,7 @@ function openExternally() {
       y: rect.top,
       width: rect.width,
       height: rect.height,
-      aspectRatio: aspectRatio.value
+      aspectRatio: aspectRatio.value == null ? 0 : aspectRatio.value
     }
 
     // Store transition data
@@ -98,14 +100,16 @@ const remoteSource = computed(
 
 const blurhashContainerStyle = computed(() => {
   return {
-    "padding-bottom": `${aspectRatio.value * 100}%`
+    "padding-bottom": `${
+      aspectRatio.value == null ? 0 : aspectRatio.value * 100
+    }%`
   }
 })
 
 const containerStyle = computed(() => {
   return {
-    "max-height": props.maxHeight ?? "720px",
-    "aspect-ratio": aspectRatio.value
+    maxHeight: props.maxHeight ?? "720px",
+    aspectRatio: aspectRatio.value?.toString()
   }
 })
 

app/components/Attachment/AttachmentList.vue

@@ -11,33 +11,27 @@
       <!-- All images: use carousel -->
       <div
         v-if="isAllImages"
-        class="carousel-container rounded-lg overflow-hidden"
+        class="carousel-container rounded-xl border bg-base-300 overflow-hidden"
         :style="carouselStyle"
       >
-        <v-card width="100%" class="transition-all duration-300" border>
-          <v-carousel
+        <n-carousel height="100%" show-arrow>
+          <n-carousel-item
+            v-for="attachment in attachments"
+            :key="attachment.id"
             height="100%"
-            hide-delimiter-background
-            show-arrows="hover"
-            hide-delimiters
-            progress="primary"
+            width="100%"
+            cover
           >
-            <v-carousel-item
-              v-for="attachment in attachments"
-              :key="attachment.id"
-              cover
-            >
-              <attachment-item
-                original
-                :item="attachment"
-              />
-            </v-carousel-item>
-          </v-carousel>
-        </v-card>
+            <attachment-item
+              original
+              class="h-full w-full"
+              :item="attachment"
+            />
+          </n-carousel-item>
+        </n-carousel>
       </div>
 
-      <!-- Mixed content: vertical scrollable -->
-      <div v-else class="space-y-4 max-h-96 overflow-y-auto">
+      <div v-else class="space-y-4 flex flex-col">
         <attachment-item
           v-for="attachment in attachments"
           :key="attachment.id"
@@ -58,8 +52,6 @@ const props = defineProps<{
   maxHeight?: number
 }>()
 
-const apiBase = useSolarNetworkUrl()
-
 const isAllImages = computed(
   () =>
     props.attachments.length > 0 &&
@@ -194,8 +186,4 @@ function calculateAspectRatio(): number {
     ? (mostFrequent[mid - 1]! + mostFrequent[mid]!) / 2
     : mostFrequent[mid]!
 }
-
-function getAttachmentUrl(attachment: SnAttachment): string {
-  return `${apiBase}/drive/files/${attachment.id}`
-}
 </script>

app/components/CaptchaWidget.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="d-flex justify-center">
+  <div class="flex justify-center">
     <div v-if="provider === 'cloudflare'">
       <turnstile v-if="!!apiKey" :sitekey="apiKey" @callback="handleSuccess" />
       <div v-else class="mx-auto">
-        <v-progress-circular indeterminate />
+        <span class="loading loading-spinner loading-md"></span>
       </div>
     </div>
     <div v-else-if="provider === 'hcaptcha'">
@@ -11,9 +11,10 @@
         v-if="!!apiKey"
         :sitekey="apiKey"
         @verify="(tk: string) => handleSuccess(tk)"
-      />
+      >
+      </hcaptcha>
       <div v-else class="mx-auto">
-        <v-progress-circular indeterminate />
+        <span class="loading loading-spinner loading-md"></span>
       </div>
     </div>
     <div
@@ -21,8 +22,8 @@
       class="h-captcha"
       :data-sitekey="apiKey"
     />
-    <div v-else class="d-flex flex-column align-center justify-center gap-1">
-      <v-icon size="32"> mdi-alert-circle-outline </v-icon>
+    <div v-else class="flex flex-col items-center justify-center gap-1">
+      <n-icon :component="AlertTriangleIcon" />
       <span>Captcha provider not configured correctly.</span>
     </div>
   </div>
@@ -32,6 +33,7 @@
 import { ref, onMounted } from "vue"
 import Turnstile from "cfturnstile-vue3"
 import Hcaptcha from "@hcaptcha/vue3-hcaptcha"
+import { AlertTriangleIcon } from "lucide-vue-next"
 
 const props = defineProps({
   provider: {
@@ -59,7 +61,7 @@ function handleSuccess(token: string) {
 // This function will be used to fetch configuration if needed,
 // Like the backend didn't embed the configuration properly.
 async function fetchConfiguration() {
-  const resp = await api<{ provider: string; apiKey: string }>("/id/captcha")
+  const resp = await api<{ provider: string; apiKey: string }>("/pass/captcha")
   provider.value = resp.provider
   apiKey.value = resp.apiKey
 }

app/components/FooterCompact.vue

@@ -1,30 +0,0 @@
-<template>
-  <v-container class="footer">
-    <div class="d-flex justify-space-between align-center">
-      <v-select
-        :items="['English (United States)']"
-        model-value="English (United States)"
-        variant="plain"
-        density="compact"
-        hide-details
-        class="flex-grow-0"
-      />
-      <div class="d-flex">
-        <v-btn variant="text" size="small" class="text-capitalize">Help</v-btn>
-        <v-btn variant="text" size="small" class="text-capitalize"
-          >Privacy</v-btn
-        >
-        <v-btn variant="text" size="small" class="text-capitalize">Terms</v-btn>
-      </div>
-    </div>
-  </v-container>
-</template>
-
-<style scoped>
-.footer {
-  position: absolute;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-</style>

app/components/OgImage/ImageCard.vue

@@ -4,49 +4,23 @@ import { useSiteConfig } from "#site-config/app/composables"
 import { computed, defineComponent, h, resolveComponent } from "vue"
 
 const props = defineProps({
-  colorMode: { type: String, required: false },
+  colorMode: { type: String, required: false, default: "light" },
   title: { type: String, required: false, default: "title" },
-  description: { type: String, required: false },
-  icon: { type: [String, Boolean], required: false },
-  siteName: { type: String, required: false },
-  siteLogo: { type: String, required: false },
+  description: { type: String, required: false, default: null },
+  icon: { type: [String, Boolean], required: false, default: null },
+  siteName: { type: String, required: false, default: null },
+  siteLogo: { type: String, required: false, default: null },
   theme: { type: String, required: false, default: "#3f51b5" },
-  backgroundImage: { type: String, required: false },
-  avatarUrl: { type: String, required: false }
+  backgroundImage: { type: String, required: false, default: null },
+  avatarUrl: { type: String, required: false, default: null }
 })
-const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i
 const runtimeConfig = useOgImageRuntimeConfig()
 const colorMode = computed(() => {
   return props.colorMode || runtimeConfig.colorPreference || "light"
 })
 
-const themeHex = computed(() => {
-  if (HexRegex.test(props.theme)) return props.theme
-  if (HexRegex.test(`#${props.theme}`)) return `#${props.theme}`
-  if (props.theme.startsWith("rgb")) {
-    const rgb = props.theme
-      .replace("rgb(", "")
-      .replace("rgba(", "")
-      .replace(")", "")
-      .split(",")
-      .map((v) => Number.parseInt(v.trim(), 10))
-    const hex = rgb
-      .map((v) => {
-        const hex2 = v.toString(16)
-        return hex2.length === 1 ? `0${hex2}` : hex2
-      })
-      .join("")
-    return `#${hex}`
-  }
-  return "#FFFFFF"
-})
-const themeRgb = computed(() => {
-  return themeHex.value
-    .replace("#", "")
-    .match(/.{1,2}/g)
-    ?.map((v) => Number.parseInt(v, 16))
-    .join(", ")
-})
+
+
 const textShadow = computed(() => {
   return '2px 2px 8px rgba(0,0,0,0.8)'
 })
@@ -54,9 +28,7 @@ const siteConfig = useSiteConfig()
 const siteName = computed(() => {
   return props.siteName || siteConfig.name
 })
-const siteLogo = computed(() => {
-  return props.siteLogo || siteConfig.logo
-})
+
 const IconComponent = runtimeConfig.hasNuxtIcon
   ? resolveComponent("Icon")
   : defineComponent({
@@ -67,7 +39,7 @@ const IconComponent = runtimeConfig.hasNuxtIcon
 if (
   typeof props.icon === "string" &&
   !runtimeConfig.hasNuxtIcon &&
-  process.dev
+  import.meta.dev
 ) {
   console.warn(
     "Please install `@nuxt/icon` to use icons with the fallback OG Image component."

app/components/OgImage/NuxtSeo.vue

@@ -3,14 +3,14 @@ import { useOgImageRuntimeConfig } from "#og-image/app/utils"
 import { useSiteConfig } from "#site-config/app/composables"
 import { computed, defineComponent, h, resolveComponent } from "vue"
 const props = defineProps({
-  colorMode: { type: String, required: false },
+  colorMode: { type: String, required: false, default: "light" },
   title: { type: String, required: false, default: "title" },
-  description: { type: String, required: false },
-  icon: { type: [String, Boolean], required: false },
-  siteName: { type: String, required: false },
-  siteLogo: { type: String, required: false },
+  description: { type: String, required: false, default: null },
+  icon: { type: [String, Boolean], required: false, default: null },
+  siteName: { type: String, required: false, default: null },
+  siteLogo: { type: String, required: false, default: null },
   theme: { type: String, required: false, default: "#3f51b5" },
-  backgroundImage: { type: String, required: false }
+  backgroundImage: { type: String, required: false, default: null }
 })
 const HexRegex = /^#(?:[0-9a-f]{3}){1,2}$/i
 const runtimeConfig = useOgImageRuntimeConfig()
@@ -62,7 +62,7 @@ const IconComponent = runtimeConfig.hasNuxtIcon
 if (
   typeof props.icon === "string" &&
   !runtimeConfig.hasNuxtIcon &&
-  process.dev
+  import.meta.dev
 ) {
   console.warn(
     "Please install `@nuxt/icon` to use icons with the fallback OG Image component."

app/components/Post/PostEditor.vue

@@ -1,27 +1,28 @@
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-3">
     <pub-select v-model:value="publisher" />
-    <v-textarea
-      v-model="content"
+    <n-input
+      v-model:value="content"
+      type="textarea"
       placeholder="What's happended?!"
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
     />
-    <div class="flex justify-between">
-      <v-btn type="primary" :loading="submitting" @click="submit">
+    <div class="flex justify-end">
+      <n-button type="primary" :loading="submitting" @click="submit">
         Post
-        <template #append>
-          <v-icon>mdi-send</v-icon>
+        <template #icon>
+          <n-icon :component="SendIcon" />
         </template>
-      </v-btn>
+      </n-button>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import * as tus from 'tus-js-client'
-import { useSolarNetwork } from '~/composables/useSolarNetwork'
+import { SendIcon } from "lucide-vue-next"
+import { ref } from "vue"
+import { useSolarNetwork } from "~/composables/useSolarNetwork"
 
 // Interface for uploaded files in the editor
 interface UploadedFile {
@@ -30,12 +31,11 @@ interface UploadedFile {
   type: string
 }
 
-const emits = defineEmits(['posted'])
+const emits = defineEmits(["posted"])
 
 const publisher = ref<string | undefined>()
-const content = ref('')
+const content = ref("")
 
-const selectedFiles = ref<File[]>([])
 const fileList = ref<UploadedFile[]>([])
 
 const submitting = ref(false)
@@ -44,71 +44,21 @@ async function submit() {
   submitting.value = true
   const api = useSolarNetwork()
   await api(`/sphere/posts?pub=${publisher.value}`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'content-type': 'application/json',
+      "content-type": "application/json"
     },
     body: JSON.stringify({
       content: content.value,
       attachments: fileList.value
         .filter((e) => e.url != null)
-        .map((e) => e.url!.split('/').reverse()[0]),
-    }),
+        .map((e) => e.url!.split("/").reverse()[0])
+    })
   })
 
   submitting.value = false
-  content.value = ''
+  content.value = ""
   fileList.value = []
-  emits('posted')
-}
-
-function handleFileSelect() {
-  selectedFiles.value.forEach(file => {
-    uploadFile(file)
-  })
-  selectedFiles.value = []
-}
-
-function uploadFile(file: File) {
-  const upload = new tus.Upload(file, {
-    endpoint: '/cgi/drive/tus',
-    retryDelays: [0, 3000, 5000, 10000, 20000],
-    removeFingerprintOnSuccess: false,
-    uploadDataDuringCreation: false,
-    metadata: {
-      filename: file.name,
-      'content-type': file.type ?? 'application/octet-stream',
-    },
-    headers: {
-      'X-DirectUpload': 'true',
-    },
-    onShouldRetry: () => false,
-    onError: function (error) {
-      console.error('[DRIVE] Upload failed:', error)
-    },
-    onProgress: function (_bytesUploaded, _bytesTotal) {
-      // Could show progress
-    },
-    onSuccess: function (payload) {
-      const rawInfo = payload.lastResponse.getHeader('x-fileinfo')
-      const jsonInfo = JSON.parse(rawInfo as string)
-      console.log('[DRIVE] Upload successful: ', jsonInfo)
-      fileList.value.push({
-        name: file.name,
-        url: `/cgi/drive/files/${jsonInfo.id}`,
-        type: jsonInfo.mime_type,
-      })
-    },
-    onBeforeRequest: function (req) {
-      const xhr = req.getUnderlyingObject()
-      xhr.withCredentials = true
-    },
-  })
-  upload.findPreviousUploads().then(function (previousUploads) {
-    if (previousUploads.length > 0 && previousUploads[0]) {
-      upload.resumeFromPreviousUpload(previousUploads[0])
-    }
-    upload.start()
-  })
+  emits("posted")
 }
 </script>

app/components/Post/PostHeader.vue

@@ -1,29 +1,51 @@
 <template>
-  <div class="flex gap-3 items-center">
-    <v-avatar :image="publisherAvatar" size="40" />
-    <div class="flex-grow-1 flex flex-col">
-      <p class="flex gap-1 items-baseline">
+  <div :class="['flex gap-3 items-center', { 'gap-2': compact }]">
+    <n-avatar
+      round
+      :src="publisherAvatar"
+      :size="compact ? 24 : 36"
+      :border="compact"
+      @click="router.push('/publishers/' + props.item.publisher.name)"
+    />
+    <div class="grow flex flex-col">
+      <p v-if="compact" class="flex gap-1 items-baseline text-sm">
         <span class="font-bold">{{ props.item.publisher.nick }}</span>
-        <span class="text-xs">@{{ props.item.publisher.name }}</span>
-      </p>
-      <p class="text-xs flex gap-1">
-        <span>{{ DateTime.fromISO(props.item.createdAt).toRelative() }}</span>
-        <span class="font-bold">·</span>
-        <span>{{ DateTime.fromISO(props.item.createdAt).toLocaleString() }}</span>
+        <span class="text-xs opacity-80">{{
+          DateTime.fromISO(props.item.createdAt).toRelative()
+        }}</span>
       </p>
+      <template v-else>
+        <p class="flex gap-1 items-baseline">
+          <span class="font-bold">{{ props.item.publisher.nick }}</span>
+          <span class="text-xs">@{{ props.item.publisher.name }}</span>
+        </p>
+        <p class="text-xs flex gap-1">
+          <span>{{ DateTime.fromISO(props.item.createdAt).toRelative() }}</span>
+          <span class="font-bold">·</span>
+          <span>{{
+            DateTime.fromISO(props.item.createdAt).toLocaleString()
+          }}</span>
+        </p>
+      </template>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue'
-import { DateTime } from 'luxon'
-import type { SnPost } from '~/types/api';
+import { computed } from "vue"
+import { DateTime } from "luxon"
+import type { SnPost } from "~/types/api"
 
-const props = defineProps<{ item: SnPost }>()
+const router = useRouter()
 
-const apiBase = useSolarNetworkUrl();
+const props = withDefaults(defineProps<{ item: SnPost; compact?: boolean }>(), {
+  compact: false
+})
+
+const apiBase = useSolarNetworkUrl()
 const publisherAvatar = computed(() =>
-  props.item.publisher.picture ? `${apiBase}/drive/files/${props.item.publisher.picture.id}` : undefined,
+  props.item.publisher.picture
+    ? `${apiBase}/drive/files/${props.item.publisher.picture.id}`
+    : undefined
 )
 </script>

app/components/Post/PostItem.vue

@@ -1,62 +1,130 @@
 <template>
-  <v-card class="px-4 py-3">
-    <v-card-text>
-      <div class="flex flex-col gap-3">
-        <post-header :item="props.item" />
+  <n-card>
+    <div :class="['flex flex-col', compact ? 'gap-1' : 'gap-3']">
+      <post-header :item="props.item" :compact="compact" />
 
-        <div v-if="props.item.title || props.item.description">
-          <h2 v-if="props.item.title" class="text-lg">
-            {{ props.item.title }}
-          </h2>
-          <p v-if="props.item.description" class="text-sm">
-            {{ props.item.description }}
-          </p>
-        </div>
+      <div v-if="props.item.title || props.item.description">
+        <h2 v-if="props.item.title" class="text-lg">
+          {{ props.item.title }}
+        </h2>
+        <p v-if="props.item.description" class="text-sm">
+          {{ props.item.description }}
+        </p>
+      </div>
 
-        <article
-          v-if="htmlContent"
-          class="prose prose-sm dark:prose-invert prose-slate prose-p:m-0 max-w-none"
+      <article
+        v-if="htmlContent"
+        class="prose prose-sm dark:prose-invert prose-slate prose-p:m-0 max-w-none"
+      >
+        <div v-html="htmlContent" />
+      </article>
+
+      <template v-if="showReferenced">
+        <div
+          v-if="props.item.repliedPost || props.item.repliedGone"
+          class="border rounded-xl mt-2"
         >
-          <div v-html="htmlContent" />
-        </article>
-
-        <attachment-list :attachments="props.item.attachments" :max-height="640" />
-
-        <div v-if="props.item.repliesCount" class="flex gap-2 text-xs opacity-80">
-          <v-icon icon="mdi-comment-text-multiple" size="small" />
-          <p>{{ props.item.repliesCount }} replies</p>
-        </div>
-        <div v-if="props.item.isTruncated" class="flex gap-2 text-xs opacity-80">
-          <v-icon icon="mdi-dots-horizontal" size="small" />
-          <p>Post truncated, tap to see details...</p>
-        </div>
-
-        <!-- Post Reactions -->
-        <div @click.stop>
-          <post-reaction-list
-            :parent-id="props.item.id"
-            :reactions="props.item.reactionsCount"
-            :reactions-made="props.item.reactionsMade"
-            :can-react="true"
+          <div class="p-2 flex items-center gap-2">
+            <n-icon :component="ReplyIcon" class="ms-2" />
+            <span class="font-bold">Replying to</span>
+          </div>
+          <div v-if="props.item.repliedGone" class="text-sm opacity-60">
+            Post unavailable
+          </div>
+          <post-item
+            v-else-if="props.item.repliedPost"
+            :item="props.item.repliedPost"
+            slim
+            compact
+            flat
             @react="handleReaction"
           />
         </div>
+
+        <div
+          v-if="props.item.forwardedPost || props.item.forwardedGone"
+          class="border rounded-xl mt-2"
+        >
+          <div class="p-2 flex items-center gap-2">
+            <n-icon :component="ForwardIcon" class="ms-2" />
+            <span class="font-bold">Forwarded</span>
+          </div>
+          <div v-if="props.item.forwardedGone" class="text-sm opacity-60">
+            Post unavailable
+          </div>
+          <post-item
+            v-else-if="props.item.forwardedPost"
+            :item="props.item.forwardedPost"
+            slim
+            compact
+            flat
+            @react="handleReaction"
+          />
+        </div>
+      </template>
+
+      <attachment-list
+        v-if="!compact"
+        :attachments="props.item.attachments"
+        :max-height="640"
+      />
+
+      <div ref="repliesTarget">
+        <replies-compact-list
+          v-if="props.item.repliesCount && !compact && repliesVisible"
+          :params="{ postId: props.item.id }"
+          :hide-quick-reply="true"
+          @react="handleReplyReaction"
+        />
       </div>
-    </v-card-text>
-  </v-card>
+      <div
+        v-if="props.item.isTruncated"
+        class="flex gap-2 text-xs opacity-80 items-center"
+      >
+        <span class="mdi mdi-dots-horizontal"></span>
+        <p>Post truncated, tap to see details...</p>
+      </div>
+
+      <!-- Post Reactions -->
+      <div v-if="!compact" @click.stop>
+        <post-reaction-list
+          :parent-id="props.item.id"
+          :reactions="props.item.reactionsCount"
+          :reactions-made="props.item.reactionsMade"
+          :can-react="true"
+          @react="handleReaction"
+        />
+      </div>
+    </div>
+  </n-card>
 </template>
 
 <script lang="ts" setup>
 import { ref, watch } from "vue"
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
+import { useIntersectionObserver } from "@vueuse/core"
+import { ForwardIcon, ReplyIcon } from "lucide-vue-next"
 
-const props = defineProps<{ item: SnPost }>()
+const props = withDefaults(
+  defineProps<{
+    item: SnPost
+    showReferenced?: boolean
+    compact?: boolean
+    flat?: boolean
+    slim?: boolean
+  }>(),
+  { showReferenced: true, compact: false, flat: false, slim: false }
+)
 const emit = defineEmits<{
   react: [symbol: string, attitude: number, delta: number]
 }>()
 
-const { render } = useMarkdownProcessor()
+const preserveEmptyLinesRef = ref(true) // New ref for the option
+
+const { render } = useMarkdownProcessor({
+  preserveEmptyLines: preserveEmptyLinesRef
+})
 
 const htmlContent = ref<string>("")
 
@@ -64,11 +132,37 @@ function handleReaction(symbol: string, attitude: number, delta: number) {
   emit("react", symbol, attitude, delta)
 }
 
+function handleReplyReaction(
+  postId: string,
+  symbol: string,
+  attitude: number,
+  delta: number
+) {
+  emit("react", symbol, attitude, delta)
+}
+
 watch(
-  props.item,
+  () => props.item, // Watch the item prop directly
   (value) => {
+    preserveEmptyLinesRef.value = value.type !== 1 // Update the ref
     if (value.content) htmlContent.value = render(value.content)
   },
   { immediate: true, deep: true }
 )
+
+const repliesTarget = ref(null)
+const repliesVisible = ref(false)
+
+useIntersectionObserver(
+  repliesTarget,
+  (entries) => {
+    const entry = entries[0]
+    if (entry?.isIntersecting) {
+      repliesVisible.value = true
+    }
+  },
+  {
+    threshold: 0.5
+  }
+)
 </script>

app/components/Post/PostList.vue

@@ -1,65 +1,56 @@
 <template>
   <div class="post-list">
     <!-- Error State -->
-    <v-alert
+    <n-alert
       v-if="hasError"
       type="error"
-      class="mb-4"
       closable
-      @click:close="refresh"
+      @close="refresh"
+      class="mb-4"
     >
       {{ error }}
-    </v-alert>
+    </n-alert>
 
     <!-- Posts List -->
-    <v-infinite-scroll
-      height="auto"
-      class="space-y-4"
-      @load="loadMore"
-    >
+    <n-infinite-scroll :distance="0" @load="loadMore" style="overflow: auto">
       <template v-for="item in posts" :key="item.id">
         <post-item
+          class="mb-4"
           :item="item"
-          @react="(symbol, attitude, delta) => $emit('react', item.id, symbol, attitude, delta)"
+          @react="
+            (symbol, attitude, delta) =>
+              $emit('react', item.id, symbol, attitude, delta)
+          "
+          @click="router.push('/posts/' + item.id)"
         />
       </template>
 
       <!-- Loading State -->
-      <template #loading>
-        <div class="flex justify-center py-4">
-          <v-progress-circular indeterminate size="32" />
-        </div>
-      </template>
+      <div v-if="loading" class="flex justify-center py-4">
+        <n-spin size="medium" />
+      </div>
 
       <!-- Empty State -->
-      <template #empty>
-        <div v-if="!posts" class="text-center py-8 text-muted-foreground">
-          <v-icon icon="mdi-post-outline" size="48" class="mb-2 opacity-50" />
-          <p>No posts found</p>
-        </div>
-      </template>
-    </v-infinite-scroll>
-
-    <!-- Refresh Button -->
-    <div class="flex justify-center mt-4">
-      <v-btn
-        variant="outlined"
-        :loading="isLoading"
-        prepend-icon="mdi-refresh"
-        @click="refresh"
+      <div
+        v-if="!loading && posts.length === 0 && !hasError"
+        class="text-center py-8 text-muted-foreground"
       >
-        Refresh
-      </v-btn>
-    </div>
+        <n-icon :component="FileText" size="48" class="mb-2 opacity-50" />
+        <p>No posts found</p>
+      </div>
+    </n-infinite-scroll>
   </div>
 </template>
 
 <script setup lang="ts">
 import { usePostList } from "~/composables/usePostList"
 import type { PostListParams } from "~/composables/usePostList"
+import { FileText } from "lucide-vue-next"
 
 import PostItem from "./PostItem.vue"
 
+const router = useRouter()
+
 const props = defineProps<{
   params?: PostListParams
 }>()
@@ -68,6 +59,7 @@ defineEmits<{
   react: [postId: string, symbol: string, attitude: number, delta: number]
 }>()
 
-const { posts, isLoading, hasError, error, loadMore, refresh } =
-  usePostList(props.params)
+const { posts, hasError, error, loading, loadMore, refresh } = usePostList(
+  props.params
+)
 </script>

app/components/Post/PostQuickReply.vue

@@ -0,0 +1,78 @@
+<template>
+  <n-card title="Quick Reply" size="small" embedded>
+    <div class="flex flex-col gap-2 mb-1">
+      <pub-select v-model:value="publisher" />
+      <n-input
+        v-model:value="content"
+        type="textarea"
+        placeholder="Talk about this post for a bit."
+        size="large"
+        :rows="3"
+        auto-grow
+        @keydown.meta.enter.exact="submit"
+        @keydown.ctrl.enter.exact="submit"
+      >
+        <template #suffix>
+          <div class="flex items-end h-full py-3">
+            <n-button text :loading="submitting" @click="submit">
+              <template #icon>
+                <n-icon :component="SendIcon" />
+              </template>
+            </n-button>
+          </div>
+        </template>
+      </n-input>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { SendIcon } from "lucide-vue-next"
+import { ref } from "vue"
+import { useSolarNetwork } from "~/composables/useSolarNetwork"
+
+// Interface for uploaded files in the editor
+interface UploadedFile {
+  name: string
+  url: string
+  type: string
+}
+
+const props = defineProps<{
+  repliedPostId: string
+}>()
+
+const emits = defineEmits(["posted"])
+
+const publisher = ref<string | undefined>()
+const content = ref("")
+
+const fileList = ref<UploadedFile[]>([])
+
+const submitting = ref(false)
+
+async function submit() {
+  if (!content.value.trim()) return
+
+  submitting.value = true
+  const api = useSolarNetwork()
+  await api(`/sphere/posts?pub=${publisher.value}`, {
+    method: "POST",
+    headers: {
+      "content-type": "application/json"
+    },
+    body: JSON.stringify({
+      content: content.value,
+      replied_post_id: props.repliedPostId,
+      attachments: fileList.value
+        .filter((e) => e.url != null)
+        .map((e) => e.url!.split("/").reverse()[0])
+    })
+  })
+
+  submitting.value = false
+  content.value = ""
+  fileList.value = []
+  emits("posted")
+}
+</script>

app/components/Post/PostReactionList.vue

@@ -1,140 +1,57 @@
 <template>
-  <div class="d-flex flex-wrap gap-2">
+  <div class="flex flex-wrap gap-3">
     <!-- Add Reaction Button -->
-    <v-chip
+    <n-tag
       v-if="canReact"
-      rounded
+      clickable
+      style="cursor: pointer"
+      type="primary"
       :disabled="submitting"
-      prepend-icon="mdi-plus"
       @click="showReactionDialog"
     >
+      <template #icon>
+        <n-icon :component="HeartPlus" />
+      </template>
       React
-    </v-chip>
+    </n-tag>
 
     <!-- Existing Reactions -->
-    <v-chip
-      v-for="(count, symbol) in reactions"
-      :key="symbol"
-      rounded
-      :color="getReactionColor(symbol)"
-      :disabled="submitting"
-      @click="reactToPost(symbol)"
-    >
-      <span class="reaction-emoji">{{ getReactionEmoji(symbol) }}</span>
-      <span class="reaction-symbol">{{ symbol }}</span>
-      <v-chip size="x-small" variant="flat" class="reaction-count ms-1">
-        {{ count }}
-      </v-chip>
-    </v-chip>
+    <n-space>
+      <n-tag
+        v-for="(count, symbol) in reactions"
+        :key="symbol"
+        :type="getReactionColor(symbol)"
+        :disabled="submitting"
+        @click="reactToPost(symbol)"
+        style="cursor: pointer"
+        class="reaction-tag"
+      >
+        <span class="reaction-emoji">{{ getReactionEmoji(symbol) }}</span>
+        <span class="reaction-symbol ms-2">{{ symbol }}</span>
+        <code class="text-xs ms-1.5">x{{ count }}</code>
+      </n-tag>
+    </n-space>
   </div>
 
   <!-- Reaction Selection Dialog -->
-  <v-dialog v-model="reactionDialog" max-width="500" height="600">
-    <v-card prepend-icon="mdi-emoticon-outline" title="React Post">
-      <!-- Dialog Content -->
+  <n-modal v-model:show="reactionDialog">
+    <n-card class="max-w-[540px]">
+      <template #header>
+        <span class="font-bold">React Post</span>
+      </template>
       <div class="dialog-content">
-        <!-- Positive Reactions -->
-        <div class="reaction-section">
-          <div class="section-header d-flex align-center px-6 py-3">
-            <v-icon class="me-2">mdi-emoticon-happy</v-icon>
-            <span class="font-bold">Positive</span>
-          </div>
-          <div class="reaction-grid">
-            <v-card
-              v-for="reaction in getReactionsByAttitude(0)"
-              :key="reaction.symbol"
-              class="reaction-card mx-2"
-              :class="{ selected: isReactionMade(reaction.symbol) }"
-              :disabled="submitting"
-              @click="selectReaction(reaction.symbol)"
-            >
-              <div class="d-flex flex-column align-center justify-center pa-3">
-                <span class="text-h4 mb-1">{{ reaction.emoji }}</span>
-                <span class="text-xs text-center mb-1">{{
-                  reaction.symbol
-                }}</span>
-                <span
-                  v-if="getReactionCount(reaction.symbol) > 0"
-                  class="text-xs"
-                >
-                  x{{ getReactionCount(reaction.symbol) }}
-                </span>
-                <div v-else class="spacer"></div>
-              </div>
-            </v-card>
-          </div>
-        </div>
-
-        <!-- Neutral Reactions -->
-        <div class="reaction-section">
-          <div class="section-header d-flex align-center px-6 py-3">
-            <v-icon class="me-2">mdi-emoticon-neutral</v-icon>
-            <span class="font-bold">Neutral</span>
-          </div>
-          <div class="reaction-grid">
-            <v-card
-              v-for="reaction in getReactionsByAttitude(1)"
-              :key="reaction.symbol"
-              class="reaction-card mx-2"
-              :class="{ selected: isReactionMade(reaction.symbol) }"
-              :disabled="submitting"
-              @click="selectReaction(reaction.symbol)"
-            >
-              <div class="d-flex flex-column align-center justify-center pa-3">
-                <span class="text-h4 mb-1">{{ reaction.emoji }}</span>
-                <span class="text-xs text-center mb-1">{{
-                  reaction.symbol
-                }}</span>
-                <span
-                  v-if="getReactionCount(reaction.symbol) > 0"
-                  class="text-xs"
-                >
-                  x{{ getReactionCount(reaction.symbol) }}
-                </span>
-                <div v-else class="spacer"></div>
-              </div>
-            </v-card>
-          </div>
-        </div>
-
-        <!-- Negative Reactions -->
-        <div class="reaction-section">
-          <div class="section-header d-flex align-center px-6 py-3">
-            <v-icon class="me-2">mdi-emoticon-sad</v-icon>
-            <span class="font-bold">Negative</span>
-          </div>
-          <div class="reaction-grid">
-            <v-card
-              v-for="reaction in getReactionsByAttitude(2)"
-              :key="reaction.symbol"
-              class="reaction-card mx-2"
-              :class="{ selected: isReactionMade(reaction.symbol) }"
-              :disabled="submitting"
-              @click="selectReaction(reaction.symbol)"
-            >
-              <div class="d-flex flex-column align-center justify-center pa-3">
-                <span class="text-h4 mb-1">{{ reaction.emoji }}</span>
-                <span class="text-xs text-center mb-1">{{
-                  reaction.symbol
-                }}</span>
-                <span
-                  v-if="getReactionCount(reaction.symbol) > 0"
-                  class="text-xs"
-                >
-                  x{{ getReactionCount(reaction.symbol) }}
-                </span>
-                <div v-else class="spacer"></div>
-              </div>
-            </v-card>
-          </div>
-        </div>
+        <n-alert type="info" title="Reaction not available">
+          Due to various of reasons, we stop providing the react creation on the
+          FloatingIsland. To react post, head to web.solian.app
+        </n-alert>
       </div>
-    </v-card>
-  </v-dialog>
+    </n-card>
+  </n-modal>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue"
+import { Smile, Meh, Frown, HeartPlus } from "lucide-vue-next"
 
 interface Props {
   parentId: string
@@ -191,12 +108,21 @@ function getReactionEmoji(symbol: string): string {
   return reaction?.emoji || "❓"
 }
 
-function getReactionColor(symbol: string): string {
-  const attitude =
-    availableReactions.find((r) => r.symbol === symbol)?.attitude || 1
+function getReactionColor(
+  symbol: string
+):
+  | "success"
+  | "error"
+  | "primary"
+  | "default"
+  | "info"
+  | "warning"
+  | undefined {
+  const attitude = availableReactions.find((r) => r.symbol === symbol)?.attitude
   if (attitude === 0) return "success"
   if (attitude === 2) return "error"
-  return "primary"
+  // neutral or unspecified attitudes use default
+  return "default"
 }
 
 async function reactToPost(symbol: string) {
@@ -255,64 +181,3 @@ function getReactionCount(symbol: string): number {
   return (props.reactions || {})[symbol] || 0
 }
 </script>
-
-<style scoped>
-.reaction-emoji {
-  font-size: 16px;
-  margin-right: 4px;
-}
-
-.reaction-symbol {
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.reaction-count {
-  font-size: 10px;
-  padding: 0 4px;
-}
-
-.reaction-section {
-  margin-bottom: 16px;
-}
-
-.section-header {
-  background-color: rgba(var(--v-theme-surface-variant), 0.5);
-  border-bottom: 1px solid rgb(var(--v-theme-outline-variant));
-}
-
-.reaction-grid {
-  display: flex;
-  overflow-x: auto;
-  gap: 8px;
-  padding: 16px;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.reaction-grid::-webkit-scrollbar {
-  display: none;
-}
-
-.reaction-card {
-  min-width: 80px;
-  height: 100px;
-  cursor: pointer;
-  transition: all 0.2s ease;
-  border: 2px solid transparent;
-}
-
-.reaction-card:hover {
-  transform: scale(1.05);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-}
-
-.reaction-card.selected {
-  border-color: rgb(var(--v-theme-primary));
-  background-color: rgb(var(--v-theme-primary-container));
-}
-
-.spacer {
-  height: 16px;
-}
-</style>

app/components/Post/RepliesCompactList.vue

@@ -0,0 +1,73 @@
+<template>
+  <n-card
+    class="replies-compact-list"
+    embedded
+    title="Replies"
+    prepend-icon="mdi-comment-text-multiple"
+    size="small"
+  >
+    <!-- Error State -->
+    <n-alert v-if="hasError" type="error" closable @click:close="refresh">
+      {{ error }}
+    </n-alert>
+
+    <!-- Replies List -->
+    <div class="flex flex-col gap-2">
+      <template v-for="item in replies" :key="item.id">
+        <div @click="router.push('/posts/' + item.id)">
+          <div class="flex gap-3">
+            <n-avatar :src="getPublisherAvatar(item)" :size="24" round />
+            <article
+              v-if="getHtmlContent(item)"
+              class="prose prose-sm dark:prose-invert prose-slate prose-p:m-0 max-w-none flex-1"
+            >
+              <div v-html="getHtmlContent(item)" />
+            </article>
+          </div>
+        </div>
+      </template>
+
+      <!-- Empty State -->
+      <n-empty
+        v-if="!replies || replies.length === 0"
+        class="text-center py-8 text-muted-foreground"
+        size="small"
+      >
+        No Replies
+      </n-empty>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { useRepliesList } from "~/composables/useRepliesList"
+import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
+import type { RepliesListParams } from "~/composables/useRepliesList"
+import type { SnPost } from "~/types/api"
+
+const router = useRouter()
+
+const props = defineProps<{
+  params: RepliesListParams
+  hideQuickReply?: boolean
+}>()
+
+defineEmits<{
+  react: [postId: string, symbol: string, attitude: number, delta: number]
+}>()
+
+const { replies, hasError, error, refresh } = useRepliesList(props.params)
+
+const apiBase = useSolarNetworkUrl()
+const { render } = useMarkdownProcessor({ preserveEmptyLines: true })
+
+const getPublisherAvatar = (item: SnPost) => {
+  return item.publisher.picture
+    ? `${apiBase}/drive/files/${item.publisher.picture.id}`
+    : undefined
+}
+
+const getHtmlContent = (item: SnPost) => {
+  return item.content ? render(item.content) : ""
+}
+</script>

app/components/Post/RepliesList.vue

@@ -1,27 +1,34 @@
 <template>
   <div class="replies-list">
+    <post-quick-reply
+      v-if="!props.hideQuickReply"
+      :replied-post-id="props.params.postId"
+      @posted="refresh"
+      class="mb-4"
+    />
+
     <!-- Error State -->
-    <v-alert
+    <n-alert
       v-if="hasError"
       type="error"
       class="mb-4"
-      closable
-      @click:close="refresh"
+      :closable="true"
+      @close="refresh"
     >
       {{ error }}
-    </v-alert>
+    </n-alert>
 
     <!-- Replies List -->
-    <v-infinite-scroll
+    <n-infinite-scroll
       class="flex flex-col gap-4 mt-0"
-      height="auto"
-      side="end"
-      manual
+      :distance="10"
       @load="loadMore"
     >
       <template v-for="item in replies" :key="item.id">
         <post-item
+          :show-referenced="false"
           :item="item"
+          class="mb-4"
           @click="router.push('/posts/' + item.id)"
           @react="
             (symbol, attitude, delta) =>
@@ -30,25 +37,15 @@
         />
       </template>
 
-      <!-- Loading State -->
-      <template #loading>
-        <div class="flex justify-center py-4">
-          <v-progress-circular indeterminate size="32" />
-        </div>
-      </template>
-
       <!-- Empty State -->
-      <template #empty>
-        <div v-if="!replies" class="text-center py-8 text-muted-foreground">
-          <v-icon
-            icon="mdi-comment-outline"
-            size="48"
-            class="mb-2 opacity-50"
-          />
-          <p>No replies yet</p>
-        </div>
-      </template>
-    </v-infinite-scroll>
+      <n-empty
+        v-if="!replies || replies.length === 0"
+        class="text-center py-8 text-muted-foreground"
+        size="small"
+      >
+        No Replies
+      </n-empty>
+    </n-infinite-scroll>
   </div>
 </template>
 
@@ -60,6 +57,7 @@ const router = useRouter()
 
 const props = defineProps<{
   params: RepliesListParams
+  hideQuickReply?: boolean
 }>()
 
 defineEmits<{
@@ -72,7 +70,5 @@ const { replies, hasError, error, loadMore, refresh } = useRepliesList(
 </script>
 
 <style>
-.replies-list .v-infinite-scroll:first-child .v-infinite-scroll__side {
-  display: none;
-}
+/* Removed Vuetify-specific styles */
 </style>

app/components/PubSelect.vue

@@ -1,52 +1,74 @@
 <template>
-  <v-select
-    :items="pubStore.publishers"
-    item-title="nick"
-    item-value="name"
-    :model-value="props.value"
-    @update:model-value="(v) => emits('update:value', v)"
-  >
-    <template #item="{ props: itemProps, item }">
-      <v-list-item v-bind="itemProps">
-        <template #prepend>
-          <v-avatar
-            :image="item.raw.picture ? `${apiBase}/drive/files/${item.raw.picture.id}` : undefined"
-            size="small"
-          />
-        </template>
-        <v-list-item-subtitle>@{{ item.raw?.name }}</v-list-item-subtitle>
-      </v-list-item>
-    </template>
-    <template #selection="{ item }">
-      <div class="d-flex align-center">
-        <v-avatar
-          :image="item.raw.picture ? `${apiBase}/drive/files/${item.raw.picture.id}` : undefined"
-          size="24"
-          class="me-2"
-        />
-        {{ item.raw?.nick }}
-      </div>
-    </template>
-  </v-select>
+  <n-config-provider :theme-overrides="{ common: { borderRadius: '8px' } }">
+    <n-select
+      :options="pubStore.publishers"
+      label-field="nick"
+      value-field="name"
+      :value="props.value"
+      @update:value="(v) => emits('update:value', v)"
+      :render-label="renderLabel"
+      :render-tag="renderTag"
+    />
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { usePubStore } from '~/stores/pub'
-import { watch } from 'vue'
+import { usePubStore } from "~/stores/pub"
+import { watch, h } from "vue"
+import type { SelectRenderLabel, SelectRenderTag } from "naive-ui"
 
 const pubStore = usePubStore()
 const apiBase = useSolarNetworkUrl()
 
 const props = defineProps<{ value: string | undefined }>()
-const emits = defineEmits(['update:value'])
+const emits = defineEmits(["update:value"])
+
+const renderLabel: SelectRenderLabel = (option) => {
+  const pubData = pubStore.publishers.filter((p) => p.id == option.id)[0]
+  return h("div", { class: "flex items-center" }, [
+    h(NAvatar, {
+      round: true,
+      src: pubData?.picture?.id
+        ? `${apiBase}/drive/files/${pubData.picture!.id}`
+        : undefined,
+      size: "small",
+      class: "mr-2"
+    }),
+    h("div", null, [
+      h("div", null, pubData!.nick),
+      h("div", { class: "text-xs opacity-80" }, `@${pubData!.name as string}`)
+    ])
+  ])
+}
+
+const renderTag: SelectRenderTag = ({ option }) => {
+  const pubData = pubStore.publishers.filter((p) => p.id == option.id)[0]
+  return h(
+    "div",
+    {
+      class: "flex items-center"
+    },
+    [
+      h(NAvatar, {
+        round: true,
+        src: pubData?.picture?.id
+          ? `${apiBase}/drive/files/${pubData.picture!.id}`
+          : undefined,
+        size: "small",
+        class: "mr-2"
+      }),
+      option.nick as string
+    ]
+  )
+}
 
 watch(
   pubStore,
   (value) => {
     if (!props.value && value.publishers) {
-      emits('update:value', pubStore.publishers[0]?.name)
+      emits("update:value", pubStore.publishers[0]?.name)
     }
   },
-  { deep: true, immediate: true },
+  { deep: true, immediate: true }
 )
 </script>

app/components/SidebarFooter.vue

@@ -6,15 +6,15 @@
       <span>FloatingIsland</span>
     </div>
     <div class="flex flex-wrap gap-1.5">
-      <a class="link" target="_blank" href="https://solsynth.dev/terms">
+      <a class="hover:underline" target="_blank" href="https://solsynth.dev/terms">
         Terms of Services
       </a>
       <span class="font-bold">·</span>
-      <a class="link" target="_blank" href="https://status.solsynth.dev">
+      <a class="hover:underline" target="_blank" href="https://status.solsynth.dev">
         Service Status
       </a>
       <span class="font-bold">·</span>
-      <nuxt-link class="link" target="_blank" to="/swagger"> API </nuxt-link>
+      <nuxt-link class="hover:underline" target="_blank" to="/swagger"> API </nuxt-link>
     </div>
     <p class="mt-2 opacity-80">
       The FloatingIsland do not provides all the features the Solar Network has,
@@ -23,9 +23,3 @@
     </p>
   </div>
 </template>
-
-<style scoped>
-.link:hover {
-  text-decoration: underline;
-}
-</style>

app/components/VerificationMark.vue

@@ -0,0 +1,80 @@
+<template>
+  <n-popover trigger="hover" placement="top">
+    <template #trigger>
+      <div
+        class="rounded-4xl aspect-square flex items-center justify-center mb-1"
+        :style="`background-color: ${verificationColor}; width: ${
+          props.size ?? 16
+        }px; height: ${props.size ?? 16}px`"
+      >
+        <component
+          :is="verificationIcon"
+          fill="white"
+          stroke="white"
+          style="padding: 0.2rem"
+        />
+      </div>
+    </template>
+    <div class="max-w-xs">
+      <div class="font-bold">{{ mark.title || "No title" }}</div>
+      <div class="text-sm mt-1">{{ mark.description || "No description" }}</div>
+    </div>
+  </n-popover>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import type { SnVerification } from "~/types/api/publisher"
+import {
+  Wrench,
+  BadgeCheck,
+  ShieldCheck,
+  Landmark,
+  Palette,
+  Code,
+  Drama
+} from "lucide-vue-next"
+
+interface Props {
+  mark: SnVerification
+  size?: number
+}
+
+const props = defineProps<Props>()
+
+// Icon mapping based on verification type
+const verificationIcons = [
+  Wrench, // 0: build_circle equivalent
+  BadgeCheck, // 1: verified
+  ShieldCheck, // 2: verified (alternative)
+  Landmark, // 3: account_balance
+  Palette, // 4: palette
+  Code, // 5: code
+  Drama // 6: masks
+]
+
+// Color mapping based on verification type
+const verificationColors = [
+  "#14b8a6", // teal
+  "#03a9f4", // lightBlue
+  "#3f51b5", // indigo
+  "#f44336", // red
+  "#ff9800", // orange
+  "#2196f3", // blue
+  "#448aff" // blueAccent
+]
+
+const verificationIcon = computed(() => {
+  const type = props.mark.type
+  return type >= 0 && type < verificationIcons.length
+    ? verificationIcons[type]
+    : BadgeCheck
+})
+
+const verificationColor = computed(() => {
+  const type = props.mark.type
+  return type >= 0 && type < verificationColors.length
+    ? verificationColors[type]
+    : "#2196f3"
+})
+</script>

app/components/VerificationStatusCard.vue

@@ -0,0 +1,83 @@
+<template>
+  <div v-if="mark" class="verification-card">
+    <div class="flex items-start">
+      <n-icon
+        :component="verificationIcon"
+        :size="32"
+        :color="verificationColor"
+        class="shrink-0"
+      />
+    </div>
+    <div class="mt-2">
+      <div class="font-bold text-base">{{ mark.title || "No title" }}</div>
+      <div class="text-sm mt-1">{{ mark.description || "No description" }}</div>
+      <div class="text-xs mt-1.5 opacity-80">
+        Verified by<br />{{ mark.verifiedBy || "No one verified it" }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import type { SnVerification } from "~/types/api/publisher"
+import {
+  Wrench,
+  BadgeCheck,
+  ShieldCheck,
+  Landmark,
+  Palette,
+  Code,
+  Drama
+} from "lucide-vue-next"
+
+interface Props {
+  mark: SnVerification
+}
+
+const props = defineProps<Props>()
+
+// Icon mapping based on verification type
+const verificationIcons = [
+  Wrench, // 0: build_circle equivalent
+  BadgeCheck, // 1: verified
+  ShieldCheck, // 2: verified (alternative)
+  Landmark, // 3: account_balance
+  Palette, // 4: palette
+  Code, // 5: code
+  Drama // 6: masks
+]
+
+// Color mapping based on verification type
+const verificationColors = [
+  "#14b8a6", // teal
+  "#03a9f4", // lightBlue
+  "#3f51b5", // indigo
+  "#f44336", // red
+  "#ff9800", // orange
+  "#2196f3", // blue
+  "#448aff" // blueAccent
+]
+
+const verificationIcon = computed(() => {
+  const type = props.mark.type
+  return type >= 0 && type < verificationIcons.length
+    ? verificationIcons[type]
+    : BadgeCheck
+})
+
+const verificationColor = computed(() => {
+  const type = props.mark.type
+  return type >= 0 && type < verificationColors.length
+    ? verificationColors[type]
+    : "#2196f3"
+})
+</script>
+
+<style scoped>
+.verification-card {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+</style>

app/composables/useMarkdownProcessor.ts

@@ -1,34 +1,60 @@
+import { computed, unref, type Ref } from "vue"
 import {
   createMarkdownExit,
+  type PluginSimple,
   type PluginWithParams
 } from "markdown-exit"
+import hljs from "highlight.js"
+import hljsMarkdown from "markdown-it-highlightjs"
 // @ts-ignore
 import texmath from "markdown-it-texmath"
 import katex from "katex"
 
-export function useMarkdownProcessor() {
+import "highlight.js/styles/a11y-dark.min.css"
+
+export function useMarkdownProcessor(
+  options: { preserveEmptyLines?: boolean | Ref<boolean> } = {
+    preserveEmptyLines: true
+  }
+) {
   const serverUrl = useSolarNetworkUrl()
 
-  const processor = createMarkdownExit({
-    breaks: true,
-    html: true,
-    linkify: true,
-    typographer: true
-  })
-    // @ts-ignore
-    .use(texmath, {
-      engine: katex,
-      delimiters: "dollars",
-      katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
-    })
-    .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
+  const processor = computed(() => {
+    const currentPreserveEmptyLines = unref(options.preserveEmptyLines)
 
-  // Keep the empty lines
+    const md = createMarkdownExit({
+      breaks: true,
+      html: true,
+      linkify: true,
+      typographer: true
+    })
+      // @ts-ignore
+      .use(texmath, {
+        engine: katex,
+        delimiters: "dollars",
+        katexOptions: { macros: { "\\RR": "\\mathbb{R}" } }
+      })
+      .use(hljsMarkdown, { hljs })
+      .use(imgSolarNetworkPlugin, { serverUrl: serverUrl })
+
+    if (currentPreserveEmptyLines) {
+      md.use(preserveEmptyLinesPlugin)
+    }
+    return md
+  })
+
+  return {
+    render: (content: string) => processor.value.render(content)
+  }
+}
+
+const preserveEmptyLinesPlugin: PluginSimple = (md) => {
   const defaultParagraphRenderer =
-    processor.renderer.rules.paragraph_open ||
+    md.renderer.rules.paragraph_open ||
     ((tokens, idx, options, _env, self) =>
       self.renderToken(tokens, idx, options))
-  processor.renderer.rules.paragraph_open = function (
+
+  md.renderer.rules.paragraph_open = function (
     tokens,
     idx,
     options,
@@ -56,10 +82,6 @@ export function useMarkdownProcessor() {
     }
     return result + defaultParagraphRenderer(tokens, idx, options, env, self)
   }
-
-  return {
-    render: (content: string) => processor.render(content)
-  }
 }
 
 const imgSolarNetworkPlugin: PluginWithParams = (

app/composables/usePostList.ts

@@ -40,7 +40,7 @@ export const usePostList = (params: PostListParams = {}) => {
     total: 0
   })
 
-  const isLoading = computed(() => state.value.loading)
+  const loading = computed(() => state.value.loading)
   const hasError = computed(() => state.value.error !== null)
   const posts = computed(() => state.value.posts)
   const hasMore = computed(() => state.value.hasMore)
@@ -123,17 +123,24 @@ export const usePostList = (params: PostListParams = {}) => {
 
   const loadMore = async (options?: {
     side: string
-    done: (status: "empty" | "loading" | "error") => void
+    done: (status: "empty" | "loading" | "error" | "ok") => void
   }) => {
-    if (!state.value.hasMore || state.value.loading) {
+    if (!state.value.hasMore) {
       options?.done("empty")
       return
     }
 
+    if (state.value.loading) {
+      options?.done("loading")
+      return
+    }
+
     const result = await fetchPosts(state.value.cursor, true)
 
     if (result.hasReachedEnd) {
       options?.done("empty")
+    } else {
+      options?.done("ok")
     }
   }
 
@@ -146,7 +153,7 @@ export const usePostList = (params: PostListParams = {}) => {
 
   return {
     posts,
-    isLoading,
+    loading,
     hasError,
     hasMore,
     error: computed(() => state.value.error),

app/composables/useRepliesList.ts

@@ -14,7 +14,7 @@ export interface RepliesListState {
   total: number
 }
 
-export const useRepliesList = (params: RepliesListParams) => {
+export const useRepliesList = (params: RepliesListParams | Ref<RepliesListParams>) => {
   const api = useSolarNetwork()
   const pageSize = 20
 
@@ -32,6 +32,12 @@ export const useRepliesList = (params: RepliesListParams) => {
   const replies = computed(() => state.value.replies)
   const hasMore = computed(() => state.value.hasMore)
 
+  // Get the current postId, handling both direct params and reactive params
+  const currentPostId = computed(() => {
+    const p = isRef(params) ? params.value : params
+    return p.postId
+  })
+
   const buildQueryParams = (cursor: string | null = null) => {
     const offset = cursor ? parseInt(cursor) : 0
 
@@ -44,6 +50,11 @@ export const useRepliesList = (params: RepliesListParams) => {
   }
 
   const fetchReplies = async (cursor: string | null = null, append = false) => {
+    // Don't fetch if postId is empty
+    if (!currentPostId.value) {
+      return { hasReachedEnd: false }
+    }
+
     try {
       state.value.loading = true
       state.value.error = null
@@ -52,7 +63,7 @@ export const useRepliesList = (params: RepliesListParams) => {
 
       let total: number = 0
       const response = await api<SnPost[]>(
-        `/sphere/posts/${params.postId}/replies`,
+        `/sphere/posts/${currentPostId.value}/replies`,
         {
           method: "GET",
           query: queryParams,
@@ -97,11 +108,16 @@ export const useRepliesList = (params: RepliesListParams) => {
     side: string
     done: (status: "empty" | "loading" | "error" | "ok") => void
   }) => {
-    if (!state.value.hasMore || state.value.loading) {
+    if (!state.value.hasMore) {
       options?.done("empty")
       return
     }
 
+    if (state.value.loading) {
+      options?.done("loading")
+      return
+    }
+
     const result = await fetchReplies(state.value.cursor, true)
 
     if (result.hasReachedEnd) {
@@ -113,8 +129,22 @@ export const useRepliesList = (params: RepliesListParams) => {
     fetchReplies(null, false)
   }
 
-  // Initial load
-  fetchReplies()
+  // Watch for postId changes and fetch when it becomes valid
+  watch(currentPostId, (newPostId, oldPostId) => {
+    if (newPostId && newPostId !== oldPostId) {
+      // Clear existing data when postId changes
+      state.value.replies = []
+      state.value.error = null
+      state.value.cursor = null
+      state.value.hasMore = true
+      fetchReplies()
+    }
+  })
+
+  // Initial load (only if postId is already valid)
+  if (currentPostId.value) {
+    fetchReplies()
+  }
 
   return {
     replies,

app/composables/useSolarNetwork.ts

@@ -3,6 +3,7 @@ import { keysToCamel, keysToSnake } from "~/utils/transformKeys"
 
 export const useSolarNetwork = () => {
   const apiBase = useSolarNetworkUrl()
+  const devToken = useRuntimeConfig().public.devToken
 
   // Forward cookies from the incoming request
   const headers: HeadersInit = import.meta.server
@@ -18,6 +19,12 @@ export const useSolarNetwork = () => {
       const side = import.meta.server ? "SERVER" : "CLIENT"
       console.log(`[useSolarNetwork] onRequest for ${request} on ${side}`)
 
+      if (devToken) {
+        console.log("[useSolarNetwork] Using dev token...")
+        options.headers.delete("Cookie")
+        options.headers.set("Authorization", `Bearer ${devToken}`)
+      }
+
       // Transform request data from camelCase to snake_case
       if (options.body && typeof options.body === "object") {
         options.body = keysToSnake(options.body)

app/layouts/default.vue

@@ -1,84 +1,111 @@
 <template>
-  <v-app :theme="colorMode.preference">
-    <v-app-bar elevation="2" color="surface-lighten-5">
-      <v-container class="mx-auto d-flex align-center justify-center">
-        <img
-          :src="colorMode.value == 'dark' ? IconDark : IconLight"
-          width="32"
-          height="32"
-          class="me-4"
-          alt="The Solar Network"
-        />
+  <div class="flex flex-col min-h-screen">
+    <header
+      class="navbar bg-transparent shadow-lg fixed top-0 left-0 right-0 backdrop-blur-2xl z-1000 h-[64px]"
+    >
+      <div class="container mx-auto flex items-center justify-between px-5">
+        <div class="flex gap-2">
+          <div class="flex items-center justify-center w-[40px]">
+            <img :src="IconLight" alt="The Solar Network" class="fit-cover" />
+          </div>
 
-        <v-btn
-          v-for="link in links"
-          :key="link.title"
-          :text="link.title"
-          :to="link.href"
-          :prepend-icon="link.icon"
-          variant="text"
-        />
+          <n-menu
+            v-model:value="activeKey"
+            mode="horizontal"
+            :options="menuOptions"
+          />
+        </div>
 
-        <v-spacer />
+        <n-dropdown :options="dropdownOptions" @select="handleDropdownSelect">
+          <n-avatar
+            :size="32"
+            :src="
+              user?.profile.picture
+                ? `${apiBase}/drive/files/${user?.profile.picture?.id}`
+                : undefined
+            "
+          >
+            <n-icon :component="UserIcon" :size="20" />
+          </n-avatar>
+        </n-dropdown>
+      </div>
+    </header>
 
-        <v-menu>
-          <template #activator="{ props }">
-            <v-avatar
-              v-bind="props"
-              class="me-4"
-              color="grey-darken-1"
-              size="32"
-              icon="mdi-account-circle"
-              :image="
-                user?.profile.picture
-                  ? `${apiBase}/drive/files/${user?.profile.picture?.id}`
-                  : undefined
-              "
-            />
-          </template>
-          <v-list density="compact">
-            <v-list-item v-if="!user" to="/auth/login" prepend-icon="mdi-login"
-              >Login</v-list-item
-            >
-            <v-list-item
-              v-if="!user"
-              to="/auth/create-account"
-              prepend-icon="mdi-account-plus"
-              >Create Account</v-list-item
-            >
-            <v-list-item
-              v-if="user"
-              to="/accounts/me"
-              prepend-icon="mdi-view-dashboard"
-              >Dashboard</v-list-item
-            >
-          </v-list>
-        </v-menu>
-      </v-container>
-    </v-app-bar>
-
-    <v-main>
+    <main class="grow mt-[64px]">
       <slot />
-    </v-main>
-  </v-app>
+    </main>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 
-import type { NavLink } from "~/types/navlink"
+import type { MenuOption } from "naive-ui"
+import { NIcon } from "naive-ui"
+import { computed, h } from "vue"
+import { useRouter, useRoute, RouterLink } from "vue-router"
+import {
+  CompassIcon,
+  LayoutDashboardIcon,
+  LogInIcon,
+  UserIcon,
+  UserPlusIcon
+} from "lucide-vue-next"
 
 const apiBase = useSolarNetworkUrl()
-const colorMode = useColorMode()
+const router = useRouter()
+const route = useRoute()
 
 const { user } = useUserStore()
 
-const links: NavLink[] = [
+const activeKey = computed(() => {
+  // Map route paths to menu keys
+  if (route.path === "/") return "explore"
+  return null
+})
+
+function renderIcon(icon: any) {
+  return () => h(NIcon, null, { default: () => h(icon) })
+}
+
+function renderLabel(label: string, route: string) {
+  return () => h(RouterLink, { to: route }, { default: () => label })
+}
+
+const menuOptions: MenuOption[] = [
   {
-    title: "Explore",
-    href: "/",
-    icon: "mdi-compass"
+    label: renderLabel("Explore", "/"),
+    key: "explore",
+    icon: renderIcon(CompassIcon)
   }
 ]
+
+const dropdownOptions = computed(() => {
+  if (user) {
+    return [
+      {
+        label: "Dashboard",
+        key: "/accounts/me",
+        icon: renderIcon(LayoutDashboardIcon)
+      }
+    ]
+  } else {
+    return [
+      {
+        label: "Login",
+        key: "/auth/login",
+        icon: renderIcon(LogInIcon)
+      },
+      {
+        label: "Create Account",
+        key: "/auth/create-account",
+        icon: renderIcon(UserPlusIcon)
+      }
+    ]
+  }
+})
+
+function handleDropdownSelect(key: string) {
+  router.push(key)
+}
 </script>

app/layouts/minimal.vue

@@ -1,12 +1,14 @@
 <template>
-  <v-app :theme="colorMode.preference">
-    <v-main>
+  <div class="min-h-screen">
+    <main>
       <slot />
-    </v-main>
+    </main>
 
     <nuxt-link to="/">
-      <v-footer app fixed flat height="48">
-        <v-container class="mx-auto d-flex align-center justify-between">
+      <footer
+        class="footer items-center h-12 px-4 bg-neutral text-neutral-content sticky bottom-0"
+      >
+        <div class="container mx-auto flex items-center">
           <img
             :src="Icon"
             alt="Cloudy Lamb"
@@ -15,14 +17,12 @@
             class="mr-2"
           />
           <p class="text-sm">Solar Network</p>
-        </v-container>
-      </v-footer>
+        </div>
+      </footer>
     </nuxt-link>
-  </v-app>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import Icon from "~/assets/images/cloudy-lamb.png"
-
-const colorMode = useColorMode()
 </script>

app/pages/accounts/[name].vue

@@ -1,121 +1,133 @@
 <template>
-  <div v-if="user">
+  <div>
+    <div class="fixed inset-0 blur-md" :style="pageStyle" />
     <img
       :src="userBackground"
-      class="object-cover w-full max-h-48 mb-8"
-      style="aspect-ratio: 16/7"
+      class="w-full max-h-48 object-cover object-top"
+      :style="{ aspectRatio: '16/7', opacity: headerOpacity }"
     />
 
-    <div class="container mx-auto px-8 pb-8">
-      <div class="flex items-center gap-6 mb-8">
-        <v-avatar size="80" rounded="circle" :image="userPicture" />
-        <div>
-          <div class="text-2xl font-bold">
-            {{ user.nick || user.name }}
+    <div v-if="user" class="relative min-h-layout">
+      <div class="container mx-auto p-8 pt-12">
+        <div class="flex items-center gap-6 mb-8">
+          <n-avatar :size="80" round :src="userPicture" />
+          <div>
+            <div class="text-2xl font-bold">
+              {{ user.nick || user.name }}
+            </div>
+            <div class="text-sm opacity-80">@{{ user.name }}</div>
           </div>
-          <div class="text-body-2 text-medium-emphasis">@{{ user.name }}</div>
         </div>
-      </div>
 
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="flex flex-col gap-4">
-          <v-card
-            title="Info"
-            prepend-icon="mdi-information"
-            density="comfortable"
-          >
-            <v-card-text class="flex flex-col gap-2">
-              <div v-if="user?.profile?.timeZone" class="flex gap-2">
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-clock-outline</v-icon>
-                  Time Zone
-                </span>
-                <span class="flex gap-2">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="flex flex-col gap-4">
+            <n-card
+              title="Info"
+              size="small"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
+              <template #header-extra>
+                <n-icon :component="Info" />
+              </template>
+              <div class="flex flex-col gap-2">
+                <div v-if="user?.profile?.timeZone" class="flex gap-2">
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="Clock" />
+                    Time Zone
+                  </span>
+                  <span class="flex gap-2">
+                    <span>
+                      {{
+                        new Date().toLocaleTimeString(void 0, {
+                          timeZone: user.profile.timeZone
+                        })
+                      }}
+                    </span>
+                    <span class="font-bold">·</span>
+                    <span>{{ getOffsetUTCString(user.profile.timeZone) }}</span>
+                    <span class="font-bold">·</span>
+                    <span>{{ user.profile.timeZone }}</span>
+                  </span>
+                </div>
+                <div v-if="user?.profile?.location" class="flex gap-2">
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="MapPin" />
+                    Location
+                  </span>
+                  <span>
+                    {{ user.profile.location }}
+                  </span>
+                </div>
+                <div
+                  v-if="user?.profile?.firstName || user?.profile?.lastName"
+                  class="flex gap-2"
+                >
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="UserPen" />
+                    Name
+                  </span>
                   <span>
                     {{
-                      new Date().toLocaleTimeString(void 0, {
-                        timeZone: user.profile.timeZone
-                      })
+                      [
+                        user.profile.firstName,
+                        user.profile.middleName,
+                        user.profile.lastName
+                      ]
+                        .filter(Boolean)
+                        .join(" ")
                     }}
                   </span>
-                  <span class="font-bold">·</span>
-                  <span>{{ getOffsetUTCString(user.profile.timeZone) }}</span>
-                  <span class="font-bold">·</span>
-                  <span>{{ user.profile.timeZone }}</span>
-                </span>
-              </div>
-              <div v-if="user?.profile?.location" class="flex gap-2">
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-map-marker-outline</v-icon>
-                  Location
-                </span>
-                <span>
-                  {{ user.profile.location }}
-                </span>
-              </div>
-              <div
-                v-if="user?.profile?.firstName || user?.profile?.lastName"
-                class="flex gap-2"
-              >
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-account-edit-outline</v-icon>
-                  Name
-                </span>
-                <span>
-                  {{
-                    [
-                      user.profile.firstName,
-                      user.profile.middleName,
-                      user.profile.lastName
-                    ]
-                      .filter(Boolean)
-                      .join(" ")
-                  }}
-                </span>
-              </div>
-              <div
-                v-if="user?.profile?.gender || user?.profile?.pronouns"
-                class="flex gap-2"
-              >
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-account-circle</v-icon>
-                  Gender
-                </span>
-                <span class="flex gap-2">
-                  <span>{{ user.profile.gender || "Unspecified" }}</span>
-                  <span class="font-bold">·</span>
-                  <span>{{ user.profile.pronouns || "Unspecified" }}</span>
-                </span>
-              </div>
-              <div class="flex gap-2">
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-calendar-month-outline</v-icon>
-                  Joined at
-                </span>
-                <span>{{
-                  user ? new Date(user.createdAt).toLocaleDateString() : ""
-                }}</span>
-              </div>
-              <div v-if="user?.profile?.birthday" class="flex gap-2">
-                <span class="flex items-center gap-2 grow">
-                  <v-icon>mdi-cake-variant-outline</v-icon>
-                  Birthday
-                </span>
-                <span class="flex gap-2">
-                  <span
-                    >{{ calculateAge(new Date(user.profile.birthday)) }} yrs
-                    old</span
-                  >
-                  <span class="font-bold">·</span>
+                </div>
+                <div
+                  v-if="user?.profile?.gender || user?.profile?.pronouns"
+                  class="flex gap-2"
+                >
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="User" />
+                    Gender
+                  </span>
+                  <span class="flex gap-2">
+                    <span>{{ user.profile.gender || "Unspecified" }}</span>
+                    <span class="font-bold">·</span>
+                    <span>{{ user.profile.pronouns || "Unspecified" }}</span>
+                  </span>
+                </div>
+                <div class="flex gap-2">
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="Calendar" />
+                    Joined at
+                  </span>
                   <span>{{
-                    new Date(user.profile.birthday).toLocaleDateString()
+                    user ? new Date(user.createdAt).toLocaleDateString() : ""
                   }}</span>
-                </span>
+                </div>
+                <div v-if="user?.profile?.birthday" class="flex gap-2">
+                  <span class="flex items-center gap-2 grow">
+                    <n-icon :component="Cake" />
+                    Birthday
+                  </span>
+                  <span class="flex gap-2">
+                    <span
+                      >{{ calculateAge(new Date(user.profile.birthday)) }} yrs
+                      old</span
+                    >
+                    <span class="font-bold">·</span>
+                    <span>{{
+                      new Date(user.profile.birthday).toLocaleDateString()
+                    }}</span>
+                  </span>
+                </div>
               </div>
-            </v-card-text>
-          </v-card>
-          <v-card v-if="user?.perkSubscription">
-            <v-card-text>
+            </n-card>
+            <n-card
+              v-if="user?.perkSubscription"
+              size="small"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
               <div class="flex justify-between items-center">
                 <div class="flex flex-col">
                   <div class="text-xl font-bold">
@@ -127,62 +139,103 @@
                   </div>
                   <div class="text-sm">Stellar Program Member</div>
                 </div>
-                <v-icon
-                  size="48"
+                <n-icon
+                  :size="48"
                   :color="
                     perkSubscriptionNames[user.perkSubscription.identifier]
                       ?.color || '#2196f3'
                   "
-                >
-                  mdi-star-circle
-                </v-icon>
+                  :component="Star"
+                />
               </div>
-            </v-card-text>
-          </v-card>
-          <v-card>
-            <v-card-text>
+            </n-card>
+            <n-card
+              size="small"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
               <div class="flex justify-between items-center mb-2">
                 <div>Level {{ user?.profile?.level || 0 }}</div>
                 <div>{{ user?.profile?.experience || 0 }} XP</div>
               </div>
-              <v-progress-linear
-                :model-value="user?.profile?.levelingProgress || 0"
-                color="success"
-                class="mb-0"
-                rounded
+              <n-progress
+                type="line"
+                :percentage="user?.profile?.levelingProgress || 0"
+                status="success"
+                :show-indicator="false"
               />
-            </v-card-text>
-          </v-card>
-        </div>
-        <div>
-          <v-card v-if="htmlBio" title="Bio" prepend-icon="mdi-pencil">
-            <v-card-text>
+            </n-card>
+
+            <n-card
+              v-if="user?.profile?.verification"
+              size="small"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
+              <verification-status-card :mark="user.profile.verification" />
+            </n-card>
+          </div>
+          <div>
+            <n-card
+              v-if="htmlBio"
+              title="Bio"
+              size="small"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
+              <template #header-extra>
+                <n-icon :component="PenLine" />
+              </template>
               <article
                 class="bio-prose prose prose-sm dark:prose-invert prose-slate"
                 v-html="htmlBio"
               ></article>
-            </v-card-text>
-          </v-card>
+            </n-card>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div v-else-if="notFound" class="flex justify-center items-center h-full">
-    <v-empty-state
-      icon="mdi-account-off"
-      title="User not found"
-      text="The user profile you're trying to access is not found."
-    />
-  </div>
-  <div v-else class="flex justify-center items-center h-full">
-    <v-progress-circular indeterminate size="64" color="primary" />
+    <div
+      v-else-if="notFound"
+      class="relative flex justify-center items-center h-full"
+    >
+      <n-empty
+        description="The user profile you're trying to access is not found."
+      >
+        <template #icon>
+          <n-icon :component="UserX" />
+        </template>
+        <template #extra>
+          <div class="text-lg font-bold">User not found</div>
+        </template>
+      </n-empty>
+    </div>
+    <div v-else class="relative flex justify-center items-center h-full">
+      <n-spin size="large" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
+import { useWindowScroll } from "@vueuse/core"
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnAccount } from "~/types/api"
+import {
+  Info,
+  Clock,
+  MapPin,
+  UserPen,
+  User,
+  Calendar,
+  Cake,
+  Star,
+  PenLine,
+  UserX
+} from "lucide-vue-next"
 
 const route = useRoute()
 
@@ -201,7 +254,7 @@ const apiBaseServer = useSolarNetworkUrl()
 
 try {
   const { data, error } = await useFetch<SnAccount>(
-    `${apiBaseServer}/id/accounts/${username.value}`,
+    `${apiBaseServer}/pass/accounts/${username.value}`,
     { server: true }
   )
 
@@ -209,7 +262,7 @@ try {
     console.error("Failed to fetch user:", error.value)
     notFound.value = true
   } else if (data.value) {
-    user.value = data.value
+    user.value = keysToCamel(data.value)
   }
 } catch (err) {
   console.error("Failed to fetch user:", err)
@@ -247,9 +300,7 @@ const htmlBio = ref<string | undefined>(undefined)
 watch(
   user,
   (value) => {
-    htmlBio.value = value?.profile.bio
-      ? render(value.profile.bio)
-      : undefined
+    htmlBio.value = value?.profile.bio ? render(value.profile.bio) : undefined
   },
   { immediate: true, deep: true }
 )
@@ -259,12 +310,48 @@ const userBackground = computed(() => {
     ? `${apiBase}/drive/files/${user.value.profile.background.id}?original=true`
     : undefined
 })
+
+const { y: scrollY } = useWindowScroll()
+const scrollThreshold = 192 // max-h-48 is 12rem = 192px
+
+const backgroundOpacity = computed(() => {
+  return Math.max(0, Math.min(scrollY.value / scrollThreshold, 1))
+})
+
+const headerOpacity = computed(() => {
+  return 1 - backgroundOpacity.value
+})
+
+const pageStyle = computed(() => {
+  if (!userBackground.value) return {}
+  return {
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${userBackground.value}')`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundAttachment: "fixed",
+    opacity: backgroundOpacity.value
+  }
+})
 const userPicture = computed(() => {
   return user.value?.profile.picture
     ? `${apiBase}/drive/files/${user.value.profile.picture.id}`
     : undefined
 })
 
+const cardClass = computed(() => ({
+  "backdrop-blur-2xl": !!userBackground.value,
+  "shadow-xl": !!userBackground.value
+}))
+
+const cardStyle = computed(() =>
+  userBackground.value ? "background-color: rgba(255, 255, 255, 0.1)" : ""
+)
+
+const cardContentStyle = computed(() =>
+  userBackground.value ? "background-color: transparent" : ""
+)
+
 function calculateAge(birthday: Date) {
   const birthDate = new Date(birthday)
   const today = new Date()
@@ -302,7 +389,7 @@ function getOffsetUTCString(targetTimeZone: string): string {
 }
 
 definePageMeta({
-  alias: ["/@:name()"]
+  alias: ["/@:name()", "/u/:name()"]
 })
 
 useHead({
@@ -328,6 +415,7 @@ useHead({
 
 defineOgImage({
   component: "ImageCard",
+  // @ts-ignore
   title: computed(() =>
     user.value ? user.value.nick || user.value.name : "User Profile"
   ),

app/pages/auth/authorize.vue

@@ -1,118 +1,17 @@
-<template>
-  <v-container class="d-flex align-center justify-center fill-height">
-    <v-card max-width="1000" rounded="lg" width="100%">
-      <div v-if="isLoading" class="d-flex justify-center mb-4">
-        <v-progress-linear indeterminate color="primary" height="4" />
-      </div>
-      <div class="pa-8">
-        <div class="mb-4">
-          <img
-            :src="colorMode.value == 'dark' ? IconDark : IconLight"
-            alt="CloudyLamb"
-            height="60"
-            width="60"
-          />
-        </div>
-        <v-row>
-          <v-col cols="12" lg="6" class="d-flex align-start justify-start">
-            <div class="md:text-left h-auto">
-              <h2 class="text-2xl font-bold mb-1">Authorize Application</h2>
-              <p class="text-lg">Grant access to your Solar Network account</p>
-            </div>
-          </v-col>
-          <v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
-            <div class="w-full d-flex flex-column md:text-right">
-              <div v-if="error" class="mb-4">
-                <v-alert
-                  type="error"
-                  closable
-                  @update:model-value="error = null"
-                >
-                  {{ error }}
-                </v-alert>
-              </div>
-
-              <!-- App Info Section -->
-              <div v-if="clientInfo" class="mb-6">
-                <div class="d-flex align-center mb-4 text-left">
-                  <div>
-                    <h3 class="text-xl font-semibold">
-                      {{ clientInfo.clientName || "Unknown Application" }}
-                    </h3>
-                    <p class="text-base">
-                      {{
-                        isNewApp
-                          ? "wants to access your Solar Network account"
-                          : "wants to access your account"
-                      }}
-                    </p>
-                  </div>
-                </div>
-
-                <!-- Requested Permissions -->
-                <v-card variant="outlined" class="pa-4 mb-4 text-left">
-                  <h4 class="font-medium mb-2">
-                    This will allow
-                    {{ clientInfo.clientName || "the app" }} to
-                  </h4>
-                  <ul class="space-y-1">
-                    <li
-                      v-for="scope in requestedScopes"
-                      :key="scope"
-                      class="d-flex align-start"
-                    >
-                      <v-icon class="mt-1 mr-2" color="success" size="18"
-                        >mdi-check</v-icon
-                      >
-                      <span>{{ scope }}</span>
-                    </li>
-                  </ul>
-                </v-card>
-
-                <!-- Buttons -->
-                <div class="d-flex gap-3 mt-4">
-                  <v-btn
-                    color="primary"
-                    :loading="isAuthorizing"
-                    @click="handleAuthorize"
-                    class="flex-grow-1"
-                    size="large"
-                  >
-                    Authorize
-                  </v-btn>
-                  <v-btn
-                    variant="outlined"
-                    :disabled="isAuthorizing"
-                    @click="handleDeny"
-                    class="flex-grow-1"
-                    size="large"
-                  >
-                    Deny
-                  </v-btn>
-                </div>
-              </div>
-            </div>
-          </v-col>
-        </v-row>
-      </div>
-    </v-card>
-    <footer-compact />
-  </v-container>
-</template>
-
 <script setup lang="ts">
 import { ref, computed, onMounted } from "vue"
 import { useRoute } from "vue-router"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
+import { CheckIcon, PlugIcon } from "lucide-vue-next"
 
 import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from "~/assets/images/cloudy-lamb@dark.png"
-
-const colorMode = useColorMode()
+import type { SnCloudFile } from "~/types/api/post"
 
 const route = useRoute()
 const api = useSolarNetwork()
 
+const message = useMessage()
+
 useHead({
   title: "Authorize Application"
 })
@@ -120,11 +19,11 @@ useHead({
 // State
 const isLoading = ref(true)
 const isAuthorizing = ref(false)
-const error = ref<string | null>(null)
 const clientInfo = ref<{
   clientName?: string
   homeUri?: string
-  picture?: { url: string }
+  picture?: SnCloudFile
+  background?: SnCloudFile
   scopes?: string[]
 } | null>(null)
 const isNewApp = ref(false)
@@ -138,11 +37,10 @@ const requestedScopes = computed(() => {
 async function fetchClientInfo() {
   try {
     const queryString = window.location.search.slice(1)
-    clientInfo.value = await api(`/id/auth/open/authorize?${queryString}`)
+    clientInfo.value = await api(`/pass/auth/open/authorize?${queryString}`)
     checkIfNewApp()
-  } catch (err: any) {
-    error.value =
-      err.message || "An error occurred while loading the authorization request"
+  } catch (err) {
+    message.error(err instanceof Error ? err.message : String(err))
   } finally {
     isLoading.value = false
   }
@@ -158,7 +56,7 @@ async function handleAuthorize(authorize = true) {
   isAuthorizing.value = true
   try {
     const data = await api<{ redirectUri?: string }>(
-      "/id/auth/open/authorize",
+      "/pass/auth/open/authorize",
       {
         method: "POST",
         body: new URLSearchParams({
@@ -171,8 +69,8 @@ async function handleAuthorize(authorize = true) {
     if (data.redirectUri) {
       window.location.href = data.redirectUri
     }
-  } catch (err: any) {
-    error.value = err.message || "An error occurred during authorization"
+  } catch (err) {
+    message.error(err instanceof Error ? err.message : String(err))
   } finally {
     isAuthorizing.value = false
   }
@@ -190,8 +88,137 @@ onMounted(() => {
 definePageMeta({
   middleware: "auth"
 })
+
+const apiBase = useSolarNetworkUrl()
+const clientAvatar = computed(() =>
+  clientInfo.value?.picture
+    ? `${apiBase}/drive/files/${clientInfo.value.picture.id}`
+    : undefined
+)
+const clientBackground = computed(() =>
+  clientInfo.value?.background
+    ? `${apiBase}/drive/files/${clientInfo.value.background.id}?original=true`
+    : undefined
+)
+
+const pageStyle = computed(() => {
+  if (!clientBackground.value) return {}
+  return {
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${clientBackground.value}')`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat"
+  }
+})
 </script>
 
-<style scoped>
-/* Add any custom styles here */
-</style>
+<template>
+  <div class="fixed inset-0 transition-all duration-500" :style="pageStyle" />
+  <div class="relative flex items-center justify-center min-h-layout px-4">
+    <n-card
+      :class="[
+        'w-full',
+        'max-w-[1000px]',
+        { 'backdrop-blur-2xl': clientBackground },
+        { 'shadow-xl': clientBackground }
+      ]"
+      size="large"
+      :style="
+        clientBackground ? 'background-color: rgba(255, 255, 255, 0.1)' : ''
+      "
+      :content-style="clientBackground ? 'background-color: transparent' : ''"
+    >
+      <div v-if="isLoading" class="flex justify-center p-8">
+        <n-spin size="large" />
+      </div>
+      <div v-else class="p-4 md:p-8">
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <!-- Left Column: Title -->
+          <div class="flex flex-col items-start justify-start">
+            <div class="mb-4">
+              <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
+            </div>
+            <div class="text-left h-auto">
+              <h2 class="text-2xl font-bold mb-1">Authorize Application</h2>
+              <p class="text-lg">Grant access to your Solar Network account</p>
+            </div>
+          </div>
+
+          <!-- Right Column: Content -->
+          <div class="flex flex-col items-end justify-stretch">
+            <div class="w-full flex flex-col md:text-right">
+              <div class="mb-3 h-[60px] px-[4px] pt-[8px]">
+                <n-avatar :src="clientAvatar" :size="52">
+                  <n-icon :component="PlugIcon" :size="28" />
+                </n-avatar>
+              </div>
+              <!-- App Info Section -->
+              <div v-if="clientInfo" class="mb-6">
+                <div class="flex flex-col items-end mb-4">
+                  <h3 class="text-xl font-semibold">
+                    {{ clientInfo.clientName || "Unknown Application" }}
+                  </h3>
+                  <p class="text-base">
+                    {{
+                      isNewApp
+                        ? "wants to access your Solar Network account"
+                        : "wants to access your account"
+                    }}
+                  </p>
+                </div>
+
+                <!-- Requested Permissions -->
+                <n-card embedded class="mb-4 text-left">
+                  <h4 class="font-medium mb-2">
+                    This will allow
+                    {{ clientInfo.clientName || "the app" }} to
+                  </h4>
+                  <n-list style="background-color: transparent" size="small">
+                    <n-list-item
+                      v-for="scope in requestedScopes"
+                      :key="scope"
+                      class="bg-transparent"
+                      style="padding: 0"
+                    >
+                      <template #prefix>
+                        <n-icon
+                          class="mt-1 mr-2"
+                          color="#18a058"
+                          :size="16"
+                          :component="CheckIcon"
+                        />
+                      </template>
+                      <span>{{ scope }}</span>
+                    </n-list-item>
+                  </n-list>
+                </n-card>
+
+                <!-- Buttons -->
+                <div class="flex gap-3 mt-4">
+                  <n-button
+                    type="primary"
+                    :loading="isAuthorizing"
+                    class="grow"
+                    size="large"
+                    @click="handleAuthorize(true)"
+                  >
+                    Authorize
+                  </n-button>
+                  <n-button
+                    secondary
+                    :disabled="isAuthorizing"
+                    class="grow"
+                    size="large"
+                    @click="handleDeny"
+                  >
+                    Deny
+                  </n-button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </n-card>
+  </div>
+</template>

app/pages/auth/callback/[provider].vue

@@ -1,12 +1,14 @@
 <template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card class="pa-6 text-center" max-width="400">
-      <v-card-text>
-        <v-progress-circular indeterminate color="primary" class="mb-4" />
-        <h2 class="text-xl font-bold">Redirecting...</h2>
-        <p class="opacity-80">Please wait while we redirect you.</p>
-      </v-card-text>
-    </v-card>
+  <div class="flex items-center justify-center h-compact-layout">
+    <n-result
+      status="info"
+      title="Almost There"
+      description="Please wait while we redirect you, it won't take too long..."
+    >
+      <template #icon>
+        <span class="loading loading-spinner loading-xl"></span>
+      </template>
+    </n-result>
   </div>
 </template>
 
@@ -25,7 +27,7 @@ definePageMeta({
 })
 
 onMounted(() => {
-  const redirectUrl = `${apiBase}/id/auth/callback/${provider}${window.location.search}`
+  const redirectUrl = `${apiBase}/pass/auth/callback/${provider}${window.location.search}`
   window.location.href = redirectUrl
 })
 </script>

app/pages/auth/callback/index.vue

@@ -1,12 +1,10 @@
 <template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card class="pa-6 text-center" max-width="400">
-      <v-card-text>
-        <v-icon size="64" color="success" class="mb-4">mdi-check-circle</v-icon>
-        <h2 class="text-xl font-bold">Auth completed</h2>
-        <p class="opacity-80">Now you can close this tab</p>
-      </v-card-text>
-    </v-card>
+  <div class="flex items-center justify-center h-compact-layout">
+    <n-result
+      status="success"
+      title="Auth Completed"
+      description="Now you can close this tab safely."
+    ></n-result>
   </div>
 </template>
 
@@ -18,4 +16,13 @@ useHead({
 definePageMeta({
   layout: "minimal"
 })
+
+const route = useRoute()
+
+onMounted(() => {
+  if (route.query.token || route.query.challenge) {
+    // Goes to the client
+    window.location.href = `solian://auth/callback${window.location.search}`
+  }
+})
 </script>

app/pages/auth/captcha.vue

@@ -1,32 +1,27 @@
 <template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card
-      class="pa-6 text-center"
-      max-width="600"
-      title="Captcha Verification"
-    >
-      <v-card-text>
-        <div class="mb-8 mt-4">
-          <client-only>
-            <captcha-widget @verified="onCaptchaVerified" />
-          </client-only>
-        </div>
-        <div>
-          <div class="text-sm font-bold mb-1">Solar Network Anti-Robot</div>
-          <div class="opacity-80 text-xs">
-            Hosted by
-            <a
-              href="https://github.com/Solsynth/DysonNetwork"
-              class="text-primary"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              DysonNetwork.Sphere
-            </a>
-          </div>
-        </div>
-      </v-card-text>
-    </v-card>
+  <div class="flex flex-col items-center justify-center h-compact-layout">
+    <div class="mb-4">
+      <client-only>
+        <captcha-widget @verified="onCaptchaVerified" />
+      </client-only>
+    </div>
+    <div class="text-center">
+      <div class="text-sm font-bold">Solar Network Anti-Robot</div>
+      <p class="opacity-80 text-sm mb-2">
+        You might need to wait a while before the puzzle fully loaded.
+      </p>
+      <div class="opacity-80 text-xs">
+        Hosted by
+        <a
+          href="https://github.com/Solsynth/DysonNetwork"
+          class="text-primary"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          DysonNetwork.Sphere
+        </a>
+      </div>
+    </div>
   </div>
 </template>
 

app/pages/auth/create-account.vue

@@ -1,185 +1,206 @@
 <template>
-  <v-container class="d-flex align-center justify-center fill-height">
-    <v-card max-width="1000" rounded="lg" width="100%">
-      <div v-if="isLoading" class="d-flex justify-center mb-4">
-        <v-progress-linear indeterminate color="primary" height="4" />
-      </div>
-      <div class="pa-8">
+  <div class="flex items-center justify-center h-layout px-4">
+    <n-card class="w-full max-w-[1000px]" size="large">
+      <div class="p-4 md:p-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">
-            <div class="md:text-left h-auto">
-              <div v-if="stage === 'username-nick'">
-                <h2 class="text-2xl font-bold mb-1">Create your account</h2>
-                <p class="text-lg">Start with your username and nickname</p>
-              </div>
-              <div v-if="stage === 'email'">
-                <h2 class="text-2xl font-bold mb-1">Add your email</h2>
-                <p class="text-lg">We'll use this for account verification</p>
-              </div>
-              <div v-if="stage === 'password'">
-                <h2 class="text-2xl font-bold mb-1">Set your password</h2>
-                <p class="text-lg">Choose a strong password for your account</p>
-              </div>
-              <div v-if="stage === 'captcha'">
-                <h2 class="text-2xl font-bold mb-1">Verify you're human</h2>
-                <p class="text-lg">
-                  Complete the captcha to create your account
-                </p>
-              </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div class="flex flex-col items-start justify-between">
+            <div class="text-left h-auto">
+              <Transition mode="out-in" name="slide-fade">
+                <div v-if="stage === 'username-nick'" key="username-nick">
+                  <h2 class="text-2xl font-bold mb-1">Create your account</h2>
+                  <p class="text-lg">Start with your username and nickname</p>
+                </div>
+                <div v-else-if="stage === 'email'" key="email">
+                  <h2 class="text-2xl font-bold mb-1">Add your email</h2>
+                  <p class="text-lg">We'll use this for account verification</p>
+                </div>
+                <div v-else-if="stage === 'password'" key="password">
+                  <h2 class="text-2xl font-bold mb-1">Set your password</h2>
+                  <p class="text-lg">
+                    Choose a strong password for your account
+                  </p>
+                </div>
+                <div v-else-if="stage === 'captcha'" key="captcha">
+                  <h2 class="text-2xl font-bold mb-1">Verify you're human</h2>
+                  <p class="text-lg">
+                    Complete the captcha to create your account
+                  </p>
+                </div>
+                <div v-else-if="stage === 'terms'" key="terms">
+                  <h2 class="text-2xl font-bold mb-1">Review Terms</h2>
+                  <p class="text-lg">
+                    Please review our terms and conditions before creating your
+                    account.
+                  </p>
+                </div>
+              </Transition>
             </div>
-          </v-col>
-          <v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
-            <div class="w-full d-flex flex-column md:text-right">
-              <v-window
-                v-model="activeStageIndex"
-                class="align-self-stretch pt-2"
+            <div v-if="isLoading" class="mb-4">
+              <span class="loading loading-spinner loading-xl"></span>
+            </div>
+          </div>
+          <div class="flex items-center justify-stretch">
+            <div class="w-full flex flex-col md:text-right">
+              <n-form
+                ref="formRef"
+                :model="formModel"
+                :rules="rules"
+                label-placement="top"
+                class="w-full"
               >
                 <!-- Stage 1: Username and Nickname -->
-                <v-window-item :value="0">
-                  <v-text-field
-                    v-model="formModel.name"
-                    label="Username"
-                    variant="outlined"
-                    :rules="nameRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <v-text-field
-                    v-model="formModel.nick"
-                    label="Nickname"
-                    variant="outlined"
-                    :rules="nickRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-btn
-                      variant="text"
-                      class="text-capitalize"
-                      to="/auth/login"
-                    >
-                      Login
-                    </v-btn>
-                    <v-btn color="primary" size="large" @click="handleNext">
-                      Next
-                    </v-btn>
+                <Transition mode="out-in" name="slide-fade">
+                  <div v-if="stage === 'username-nick'" key="username-nick">
+                    <n-form-item label="Username" path="name">
+                      <n-input
+                        size="large"
+                        v-model:value="formModel.name"
+                        placeholder="Username"
+                        class="text-left"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <n-form-item label="Nickname" path="nick">
+                      <n-input
+                        size="large"
+                        v-model:value="formModel.nick"
+                        placeholder="Nickname"
+                        class="text-left"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <div class="flex justify-between items-center mt-6">
+                      <n-button text to="/auth/login">Login</n-button>
+                      <n-button type="primary" size="large" @click="handleNext">
+                        Next
+                      </n-button>
+                    </div>
                   </div>
-                </v-window-item>
 
-                <!-- Stage 2: Email -->
-                <v-window-item :value="1">
-                  <v-text-field
-                    v-model="formModel.email"
-                    label="Email"
-                    placeholder="your@email.com"
-                    variant="outlined"
-                    :rules="emailRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-spacer />
-                    <v-btn color="primary" size="large" @click="handleNext">
-                      Next
-                    </v-btn>
+                  <!-- Stage 2: Email -->
+                  <div v-else-if="stage === 'email'" key="email">
+                    <n-form-item label="Email" path="email">
+                      <n-input
+                        v-model:value="formModel.email"
+                        placeholder="your@email.com"
+                        size="large"
+                        class="text-left"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <div class="flex justify-between items-center mt-6">
+                      <div />
+                      <n-button type="primary" size="large" @click="handleNext">
+                        Next
+                      </n-button>
+                    </div>
                   </div>
-                </v-window-item>
 
-                <!-- Stage 3: Password -->
-                <v-window-item :value="2">
-                  <v-text-field
-                    v-model="formModel.password"
-                    label="Password"
-                    type="password"
-                    placeholder="Enter your password"
-                    variant="outlined"
-                    :rules="passwordRules"
-                    class="mb-2"
-                    @keydown.enter="handleNext"
-                  />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-spacer />
-                    <v-btn color="primary" size="large" @click="handleNext">
-                      Next
-                    </v-btn>
+                  <!-- Stage 3: Password -->
+                  <div v-else-if="stage === 'password'" key="password">
+                    <n-form-item label="Password" path="password">
+                      <n-input
+                        v-model:value="formModel.password"
+                        type="password"
+                        show-password-on="click"
+                        placeholder="Enter your password"
+                        class="text-left"
+                        size="large"
+                        @keydown.enter.prevent="handleNext"
+                      />
+                    </n-form-item>
+                    <div class="flex justify-between items-center mt-6">
+                      <div />
+                      <n-button type="primary" size="large" @click="handleNext">
+                        Next
+                      </n-button>
+                    </div>
                   </div>
-                </v-window-item>
 
-                <!-- Stage 4: Captcha -->
-                <v-window-item :value="3">
-                  <div class="d-flex justify-center mb-4">
-                    <client-only>
-                      <captcha-widget @verified="onCaptchaVerified" />
-                    </client-only>
+                  <!-- Stage 4: Captcha -->
+                  <div v-else-if="stage === 'captcha'" key="captcha">
+                    <div class="flex justify-center mb-4">
+                      <client-only>
+                        <captcha-widget @verified="onCaptchaVerified" />
+                      </client-only>
+                    </div>
                   </div>
-                </v-window-item>
-              </v-window>
 
-              <v-alert
-                v-if="error"
-                type="error"
-                closable
-                class="mt-2"
-                @update:model-value="error = null"
-              >
-                {{ error }}
-              </v-alert>
+                  <!-- Stage 5: Terms -->
+                  <div v-else-if="stage === 'terms'" key="terms">
+                    <n-alert type="info" title="Things you need to know">
+                      <ul class="list-decimal flex flex-col gap-1">
+                        <li>
+                          You can't have multiple accounts on the Solar Network,
+                          that violates our Terms of Service.
+                        </li>
+                        <li>
+                          You need go to your email to confirm your
+                          registeration before you have permissions to do
+                          something.
+                        </li>
+                        <li>
+                          Feel free to contact our customer service at
+                          <address>lily@solsynth.dev</address>
+                        </li>
+                        <li>
+                          Make sure you agreed to our Terms and Service,
+                          <nuxt-link
+                            class="underline font-bold"
+                            href="https://solsynth.dev/terms"
+                            target="_blank"
+                          >
+                            check it out
+                          </nuxt-link>
+                        </li>
+                      </ul>
+                    </n-alert>
+
+                    <div class="flex justify-between items-center mt-6">
+                      <n-button text @click="stage = 'captcha'">Back</n-button>
+                      <n-button
+                        type="primary"
+                        size="large"
+                        @click="handleCreateAccount"
+                      >
+                        Create Account
+                      </n-button>
+                    </div>
+                  </div>
+                </Transition>
+              </n-form>
             </div>
-          </v-col>
-        </v-row>
+          </div>
+        </div>
       </div>
-    </v-card>
-    <footer-compact />
-  </v-container>
+    </n-card>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed } from "vue"
+import { ref, reactive, onMounted } from "vue"
 import { useRouter } from "vue-router"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
 import CaptchaWidget from "~/components/CaptchaWidget.vue"
+import type { FormInst, FormRules } from "naive-ui"
 
 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"
 })
 
-const stage = ref<"username-nick" | "email" | "password" | "captcha">(
+const stage = ref<"username-nick" | "email" | "password" | "captcha" | "terms">(
   "username-nick"
 )
 const isLoading = ref(false)
-const error = ref<string | null>(null)
-
-// Computed for v-window active index
-const activeStageIndex = computed(() => {
-  switch (stage.value) {
-    case "username-nick":
-      return 0
-    case "email":
-      return 1
-    case "password":
-      return 2
-    case "captcha":
-      return 3
-    default:
-      return 0
-  }
-})
+const formRef = ref<FormInst | null>(null)
 
 const formModel = reactive({
   name: "",
@@ -194,108 +215,153 @@ onMounted(() => {
   formModel.language = navigator.language
 })
 
-const nameRules = [
-  (v: string) => !!v || "Name is required",
-  (v: string) => v.length >= 2 || "Name must be at least 2 characters long",
-  (v: string) => v.length <= 256 || "Name must be at most 256 characters long",
-  (v: string) =>
-    /^[A-Za-z0-9_-]+$/.test(v) ||
-    "Name can only contain letters, numbers, underscores, and hyphens."
-]
+const message = useMessage()
+const dialog = useDialog()
 
-const nickRules = [
-  (v: string) => !!v || "Nick is required",
-  (v: string) => v.length <= 256 || "Nick must be at most 256 characters long"
-]
-
-const emailRules = [
-  (v: string) => !!v || "Email is required",
-  (v: string) =>
-    v.length <= 1024 || "Email must be at most 1024 characters long",
-  (v: string) =>
-    /^[^+]+@[^@]+\.[^@]+$/.test(v) ||
-    "Email address cannot contain '+' symbol.",
-  (v: string) => /.+@.+\..+/.test(v) || "Please enter a valid email address"
-]
-
-const passwordRules = [
-  (v: string) => !!v || "Password is required",
-  (v: string) => v.length >= 4 || "Password must be at least 4 characters long",
-  (v: string) =>
-    v.length <= 128 || "Password must be at most 128 characters long"
-]
+const rules: FormRules = {
+  name: [
+    {
+      key: "name",
+      required: true,
+      message: "Name is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "name",
+      min: 2,
+      message: "Name must be at least 2 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "name",
+      max: 256,
+      message: "Name must be at most 256 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "name",
+      pattern: /^[A-Za-z0-9_-]+$/,
+      message:
+        "Name can only contain letters, numbers, underscores, and hyphens.",
+      trigger: ["input", "blur"]
+    }
+  ],
+  nick: [
+    {
+      key: "nick",
+      required: true,
+      message: "Nick is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "nick",
+      max: 256,
+      message: "Nick must be at most 256 characters long",
+      trigger: ["input", "blur"]
+    }
+  ],
+  email: [
+    {
+      key: "email",
+      required: true,
+      message: "Email is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "email",
+      max: 1024,
+      message: "Email must be at most 1024 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "email",
+      validator: (_rule, value: string) => {
+        if (value.includes("+")) {
+          return new Error("Email address cannot contain '+' symbol.")
+        }
+        if (!/.+@.+\..+/.test(value)) {
+          return new Error("Please enter a valid email address")
+        }
+        return true
+      },
+      trigger: ["input", "blur"]
+    }
+  ],
+  password: [
+    {
+      key: "password",
+      required: true,
+      message: "Password is required",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "password",
+      min: 4,
+      message: "Password must be at least 4 characters long",
+      trigger: ["input", "blur"]
+    },
+    {
+      key: "password",
+      max: 128,
+      message: "Password must be at most 128 characters long",
+      trigger: ["input", "blur"]
+    }
+  ]
+}
 
 const onCaptchaVerified = (token: string) => {
   formModel.captchaToken = token
-  handleCreateAccount()
+  stage.value = "terms"
 }
 
-function handleNext() {
-  error.value = null
-  if (stage.value === "username-nick") {
-    if (!formModel.name || !formModel.nick) {
-      error.value = "Please fill in username and nickname"
-      return
+async function handleNext() {
+  if (!formRef.value) return
+
+  try {
+    if (stage.value === "username-nick") {
+      await new Promise<void>((resolve, reject) => {
+        formRef.value?.validate(
+          (errors) => {
+            if (errors) reject(new Error("Validation failed"))
+            else resolve()
+          },
+          (rule) => rule.key === "name" || rule.key === "nick"
+        )
+      })
+      stage.value = "email"
+    } else if (stage.value === "email") {
+      await new Promise<void>((resolve, reject) => {
+        formRef.value?.validate(
+          (errors) => {
+            if (errors) reject(new Error("Validation failed"))
+            else resolve()
+          },
+          (rule) => rule.key === "email"
+        )
+      })
+      stage.value = "password"
+    } else if (stage.value === "password") {
+      await new Promise<void>((resolve, reject) => {
+        formRef.value?.validate(
+          (errors) => {
+            if (errors) reject(new Error("Validation failed"))
+            else resolve()
+          },
+          (rule) => rule.key === "password"
+        )
+      })
+      stage.value = "captcha"
     }
-    if (
-      !nameRules.every(
-        (rule) =>
-          typeof rule(formModel.name) === "boolean" && rule(formModel.name)
-      )
-    ) {
-      error.value = "Invalid username"
-      return
-    }
-    if (
-      !nickRules.every(
-        (rule) =>
-          typeof rule(formModel.nick) === "boolean" && rule(formModel.nick)
-      )
-    ) {
-      error.value = "Invalid nickname"
-      return
-    }
-    stage.value = "email"
-  } else if (stage.value === "email") {
-    if (!formModel.email) {
-      error.value = "Please enter your email"
-      return
-    }
-    if (
-      !emailRules.every(
-        (rule) =>
-          typeof rule(formModel.email) === "boolean" && rule(formModel.email)
-      )
-    ) {
-      error.value = "Invalid email"
-      return
-    }
-    stage.value = "password"
-  } else if (stage.value === "password") {
-    if (!formModel.password) {
-      error.value = "Please enter your password"
-      return
-    }
-    if (
-      !passwordRules.every(
-        (rule) =>
-          typeof rule(formModel.password) === "boolean" &&
-          rule(formModel.password)
-      )
-    ) {
-      error.value = "Invalid password"
-      return
-    }
-    stage.value = "captcha"
+  } catch {
+    // Validation error, do nothing
   }
 }
 
 async function handleCreateAccount() {
   isLoading.value = true
-  error.value = null
 
   try {
-    await api("/id/accounts", {
+    await api("/pass/accounts", {
       method: "POST",
       body: {
         name: formModel.name,
@@ -308,14 +374,35 @@ async function handleCreateAccount() {
     })
 
     // On success, redirect to login page
-    alert(
-      "Welcome to Solar Network! Your account has been created successfully. Don't forget to check your email for activation instructions."
-    )
-    router.push("/auth/login")
+    dialog.success({
+      title: "Registration Completed",
+      content:
+        "Welcome to Solar Network! Your account has been created successfully. Don't forget to check your email for activation instructions.",
+      onPositiveClick: () => {
+        router.push("/auth/login")
+      }
+    })
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
 }
 </script>
+
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.2s ease-out;
+}
+
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>

app/pages/auth/login.vue

@@ -4,11 +4,11 @@ import { useRoute, useRouter } from "vue-router"
 import { useUserStore } from "~/stores/user"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
 import type { SnAuthChallenge, SnAuthFactor } from "~/types/api"
+import { useMessage } from "naive-ui"
 
 import FingerprintJS from "@fingerprintjs/fingerprintjs"
 
 import IconLight from "~/assets/images/cloudy-lamb.png"
-import IconDark from "~/assets/images/cloudy-lamb@dark.png"
 
 // State management
 useHead({
@@ -19,23 +19,7 @@ const stage = ref<
   "find-account" | "select-factor" | "enter-code" | "token-exchange"
 >("find-account")
 const isLoading = ref(false)
-const error = ref<string | null>(null)
-
-// Computed for v-window active index
-const activeStageIndex = computed(() => {
-  switch (stage.value) {
-    case "find-account":
-      return 0
-    case "select-factor":
-      return 1
-    case "enter-code":
-      return 2
-    case "token-exchange":
-      return 3
-    default:
-      return 0
-  }
-})
+const message = useMessage()
 
 // Stage 1: Find Account
 const accountIdentifier = ref("")
@@ -64,14 +48,13 @@ const selectedFactor = computed(() => {
 
 async function handleFindAccount() {
   if (!accountIdentifier.value) {
-    error.value = "Please enter your email or username."
+    message.error("Please enter your email or username.")
     return
   }
   isLoading.value = true
-  error.value = null
 
   try {
-    challenge.value = await api("/id/auth/challenge", {
+    challenge.value = await api("/pass/auth/challenge", {
       method: "POST",
       body: {
         platform: 1,
@@ -83,7 +66,7 @@ async function handleFindAccount() {
     await getFactors()
     stage.value = "select-factor"
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
@@ -93,10 +76,9 @@ async function getFactors() {
   if (!challenge.value) return
 
   isLoading.value = true
-  error.value = null
   try {
     const availableFactors = await api<SnAuthFactor[]>(
-      `/id/auth/challenge/${challenge.value.id}/factors`
+      `/pass/auth/challenge/${challenge.value.id}/factors`
     )
     factors.value = availableFactors.filter(
       (f: SnAuthFactor) => !challenge.value!.blacklistFactors.includes(f.id)
@@ -104,11 +86,12 @@ async function getFactors() {
     if (factors.value.length > 0) {
       selectedFactorId.value = null // Let user choose
     } else if (challenge.value.stepRemain > 0) {
-      error.value =
+      message.error(
         "No more available authentication factors, but authentication is not complete. Please contact support."
+      )
     }
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
@@ -119,15 +102,14 @@ async function requestVerificationCode() {
 
   const isResend = stage.value === "enter-code"
   if (isResend) isLoading.value = true
-  error.value = null
 
   try {
     await api(
-      `/id/auth/challenge/${challenge.value.id}/factors/${selectedFactorId.value}`,
+      `/pass/auth/challenge/${challenge.value.id}/factors/${selectedFactorId.value}`,
       { method: "POST" }
     )
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
     throw e // Rethrow to be handled by caller
   } finally {
     if (isResend) isLoading.value = false
@@ -136,7 +118,7 @@ async function requestVerificationCode() {
 
 async function handleFactorSelected() {
   if (!selectedFactor.value) {
-    error.value = "Please select an authentication method."
+    message.error("Please select an authentication method.")
     return
   }
 
@@ -149,7 +131,6 @@ async function handleFactorSelected() {
   // For code-based factors (1, 2, 3, 4), send the code first
   if ([1, 2, 3, 4].includes(selectedFactor.value.type)) {
     isLoading.value = true
-    error.value = null
     try {
       await requestVerificationCode()
       stage.value = "enter-code"
@@ -163,14 +144,13 @@ async function handleFactorSelected() {
 
 async function handleVerifyFactor() {
   if (!selectedFactorId.value || !password.value || !challenge.value) {
-    error.value = "Please enter your password/code."
+    message.error("Please enter your password/code.")
     return
   }
   isLoading.value = true
-  error.value = null
 
   try {
-    challenge.value = await api(`/id/auth/challenge/${challenge.value.id}`, {
+    challenge.value = await api(`/pass/auth/challenge/${challenge.value.id}`, {
       method: "PATCH",
       body: {
         factor_id: selectedFactorId.value,
@@ -188,7 +168,7 @@ async function handleVerifyFactor() {
       stage.value = "select-factor" // MFA step
     }
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
   } finally {
     isLoading.value = false
   }
@@ -199,10 +179,9 @@ const route = useRoute()
 
 async function exchangeToken() {
   isLoading.value = true
-  error.value = null
   try {
     // The token endpoint gives the Set-Cookie header
-    await api<{ token: string }>("/id/auth/token", {
+    await api<{ token: string }>("/pass/auth/token", {
       method: "POST",
       body: {
         grant_type: "authorization_code",
@@ -212,14 +191,14 @@ async function exchangeToken() {
 
     await userStore.fetchUser()
 
-    const redirectUri = route.query.redirect_uri as string
+    const redirectUri = route.query.redirect as string
     if (redirectUri) {
-      window.location.href = redirectUri
+      window.location.href = decodeURIComponent(redirectUri)
     } else {
       await router.push("/")
     }
   } catch (e: unknown) {
-    error.value = e instanceof Error ? e.message : "An error occurred"
+    message.error(e instanceof Error ? e.message : "An error occurred")
     stage.value = "select-factor" // Go back if token exchange fails
   } finally {
     isLoading.value = false
@@ -243,215 +222,249 @@ function getFactorName(factorType: number) {
   }
 }
 
-const colorMode = useColorMode()
+function getFactorIcon(factorType: number) {
+  switch (factorType) {
+    case 0:
+      return "mdi mdi-lock"
+    case 1:
+      return "mdi mdi-email"
+    case 2:
+      return "mdi mdi-cellphone"
+    case 3:
+      return "mdi mdi-clock"
+    case 4:
+      return "mdi mdi-numeric"
+    default:
+      return "mdi mdi-shield-key"
+  }
+}
 </script>
 
-<template>
-  <v-container class="d-flex align-center justify-center fill-height">
-    <v-card max-width="1000" rounded="lg" width="100%">
-      <div v-if="isLoading" class="d-flex justify-center mb-4">
-        <v-progress-linear indeterminate color="primary" height="4" />
-      </div>
-      <div class="pa-8">
-        <div class="mb-4">
-          <img
-            :src="colorMode.value == 'dark' ? IconDark : IconLight"
-            alt="CloudyLamb"
-            height="60"
-            width="60"
-          />
-        </div>
-        <v-row>
-          <v-col cols="12" lg="6" class="d-flex align-start justify-start">
-            <div class="md:text-left h-auto">
-              <div v-if="stage === 'find-account'">
-                <h2 class="text-2xl font-bold mb-1">Sign in</h2>
-                <p class="text-lg">Use your Solarpass</p>
-              </div>
-              <div v-if="stage === 'select-factor'">
-                <h2 class="text-2xl font-bold mb-1">Choose how to sign in</h2>
-                <p class="text-lg">
-                  Select your preferred authentication method
-                </p>
-              </div>
-              <div v-if="stage === 'enter-code' && selectedFactor">
-                <h2 class="text-2xl font-bold mb-1">
-                  Enter your
-                  {{
-                    selectedFactor.type === 0 ? "password" : "verification code"
-                  }}
-                </h2>
-                <p v-if="selectedFactor.type === 1" class="text-lg">
-                  A code has been sent to
-                  {{ selectedFactor.contact || "your email" }}.
-                </p>
-                <p v-if="selectedFactor.type === 2" class="text-lg">
-                  Enter the code from your in-app authenticator.
-                </p>
-                <p v-if="selectedFactor.type === 3" class="text-lg">
-                  Enter the timed verification code.
-                </p>
-                <p v-if="selectedFactor.type === 4" class="text-lg">
-                  Enter your PIN code.
-                </p>
-                <p v-if="selectedFactor.type === 0" class="text-lg">
-                  Enter your password to continue.
-                </p>
-              </div>
-              <div v-if="stage === 'token-exchange'">
-                <h2 class="text-2xl font-bold mb-1">Finalizing Login</h2>
-                <p class="text-lg">
-                  Please wait while we complete your sign in.
-                </p>
-              </div>
-            </div>
-          </v-col>
-          <v-col cols="12" lg="6" class="d-flex align-center justify-stretch">
-            <div class="w-full d-flex flex-column md:text-right">
-              <v-window
-                v-model="activeStageIndex"
-                class="align-self-stretch pt-2"
-              >
-                <!-- Stage 1: Find Account -->
-                <v-window-item :value="0">
-                  <v-text-field
-                    v-model="accountIdentifier"
-                    label="Email or username"
-                    variant="outlined"
-                    class="mb-2"
-                    @keydown.enter="handleFindAccount"
-                  />
-                  <v-btn
-                    slim
-                    variant="text"
-                    class="text-capitalize"
-                    color="primary"
-                    >Forgot password?</v-btn
-                  >
+<style scoped>
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.2s ease-out;
+}
 
-                  <div class="d-flex justify-end">
-                    <p class="mt-4 mb-6 text-sm max-w-96">
-                      Not your computer? Remember to use Private Browsing
-                      windows to sign in.
+.slide-fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+</style>
+
+<template>
+  <div class="flex flex-col gap-3 items-center justify-center h-layout px-4">
+    <n-card class="w-full max-w-[1000px]" size="large">
+      <div class="p-4 md:p-8">
+        <div class="mb-4">
+          <img :src="IconLight" alt="CloudyLamb" height="60" width="60" />
+        </div>
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+          <div class="flex flex-col items-start justify-between">
+            <div class="text-left h-auto">
+              <div class="text-left h-auto">
+                <Transition mode="out-in" name="slide-fade">
+                  <div v-if="stage === 'find-account'" key="find-account">
+                    <h2 class="text-2xl font-bold mb-1">Sign in</h2>
+                    <p class="text-lg">Use your Solarpass</p>
+                  </div>
+                  <div
+                    v-else-if="stage === 'select-factor'"
+                    key="select-factor"
+                  >
+                    <h2 class="text-2xl font-bold mb-1">
+                      Choose how to sign in
+                    </h2>
+                    <p class="text-lg">
+                      Select your preferred authentication method
                     </p>
                   </div>
+                  <div
+                    v-else-if="stage === 'enter-code' && selectedFactor"
+                    key="enter-code"
+                  >
+                    <h2 class="text-2xl font-bold mb-1">
+                      Enter your
+                      {{
+                        selectedFactor.type === 0
+                          ? "password"
+                          : "verification code"
+                      }}
+                    </h2>
+                    <p v-if="selectedFactor.type === 1" class="text-lg">
+                      A code has been sent to
+                      {{ selectedFactor.contact || "your email" }}.
+                    </p>
+                    <p v-if="selectedFactor.type === 2" class="text-lg">
+                      Enter the code from your in-app authenticator.
+                    </p>
+                    <p v-if="selectedFactor.type === 3" class="text-lg">
+                      Enter the timed verification code.
+                    </p>
+                    <p v-if="selectedFactor.type === 4" class="text-lg">
+                      Enter your PIN code.
+                    </p>
+                    <p v-if="selectedFactor.type === 0" class="text-lg">
+                      Enter your password to continue.
+                    </p>
+                  </div>
+                  <div
+                    v-else-if="stage === 'token-exchange'"
+                    key="token-exchange"
+                  >
+                    <h2 class="text-2xl font-bold mb-1">Finalizing Login</h2>
+                    <p class="text-lg">
+                      Please wait while we complete your sign in.
+                    </p>
+                  </div>
+                </Transition>
+              </div>
+            </div>
+            <div v-if="isLoading" class="mb-4">
+              <span class="loading loading-spinner loading-xl"></span>
+            </div>
+          </div>
+          <div class="flex items-center justify-stretch">
+            <div class="w-full flex flex-col md:text-right">
+              <Transition mode="out-in" name="slide-fade">
+                <!-- Stage 1: Find Account -->
+                <div v-if="stage === 'find-account'" key="find-account">
+                  <n-input
+                    size="large"
+                    v-model:value="accountIdentifier"
+                    placeholder="Email or username"
+                    class="text-left"
+                    @keydown.enter.prevent="handleFindAccount"
+                  />
+                  <div class="mr-3 mt-4">
+                    <n-button text type="primary" size="small">
+                      Forgot Password?
+                    </n-button>
 
-                  <div class="d-flex justify-space-between align-center mt-8">
-                    <v-btn
-                      variant="text"
-                      class="text-capitalize"
-                      to="/auth/create-account"
-                    >
+                    <div class="flex justify-end">
+                      <p class="mt-4 mb-6 text-sm max-w-96">
+                        Not your computer? Remember to use Private Browsing
+                        windows to sign in.
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="flex justify-between items-center mt-8">
+                    <n-button text tag="a" href="/auth/create-account">
                       Create account
-                    </v-btn>
-                    <v-btn
-                      color="primary"
+                    </n-button>
+                    <n-button
+                      type="primary"
                       size="large"
                       @click="handleFindAccount"
                     >
                       Next
-                    </v-btn>
+                    </n-button>
                   </div>
-                </v-window-item>
+                </div>
 
                 <!-- Stage 2: Select Factor -->
-                <v-window-item :value="1">
-                  <v-radio-group v-model="selectedFactorId">
-                    <v-list>
-                      <v-list-item v-for="factor in factors" :key="factor.id">
-                        <v-list-item-action>
-                          <v-radio
-                            :value="factor.id"
-                            :label="getFactorName(factor.type)"
-                          />
-                        </v-list-item-action>
-                        <template #append>
-                          <v-icon>{{
-                            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"
-                          }}</v-icon>
-                        </template>
-                      </v-list-item>
-                    </v-list>
-                  </v-radio-group>
-                  <div class="d-flex justify-end mt-6">
-                    <v-btn
-                      color="primary"
+                <div v-else-if="stage === 'select-factor'" key="select-factor">
+                  <n-radio-group
+                    v-model:value="selectedFactorId"
+                    class="w-full"
+                  >
+                    <div class="flex flex-col gap-2">
+                      <div
+                        v-for="factor in factors"
+                        :key="factor.id"
+                        class="flex items-center justify-between p-3 border rounded cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800"
+                        @click="selectedFactorId = factor.id"
+                      >
+                        <n-radio
+                          :value="factor.id"
+                          :label="getFactorName(factor.type)"
+                        />
+                        <n-icon size="24">
+                          <span :class="getFactorIcon(factor.type)" />
+                        </n-icon>
+                      </div>
+                    </div>
+                  </n-radio-group>
+                  <div class="flex justify-end mt-6">
+                    <n-button
+                      type="primary"
                       size="large"
                       :disabled="!selectedFactorId"
                       @click="handleFactorSelected"
                     >
                       Next
-                    </v-btn>
+                    </n-button>
                   </div>
-                </v-window-item>
+                </div>
 
                 <!-- Stage 3: Enter Code -->
-                <v-window-item :value="2">
-                  <v-text-field
-                    v-model="password"
+                <div v-else-if="stage === 'enter-code'" key="enter-code">
+                  <n-input
+                    v-model:value="password"
                     :type="selectedFactor?.type === 0 ? 'password' : 'text'"
-                    :label="selectedFactor?.type === 0 ? 'Password' : 'Code'"
-                    variant="outlined"
-                    class="mb-2"
-                    @keydown.enter="handleVerifyFactor"
+                    :placeholder="
+                      selectedFactor?.type === 0 ? 'Password' : 'Code'
+                    "
+                    show-password-on="click"
+                    class="mb-2 text-left"
+                    @keydown.enter.prevent="handleVerifyFactor"
                   />
-                  <div class="d-flex justify-space-between align-center mt-6">
-                    <v-btn
+                  <div class="flex justify-between items-center mt-6">
+                    <n-button
                       v-if="selectedFactor?.type === 1"
-                      variant="text"
-                      class="text-capitalize pl-0"
-                      color="primary"
+                      text
+                      type="primary"
                       @click="requestVerificationCode"
                     >
                       Resend Code
-                    </v-btn>
-                    <v-spacer v-else />
-                    <v-btn
-                      color="primary"
+                    </n-button>
+                    <div v-else />
+                    <n-button
+                      type="primary"
                       size="large"
                       @click="handleVerifyFactor"
                     >
                       Verify
-                    </v-btn>
+                    </n-button>
                   </div>
-                </v-window-item>
+                </div>
 
                 <!-- Stage 4: Token Exchange -->
-                <v-window-item :value="3">
-                  <div class="d-flex justify-center">
-                    <v-progress-circular
-                      indeterminate
-                      size="64"
-                      color="primary"
-                    />
+                <div
+                  v-else-if="stage === 'token-exchange'"
+                  key="token-exchange"
+                >
+                  <div class="flex justify-center">
+                    <n-spin size="large" />
                   </div>
-                </v-window-item>
-              </v-window>
-
-              <v-alert
-                v-if="error"
-                type="error"
-                closable
-                class="mt-2"
-                @update:model-value="error = null"
-              >
-                {{ error }}
-              </v-alert>
+                </div>
+              </Transition>
             </div>
-          </v-col>
-        </v-row>
+          </div>
+        </div>
       </div>
-    </v-card>
-    <footer-compact />
-  </v-container>
+    </n-card>
+
+    <n-alert
+      v-if="route.query.redirect"
+      class="w-full max-w-[1000px]"
+      type="info"
+      title="Login before you continue"
+      size="large"
+    >
+      <div class="flex flex-col gap-1">
+        <p>
+          You're requesting a page that requires authorization to access, please
+          login with your Solarpass and then we will redirect you to:
+        </p>
+        <n-code class="text-xs">{{ route.query.redirect }}</n-code>
+      </div>
+    </n-alert>
+  </div>
 </template>

app/pages/files/[id].vue

@@ -1,105 +1,89 @@
 <template>
-  <div class="lightbox-container">
+  <div class="lightbox-container h-compact-layout">
     <!-- Top Toolbar -->
-    <v-app-bar
-      v-if="fileInfo"
-      class="top-toolbar"
-      flat
-      height="56"
-      color="rgba(0,0,0,0.7)"
-      dark
-    >
-      <v-container fluid>
-        <v-row align="center" class="pa-2">
-          <v-col cols="12" md="4">
-            <div class="d-flex align-center gap-2">
-              <v-tooltip location="bottom" :text="fileInfo.mimeType">
-                <template #activator="{ props }">
-                  <v-icon v-bind="props" :icon="fileIcon"></v-icon>
-                </template>
-              </v-tooltip>
-              <v-tooltip location="bottom" :text="fileInfo.name || 'File'">
-                <template #activator="{ props }">
-                  <span class="line-clamp-1" v-bind="props">
-                    {{ fileInfo.name || "File" }}
-                  </span>
-                </template>
-              </v-tooltip>
-              <!-- Action buttons on mobile -->
-              <div class="d-flex d-md-none gap-2 ml-auto">
-                <v-btn
-                  icon
-                  size="small"
-                  density="compact"
-                  @click="handleDownload"
-                >
-                  <v-icon>mdi-download</v-icon>
-                </v-btn>
-                <v-btn
-                  icon
-                  size="small"
-                  density="compact"
-                  @click="infoDialog = true"
-                >
-                  <v-icon>mdi-information</v-icon>
-                </v-btn>
-              </div>
+    <header v-if="fileInfo" class="top-toolbar bg-neutral-900/50 text-white">
+      <div class="container mx-auto px-4 h-full">
+        <div class="flex items-center h-full">
+          <div class="flex items-center gap-2 w-full md:w-1/3">
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <n-icon :component="fileIcon" />
+              </template>
+              {{ fileInfo.mimeType }}
+            </n-tooltip>
+            <n-tooltip trigger="hover">
+              <template #trigger>
+                <span class="line-clamp-1">
+                  {{ fileInfo.name || "File" }}
+                </span>
+              </template>
+              {{ fileInfo.name || "File" }}
+            </n-tooltip>
+            <!-- Action buttons on mobile -->
+            <div class="flex md:hidden gap-2 ml-auto">
+              <n-button text style="font-size: 20px" @click="handleDownload">
+                <n-icon :component="Download" />
+              </n-button>
+              <n-button text style="font-size: 20px" @click="infoDialog = true">
+                <n-icon :component="Info" />
+              </n-button>
             </div>
-          </v-col>
-          <v-col cols="12" md="8" class="d-none d-md-block">
-            <div class="d-flex align-center justify-end gap-4">
-              <span>{{ formatBytes(fileInfo.size) }}</span>
-              <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
-              <v-btn
-                icon
-                size="small"
-                density="compact"
-                @click="handleDownload"
-              >
-                <v-icon>mdi-download</v-icon>
-              </v-btn>
-              <v-btn
-                icon
-                size="small"
-                density="compact"
-                @click="infoDialog = true"
-              >
-                <v-icon>mdi-information</v-icon>
-              </v-btn>
-            </div>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-app-bar>
+          </div>
+          <div class="hidden md:flex items-center justify-end gap-4 w-2/3">
+            <span>{{ formatBytes(fileInfo.size) }}</span>
+            <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
+            <n-button text style="font-size: 20px" @click="handleDownload">
+              <n-icon :component="Download" />
+            </n-button>
+            <n-button text style="font-size: 20px" @click="infoDialog = true">
+              <n-icon :component="Info" />
+            </n-button>
+          </div>
+        </div>
+      </div>
+    </header>
 
     <!-- Main Content - File Preview -->
     <div class="preview-container">
-      <v-progress-circular
-        v-if="!fileInfo && !error"
-        indeterminate
-        size="64"
-        class="loading-spinner"
-      ></v-progress-circular>
-      <v-alert
+      <n-spin v-if="!fileInfo && !error" size="large" />
+      <n-alert
         v-else-if="error"
         type="error"
         title="No file was found"
-        :text="error"
-        class="error-alert"
-      ></v-alert>
+        class="max-w-md"
+      >
+        {{ error }}
+      </n-alert>
       <div v-else class="preview-content">
-        <div v-if="fileInfo?.isEncrypted" class="encrypted-notice">
-          <v-alert type="info" title="Encrypted file" class="mb-4">
+        <div v-if="fileInfo?.isEncrypted" class="max-w-md">
+          <n-alert type="info" title="Encrypted file" class="mb-4">
             The file has been encrypted. Preview not available. Please enter the
             password to download it.
-          </v-alert>
+          </n-alert>
         </div>
-        <div v-else class="file-preview" @wheel="handleZoom" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd" @dblclick="handleDoubleClick">
-          <v-img
+        <div
+          v-else
+          class="file-preview"
+          @wheel="handleZoom"
+          @touchstart="handleTouchStart"
+          @touchmove="handleTouchMove"
+          @touchend="handleTouchEnd"
+          @mousedown="handleMouseDown"
+          @mousemove="handleMouseMove"
+          @mouseup="handleMouseUp"
+          @mouseleave="handleMouseUp"
+          @dblclick="handleDoubleClick"
+        >
+          <img
             v-if="fileType === 'image'"
             :src="fileSource"
             class="preview-image"
-            :style="{ transform: `scale(${zoomLevel})` }"
+            :style="{
+              transform: `translate(${translateX}px, ${translateY}px) scale(${zoomLevel})`,
+              cursor:
+                zoomLevel > 1 ? (isDragging ? 'grabbing' : 'grab') : 'default'
+            }"
+            alt="Image preview"
           />
           <video
             v-else-if="fileType === 'video'"
@@ -113,92 +97,113 @@
             controls
             class="preview-audio"
           />
-          <v-alert
+          <n-alert
             v-else
             type="warning"
             title="Preview Unavailable"
-            text="How can you preview this file?"
-            class="preview-unavailable"
-          />
+            class="max-w-md"
+          >
+            A preview for this file type is not available.
+          </n-alert>
         </div>
       </div>
     </div>
 
     <!-- Password Dialog -->
-    <v-dialog v-model="secretDialog" max-width="400">
-      <v-card>
-        <v-card-title>
-          <v-icon left>mdi-lock</v-icon>
-          Enter Password
-        </v-card-title>
-        <v-card-text>
-          <v-text-field
-            v-model="dialogPassword"
-            label="Password"
-            type="password"
-            variant="outlined"
-            autofocus
-            @keyup.enter="confirmDownload"
-          />
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn @click="secretDialog = false">Cancel</v-btn>
-          <v-btn color="primary" @click="confirmDownload">Download</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+    <n-modal v-model:show="secretDialog">
+      <n-card
+        style="width: 400px"
+        title="Enter Password"
+        :bordered="false"
+        size="huge"
+        role="dialog"
+        aria-modal="true"
+      >
+        <n-input
+          v-model:value="dialogPassword"
+          type="password"
+          show-password-on="click"
+          placeholder="Password"
+          autofocus
+          @keyup.enter="confirmDownload"
+        />
+        <template #footer>
+          <div class="flex justify-end gap-2">
+            <n-button @click="secretDialog = false">Cancel</n-button>
+            <n-button type="primary" @click="confirmDownload"
+              >Download</n-button
+            >
+          </div>
+        </template>
+      </n-card>
+    </n-modal>
 
     <!-- Technical Details Dialog -->
-    <v-dialog v-model="infoDialog" max-width="640">
-      <v-card title="File Information" prepend-icon="mdi-information">
-        <v-card-text>
-          <v-row>
-            <v-col cols="12" md="6">
-              <div class="mb-4">
-                <strong>File ID</strong>
-                <div class="text-xs">#{{ fileInfo?.id }}</div>
-              </div>
-              <div class="mb-4">
-                <strong>File Name</strong>
-                <div class="text-xs">{{ fileInfo?.name || 'N/A' }}</div>
-              </div>
-              <div class="mb-4">
-                <strong>MIME Type</strong>
-                <div class="text-xs">{{ fileInfo?.mimeType || 'N/A' }}</div>
-              </div>
-              <div class="mb-4">
-                <strong>File Size</strong>
-                <div class="text-xs">{{ fileInfo?.size ? formatBytes(fileInfo.size) : 'N/A' }}</div>
-              </div>
-            </v-col>
-            <v-col cols="12" md="6">
-              <div class="mb-4">
-                <strong>Created At</strong>
-                <div class="text-xs">{{ fileInfo?.createdAt ? new Date(fileInfo.createdAt).toLocaleString() : 'N/A' }}</div>
-              </div>
-              <div class="mb-4">
-                <strong>Encrypted</strong>
-                <div class="text-xs">{{ fileInfo?.isEncrypted ? 'Yes' : 'No' }}</div>
-              </div>
-            </v-col>
-          </v-row>
-          <div class="mb-4">
-            <strong>Metadata:</strong>
+    <n-drawer
+      v-model:show="infoDialog"
+      :width="breakpoints.isGreaterOrEqual('md') ? '40vw' : '100vw'"
+    >
+      <n-drawer-content>
+        <template #header>
+          <div class="flex items-center justify-between gap-2">
+            <div>File Information</div>
+            <n-button text size="small" @click="infoDialog = false">
+              <template #icon>
+                <n-icon :component="XIcon" />
+              </template>
+            </n-button>
           </div>
-          <v-card variant="outlined" class="pa-2">
-            <pre
-              class="overflow-x-auto"
-              style="font-size: 14px;"
-            ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
-          </v-card>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer></v-spacer>
-          <v-btn @click="infoDialog = false">Close</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
+        </template>
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
+          <div class="flex flex-col gap-4">
+            <div>
+              <strong class="font-semibold">File ID</strong>
+              <div class="opacity-80">#{{ fileInfo?.id }}</div>
+            </div>
+            <div>
+              <strong class="font-semibold">File Name</strong>
+              <div class="opacity-80">{{ fileInfo?.name || "N/A" }}</div>
+            </div>
+            <div>
+              <strong class="font-semibold">MIME Type</strong>
+              <div class="opacity-80">{{ fileInfo?.mimeType || "N/A" }}</div>
+            </div>
+            <div>
+              <strong class="font-semibold">File Size</strong>
+              <div class="opacity-80">
+                {{ fileInfo?.size ? formatBytes(fileInfo.size) : "N/A" }}
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col gap-4">
+            <div>
+              <strong class="font-semibold">Created At</strong>
+              <div class="opacity-80">
+                {{
+                  fileInfo?.createdAt
+                    ? new Date(fileInfo.createdAt).toLocaleString()
+                    : "N/A"
+                }}
+              </div>
+            </div>
+            <div>
+              <strong class="font-semibold">Encrypted</strong>
+              <div class="opacity-80">
+                {{ fileInfo?.isEncrypted ? "Yes" : "No" }}
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="mt-4">
+          <strong class="font-semibold">Metadata:</strong>
+        </div>
+        <n-card :bordered="true" class="mt-2">
+          <pre
+            class="overflow-x-auto text-xs"
+          ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
+        </n-card>
+      </n-drawer-content>
+    </n-drawer>
 
     <!-- View Transition Overlay -->
     <div
@@ -217,11 +222,24 @@
 
 <script setup lang="ts">
 import { useRoute } from "vue-router"
-import { computed, onMounted, ref } from "vue"
-
+import { computed, onMounted, ref, type Component } from "vue"
+import {
+  Download,
+  Info,
+  Lock,
+  File,
+  FileImage,
+  FileVideo,
+  FileMusic,
+  FileText,
+  FileCode,
+  FileArchive,
+  XIcon
+} from "lucide-vue-next"
 import { downloadAndDecryptFile } from "./secure"
 import { formatBytes } from "./format"
 import type { SnCloudFile } from "~/types/api/post"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 
 const route = useRoute()
 
@@ -241,6 +259,13 @@ const zoomLevel = ref<number>(1)
 const initialDistance = ref<number>(0)
 const isPinching = ref<boolean>(false)
 
+// Drag functionality
+const translateX = ref(0)
+const translateY = ref(0)
+const isDragging = ref(false)
+const startX = ref(0)
+const startY = ref(0)
+
 // View transition state
 const isTransitioning = ref<boolean>(false)
 const transitionImage = ref<string>("")
@@ -278,7 +303,6 @@ function checkForTransition() {
       isTransitioning.value = true
       transitionImage.value = data.src
 
-      // Calculate final position (centered in viewport)
       const viewportWidth = window.innerWidth
       const viewportHeight = window.innerHeight
       const finalWidth = Math.min(
@@ -289,7 +313,6 @@ function checkForTransition() {
       const finalX = (viewportWidth - finalWidth) / 2
       const finalY = (viewportHeight - finalHeight) / 2
 
-      // Set initial position (from original image location)
       transitionStyle.value = {
         position: "fixed",
         top: `${data.y}px`,
@@ -300,7 +323,6 @@ function checkForTransition() {
         transition: "all 0.3s ease-out"
       }
 
-      // Animate to final position
       requestAnimationFrame(() => {
         transitionStyle.value = {
           ...transitionStyle.value,
@@ -309,8 +331,6 @@ function checkForTransition() {
           width: `${finalWidth}px`,
           height: `${finalHeight}px`
         }
-
-        // Hide transition after animation
         setTimeout(() => {
           isTransitioning.value = false
           sessionStorage.removeItem("imageTransition")
@@ -334,25 +354,38 @@ const fileType = computed(() => {
   if (!fileInfo.value) return "unknown"
   return fileInfo.value.mimeType?.split("/")[0] || "unknown"
 })
-const fileIcon = computed(() => {
-  if (!fileInfo.value?.mimeType) return 'mdi-file'
+const fileIcon = computed<Component>(() => {
+  if (!fileInfo.value?.mimeType) return File
 
   const mime = fileInfo.value.mimeType.toLowerCase()
 
-  if (mime.startsWith('image/')) return 'mdi-file-image'
-  if (mime.startsWith('video/')) return 'mdi-file-video'
-  if (mime.startsWith('audio/')) return 'mdi-file-music'
-  if (mime === 'application/pdf') return 'mdi-file-pdf'
-  if (mime.startsWith('text/') || mime.includes('javascript') || mime.includes('json') || mime.includes('xml')) return 'mdi-file-code'
-  if (mime.includes('zip') || mime.includes('rar') || mime.includes('tar')) return 'mdi-zip-box'
-  if (mime.includes('document') || mime.includes('word') || mime.includes('excel') || mime.includes('powerpoint')) return 'mdi-file-document'
+  if (mime.startsWith("image/")) return FileImage
+  if (mime.startsWith("video/")) return FileVideo
+  if (mime.startsWith("audio/")) return FileMusic
+  if (mime === "application/pdf") return FileText
+  if (
+    mime.startsWith("text/") ||
+    mime.includes("javascript") ||
+    mime.includes("json") ||
+    mime.includes("xml")
+  )
+    return FileCode
+  if (mime.includes("zip") || mime.includes("rar") || mime.includes("tar"))
+    return FileArchive
+  if (
+    mime.includes("document") ||
+    mime.includes("word") ||
+    mime.includes("excel") ||
+    mime.includes("powerpoint")
+  )
+    return FileText
 
-  return 'mdi-file'
+  return File
 })
 const fileSource = computed(() => {
   let url = `${apiBase}/drive/files/${fileId}?original=true`
   if (passcode) {
-    url += `?passcode=${passcode}`
+    url += `&passcode=${passcode}`
   }
   return url
 })
@@ -375,54 +408,115 @@ async function confirmDownload() {
 }
 
 function handleZoom(event: WheelEvent) {
-  if (fileType.value !== 'image') return
+  if (fileType.value !== "image") return
 
   event.preventDefault()
   const delta = event.deltaY > 0 ? -0.1 : 0.1
-  zoomLevel.value = Math.max(0.1, Math.min(5, zoomLevel.value + delta))
+  const newZoom = Math.max(0.1, Math.min(5, zoomLevel.value + delta))
+
+  if (newZoom <= 1) {
+    translateX.value = 0
+    translateY.value = 0
+  }
+
+  zoomLevel.value = newZoom
 }
 
 function handleTouchStart(event: TouchEvent) {
-  if (fileType.value !== 'image' || event.touches.length !== 2) return
+  if (fileType.value !== "image") return
 
-  event.preventDefault()
-  isPinching.value = true
-  const touch1 = event.touches[0]!
-  const touch2 = event.touches[1]!
-  initialDistance.value = Math.sqrt(
-    Math.pow(touch2.clientX - touch1.clientX, 2) +
-    Math.pow(touch2.clientY - touch1.clientY, 2)
-  )
+  if (event.touches.length === 2) {
+    event.preventDefault()
+    isPinching.value = true
+    const touch1 = event.touches[0]!
+    const touch2 = event.touches[1]!
+    initialDistance.value = Math.sqrt(
+      Math.pow(touch2.clientX - touch1.clientX, 2) +
+        Math.pow(touch2.clientY - touch1.clientY, 2)
+    )
+  } else if (event.touches.length === 1 && zoomLevel.value > 1) {
+    isDragging.value = true
+    startX.value = event.touches[0]!.clientX - translateX.value
+    startY.value = event.touches[0]!.clientY - translateY.value
+  }
 }
 
 function handleTouchMove(event: TouchEvent) {
-  if (fileType.value !== 'image' || !isPinching.value || event.touches.length !== 2) return
+  if (fileType.value !== "image") return
 
-  event.preventDefault()
-  const touch1 = event.touches[0]!
-  const touch2 = event.touches[1]!
-  const currentDistance = Math.sqrt(
-    Math.pow(touch2.clientX - touch1.clientX, 2) +
-    Math.pow(touch2.clientY - touch1.clientY, 2)
-  )
+  if (isPinching.value && event.touches.length === 2) {
+    event.preventDefault()
+    const touch1 = event.touches[0]!
+    const touch2 = event.touches[1]!
+    const currentDistance = Math.sqrt(
+      Math.pow(touch2.clientX - touch1.clientX, 2) +
+        Math.pow(touch2.clientY - touch1.clientY, 2)
+    )
 
-  const scale = currentDistance / initialDistance.value
-  zoomLevel.value = Math.max(0.1, Math.min(5, scale))
+    const scale = currentDistance / initialDistance.value
+    const newZoom = Math.max(0.1, Math.min(5, zoomLevel.value * scale))
+
+    if (newZoom <= 1) {
+      translateX.value = 0
+      translateY.value = 0
+    }
+
+    zoomLevel.value = newZoom
+  } else if (isDragging.value && event.touches.length === 1) {
+    event.preventDefault()
+    translateX.value = event.touches[0]!.clientX - startX.value
+    translateY.value = event.touches[0]!.clientY - startY.value
+  }
 }
 
-function handleTouchEnd(event: TouchEvent) {
-  if (fileType.value !== 'image') return
+function handleTouchEnd(_event: TouchEvent) {
+  if (fileType.value !== "image") return
 
   isPinching.value = false
+  isDragging.value = false
+}
+
+function handleMouseDown(event: MouseEvent) {
+  if (fileType.value !== "image" || zoomLevel.value <= 1) return
+
+  event.preventDefault()
+  isDragging.value = true
+  startX.value = event.clientX - translateX.value
+  startY.value = event.clientY - translateY.value
+}
+
+function handleMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return
+
+  event.preventDefault()
+  translateX.value = event.clientX - startX.value
+  translateY.value = event.clientY - startY.value
+}
+
+function handleMouseUp() {
+  isDragging.value = false
 }
 
 function handleDoubleClick() {
-  if (fileType.value !== 'image') return
+  if (fileType.value !== "image") return
 
-  zoomLevel.value = zoomLevel.value > 1 ? 1 : 2
+  if (zoomLevel.value > 1) {
+    zoomLevel.value = 1
+    translateX.value = 0
+    translateY.value = 0
+  } else {
+    zoomLevel.value = 2
+  }
 }
 
+const breakpoints = useBreakpoints(breakpointsTailwind)
+const message = useMessage()
+
 async function performDownload(password: string) {
+  const progressMessage = message.loading("Downloading file...", {
+    duration: 0
+  })
+
   if (fileInfo.value!.isEncrypted) {
     downloadAndDecryptFile(
       fileSource.value,
@@ -474,6 +568,9 @@ async function performDownload(password: string) {
     a.click()
     a.remove()
     window.URL.revokeObjectURL(blobUrl)
+
+    progressMessage.destroy()
+    message.success("File has been downloaded successfully.")
   }
 }
 
@@ -484,11 +581,7 @@ definePageMeta({
 
 <style scoped>
 .lightbox-container {
-  position: fixed;
-  top: 0;
-  left: 0;
   width: 100vw;
-  height: 100vh;
   background: rgba(0, 0, 0, 0.9);
   display: flex;
   flex-direction: column;
@@ -496,9 +589,9 @@ definePageMeta({
 }
 
 .top-toolbar {
+  height: 56px;
   position: relative;
   z-index: 1001;
-  backdrop-filter: blur(10px);
 }
 
 .preview-container {
@@ -508,6 +601,7 @@ definePageMeta({
   justify-content: center;
   padding: 20px;
   overflow: auto;
+  min-height: 0;
 }
 
 .preview-content {
@@ -521,21 +615,17 @@ definePageMeta({
 .file-preview {
   width: 100%;
   height: 100%;
-  max-width: calc(100vw - 40px);
-  max-height: calc(
-    100vh - 88px
-  ); /* Account for top toolbar (48px) + padding (40px) */
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 .preview-image {
-  width: 100%;
-  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
   object-fit: contain;
-  transition: all .3s ease-in-out;
-  will-change: contents;
+  transition: transform 0.2s ease-out;
+  will-change: transform;
 }
 
 .preview-video,
@@ -544,27 +634,6 @@ definePageMeta({
   max-height: 100%;
 }
 
-.preview-unavailable {
-  max-width: 500px;
-}
-
-.loading-spinner {
-  color: white;
-}
-
-.error-alert {
-  max-width: 500px;
-}
-
-.encrypted-notice {
-  max-width: 500px;
-}
-
-/* Ensure toolbar doesn't interfere with content */
-.top-toolbar :deep(.v-app-bar__content) {
-  padding: 0;
-}
-
 /* View transition styles */
 .transition-overlay {
   pointer-events: none;

app/pages/index.vue

@@ -1,18 +1,46 @@
 <template>
-  <v-container>
+  <div class="container mx-auto px-5">
     <div class="layout">
-      <div class="main">
-        <div v-for="activity in activites" :key="activity.id" class="mb-4">
-          <post-item
-            v-if="activity.type.startsWith('posts')"
-            :item="activity.data"
-            @click="router.push('/posts/' + activity.id)"
-          />
-        </div>
+      <div class="main pt-4">
+        <n-infinite-scroll
+          style="overflow: auto"
+          :distance="0"
+          @load="fetchActivites"
+        >
+          <div v-for="activity in activites" :key="activity.id" class="mb-4">
+            <post-item
+              v-if="activity.type.startsWith('posts')"
+              :item="activity.data"
+              @click="router.push('/posts/' + activity.id)"
+            />
+            <n-card v-else>
+              <n-alert type="info" title="Unknown Activity">
+                Sorry, the FloatingIsland do not support
+                {{ activity.type }} right now. You can check this over the
+                Solian.
+              </n-alert>
+            </n-card>
+          </div>
+
+          <div v-if="loading" class="flex justify-center py-4">
+            <span class="loading loading-spinner loading-lg"></span>
+          </div>
+
+          <div
+            v-if="!loading && activites.length === 0"
+            class="text-center py-8 text-muted-foreground"
+          >
+            <n-icon size="48" class="mb-2 opacity-50">
+              <i class="mdi mdi-post-outline"></i>
+            </n-icon>
+            <p>No posts yet</p>
+          </div>
+        </n-infinite-scroll>
       </div>
-      <div class="sidebar flex flex-col gap-3">
-        <v-card v-if="!userStore.isAuthenticated" class="w-full" title="About">
-          <v-card-text>
+      <div class="sidebar flex flex-col gap-3 pt-4">
+        <div v-if="!userStore.isAuthenticated">
+          <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>
 
@@ -24,22 +52,19 @@
                 {{ version.updatedAt }}
               </span>
             </p>
-          </v-card-text>
-        </v-card>
-        <v-card v-else class="w-full">
-          <v-card-text>
-            <post-editor @posted="refreshActivities" />
-          </v-card-text>
-        </v-card>
+          </n-card>
+        </div>
+        <n-card v-else class="w-full">
+          <post-editor @posted="refreshActivities" />
+        </n-card>
         <sidebar-footer class="max-lg:hidden" />
       </div>
     </div>
-  </v-container>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from "vue"
-import { useInfiniteScroll } from "@vueuse/core"
 import { useUserStore } from "~/stores/user"
 import { useSolarNetwork } from "~/composables/useSolarNetwork"
 import type { SnVersion, SnActivity } from "~/types/api"
@@ -47,8 +72,6 @@ import type { SnVersion, SnActivity } from "~/types/api"
 import PostEditor from "~/components/Post/PostEditor.vue"
 import PostItem from "~/components/Post/PostItem.vue"
 
-import IconLight from "~/assets/images/cloudy-lamb.png"
-
 const router = useRouter()
 
 useHead({
@@ -62,6 +85,7 @@ useHead({
 })
 
 defineOgImage({
+  // @ts-ignore
   title: "Explore",
   description: "The open social network. Friendly to everyone."
 })
@@ -71,7 +95,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())
@@ -103,11 +127,6 @@ async function fetchActivites() {
 }
 onMounted(() => fetchActivites())
 
-useInfiniteScroll(window, fetchActivites, {
-  canLoadMore: () => !loading.value && activitesHasMore.value,
-  distance: 10
-})
-
 async function refreshActivities() {
   activites.value = []
   fetchActivites()
@@ -119,6 +138,7 @@ async function refreshActivities() {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+
 .hide-scrollbar::-webkit-scrollbar {
   display: none;
 }
@@ -158,7 +178,7 @@ async function refreshActivities() {
 @media (min-width: 1280px) {
   .sidebar {
     position: sticky;
-    top: calc(68px + 8px);
+    top: calc(64px);
   }
 }
 </style>

app/pages/orders/[id].vue

@@ -1,68 +1,63 @@
 <template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card
-      max-width="400"
-      title="Order Payment"
-      prepend-icon="mdi-cash"
-      class="pa-2"
-    >
-      <v-card-text>
-        <v-alert type="success" v-if="done" class="mb-4">
-          The order has been paid successfully. Now you can close this tab and
-          back to the Solar Network!
-        </v-alert>
-        <v-alert
-          type="error"
-          v-else-if="!!error"
-          title="Something went wrong"
-          class="mb-4"
-          >{{ error }}</v-alert
-        >
-        <div v-else-if="!!order">
-          <p class="mb-2">
-            Order for {{ order.productIdentifier ?? "unknown" }}
-          </p>
-          <div class="d-flex align-center gap-2 mb-2">
-            <v-icon size="18">mdi-tag</v-icon>
-            <strong>{{ order.remarks }}</strong>
-          </div>
-          <div class="d-flex align-center gap-2 mb-2">
-            <v-icon size="18">mdi-cash</v-icon>
-            <span>Amount</span>
-            <strong>{{ order.amount }} {{ order.currency }}</strong>
-          </div>
-          <div class="d-flex align-center gap-2 mb-4" v-if="order.expiredAt">
-            <v-icon size="18">mdi-calendar</v-icon>
-            <span>Until</span>
-            <strong>{{ new Date(order.expiredAt).toLocaleString() }}</strong>
-          </div>
-          <div class="mt-4">
-            <v-otp-input
-              v-model="pinCode"
-              label="Pin Code"
-              length="6"
-              type="password"
-              density="comfortable"
-            ></v-otp-input>
-            <v-btn
-              color="primary"
-              :loading="submitting"
-              @click="pay"
-              class="mt-4"
-            >
-              <v-icon left>mdi-check</v-icon>
-              Pay
-            </v-btn>
-          </div>
+  <div class="flex items-center justify-center min-h-screen">
+    <n-card title="Order Payment" class="max-w-sm">
+      <template #header-icon>
+        <n-icon :component="Wallet" />
+      </template>
+      <n-alert v-if="done" type="success" class="mb-4">
+        The order has been paid successfully. You can now close this tab and
+        return to Solar Network!
+      </n-alert>
+      <n-alert
+        v-else-if="!!error"
+        type="error"
+        title="Something went wrong"
+        class="mb-4"
+      >
+        {{ error }}
+      </n-alert>
+      <div v-else-if="!!order" class="flex flex-col gap-2">
+        <p>Order for {{ order.productIdentifier ?? "unknown" }}</p>
+        <div class="flex items-center gap-2">
+          <n-icon :component="Tag" />
+          <strong>{{ order.remarks }}</strong>
         </div>
-        <v-progress-circular
-          v-else
-          indeterminate
-          size="32"
-          class="mt-4"
-        ></v-progress-circular>
-      </v-card-text>
-    </v-card>
+        <div class="flex items-center gap-2">
+          <n-icon :component="CircleDollarSign" />
+          <span>Amount</span>
+          <strong>{{ order.amount }} {{ order.currency }}</strong>
+        </div>
+        <div v-if="order.expiredAt" class="flex items-center gap-2">
+          <n-icon :component="Calendar" />
+          <span>Until</span>
+          <strong>{{ new Date(order.expiredAt).toLocaleString() }}</strong>
+        </div>
+        <div class="mt-4">
+          <n-input
+            v-model:value="pinCode"
+            type="password"
+            show-password-on="click"
+            placeholder="6-digit PIN"
+            maxlength="6"
+            :input-props="{ autocomplete: 'one-time-code' }"
+          />
+          <n-button
+            type="primary"
+            :loading="submitting"
+            class="mt-4 w-full"
+            @click="pay"
+          >
+            <template #icon>
+              <n-icon :component="Check" />
+            </template>
+            Pay
+          </n-button>
+        </div>
+      </div>
+      <div v-else class="flex justify-center p-8">
+        <n-spin size="medium" />
+      </div>
+    </n-card>
   </div>
 </template>
 
@@ -70,6 +65,13 @@
 import { onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
 import type { SnWalletOrder } from "~/types/api/order"
+import {
+  Wallet,
+  Tag,
+  CircleDollarSign,
+  Calendar,
+  Check
+} from "lucide-vue-next"
 
 const route = useRoute()
 
@@ -90,7 +92,7 @@ const api = useSolarNetwork()
 async function fetchOrder() {
   try {
     const resp = await api<SnWalletOrder>(
-      `/id/orders/${encodeURIComponent(orderId)}`
+      `/pass/orders/${encodeURIComponent(orderId)}`
     )
     order.value = resp
   } catch (err: unknown) {
@@ -99,9 +101,10 @@ async function fetchOrder() {
 }
 
 async function pay() {
+  if (submitting.value) return
   submitting.value = true
   try {
-    await api(`/id/orders/${encodeURIComponent(orderId)}/pay`, {
+    await api(`/pass/orders/${encodeURIComponent(orderId)}/pay`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({ pin_code: pinCode.value })
@@ -109,6 +112,8 @@ async function pay() {
     done.value = true
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    submitting.value = false
   }
 }
 
@@ -119,4 +124,3 @@ definePageMeta({
   title: "Solarpay"
 })
 </script>
-

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

@@ -1,22 +1,26 @@
 <template>
-  <v-container class="py-6">
+  <div class="py-6 px-5">
     <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 :component="CalendarIcon" />
                 <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 :component="PencilIcon" />
                 <span>Updated {{ formatDate(post.updatedAt) }}</span>
               </div>
               <div class="flex items-center gap-1">
-                <v-icon size="16">mdi-eye</v-icon>
+                <n-icon :component="EyeIcon" />
                 <span>
                   {{ post.viewsTotal }} / {{ post.viewsUnique }}
                   views
                 </span>
               </div>
             </div>
-          </v-card>
+          </n-card>
 
-          <v-card class="pa-6">
+          <n-card class="px-6 py-0">
             <article
               v-if="htmlContent"
               class="prose dark:prose-invert prose-slate max-w-none mb-8"
@@ -68,85 +72,78 @@
             </article>
 
             <!-- Attachments within Content Section -->
-            <attachment-list v-if="post.type != 1" :attachments="post.attachments || []" />
-          </v-card>
+            <attachment-list
+              v-if="post.type != 1"
+              :attachments="post.attachments || []"
+            />
+          </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">
-import { computed } from "vue"
+import { CalendarIcon, EyeIcon, PencilIcon } from "lucide-vue-next"
+import { computed, ref } from "vue" // Added ref
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPost } from "~/types/api"
 
 const route = useRoute()
-const id = route.params.id as string
-
-const { render } = useMarkdownProcessor()
+const slugParts = route.params.slug as string[]
+const id = slugParts.join("/")
 
 const apiServer = useSolarNetwork()
 
+const preserveEmptyLinesRef = ref(true) // New ref for the option
+
+const { render } = useMarkdownProcessor({
+  preserveEmptyLines: preserveEmptyLinesRef
+})
+
 const {
   data: postData,
   error,
@@ -155,6 +152,10 @@ const {
   try {
     const resp = await apiServer(`/sphere/posts/${id}`)
     const post = resp as SnPost
+
+    // Update the ref based on post.type
+    preserveEmptyLinesRef.value = post.type !== 1
+
     let html = ""
     if (post.content) {
       html = render(post.content)
@@ -168,6 +169,16 @@ const {
   }
 })
 
+if (postData.value?.post) {
+  const p = postData.value.post
+  if (p.publisher?.name && p.slug) {
+    const slugUrl = `/posts/${p.publisher.name}/${p.slug}`
+    if (route.path !== slugUrl) {
+      await navigateTo(slugUrl, { redirectCode: 301 })
+    }
+  }
+}
+
 const post = computed(() => postData.value?.post || null)
 const htmlContent = computed(() => postData.value?.html || "")
 
@@ -189,6 +200,13 @@ useHead({
       return [{ name: "description", content: description }]
     }
     return []
+  }),
+  link: computed(() => {
+    if (post.value && post.value.publisher?.name && post.value.slug) {
+      const slugUrl = `/posts/${post.value.publisher.name}/${post.value.slug}`
+      return [{ rel: "canonical", href: slugUrl }]
+    }
+    return []
   })
 })
 
@@ -205,19 +223,12 @@ const userBackground = computed(() => {
   )
   return firstImageAttachment
     ? `${apiBase}/drive/files/${firstImageAttachment.id}`
+    : post.value?.publisher.background
+    ? `${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", {
@@ -260,18 +271,18 @@ onMounted(() => {
 
 function makeEmbedImageClickable() {
   const elements = document.getElementsByClassName("prose-img-solar-network")
-  let count = 0;
+  let count = 0
   for (const element of elements) {
     if (element instanceof HTMLImageElement) {
-      count += 1;
+      count += 1
       element.addEventListener("click", (evt) => {
         const targetImg = evt.target as HTMLImageElement
         window.open("/files/" + targetImg.src.split("/").findLast((_) => true))
       })
-      element.style['cursor'] = 'pointer';
+      element.style["cursor"] = "pointer"
     }
   }
-  console.log(`[Article] Made ${count} image(s) clickable in the article.`);
+  console.log(`[Article] Made ${count} image(s) clickable in the article.`)
 }
 </script>
 

app/pages/publishers/[name].vue

@@ -0,0 +1,411 @@
+<template>
+  <div>
+    <div class="fixed inset-0 blur-md" :style="pageStyle" />
+    <img
+      :src="userBackground"
+      class="w-full max-h-48 object-cover object-top"
+      :style="{ aspectRatio: '16/7', opacity: headerOpacity }"
+    />
+    <div v-if="user" class="relative min-h-layout">
+      <div class="container mx-auto p-4 sm:p-8">
+        <div class="layout">
+          <div class="sidebar flex flex-col gap-3">
+            <n-card
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
+              <div class="flex items-center gap-4 mb-4">
+                <n-avatar size="large" round :src="userPicture" />
+                <div>
+                  <div class="text-xl font-bold">
+                    {{ user.nick || user.name }}
+                  </div>
+                  <div class="text-sm opacity-80">@{{ user.name }}</div>
+                </div>
+              </div>
+              <article
+                v-if="htmlBio"
+                class="bio-prose prose prose-sm dark:prose-invert prose-slate"
+                v-html="htmlBio"
+              ></article>
+            </n-card>
+
+            <n-card
+              v-if="user.verification"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
+              <verification-status-card :mark="user.verification" />
+            </n-card>
+          </div>
+          <div class="main">
+            <!-- Filter Section -->
+            <n-card
+              class="mb-4"
+              :class="cardClass"
+              :style="cardStyle"
+              :content-style="cardContentStyle"
+            >
+              <n-tabs v-model:value="activeCategoryTab" type="segment">
+                <n-tab name="all">All</n-tab>
+                <n-tab name="posts">Posts</n-tab>
+                <n-tab name="articles">Articles</n-tab>
+              </n-tabs>
+
+              <div class="mx-4">
+                <div
+                  class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 mt-4"
+                >
+                  <div
+                    class="flex items-center gap-2 cursor-pointer"
+                    @click="cycleIncludeReplies"
+                  >
+                    <n-icon :component="Reply" />
+                    <n-checkbox
+                      :checked="includeReplies !== false"
+                      :indeterminate="includeReplies === null"
+                      @update:checked="cycleIncludeReplies"
+                    >
+                      Include replies
+                    </n-checkbox>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <n-icon :component="Paperclip" />
+                    <n-checkbox v-model:checked="mediaOnly">
+                      Media only
+                    </n-checkbox>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <n-icon :component="ArrowUpDown" />
+                    <n-checkbox v-model:checked="orderDesc">
+                      Descending order
+                    </n-checkbox>
+                  </div>
+                </div>
+
+                <div
+                  class="flex items-center cursor-pointer mt-4"
+                  @click="showAdvancedFilters = !showAdvancedFilters"
+                >
+                  <n-icon :component="Filter" />
+                  <span class="ml-2 font-medium">Advanced filters</span>
+                  <n-icon class="ml-auto">
+                    <ChevronDown v-if="!showAdvancedFilters" />
+                    <ChevronUp v-else />
+                  </n-icon>
+                </div>
+
+                <n-collapse-transition :show="showAdvancedFilters">
+                  <div class="mt-4 flex flex-col gap-3">
+                    <n-input
+                      v-model:value="queryTerm"
+                      placeholder="Search posts"
+                    >
+                      <template #prefix>
+                        <n-icon :component="Search" />
+                      </template>
+                    </n-input>
+
+                    <!-- the select only takes the common border radius somehow -->
+                    <n-config-provider
+                      :theme-overrides="{ common: { borderRadius: '8px' } }"
+                    >
+                      <n-select
+                        v-model:value="order"
+                        placeholder="Sort by"
+                        :options="[
+                          { label: 'Date', value: 'date' },
+                          { label: 'Popularity', value: 'popularity' }
+                        ]"
+                      />
+                    </n-config-provider>
+
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                      <n-date-picker
+                        v-model:value="periodStart"
+                        type="date"
+                        placeholder="From date"
+                        clearable
+                      />
+                      <n-date-picker
+                        v-model:value="periodEnd"
+                        type="date"
+                        placeholder="To date"
+                        clearable
+                      />
+                    </div>
+                  </div>
+                </n-collapse-transition>
+              </div>
+            </n-card>
+
+            <post-list :key="filterKey" :params="postListParams" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      v-else-if="notFound"
+      class="relative flex justify-center items-center h-full"
+    >
+      <n-empty
+        description="The publisher profile you're trying to access is not found."
+      >
+        <template #icon>
+          <n-icon :component="UserX" />
+        </template>
+      </n-empty>
+    </div>
+    <div v-else class="relative flex justify-center items-center h-full">
+      <n-spin size="large" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { useWindowScroll } from "@vueuse/core"
+import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
+import type { SnPublisher } from "~/types/api"
+import type { PostListParams } from "~/composables/usePostList"
+import PostList from "~/components/Post/PostList.vue"
+import {
+  Reply,
+  Paperclip,
+  ArrowUpDown,
+  Filter,
+  Search,
+  ChevronDown,
+  ChevronUp,
+  UserX
+} from "lucide-vue-next"
+
+const route = useRoute()
+
+const notFound = ref<boolean>(false)
+const user = ref<SnPublisher | null>(null)
+
+const username = computed(() => {
+  const nameStr = route.params.name?.toString()
+  if (nameStr?.startsWith("@")) return nameStr.substring(1)
+  return nameStr
+})
+
+const apiBase = useSolarNetworkUrl()
+const apiBaseServer = useSolarNetworkUrl()
+
+try {
+  const { data, error } = await useFetch<SnPublisher>(
+    `${apiBaseServer}/sphere/publishers/${username.value}`,
+    { server: true }
+  )
+
+  if (error.value) {
+    console.error("Failed to fetch user:", error.value)
+    notFound.value = true
+  } else if (data.value) {
+    user.value = data.value
+  }
+} catch (err) {
+  console.error("Failed to fetch user:", err)
+  notFound.value = true
+}
+
+const { render } = useMarkdownProcessor()
+
+const htmlBio = ref<string | undefined>(undefined)
+
+watch(
+  user,
+  (value) => {
+    htmlBio.value = value?.bio ? render(value.bio) : undefined
+  },
+  { immediate: true, deep: true }
+)
+
+const userBackground = computed(() => {
+  return user.value?.background
+    ? `${apiBase}/drive/files/${user.value.background.id}?original=true`
+    : undefined
+})
+const userPicture = computed(() => {
+  return user.value?.picture
+    ? `${apiBase}/drive/files/${user.value.picture.id}`
+    : undefined
+})
+
+const { y: scrollY } = useWindowScroll()
+const scrollThreshold = 192 // max-h-48 is 12rem = 192px
+
+const backgroundOpacity = computed(() => {
+  return Math.max(0, Math.min(scrollY.value / scrollThreshold, 1))
+})
+
+const headerOpacity = computed(() => {
+  return 1 - backgroundOpacity.value
+})
+
+const pageStyle = computed(() => {
+  if (!userBackground.value) return {}
+  return {
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${userBackground.value}')`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundAttachment: "fixed",
+    opacity: backgroundOpacity.value
+  }
+})
+
+const cardClass = computed(() => ({
+  "backdrop-blur-2xl": !!userBackground.value,
+  "shadow-xl": !!userBackground.value
+}))
+
+const cardStyle = computed(() =>
+  userBackground.value
+    ? "background-color: var(--n-color-modal)"
+    : "background-color: var(--n-color)"
+)
+
+const cardContentStyle = computed(() =>
+  userBackground.value ? "background-color: transparent" : ""
+)
+
+// Filter state
+const activeCategoryTab = ref("all")
+const includeReplies = ref<boolean | null>(null)
+const mediaOnly = ref(false)
+const orderDesc = ref(true)
+const showAdvancedFilters = ref(false)
+const queryTerm = ref("")
+const order = ref<string | null>(null)
+const periodStart = ref<number | null>(null)
+const periodEnd = ref<number | null>(null)
+
+const postListParams = computed<PostListParams>(() => {
+  const params: PostListParams = {
+    pubName: username.value,
+    includeReplies: includeReplies.value ?? undefined,
+    mediaOnly: mediaOnly.value,
+    orderDesc: orderDesc.value,
+    queryTerm: queryTerm.value || undefined,
+    order: order.value ?? undefined,
+    periodStart: periodStart.value
+      ? Math.floor(periodStart.value / 1000)
+      : undefined,
+    periodEnd: periodEnd.value ? Math.floor(periodEnd.value / 1000) : undefined
+  }
+
+  if (activeCategoryTab.value === "posts") {
+    params.type = 0
+  } else if (activeCategoryTab.value === "articles") {
+    params.type = 1
+  }
+
+  return params
+})
+
+const filterKey = computed(() => {
+  return JSON.stringify(postListParams.value)
+})
+
+const cycleIncludeReplies = () => {
+  if (includeReplies.value === null) {
+    includeReplies.value = true
+  } else if (includeReplies.value === true) {
+    includeReplies.value = false
+  } else {
+    includeReplies.value = null
+  }
+}
+
+definePageMeta({
+  alias: ["/p/:name()"]
+})
+
+useHead({
+  title: computed(() => {
+    if (notFound.value) {
+      return "Publisher not found"
+    }
+    if (user.value) {
+      return user.value.nick || user.value.name
+    }
+    return "Loading publisher..."
+  }),
+  meta: computed(() => {
+    if (user.value) {
+      const description = `View the profile of ${
+        user.value.nick || user.value.name
+      } on Solar Network.`
+      return [{ name: "description", content: description }]
+    }
+    return []
+  })
+})
+
+defineOgImage({
+  component: "ImageCard",
+  // @ts-ignore
+  title: computed(() =>
+    user.value ? user.value.nick || user.value.name : "Publisher Profile"
+  ),
+  description: computed(() =>
+    user.value
+      ? `View the profile of ${
+          user.value.nick || user.value.name
+        } on Solar Network.`
+      : ""
+  ),
+  avatarUrl: computed(() => userPicture.value),
+  backgroundImage: computed(() => userBackground.value)
+})
+</script>
+
+<style scoped>
+.bio-prose img {
+  display: inline !important;
+  margin: 0 !important;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.main {
+  order: 2;
+  min-width: 0;
+}
+
+.sidebar {
+  order: 1;
+  height: auto;
+}
+
+@media (min-width: 960px) {
+  .layout {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .main {
+    order: unset;
+  }
+
+  .sidebar {
+    order: unset;
+  }
+}
+
+@media (min-width: 1280px) {
+  .sidebar {
+    position: sticky;
+    top: calc(var(--header-height) + 8px);
+    align-self: start;
+  }
+}
+</style>

app/pages/realms/[slug].vue

@@ -0,0 +1,595 @@
+<template>
+  <div>
+    <!-- Invite Variant: Centered Card -->
+    <div v-if="isInviteMode">
+      <div
+        class="fixed inset-0 transition-all duration-500"
+        :style="pageStyle"
+      />
+
+      <div
+        class="relative flex items-center justify-center min-h-layout overflow-auto p-4"
+      >
+        <n-card
+          :class="[
+            'w-full',
+            'max-w-[480px]',
+            { 'backdrop-blur-2xl': realmBackground },
+            { 'shadow-xl': realmBackground }
+          ]"
+          size="large"
+          :style="
+            realmBackground ? 'background-color: rgba(255, 255, 255, 0.1)' : ''
+          "
+          :content-style="
+            realmBackground ? 'background-color: transparent' : ''
+          "
+        >
+          <div v-if="realm" class="p-4">
+            <div class="flex flex-col items-center text-center">
+              <n-avatar :src="realmPicture" :size="80" class="mb-4">
+                <n-icon v-if="!realmPicture" :component="Users" :size="40" />
+              </n-avatar>
+
+              <div class="flex gap-2 items-center">
+                <h2 class="text-2xl font-bold mb-2">{{ realm.name }}</h2>
+                <verification-mark
+                  v-if="realm.verification"
+                  :mark="realm.verification"
+                  :size="20"
+                />
+              </div>
+              <p v-if="realm.description" class="text-base mb-4 opacity-80">
+                {{ realm.description }}
+              </p>
+
+              <div class="flex gap-2 mb-6">
+                <n-tag :bordered="false" type="info">
+                  {{ realm.isCommunity ? "Community" : "Organization" }}
+                </n-tag>
+                <n-tag
+                  :bordered="false"
+                  :type="realm.isPublic ? 'success' : 'warning'"
+                >
+                  {{ realm.isPublic ? "Public" : "Private" }}
+                </n-tag>
+              </div>
+
+              <n-card
+                v-if="realm.verification"
+                class="text-left mb-4 w-full"
+                :style="
+                  realmBackground
+                    ? 'background-color: rgba(255, 255, 255, 0.1)'
+                    : ''
+                "
+                :content-style="
+                  realmBackground ? 'background-color: transparent' : ''
+                "
+              >
+                <verification-status-card :mark="realm.verification" />
+              </n-card>
+
+              <n-button
+                text-color="white"
+                type="primary"
+                block
+                size="large"
+                :loading="isJoining"
+                :disabled="isMember"
+                @click="handleJoin"
+              >
+                <template #icon>
+                  <n-icon :component="UserPlus" />
+                </template>
+                Join Realm
+              </n-button>
+
+              <n-alert
+                v-if="isMember"
+                type="info"
+                title="Already Joined"
+                class="mt-4"
+              >
+                You already joined this realm,
+                <nuxt-link
+                  :to="`/realms/${route.params.slug}`"
+                  class="underline font-bold"
+                >
+                  go to the realm page instead.
+                </nuxt-link>
+              </n-alert>
+            </div>
+          </div>
+          <div v-else-if="notFound" class="flex justify-center p-8">
+            <n-empty description="Realm not found">
+              <template #icon>
+                <n-icon :component="Users" />
+              </template>
+            </n-empty>
+          </div>
+          <div v-else class="flex justify-center p-8">
+            <n-spin size="large" />
+          </div>
+        </n-card>
+      </div>
+    </div>
+
+    <!-- Regular View: Full Realm Page -->
+    <div v-else>
+      <div class="fixed inset-0 blur-md" :style="pageStyle" />
+      <img
+        :src="realmBackground"
+        class="w-full max-h-48 object-cover object-top"
+        :style="{ aspectRatio: '16/7', opacity: headerOpacity }"
+      />
+      <div v-if="realm" class="relative min-h-layout">
+        <div class="container mx-auto p-4 sm:p-8">
+          <div class="layout">
+            <div class="sidebar flex flex-col gap-3">
+              <n-card
+                :class="cardClass"
+                :style="cardStyle"
+                :content-style="cardContentStyle"
+              >
+                <div class="flex items-center gap-4 mb-4">
+                  <n-avatar size="large" round :src="realmPicture">
+                    <n-icon
+                      v-if="!realmPicture"
+                      :component="Users"
+                      :size="28"
+                    />
+                  </n-avatar>
+                  <div>
+                    <div class="flex gap-2 items-center">
+                      <div class="text-xl font-bold">
+                        {{ realm.name }}
+                      </div>
+                      <verification-mark
+                        v-if="realm.verification"
+                        :mark="realm.verification"
+                      />
+                    </div>
+
+                    <div class="text-sm opacity-80">@{{ realm.slug }}</div>
+                  </div>
+                </div>
+                <p v-if="realm.description" class="text-sm mb-4">
+                  {{ realm.description }}
+                </p>
+                <div class="flex flex-wrap gap-2">
+                  <n-tag :bordered="false" type="info">
+                    {{ realm.isCommunity ? "Community" : "Organization" }}
+                  </n-tag>
+                  <n-tag
+                    :bordered="false"
+                    :type="realm.isPublic ? 'success' : 'warning'"
+                  >
+                    {{ realm.isPublic ? "Public" : "Private" }}
+                  </n-tag>
+                </div>
+              </n-card>
+
+              <n-card
+                v-if="realm.verification"
+                :class="cardClass"
+                :style="cardStyle"
+                :content-style="cardContentStyle"
+              >
+                <verification-status-card :mark="realm.verification" />
+              </n-card>
+
+              <div v-if="realm.isPublic && !isMember">
+                <n-button
+                  type="primary"
+                  block
+                  size="large"
+                  :loading="isJoining"
+                  @click="handleJoin"
+                >
+                  <template #icon>
+                    <n-icon :component="UserPlus" />
+                  </template>
+                  Join Realm
+                </n-button>
+              </div>
+            </div>
+            <div class="main">
+              <!-- Filter Section -->
+              <n-card
+                class="mb-4"
+                :class="cardClass"
+                :style="cardStyle"
+                :content-style="cardContentStyle"
+              >
+                <n-tabs v-model:value="activeCategoryTab" type="segment">
+                  <n-tab name="all">All</n-tab>
+                  <n-tab name="posts">Posts</n-tab>
+                  <n-tab name="articles">Articles</n-tab>
+                </n-tabs>
+
+                <div class="mx-4">
+                  <div
+                    class="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-2 mt-4"
+                  >
+                    <div
+                      class="flex items-center gap-2 cursor-pointer"
+                      @click="cycleIncludeReplies"
+                    >
+                      <n-icon :component="Reply" />
+                      <n-checkbox
+                        :checked="includeReplies !== false"
+                        :indeterminate="includeReplies === null"
+                        @update:checked="cycleIncludeReplies"
+                      >
+                        Include replies
+                      </n-checkbox>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <n-icon :component="Paperclip" />
+                      <n-checkbox v-model:checked="mediaOnly">
+                        Media only
+                      </n-checkbox>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <n-icon :component="ArrowUpDown" />
+                      <n-checkbox v-model:checked="orderDesc">
+                        Descending order
+                      </n-checkbox>
+                    </div>
+                  </div>
+
+                  <div
+                    class="flex items-center cursor-pointer mt-4"
+                    @click="showAdvancedFilters = !showAdvancedFilters"
+                  >
+                    <n-icon :component="Filter" />
+                    <span class="ml-2 font-medium">Advanced filters</span>
+                    <n-icon class="ml-auto">
+                      <ChevronDown v-if="!showAdvancedFilters" />
+                      <ChevronUp v-else />
+                    </n-icon>
+                  </div>
+
+                  <n-collapse-transition :show="showAdvancedFilters">
+                    <div class="mt-4 flex flex-col gap-3">
+                      <n-input
+                        v-model:value="queryTerm"
+                        placeholder="Search posts"
+                      >
+                        <template #prefix>
+                          <n-icon :component="Search" />
+                        </template>
+                      </n-input>
+
+                      <n-config-provider
+                        :theme-overrides="{ common: { borderRadius: '8px' } }"
+                      >
+                        <n-select
+                          v-model:value="order"
+                          placeholder="Sort by"
+                          :options="[
+                            { label: 'Date', value: 'date' },
+                            { label: 'Popularity', value: 'popularity' }
+                          ]"
+                        />
+                      </n-config-provider>
+
+                      <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                        <n-date-picker
+                          v-model:value="periodStart"
+                          type="date"
+                          placeholder="From date"
+                          clearable
+                        />
+                        <n-date-picker
+                          v-model:value="periodEnd"
+                          type="date"
+                          placeholder="To date"
+                          clearable
+                        />
+                      </div>
+                    </div>
+                  </n-collapse-transition>
+                </div>
+              </n-card>
+
+              <post-list :key="filterKey" :params="postListParams" />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        v-else-if="notFound"
+        class="relative flex justify-center items-center h-full"
+      >
+        <n-empty description="The realm you're trying to access is not found.">
+          <template #icon>
+            <n-icon :component="Users" />
+          </template>
+        </n-empty>
+      </div>
+      <div v-else class="relative flex justify-center items-center h-full">
+        <n-spin size="large" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { useWindowScroll } from "@vueuse/core"
+import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
+import type { SnRealm } from "~/types/api"
+import type { PostListParams } from "~/composables/usePostList"
+import PostList from "~/components/Post/PostList.vue"
+import {
+  Reply,
+  Paperclip,
+  ArrowUpDown,
+  Filter,
+  Search,
+  ChevronDown,
+  ChevronUp,
+  Users,
+  UserPlus
+} from "lucide-vue-next"
+
+const route = useRoute()
+const message = useMessage()
+const api = useSolarNetwork()
+
+const notFound = ref<boolean>(false)
+const realm = ref<SnRealm | null>(null)
+const isJoining = ref(false)
+const isMember = ref(false)
+const checkingMembership = ref(false)
+
+// Check if we're in invite mode
+const isInviteMode = computed(() => {
+  return !!route.query.invite
+})
+
+// Use useFetch with the correct API URL to avoid router conflicts
+const apiBase = useSolarNetworkUrl()
+const apiBaseServer = useSolarNetworkUrl()
+
+try {
+  const { data, error } = await useFetch<SnRealm>(
+    `${apiBaseServer}/pass/realms/${route.params.slug}`,
+    { server: true }
+  )
+
+  if (error.value) {
+    console.error("Failed to fetch realm:", error.value)
+    notFound.value = true
+  } else if (data.value) {
+    realm.value = keysToCamel(data.value)
+  }
+} catch (err) {
+  console.error("Failed to fetch realm:", err)
+  notFound.value = true
+}
+
+const realmBackground = computed(() => {
+  return realm.value?.background
+    ? `${apiBase}/drive/files/${realm.value.background.id}?original=true`
+    : undefined
+})
+const realmPicture = computed(() => {
+  return realm.value?.picture
+    ? `${apiBase}/drive/files/${realm.value.picture.id}`
+    : undefined
+})
+
+const { y: scrollY } = useWindowScroll()
+const scrollThreshold = 192 // max-h-48 is 12rem = 192px
+
+const backgroundOpacity = computed(() => {
+  return Math.max(0, Math.min(scrollY.value / scrollThreshold, 1))
+})
+
+const headerOpacity = computed(() => {
+  return 1 - backgroundOpacity.value
+})
+
+const pageStyle = computed(() => {
+  if (!realmBackground.value) return {}
+  return {
+    backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('${realmBackground.value}')`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: "no-repeat",
+    backgroundAttachment: "fixed",
+    opacity: isInviteMode.value ? 1 : backgroundOpacity.value
+  }
+})
+
+const cardClass = computed(() => ({
+  "backdrop-blur-2xl": !!realmBackground.value,
+  "shadow-xl": !!realmBackground.value
+}))
+
+const cardStyle = computed(() =>
+  realmBackground.value
+    ? "background-color: var(--n-color-modal)"
+    : "background-color: var(--n-color)"
+)
+
+const cardContentStyle = computed(() =>
+  realmBackground.value ? "background-color: transparent" : ""
+)
+
+// Filter state
+const activeCategoryTab = ref("all")
+const includeReplies = ref<boolean | null>(null)
+const mediaOnly = ref(false)
+const orderDesc = ref(true)
+const showAdvancedFilters = ref(false)
+const queryTerm = ref("")
+const order = ref<string | null>(null)
+const periodStart = ref<number | null>(null)
+const periodEnd = ref<number | null>(null)
+
+const postListParams = computed<PostListParams>(() => {
+  const params: PostListParams = {
+    realm: route.params.slug as string,
+    includeReplies: includeReplies.value ?? undefined,
+    mediaOnly: mediaOnly.value,
+    orderDesc: orderDesc.value,
+    queryTerm: queryTerm.value || undefined,
+    order: order.value ?? undefined,
+    periodStart: periodStart.value
+      ? Math.floor(periodStart.value / 1000)
+      : undefined,
+    periodEnd: periodEnd.value ? Math.floor(periodEnd.value / 1000) : undefined
+  }
+
+  if (activeCategoryTab.value === "posts") {
+    params.type = 0
+  } else if (activeCategoryTab.value === "articles") {
+    params.type = 1
+  }
+
+  return params
+})
+
+const filterKey = computed(() => {
+  return JSON.stringify(postListParams.value)
+})
+
+const cycleIncludeReplies = () => {
+  if (includeReplies.value === null) {
+    includeReplies.value = true
+  } else if (includeReplies.value === true) {
+    includeReplies.value = false
+  } else {
+    includeReplies.value = null
+  }
+}
+
+// Check membership status
+async function checkMembership() {
+  if (!realm.value) return
+
+  checkingMembership.value = true
+  try {
+    await api(`/pass/realms/${realm.value.slug}/members/me`, {
+      method: "GET"
+    })
+    isMember.value = true
+  } catch (err) {
+    // 404 means not a member
+    isMember.value = false
+  } finally {
+    checkingMembership.value = false
+  }
+}
+
+// Handle join realm
+async function handleJoin() {
+  if (!realm.value) return
+
+  isJoining.value = true
+  try {
+    await api(`/pass/realms/${realm.value.slug}/members/me`, {
+      method: "POST"
+    })
+    message.success(`Successfully joined ${realm.value.name}!`)
+    isMember.value = true
+    // Redirect to the realm page without invite query if in invite mode
+    if (isInviteMode.value) {
+      await navigateTo(`/realms/${realm.value.slug}`)
+    }
+  } catch (err) {
+    message.error(err instanceof Error ? err.message : String(err))
+  } finally {
+    isJoining.value = false
+  }
+}
+
+// Check membership on mount
+onMounted(() => {
+  if (realm.value) {
+    checkMembership()
+  }
+})
+
+definePageMeta({
+  title: "Realms",
+  alias: ["/r/:slug()"]
+})
+
+useHead({
+  title: computed(() => {
+    if (notFound.value) {
+      return "Realm not found"
+    }
+    if (realm.value) {
+      return realm.value.name
+    }
+    return "Loading realm..."
+  }),
+  meta: computed(() => {
+    if (realm.value) {
+      const description =
+        realm.value.description || `Join ${realm.value.name} on Solar Network.`
+      return [{ name: "description", content: description }]
+    }
+    return []
+  })
+})
+
+defineOgImage({
+  component: "ImageCard",
+  // @ts-ignore
+  title: computed(() => (realm.value ? realm.value.name : "Realm")),
+  description: computed(() =>
+    realm.value
+      ? realm.value.description || `Join ${realm.value.name} on Solar Network.`
+      : ""
+  ),
+  avatarUrl: computed(() => realmPicture.value),
+  backgroundImage: computed(() => realmBackground.value)
+})
+</script>
+
+<style scoped>
+.layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+.main {
+  order: 2;
+  min-width: 0;
+}
+
+.sidebar {
+  order: 1;
+  height: auto;
+}
+
+@media (min-width: 960px) {
+  .layout {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .main {
+    order: unset;
+  }
+
+  .sidebar {
+    order: unset;
+  }
+}
+
+@media (min-width: 1280px) {
+  .sidebar {
+    position: sticky;
+    top: calc(var(--header-height) + 8px);
+    align-self: start;
+  }
+}
+</style>

app/pages/spells/[...word].vue

@@ -1,80 +1,37 @@
-<template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card max-width="400" title="Magic Spell" prepend-icon="mdi-magic-staff" class="pa-2">
-      <v-card-text>
-        <v-alert type="success" v-if="done" class="mb-4">
-          The magic spell has been applied successfully. Now you can close this
-          tab and back to the Solar Network!
-        </v-alert>
-        <v-alert
-          type="error"
-          v-else-if="!!error"
-          title="Something went wrong"
-          class="mb-4"
-          >{{ error }}</v-alert
-        >
-        <div v-else-if="!!spell">
-          <p class="mb-2">
-            Magic spell for {{ spellTypes[spell.type] ?? "unknown" }}
-          </p>
-          <div class="d-flex align-center gap-2 mb-2">
-            <v-icon size="18">mdi-account-circle</v-icon>
-            <strong>@{{ spell.account.name }}</strong>
-          </div>
-          <div class="d-flex align-center gap-2 mb-2">
-            <v-icon size="18">mdi-play</v-icon>
-            <span>Available at</span>
-            <strong>{{
-              new Date(spell.createdAt ?? spell.affectedAt).toLocaleString()
-            }}</strong>
-          </div>
-          <div class="d-flex align-center gap-2 mb-4" v-if="spell.expiredAt">
-            <v-icon size="18">mdi-calendar</v-icon>
-            <span>Until</span>
-            <strong>{{ spell.expiredAt.toString() }}</strong>
-          </div>
-          <div class="mt-4">
-            <v-text-field
-              v-if="spell.type == 3"
-              v-model="newPassword"
-              label="New password"
-              type="password"
-              density="comfortable"
-            ></v-text-field>
-            <v-btn color="primary" :loading="submitting" @click="applySpell">
-              <v-icon left>mdi-check</v-icon>
-              Apply
-            </v-btn>
-          </div>
-        </div>
-        <v-progress-circular
-          v-else
-          indeterminate
-          size="32"
-          class="mt-4"
-        ></v-progress-circular>
-      </v-card-text>
-    </v-card>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { onMounted, ref } from "vue"
 import { useRoute } from "vue-router"
+import { Wand2, User, Clock, Calendar, Check } from "lucide-vue-next"
+import { useSolarNetwork } from "~/composables/useSolarNetwork"
 
 const route = useRoute()
+const api = useSolarNetwork()
+
+useHead({
+  title: "Magic Spell"
+})
 
 const spellWord: string =
   typeof route.params.word === "string"
     ? route.params.word
     : route.params.word?.join("/") || ""
-const spell = ref<any>(null)
+
+interface SnSpell {
+  type: number
+  account: {
+    name: string
+  }
+  createdAt: string
+  affectedAt: string
+  expiredAt?: string
+}
+
+const spell = ref<SnSpell | null>(null)
 const error = ref<string | null>(null)
-
 const newPassword = ref<string>()
-
 const submitting = ref(false)
 const done = ref(false)
+const loading = ref(true)
 
 const spellTypes = [
   "Account Activation",
@@ -84,21 +41,24 @@ const spellTypes = [
   "Contact Method Verification"
 ]
 
-const api = useSolarNetwork()
-
 async function fetchSpell() {
+  loading.value = true
   try {
-    const resp = await api(`/id/spells/${encodeURIComponent(spellWord)}`)
+    const resp = await api<SnSpell>(
+      `/pass/spells/${encodeURIComponent(spellWord)}`
+    )
     spell.value = resp
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    loading.value = false
   }
 }
 
 async function applySpell() {
   submitting.value = true
   try {
-    await api(`/id/spells/${encodeURIComponent(spellWord)}/apply`, {
+    await api(`/pass/spells/${encodeURIComponent(spellWord)}/apply`, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: newPassword.value
@@ -108,8 +68,114 @@ async function applySpell() {
     done.value = true
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    submitting.value = false
   }
 }
 
 onMounted(() => fetchSpell())
 </script>
+
+<template>
+  <div class="relative flex items-center justify-center min-h-layout px-4">
+    <n-card class="w-full max-w-md shadow-lg" size="large">
+      <div v-if="done" class="py-4">
+        <n-result
+          status="success"
+          title="Spell Applied"
+          description="The magic spell has been applied successfully. Now you can close this tab and return to the Solar Network!"
+        >
+        </n-result>
+      </div>
+
+      <div v-else-if="error">
+        <n-alert title="Something went wrong" type="error" class="mb-4">
+          {{ error }}
+        </n-alert>
+      </div>
+
+      <div v-else-if="loading" class="flex justify-center py-12">
+        <n-spin size="large" />
+      </div>
+
+      <div v-else-if="spell" class="flex flex-col gap-6">
+        <!-- Header -->
+        <div
+          class="flex items-center gap-3 pb-4 border-b border-gray-100 dark:border-gray-800"
+        >
+          <div class="p-2 bg-amber-100 dark:bg-amber-900/30 rounded-lg">
+            <n-icon :component="Wand2" class="text-amber-500" :size="24" />
+          </div>
+          <div>
+            <h2 class="text-xl font-bold">Magic Spell</h2>
+            <p class="text-sm text-gray-500">
+              {{ spellTypes[spell.type] ?? "Unknown Spell" }}
+            </p>
+          </div>
+        </div>
+
+        <!-- Details -->
+        <div class="space-y-4">
+          <div class="flex items-center gap-3">
+            <n-icon :component="User" class="text-gray-400" :size="20" />
+            <div class="flex flex-col">
+              <span class="text-xs text-gray-500 uppercase tracking-wider"
+                >Account</span
+              >
+              <span class="font-medium">@{{ spell.account.name }}</span>
+            </div>
+          </div>
+
+          <div class="flex items-center gap-3">
+            <n-icon :component="Clock" class="text-gray-400" :size="20" />
+            <div class="flex flex-col">
+              <span class="text-xs text-gray-500 uppercase tracking-wider"
+                >Available at</span
+              >
+              <span class="font-medium">{{
+                new Date(spell.createdAt ?? spell.affectedAt).toLocaleString()
+              }}</span>
+            </div>
+          </div>
+
+          <div v-if="spell.expiredAt" class="flex items-center gap-3">
+            <n-icon :component="Calendar" class="text-gray-400" :size="20" />
+            <div class="flex flex-col">
+              <span class="text-xs text-gray-500 uppercase tracking-wider"
+                >Expires</span
+              >
+              <span class="font-medium">{{
+                new Date(spell.expiredAt).toLocaleString()
+              }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- Action -->
+        <div class="mt-2 space-y-4">
+          <n-input
+            v-if="spell.type == 3"
+            v-model:value="newPassword"
+            type="password"
+            show-password-on="click"
+            placeholder="New password"
+            size="large"
+          />
+
+          <n-button
+            type="primary"
+            class="w-full"
+            size="large"
+            :loading="submitting"
+            @click="applySpell"
+          >
+            <template #icon>
+              <n-icon :component="Check" />
+            </template>
+            Apply Spell
+          </n-button>
+        </div>
+      </div>
+    </n-card>
+  </div>
+</template>

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()
 
@@ -51,6 +32,14 @@ onMounted(() => {
       {
         url: `${apiBase}/swagger/develop/v1/swagger.json`,
         name: "DysonNetwork.Develop"
+      },
+      {
+        url: `${apiBase}/swagger/insight/v1/swagger.json`,
+        name: "DysonNetwork.Insight"
+      },
+      {
+        url: `${apiBase}/swagger/zone/v1/swagger.json`,
+        name: "DysonNetwork.Zone"
       }
     ],
     dom_id: "#swagger-ui",

app/plugins/01.auth.ts

@@ -5,7 +5,17 @@ export default defineNuxtPlugin(() => {
   console.log(`[AUTH PLUGIN] Running on ${side}`)
   const userStore = useUserStore()
 
-  // Prevent fetching if it's already in progress
+  // Fix hydration mismatch: if isLoading is true on client, it's likely a stale state
+  // from SSR where the fetch didn't complete before the response was sent.
+  // Reset it to allow the client to fetch properly.
+  if (import.meta.client && userStore.isLoading) {
+    console.log(
+      `[AUTH PLUGIN] Detected stale isLoading state on ${side}. Resetting to allow fetch.`
+    )
+    userStore.isLoading = false
+  }
+
+  // Prevent fetching if it's already in progress (server-side only now)
   if (userStore.isLoading) {
     console.log(
       `[AUTH PLUGIN] User fetch already in progress on ${side}. Skipping.`
@@ -21,4 +31,3 @@ export default defineNuxtPlugin(() => {
     userStore.fetchUser()
   }
 })
-

app/stores/user.ts

@@ -17,7 +17,9 @@ export const useUserStore = defineStore("user", () => {
   // Actions
   async function fetchUser(reload = true): Promise<void> {
     if (currentFetchPromise.value) {
-      console.log("[UserStore] Fetch already in progress. Waiting for existing fetch.")
+      console.log(
+        "[UserStore] Fetch already in progress. Waiting for existing fetch."
+      )
       return currentFetchPromise.value
     }
     if (!reload && user.value) {
@@ -32,15 +34,23 @@ export const useUserStore = defineStore("user", () => {
       error.value = null
       const api = useSolarNetwork()
       try {
-        const response = await api<SnAccount>("/id/accounts/me")
+        const response = await api<SnAccount>("/pass/accounts/me")
         user.value = response
         console.log(`[UserStore] Logged in as @${user.value.name}`)
       } catch (e: unknown) {
         // Check for 401 Unauthorized error
-        const is401Error = (e instanceof FetchError && e.statusCode === 401) ||
-                          (e && typeof e === 'object' && 'status' in e && (e as { status: number }).status === 401) ||
-                          (e && typeof e === 'object' && 'statusCode' in e && (e as { statusCode: number }).statusCode === 401) ||
-                          (e instanceof Error && (e.message?.includes('401') || e.message?.includes('Unauthorized')))
+        const is401Error =
+          (e instanceof FetchError && e.statusCode === 401) ||
+          (e &&
+            typeof e === "object" &&
+            "status" in e &&
+            (e as { status: number }).status === 401) ||
+          (e &&
+            typeof e === "object" &&
+            "statusCode" in e &&
+            (e as { statusCode: number }).statusCode === 401) ||
+          (e instanceof Error &&
+            (e.message?.includes("401") || e.message?.includes("Unauthorized")))
 
         if (is401Error) {
           error.value = "Unauthorized"
@@ -50,6 +60,8 @@ export const useUserStore = defineStore("user", () => {
           user.value = null // Clear user data on error
           console.error("Failed to fetch user... ", e)
         }
+
+        // console.log(`[UserStore] Logged as @${user.value!.name}`)
       } finally {
         isLoading.value = false
         currentFetchPromise.value = null

app/types/api/index.ts

@@ -1,8 +1,9 @@
 // Re-export all types from separate files for easy importing
-export type { SnFileMeta, SnCloudFile as SnAttachment, SnPost } from './post'
-export type { SnVerification, SnPublisher } from './publisher'
-export type { SnActivity } from './activity'
-export type { SnWalletOrder, OrderStatus } from './order'
-export type { SnVersion } from './version'
-export type { SnAccountLink, SnAccountBadge, SnAccountPerkSubscription, SnAccountProfile, SnAccount } from './user'
-export type { GeoIpLocation, SnAuthChallenge, SnAuthSession, SnAuthFactor, SnAccountConnection } from './geo'
+export * from "./post"
+export * from "./publisher"
+export * from "./activity"
+export * from "./order"
+export * from "./version"
+export * from "./user"
+export * from "./geo"
+export * from "./realm"

app/types/api/order.ts

@@ -13,11 +13,11 @@ export interface SnWalletOrder {
   remarks?: string
   appIdentifier?: string
   productIdentifier?: string
-  meta?: Record<string, any>
+  meta?: Record<string, unknown>
   amount: number
   expiredAt: string
   payeeWalletId?: string
-  payeeWallet?: any
+  payeeWallet?: unknown
   transactionId?: string
-  transaction?: any
+  transaction?: unknown
 }

app/types/api/publisher.ts

@@ -1,30 +1,29 @@
-import type { SnCloudFile } from './post'
+import type { SnCloudFile } from "./post"
+import type { SnAccount } from "./user"
 
 // Verification interface
 export interface SnVerification {
-  type: number;
-  title: string;
-  description: string;
-  verifiedBy: string;
+  type: number
+  title: string
+  description: string
+  verifiedBy: string
 }
 
 // Publisher interface
 export interface SnPublisher {
-  id: string;
-  type: number;
-  name: string;
-  nick: string;
-  bio: string;
-  pictureId: string;
-  backgroundId: string;
-  picture: SnCloudFile | null;
-  background: SnCloudFile | null;
-  verification: SnVerification | null;
-  accountId: string;
-  realmId: string | null;
-  account: unknown | null;
-  resourceIdentifier: string;
-  createdAt: string;
-  updatedAt: string;
-  deletedAt: string | null;
+  id: string
+  type: number
+  name: string
+  nick: string
+  bio: string
+  picture: SnCloudFile | null
+  background: SnCloudFile | null
+  verification: SnVerification | null
+  accountId: string
+  realmId: string | null
+  account: SnAccount | null
+  resourceIdentifier: string
+  createdAt: string
+  updatedAt: string
+  deletedAt: string | null
 }

app/types/api/realm.ts

@@ -0,0 +1,19 @@
+import type { SnCloudFile } from "./post"
+import type { SnVerification as SnVerificationMark } from "./publisher"
+
+export interface SnRealm {
+  id: string
+  slug: string
+  name: string
+  description?: string
+  isCommunity: boolean
+  isPublic: boolean
+  picture?: SnCloudFile
+  background?: SnCloudFile
+  verification?: SnVerificationMark
+  accountId: string
+  resourceIdentifier: string
+  createdAt: Date
+  updatedAt: Date
+  deletedAt?: Date
+}

app/types/markdown-it-texmath.d.ts

@@ -1,10 +1,14 @@
-declare module 'markdown-it-texmath' {
+import type { PluginSimple } from "markdown-it"
+import type katex from "katex"
+import type { KatexOptions } from "katex"
+
+declare module "markdown-it-texmath" {
   interface TexMathOptions {
-    engine?: any
+    engine?: typeof katex
     delimiters?: string
-    katexOptions?: Record<string, any>
+    katexOptions?: KatexOptions
   }
 
-  function texmath(options?: TexMathOptions): any
+  function texmath(options?: TexMathOptions): PluginSimple
   export default texmath
 }

app/types/marked-katex.d.ts

@@ -1,4 +1,4 @@
-declare module 'marked-katex' {
+declare module "marked-katex" {
   interface Options {
     throwOnError?: boolean
     errorColor?: string
@@ -7,12 +7,18 @@ declare module 'marked-katex' {
     fleqn?: boolean
     macros?: Record<string, string>
     colorIsTextColor?: boolean
-    strict?: boolean | 'ignore' | 'warn' | 'error'
-    trust?: boolean | ((context: { command: string; url: string; protocol: string }) => boolean)
-    output?: 'html' | 'mathml' | 'htmlAndMathml'
+    strict?: boolean | "ignore" | "warn" | "error"
+    trust?:
+      | boolean
+      | ((context: {
+          command: string
+          url: string
+          protocol: string
+        }) => boolean)
+    output?: "html" | "mathml" | "htmlAndMathml"
   }
 
-  function markedKatex(options?: Options): any
+  function markedKatex(options?: Options): object
 
   export default markedKatex
 }

app/types/navlink.ts

@@ -1,5 +1,7 @@
+import type { VNode } from "vue"
+
 export interface NavLink {
-    title: string
-    href: string
-    icon: string
+  title: string
+  href: string
+  icon: VNode
 }

docker-compose.yml

@@ -0,0 +1,15 @@
+services:
+  app:
+    # This will build the Dockerfile in the current directory.
+    # Alternatively, you can specify the image from a registry.
+    # Replace 'your-github-username' with your actual GitHub username or organization.
+    image: ghcr.io/solsynth/floating-island:latest
+    build: .
+    # This maps the .env file from your project root into the container.
+    env_file:
+      - .env
+    # This maps port 3000 on your host to port 3000 in the container.
+    ports:
+      - "3000:3000"
+    # This ensures the container restarts automatically unless it's stopped manually.
+    restart: unless-stopped

nuxt.config.ts

@@ -1,4 +1,8 @@
 import tailwindcss from "@tailwindcss/vite"
+import AutoImport from "unplugin-auto-import/vite"
+import Components from "unplugin-vue-components/vite"
+import { NaiveUiResolver } from "unplugin-vue-components/resolvers"
+import { generateTailwindColorThemes } from "@bg-dev/nuxt-naiveui/utils"
 
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
@@ -8,12 +12,11 @@ export default defineNuxtConfig({
     "@nuxt/image",
     "@nuxt/eslint",
     "@pinia/nuxt",
-    "vuetify-nuxt-module",
     "@nuxtjs/i18n",
-    "@nuxtjs/color-mode",
-    "nuxt-og-image"
+    "nuxt-og-image",
+    "@bg-dev/nuxt-naiveui"
   ],
-  css: ["~/assets/css/main.css", "katex/dist/katex.min.css"],
+  css: ["~/assets/css/main.css"],
   app: {
     pageTransition: { name: "page", mode: "out-in" },
     head: {
@@ -39,10 +42,6 @@ export default defineNuxtConfig({
       "Nunito:400"
     ]
   },
-  colorMode: {
-    preference: "system",
-    fallback: "light"
-  },
   features: {
     inlineStyles: false
   },
@@ -59,10 +58,64 @@ export default defineNuxtConfig({
     public: {
       development: process.env.NODE_ENV == "development",
       apiBase: process.env.NUXT_PUBLIC_API_BASE || "https://api.solian.app",
-      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || "https://solian.app"
+      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || "https://solian.app",
+      devToken: process.env.NUXT_PUBLIC_DEV_TOKEN || ""
     }
   },
   vite: {
-    plugins: [tailwindcss()]
+    plugins: [
+      tailwindcss(),
+      AutoImport({
+        imports: [
+          {
+            "naive-ui": [
+              "useDialog",
+              "useMessage",
+              "useNotification",
+              "useLoadingBar"
+            ]
+          }
+        ]
+      }),
+      Components({
+        resolvers: [NaiveUiResolver()]
+      })
+    ]
+  },
+  naiveui: {
+    colorModePreference: "system",
+    colorModePreferenceCookieName: "fi-ColorMode",
+    themeConfig: {
+      ...generateTailwindColorThemes(),
+      shared: {
+        common: {
+          fontFamily:
+            "Nunito Variable, v-sans, ui-system, -apple-system, sans-serif",
+          primaryColor: "#3F51B5FF",
+          primaryColorHover: "#5767C1FF",
+          primaryColorPressed: "#3546A4FF",
+          primaryColorSuppl: "#4C5EC5FF",
+          borderRadius: "16px",
+          borderRadiusSmall: "8px"
+        },
+        Input: {
+          borderRadius: "8px"
+        },
+        Select: {
+          borderRadius: "8px"
+        },
+        Dropdown: {
+          borderRadius: "8px"
+        },
+        Button: {
+          borderRadius: "8px",
+          borderRadiusLarge: "12px",
+          borderRadiusMedium: "8px",
+          borderRadiusSmall: "4px"
+        }
+      },
+      light: {},
+      dark: {}
+    }
   }
 })

package.json

@@ -16,34 +16,41 @@
     "@hcaptcha/vue3-hcaptcha": "^1.3.0",
     "@nuxt/eslint": "1.9.0",
     "@nuxt/image": "1.11.0",
-    "@nuxtjs/color-mode": "3.5.2",
     "@nuxtjs/i18n": "10.1.0",
     "@pinia/nuxt": "0.11.2",
-    "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.16",
+    "@tailwindcss/vite": "^4.1.17",
     "@vueuse/core": "^13.9.0",
     "blurhash": "^2.0.5",
     "cfturnstile-vue3": "^2.0.0",
     "eslint": "^9.39.1",
+    "highlightjs": "^9.16.2",
     "katex": "^0.16.25",
+    "lucide-vue-next": "^0.555.0",
     "luxon": "^3.7.2",
     "markdown-exit": "^1.0.0-beta.6",
+    "markdown-it-highlightjs": "^4.2.0",
     "markdown-it-texmath": "^1.0.0",
-    "nuxt": "^4.2.0",
+    "nuxt": "^4.2.1",
     "nuxt-og-image": "^5.1.12",
-    "pinia": "^3.0.3",
-    "sharp": "^0.34.4",
+    "nuxtjs-naive-ui": "1.0.2",
+    "pinia": "^3.0.4",
+    "sharp": "^0.34.5",
     "swagger-themes": "^1.4.3",
-    "swagger-ui-dist": "^5.30.2",
-    "tailwindcss": "^4.1.16",
+    "swagger-ui-dist": "^5.30.3",
     "tus-js-client": "^4.3.1",
-    "vue": "^3.5.22",
-    "vue-router": "^4.6.3",
-    "vuetify-nuxt-module": "0.18.7"
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.3"
   },
   "devDependencies": {
+    "@bg-dev/nuxt-naiveui": "^2.0.0",
     "@mdi/font": "^7.4.47",
+    "@tailwindcss/typography": "^0.5.19",
     "@types/luxon": "^3.7.1",
-    "@types/node": "^24.10.0"
+    "@types/node": "^24.10.1",
+    "daisyui": "^5.5.5",
+    "naive-ui": "^2.43.2",
+    "tailwindcss": "^4.1.17",
+    "unplugin-auto-import": "^20.3.0",
+    "unplugin-vue-components": "^30.0.0"
   }
 }

vuetify.config.ts

@@ -1,44 +0,0 @@
-import { defineVuetifyConfiguration } from "vuetify-nuxt-module/custom-configuration"
-import { md3 } from "vuetify/blueprints"
-
-export default defineVuetifyConfiguration({
-  blueprint: md3,
-  icons: {
-    defaultSet: "mdi"
-  },
-  theme: {
-    defaultTheme: "system",
-    themes: {
-      light: {
-        colors: {
-          background: "#f0f4fa",
-          surface: "#ffffff",
-          primary: "#3f51b5",
-          secondary: "#2196f3",
-          accent: "#009688",
-          error: "#f44336",
-          warning: "#ffc107",
-          info: "#03a9f4",
-          success: "#4caf50"
-        }
-      },
-      dark: {
-        dark: true,
-        colors: {
-          background: "#1e1f20",
-          surface: "#0e0e0e",
-          primary: "#3f51b5",
-          secondary: "#2196f3",
-          accent: "#009688",
-          error: "#f44336",
-          warning: "#ffc107",
-          info: "#03a9f4",
-          success: "#4caf50"
-        }
-      }
-    }
-  },
-  date: {
-    adapter: "luxon"
-  }
-})