🐛 Fix magic spell page didn't update

.dockerignore

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

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,5 +1,6 @@
 <template>
   <naive-config>
+    <n-global-style />
     <n-dialog-provider>
       <n-notification-provider>
         <naive-notification />

app/components.d.ts

@@ -20,17 +20,25 @@ declare module 'vue' {
     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']
@@ -41,6 +49,7 @@ declare module 'vue' {
     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']
@@ -48,9 +57,13 @@ declare module 'vue' {
     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']
   }
@@ -66,17 +79,25 @@ declare global {
   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']
@@ -87,6 +108,7 @@ declare global {
   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']
@@ -94,9 +116,13 @@ declare global {
   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"
@@ -22,11 +25,11 @@
         @load="imageLoaded = true"
         @error="imageLoaded = true"
       />
-    </template>
+    </div>
 
     <audio
       v-else-if="itemType == 'audio'"
-      class="w-full h-auto"
+      class="w-full"
       :src="remoteSource"
       controls
     />
@@ -105,8 +108,8 @@ const blurhashContainerStyle = computed(() => {
 
 const containerStyle = computed(() => {
   return {
-    "max-height": props.maxHeight ?? "720px",
+    maxHeight: props.maxHeight ?? "720px",
-    "aspect-ratio": aspectRatio.value
+    aspectRatio: aspectRatio.value?.toString()
   }
 })
 

app/components/Attachment/AttachmentList.vue

@@ -19,15 +19,19 @@
             v-for="attachment in attachments"
             :key="attachment.id"
             height="100%"
+            width="100%"
             cover
           >
-            <attachment-item original class="h-full" :item="attachment" />
+            <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 flex flex-col">
-      <div v-else class="space-y-4 max-h-96 overflow-y-auto">
         <attachment-item
           v-for="attachment in attachments"
           :key="attachment.id"

app/components/Post/PostEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-col gap-2">
+  <div class="flex flex-col gap-3">
     <pub-select v-model:value="publisher" />
     <n-input
       v-model:value="content"
@@ -8,11 +8,11 @@
       @keydown.meta.enter.exact="submit"
       @keydown.ctrl.enter.exact="submit"
     />
-    <div class="flex justify-between">
+    <div class="flex justify-end">
       <n-button type="primary" :loading="submitting" @click="submit">
         Post
         <template #icon>
-          <span class="mdi mdi-send"></span>
+          <n-icon :component="SendIcon" />
         </template>
       </n-button>
     </div>
@@ -20,8 +20,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { SendIcon } from "lucide-vue-next"
-import { useSolarNetwork } from '~/composables/useSolarNetwork'
+import { ref } from "vue"
+import { useSolarNetwork } from "~/composables/useSolarNetwork"
 
 // Interface for uploaded files in the editor
 interface UploadedFile {
@@ -30,10 +31,10 @@ interface UploadedFile {
   type: string
 }
 
-const emits = defineEmits(['posted'])
+const emits = defineEmits(["posted"])
 
 const publisher = ref<string | undefined>()
-const content = ref('')
+const content = ref("")
 
 const fileList = ref<UploadedFile[]>([])
 
@@ -43,21 +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')
+  emits("posted")
 }
 </script>

app/components/Post/PostList.vue

@@ -1,52 +1,51 @@
 <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
+    <n-infinite-scroll :distance="0" @load="loadMore" style="overflow: auto">
-      height="auto"
-      class="space-y-4 overflow-y-hidden"
-      side="end"
-      @load="loadMore"
-    >
       <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 v-if="loading" class="flex justify-center py-4">
-        <div class="flex justify-center py-4">
+        <n-spin size="medium" />
-          <v-progress-circular indeterminate size="32" />
+      </div>
-        </div>
-      </template>
 
       <!-- Empty State -->
-      <template #empty>
+      <div
-        <div v-if="!posts" class="text-center py-8 text-muted-foreground">
+        v-if="!loading && posts.length === 0 && !hasError"
-          <v-icon icon="mdi-post-outline" size="48" class="mb-2 opacity-50" />
+        class="text-center py-8 text-muted-foreground"
-          <p>No posts found</p>
+      >
-        </div>
+        <n-icon :component="FileText" size="48" class="mb-2 opacity-50" />
-      </template>
+        <p>No posts found</p>
-    </v-infinite-scroll>
+      </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"
 
@@ -60,12 +59,7 @@ defineEmits<{
   react: [postId: string, symbol: string, attitude: number, delta: number]
 }>()
 
-const { posts, hasError, error, loadMore, refresh } =
+const { posts, hasError, error, loading, loadMore, refresh } = usePostList(
-  usePostList(props.params)
+  props.params
+)
 </script>
-
-<style>
-.post-list .v-infinite-scroll .v-infinite-scroll__side:first-child {
-  display: none;
-}
-</style>

app/components/Post/PostQuickReply.vue

@@ -1,23 +1,78 @@
 <template>
-  <n-card title="Post your reply" size="small" embedded>
+  <n-card title="Quick Reply" size="small" embedded>
-    <n-input
+    <div class="flex flex-col gap-2 mb-1">
-      type="textarea"
+      <pub-select v-model:value="publisher" />
-      placeholder="Talk about this post for a bit."
+      <n-input
-      size="large"
+        v-model:value="content"
-      :rows="5"
+        type="textarea"
-      auto-grow
+        placeholder="Talk about this post for a bit."
-    ></n-input>
+        size="large"
-    <div class="flex justify-end mt-3">
+        :rows="3"
-      <n-button type="primary">
+        auto-grow
-        <template #icon>
+        @keydown.meta.enter.exact="submit"
-          <n-icon :component="SendIcon" />
+        @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>
-        Send
+      </n-input>
-      </n-button>
     </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/RepliesCompactList.vue

@@ -28,13 +28,13 @@
       </template>
 
       <!-- Empty State -->
-      <div
+      <n-empty
         v-if="!replies || replies.length === 0"
         class="text-center py-8 text-muted-foreground"
+        size="small"
       >
-        <v-icon icon="mdi-comment-outline" size="48" class="mb-2 opacity-50" />
+        No Replies
-        <p>No replies yet</p>
+      </n-empty>
-      </div>
     </div>
   </n-card>
 </template>

app/components/Post/RepliesList.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="replies-list">
-    <post-quick-reply v-if="!props.hideQuickReply" class="mb-4" />
+    <post-quick-reply
+      v-if="!props.hideQuickReply"
+      :replied-post-id="props.params.postId"
+      @posted="refresh"
+      class="mb-4"
+    />
 
     <!-- Error State -->
     <n-alert
@@ -33,15 +38,13 @@
       </template>
 
       <!-- Empty State -->
-      <div
+      <n-empty
         v-if="!replies || replies.length === 0"
         class="text-center py-8 text-muted-foreground"
+        size="small"
       >
-        <n-icon size="48" class="mb-2 opacity-50">
+        No Replies
-          <i class="mdi mdi-comment-outline"></i>
+      </n-empty>
-        </n-icon>
-        <p>No replies yet</p>
-      </div>
     </n-infinite-scroll>
   </div>
 </template>

app/components/PubSelect.vue

@@ -1,65 +1,74 @@
 <template>
-  <n-select
+  <n-config-provider :theme-overrides="{ common: { borderRadius: '8px' } }">
-    :options="pubStore.publishers"
+    <n-select
-    label-field="nick"
+      :options="pubStore.publishers"
-    value-field="name"
+      label-field="nick"
-    :value="props.value"
+      value-field="name"
-    @update:value="(v) => emits('update:value', v)"
+      :value="props.value"
-    :render-label="renderLabel"
+      @update:value="(v) => emits('update:value', v)"
-    :render-tag="renderTag"
+      :render-label="renderLabel"
-  />
+      :render-tag="renderTag"
+    />
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { usePubStore } from '~/stores/pub'
+import { usePubStore } from "~/stores/pub"
-import { watch, h } from 'vue'
+import { watch, h } from "vue"
-import type { SelectRenderLabel, SelectRenderTag } from 'naive-ui'
+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) => {
-  return h('div', { class: 'flex items-center' }, [
+  const pubData = pubStore.publishers.filter((p) => p.id == option.id)[0]
+  return h("div", { class: "flex items-center" }, [
     h(NAvatar, {
-      src: option.picture ? `${apiBase.value}/drive/files/${option.picture.id}` : undefined,
+      round: true,
-      size: 'small',
+      src: pubData?.picture?.id
-      class: 'mr-2'
+        ? `${apiBase}/drive/files/${pubData.picture!.id}`
+        : undefined,
+      size: "small",
+      class: "mr-2"
     }),
-    h('div', null, [
+    h("div", null, [
-      h('div', null, option.nick as string),
+      h("div", null, pubData!.nick),
-      h('div', { class: 'text-xs text-gray-500' }, `@${option.name as string}`)
+      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',
+    "div",
     {
-      class: 'flex items-center'
+      class: "flex items-center"
     },
     [
       h(NAvatar, {
-        src: option.picture ? `${apiBase.value}/drive/files/${option.picture.id}` : undefined,
+        round: true,
-        size: 'small',
+        src: pubData?.picture?.id
-        class: 'mr-2'
+          ? `${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/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/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)
@@ -153,7 +153,7 @@ export const usePostList = (params: PostListParams = {}) => {
 
   return {
     posts,
-    isLoading,
+    loading,
     hasError,
     hasMore,
     error: computed(() => state.value.error),

app/composables/useSolarNetwork.ts

@@ -20,7 +20,8 @@ export const useSolarNetwork = () => {
       console.log(`[useSolarNetwork] onRequest for ${request} on ${side}`)
 
       if (devToken) {
-        options.headers = new Headers(options.headers)
+        console.log("[useSolarNetwork] Using dev token...")
+        options.headers.delete("Cookie")
         options.headers.set("Authorization", `Bearer ${devToken}`)
       }
 

app/layouts/default.vue

@@ -41,6 +41,7 @@
 import IconLight from "~/assets/images/cloudy-lamb.png"
 
 import type { MenuOption } from "naive-ui"
+import { NIcon } from "naive-ui"
 import { computed, h } from "vue"
 import { useRouter, useRoute, RouterLink } from "vue-router"
 import {

app/pages/accounts/[name].vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <div class="fixed inset-0" :style="pageStyle" />
+    <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 backdrop-blur-md">
+    <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" />
@@ -166,6 +166,16 @@
                 :show-indicator="false"
               />
             </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
@@ -252,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)

app/pages/files/[id].vue

@@ -1,91 +1,65 @@
 <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">
+    <header v-if="fileInfo" class="top-toolbar bg-neutral-900/50 text-white">
-      <v-container fluid>
+      <div class="container mx-auto px-4 h-full">
-        <v-row align="center" class="pa-2">
+        <div class="flex items-center h-full">
-          <v-col cols="12" md="4">
+          <div class="flex items-center gap-2 w-full md:w-1/3">
-            <div class="d-flex align-center gap-2">
+            <n-tooltip trigger="hover">
-              <v-tooltip location="bottom" :text="fileInfo.mimeType">
+              <template #trigger>
-                <template #activator="{ props }">
+                <n-icon :component="fileIcon" />
-                  <v-icon v-bind="props" :icon="fileIcon"></v-icon>
+              </template>
-                </template>
+              {{ fileInfo.mimeType }}
-              </v-tooltip>
+            </n-tooltip>
-              <v-tooltip location="bottom" :text="fileInfo.name || 'File'">
+            <n-tooltip trigger="hover">
-                <template #activator="{ props }">
+              <template #trigger>
-                  <span class="line-clamp-1" v-bind="props">
+                <span class="line-clamp-1">
-                    {{ fileInfo.name || "File" }}
+                  {{ fileInfo.name || "File" }}
-                  </span>
+                </span>
-                </template>
+              </template>
-              </v-tooltip>
+              {{ fileInfo.name || "File" }}
-              <!-- Action buttons on mobile -->
+            </n-tooltip>
-              <div class="d-flex d-md-none gap-2 ml-auto">
+            <!-- Action buttons on mobile -->
-                <v-btn
+            <div class="flex md:hidden gap-2 ml-auto">
-                  icon
+              <n-button text style="font-size: 20px" @click="handleDownload">
-                  size="small"
+                <n-icon :component="Download" />
-                  density="compact"
+              </n-button>
-                  @click="handleDownload"
+              <n-button text style="font-size: 20px" @click="infoDialog = true">
-                >
+                <n-icon :component="Info" />
-                  <v-icon>mdi-download</v-icon>
+              </n-button>
-                </v-btn>
-                <v-btn
-                  icon
-                  size="small"
-                  density="compact"
-                  @click="infoDialog = true"
-                >
-                  <v-icon>mdi-information</v-icon>
-                </v-btn>
-              </div>
             </div>
-          </v-col>
+          </div>
-          <v-col cols="12" md="8" class="d-none d-md-block">
+          <div class="hidden md:flex items-center justify-end gap-4 w-2/3">
-            <div class="d-flex align-center justify-end gap-4">
+            <span>{{ formatBytes(fileInfo.size) }}</span>
-              <span>{{ formatBytes(fileInfo.size) }}</span>
+            <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
-              <span>{{ new Date(fileInfo.createdAt).toLocaleString() }}</span>
+            <n-button text style="font-size: 20px" @click="handleDownload">
-              <v-btn
+              <n-icon :component="Download" />
-                icon
+            </n-button>
-                size="small"
+            <n-button text style="font-size: 20px" @click="infoDialog = true">
-                density="compact"
+              <n-icon :component="Info" />
-                @click="handleDownload"
+            </n-button>
-              >
+          </div>
-                <v-icon>mdi-download</v-icon>
+        </div>
-              </v-btn>
+      </div>
-              <v-btn
+    </header>
-                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>
 
     <!-- Main Content - File Preview -->
     <div class="preview-container">
-      <v-progress-circular
+      <n-spin v-if="!fileInfo && !error" size="large" />
-        v-if="!fileInfo && !error"
+      <n-alert
-        indeterminate
-        size="64"
-        class="loading-spinner"
-      ></v-progress-circular>
-      <v-alert
         v-else-if="error"
         type="error"
         title="No file was found"
-        :text="error"
+        class="max-w-md"
-        class="error-alert"
+      >
-      ></v-alert>
+        {{ error }}
+      </n-alert>
       <div v-else class="preview-content">
-        <div v-if="fileInfo?.isEncrypted" class="encrypted-notice">
+        <div v-if="fileInfo?.isEncrypted" class="max-w-md">
-          <v-alert type="info" title="Encrypted file" class="mb-4">
+          <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
@@ -94,13 +68,22 @@
           @touchstart="handleTouchStart"
           @touchmove="handleTouchMove"
           @touchend="handleTouchEnd"
+          @mousedown="handleMouseDown"
+          @mousemove="handleMouseMove"
+          @mouseup="handleMouseUp"
+          @mouseleave="handleMouseUp"
           @dblclick="handleDoubleClick"
         >
-          <v-img
+          <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'"
@@ -114,102 +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="max-w-md"
-            class="preview-unavailable"
+          >
-          />
+            A preview for this file type is not available.
+          </n-alert>
         </div>
       </div>
     </div>
 
     <!-- Password Dialog -->
-    <v-dialog v-model="secretDialog" max-width="400">
+    <n-modal v-model:show="secretDialog">
-      <v-card>
+      <n-card
-        <v-card-title>
+        style="width: 400px"
-          <v-icon left>mdi-lock</v-icon>
+        title="Enter Password"
-          Enter Password
+        :bordered="false"
-        </v-card-title>
+        size="huge"
-        <v-card-text>
+        role="dialog"
-          <v-text-field
+        aria-modal="true"
-            v-model="dialogPassword"
+      >
-            label="Password"
+        <n-input
-            type="password"
+          v-model:value="dialogPassword"
-            variant="outlined"
+          type="password"
-            autofocus
+          show-password-on="click"
-            @keyup.enter="confirmDownload"
+          placeholder="Password"
-          />
+          autofocus
-        </v-card-text>
+          @keyup.enter="confirmDownload"
-        <v-card-actions>
+        />
-          <v-spacer></v-spacer>
+        <template #footer>
-          <v-btn @click="secretDialog = false">Cancel</v-btn>
+          <div class="flex justify-end gap-2">
-          <v-btn color="primary" @click="confirmDownload">Download</v-btn>
+            <n-button @click="secretDialog = false">Cancel</n-button>
-        </v-card-actions>
+            <n-button type="primary" @click="confirmDownload"
-      </v-card>
+              >Download</n-button
-    </v-dialog>
+            >
+          </div>
+        </template>
+      </n-card>
+    </n-modal>
 
     <!-- Technical Details Dialog -->
-    <v-dialog v-model="infoDialog" max-width="640">
+    <n-drawer
-      <v-card title="File Information" prepend-icon="mdi-information">
+      v-model:show="infoDialog"
-        <v-card-text>
+      :width="breakpoints.isGreaterOrEqual('md') ? '40vw' : '100vw'"
-          <v-row>
+    >
-            <v-col cols="12" md="6">
+      <n-drawer-content>
-              <div class="mb-4">
+        <template #header>
-                <strong>File ID</strong>
+          <div class="flex items-center justify-between gap-2">
-                <div class="text-xs">#{{ fileInfo?.id }}</div>
+            <div>File Information</div>
-              </div>
+            <n-button text size="small" @click="infoDialog = false">
-              <div class="mb-4">
+              <template #icon>
-                <strong>File Name</strong>
+                <n-icon :component="XIcon" />
-                <div class="text-xs">{{ fileInfo?.name || "N/A" }}</div>
+              </template>
-              </div>
+            </n-button>
-              <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>
           </div>
-          <v-card variant="outlined" class="pa-2">
+        </template>
-            <pre
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
-              class="overflow-x-auto"
+          <div class="flex flex-col gap-4">
-              style="font-size: 14px"
+            <div>
-            ><code>{{ JSON.stringify(fileInfo?.fileMeta, null, 2) }}</code></pre>
+              <strong class="font-semibold">File ID</strong>
-          </v-card>
+              <div class="opacity-80">#{{ fileInfo?.id }}</div>
-        </v-card-text>
+            </div>
-        <v-card-actions>
+            <div>
-          <v-spacer></v-spacer>
+              <strong class="font-semibold">File Name</strong>
-          <v-btn @click="infoDialog = false">Close</v-btn>
+              <div class="opacity-80">{{ fileInfo?.name || "N/A" }}</div>
-        </v-card-actions>
+            </div>
-      </v-card>
+            <div>
-    </v-dialog>
+              <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
@@ -228,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()
 
@@ -252,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>("")
@@ -289,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(
@@ -300,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`,
@@ -311,7 +323,6 @@ function checkForTransition() {
         transition: "all 0.3s ease-out"
       }
 
-      // Animate to final position
       requestAnimationFrame(() => {
         transitionStyle.value = {
           ...transitionStyle.value,
@@ -320,8 +331,6 @@ function checkForTransition() {
           width: `${finalWidth}px`,
           height: `${finalHeight}px`
         }
-
-        // Hide transition after animation
         setTimeout(() => {
           isTransitioning.value = false
           sessionStorage.removeItem("imageTransition")
@@ -345,38 +354,38 @@ const fileType = computed(() => {
   if (!fileInfo.value) return "unknown"
   return fileInfo.value.mimeType?.split("/")[0] || "unknown"
 })
-const fileIcon = computed(() => {
+const fileIcon = computed<Component>(() => {
-  if (!fileInfo.value?.mimeType) return "mdi-file"
+  if (!fileInfo.value?.mimeType) return File
 
   const mime = fileInfo.value.mimeType.toLowerCase()
 
-  if (mime.startsWith("image/")) return "mdi-file-image"
+  if (mime.startsWith("image/")) return FileImage
-  if (mime.startsWith("video/")) return "mdi-file-video"
+  if (mime.startsWith("video/")) return FileVideo
-  if (mime.startsWith("audio/")) return "mdi-file-music"
+  if (mime.startsWith("audio/")) return FileMusic
-  if (mime === "application/pdf") return "mdi-file-pdf"
+  if (mime === "application/pdf") return FileText
   if (
     mime.startsWith("text/") ||
     mime.includes("javascript") ||
     mime.includes("json") ||
     mime.includes("xml")
   )
-    return "mdi-file-code"
+    return FileCode
   if (mime.includes("zip") || mime.includes("rar") || mime.includes("tar"))
-    return "mdi-zip-box"
+    return FileArchive
   if (
     mime.includes("document") ||
     mime.includes("word") ||
     mime.includes("excel") ||
     mime.includes("powerpoint")
   )
-    return "mdi-file-document"
+    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
 })
@@ -403,55 +412,111 @@ function handleZoom(event: WheelEvent) {
 
   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()
+  if (event.touches.length === 2) {
-  isPinching.value = true
+    event.preventDefault()
-  const touch1 = event.touches[0]!
+    isPinching.value = true
-  const touch2 = event.touches[1]!
+    const touch1 = event.touches[0]!
-  initialDistance.value = Math.sqrt(
+    const touch2 = event.touches[1]!
-    Math.pow(touch2.clientX - touch1.clientX, 2) +
+    initialDistance.value = Math.sqrt(
-      Math.pow(touch2.clientY - touch1.clientY, 2)
+      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 (
+  if (fileType.value !== "image") return
-    fileType.value !== "image" ||
-    !isPinching.value ||
-    event.touches.length !== 2
-  )
-    return
 
-  event.preventDefault()
+  if (isPinching.value && event.touches.length === 2) {
-  const touch1 = event.touches[0]!
+    event.preventDefault()
-  const touch2 = event.touches[1]!
+    const touch1 = event.touches[0]!
-  const currentDistance = Math.sqrt(
+    const touch2 = event.touches[1]!
-    Math.pow(touch2.clientX - touch1.clientX, 2) +
+    const currentDistance = Math.sqrt(
-      Math.pow(touch2.clientY - touch1.clientY, 2)
+      Math.pow(touch2.clientX - touch1.clientX, 2) +
-  )
+        Math.pow(touch2.clientY - touch1.clientY, 2)
+    )
 
-  const scale = currentDistance / initialDistance.value
+    const scale = currentDistance / initialDistance.value
-  zoomLevel.value = Math.max(0.1, Math.min(5, scale))
+    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
 
   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
 
-  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,
@@ -503,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.")
   }
 }
 
@@ -513,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;
@@ -525,6 +589,7 @@ definePageMeta({
 }
 
 .top-toolbar {
+  height: 56px;
   position: relative;
   z-index: 1001;
 }
@@ -536,6 +601,7 @@ definePageMeta({
   justify-content: center;
   padding: 20px;
   overflow: auto;
+  min-height: 0;
 }
 
 .preview-content {
@@ -549,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%;
+  max-width: 100%;
-  height: 100%;
+  max-height: 100%;
   object-fit: contain;
-  transition: all 0.3s ease-in-out;
+  transition: transform 0.2s ease-out;
-  will-change: contents;
+  will-change: transform;
 }
 
 .preview-video,
@@ -572,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,7 +1,7 @@
 <template>
   <div class="container mx-auto px-5">
     <div class="layout">
-      <div class="main">
+      <div class="main pt-4">
         <n-infinite-scroll
           style="overflow: auto"
           :distance="0"
@@ -37,7 +37,7 @@
           </div>
         </n-infinite-scroll>
       </div>
-      <div class="sidebar flex flex-col gap-3">
+      <div class="sidebar flex flex-col gap-3 pt-4">
         <div v-if="!userStore.isAuthenticated">
           <n-card>
             <h2 class="card-title">About</h2>
@@ -54,11 +54,9 @@
             </p>
           </n-card>
         </div>
-        <div v-else class="card w-full bg-base-100 shadow-xl">
+        <n-card v-else class="w-full">
-          <div class="card-body">
+          <post-editor @posted="refreshActivities" />
-            <post-editor @posted="refreshActivities" />
+        </n-card>
-          </div>
-        </div>
         <sidebar-footer class="max-lg:hidden" />
       </div>
     </div>
@@ -180,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">
+  <div class="flex items-center justify-center min-h-screen">
-    <v-card
+    <n-card title="Order Payment" class="max-w-sm">
-      max-width="400"
+      <template #header-icon>
-      title="Order Payment"
+        <n-icon :component="Wallet" />
-      prepend-icon="mdi-cash"
+      </template>
-      class="pa-2"
+      <n-alert v-if="done" type="success" class="mb-4">
-    >
+        The order has been paid successfully. You can now close this tab and
-      <v-card-text>
+        return to Solar Network!
-        <v-alert v-if="done" type="success" class="mb-4">
+      </n-alert>
-          The order has been paid successfully. Now you can close this tab and
+      <n-alert
-          back to the Solar Network!
+        v-else-if="!!error"
-        </v-alert>
+        type="error"
-        <v-alert
+        title="Something went wrong"
-          v-else-if="!!error"
+        class="mb-4"
-          type="error"
+      >
-          title="Something went wrong"
+        {{ error }}
-          class="mb-4"
+      </n-alert>
-          >{{ error }}</v-alert
+      <div v-else-if="!!order" class="flex flex-col gap-2">
-        >
+        <p>Order for {{ order.productIdentifier ?? "unknown" }}</p>
-        <div v-else-if="!!order">
+        <div class="flex items-center gap-2">
-          <p class="mb-2">
+          <n-icon :component="Tag" />
-            Order for {{ order.productIdentifier ?? "unknown" }}
+          <strong>{{ order.remarks }}</strong>
-          </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 v-if="order.expiredAt" class="d-flex align-center gap-2 mb-4">
-            <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"
-              class="mt-4"
-              @click="pay"
-            >
-              <v-icon left>mdi-check</v-icon>
-              Pay
-            </v-btn>
-          </div>
         </div>
-        <v-progress-circular
+        <div class="flex items-center gap-2">
-          v-else
+          <n-icon :component="CircleDollarSign" />
-          indeterminate
+          <span>Amount</span>
-          size="32"
+          <strong>{{ order.amount }} {{ order.currency }}</strong>
-          class="mt-4"
+        </div>
-        ></v-progress-circular>
+        <div v-if="order.expiredAt" class="flex items-center gap-2">
-      </v-card-text>
+          <n-icon :component="Calendar" />
-    </v-card>
+          <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()
 
@@ -99,6 +101,7 @@ async function fetchOrder() {
 }
 
 async function pay() {
+  if (submitting.value) return
   submitting.value = true
   try {
     await api(`/id/orders/${encodeURIComponent(orderId)}/pay`, {
@@ -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
   }
 }
 
@@ -118,5 +123,4 @@ definePageMeta({
   middleware: ["auth"],
   title: "Solarpay"
 })
-</script>
+</script>
-

app/pages/publishers/[name].vue

@@ -1,195 +1,186 @@
 <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"
+      class="w-full max-h-48 object-cover object-top"
-      style="aspect-ratio: 16/7"
+      :style="{ aspectRatio: '16/7', opacity: headerOpacity }"
     />
-
+    <div v-if="user" class="relative min-h-layout">
-    <v-container>
+      <div class="container mx-auto p-4 sm:p-8">
-      <div class="layout">
+        <div class="layout">
-        <div class="main">
+          <div class="sidebar flex flex-col gap-3">
-          <!-- Filter Section -->
+            <n-card
-          <v-card class="mb-4">
+              :class="cardClass"
-            <v-tabs
+              :style="cardStyle"
-              v-model="activeCategoryTab"
+              :content-style="cardContentStyle"
-              color="primary"
-              class="mb-2"
-              grow
             >
-              <v-tab value="all">All</v-tab>
-              <v-tab value="posts">Posts</v-tab>
-              <v-tab value="articles">Articles</v-tab>
-            </v-tabs>
-
-            <v-row>
-              <v-col cols="12" sm="6">
-                <v-checkbox
-                  :model-value="includeReplies"
-                  label="Include replies"
-                  :indeterminate="includeReplies === null"
-                  density="compact"
-                  prepend-icon="mdi-reply"
-                  hide-details
-                  class="px-4"
-                  @update:model-value="cycleIncludeReplies"
-                />
-              </v-col>
-              <v-col cols="12" sm="6">
-                <v-checkbox
-                  v-model="mediaOnly"
-                  label="Media only"
-                  density="compact"
-                  hide-details
-                  class="px-4"
-                  prepend-icon="mdi-attachment"
-                />
-              </v-col>
-            </v-row>
-
-            <v-checkbox
-              v-model="orderDesc"
-              label="Descending order"
-              density="compact"
-              prepend-icon="mdi-sort"
-              class="px-4"
-              hide-details
-            />
-
-            <v-divider class="my-1" />
-
-            <v-list-item
-              title="Advanced filters"
-              prepend-icon="mdi-filter-variant"
-              @click="showAdvancedFilters = !showAdvancedFilters"
-            >
-              <template #append>
-                <v-icon>
-                  {{
-                    showAdvancedFilters ? "mdi-chevron-up" : "mdi-chevron-down"
-                  }}
-                </v-icon>
-              </template>
-            </v-list-item>
-
-            <v-expand-transition>
-              <div v-if="showAdvancedFilters" class="my-3 px-4">
-                <v-text-field
-                  v-model="queryTerm"
-                  hide-details
-                  label="Search"
-                  placeholder="Search posts"
-                  prepend-inner-icon="mdi-magnify"
-                  variant="outlined"
-                  density="comfortable"
-                  class="mb-3"
-                />
-
-                <v-select
-                  v-model="order"
-                  hide-details
-                  label="Sort by"
-                  :items="[
-                    { title: 'Date', value: 'date' },
-                    { title: 'Popularity', value: 'popularity' }
-                  ]"
-                  variant="outlined"
-                  density="comfortable"
-                  class="mb-3"
-                />
-
-                <v-row>
-                  <v-col cols="12" sm="6">
-                    <v-text-field
-                      :model-value="periodStartFormatted"
-                      hide-details
-                      label="From date"
-                      prepend-inner-icon="mdi-calendar"
-                      variant="outlined"
-                      density="comfortable"
-                      readonly
-                      @click="openDatePicker('start')"
-                    />
-                  </v-col>
-                  <v-col cols="12" sm="6">
-                    <v-text-field
-                      :model-value="periodEndFormatted"
-                      hide-details
-                      label="To date"
-                      prepend-inner-icon="mdi-calendar"
-                      variant="outlined"
-                      density="comfortable"
-                      readonly
-                      @click="openDatePicker('end')"
-                    />
-                  </v-col>
-                </v-row>
-              </div>
-            </v-expand-transition>
-          </v-card>
-
-          <post-list :key="filterKey" :params="postListParams" />
-
-          <!-- Date Picker Dialog -->
-          <v-dialog v-model="datePickerDialog" max-width="400">
-            <v-card>
-              <v-card-title>{{
-                datePickerType === "start" ? "From date" : "To date"
-              }}</v-card-title>
-              <v-card-text>
-                <v-date-picker
-                  v-model="tempDate"
-                  :max="new Date().toISOString().split('T')[0]"
-                />
-              </v-card-text>
-              <v-card-actions>
-                <v-spacer />
-                <v-btn @click="datePickerDialog = false">Cancel</v-btn>
-                <v-btn color="primary" @click="confirmDatePicker">OK</v-btn>
-              </v-card-actions>
-            </v-card>
-          </v-dialog>
-        </div>
-        <div class="sidebar flex flex-col gap-3">
-          <v-card class="w-full">
-            <v-card-text>
               <div class="flex items-center gap-4 mb-4">
-                <v-avatar size="60" rounded="circle" :image="userPicture" />
+                <n-avatar size="large" round :src="userPicture" />
                 <div>
                   <div class="text-xl font-bold">
                     {{ user.nick || user.name }}
                   </div>
-                  <div class="text-body-2 text-medium-emphasis">
+                  <div class="text-sm opacity-80">@{{ user.name }}</div>
-                    @{{ user.name }}
-                  </div>
                 </div>
               </div>
-              <div v-if="htmlBio" class="bio-prose" v-html="htmlBio"></div>
+              <article
-            </v-card-text>
+                v-if="htmlBio"
-          </v-card>
+                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>
-    </v-container>
+    </div>
-  </div>
+    <div
-  <div v-else-if="notFound" class="flex justify-center items-center h-full">
+      v-else-if="notFound"
-    <v-empty-state
+      class="relative flex justify-center items-center h-full"
-      icon="mdi-account-off"
+    >
-      title="User not found"
+      <n-empty
-      text="The user profile you're trying to access is not found."
+        description="The publisher profile you're trying to access is not found."
-    />
+      >
-  </div>
+        <template #icon>
-  <div v-else class="flex justify-center items-center h-full">
+          <n-icon :component="UserX" />
-    <v-progress-circular indeterminate size="64" color="primary" />
+        </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()
 
@@ -202,7 +193,6 @@ const username = computed(() => {
   return nameStr
 })
 
-// Use useFetch with the correct API URL to avoid router conflicts
 const apiBase = useSolarNetworkUrl()
 const apiBaseServer = useSolarNetworkUrl()
 
@@ -246,6 +236,44 @@ const userPicture = computed(() => {
     : 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)
@@ -253,14 +281,9 @@ const mediaOnly = ref(false)
 const orderDesc = ref(true)
 const showAdvancedFilters = ref(false)
 const queryTerm = ref("")
-const order = ref<string | undefined>(undefined)
+const order = ref<string | null>(null)
-const periodStart = ref<number | undefined>(undefined)
+const periodStart = ref<number | null>(null)
-const periodEnd = ref<number | undefined>(undefined)
+const periodEnd = ref<number | null>(null)
-
-// Date picker dialog
-const datePickerDialog = ref(false)
-const datePickerType = ref<"start" | "end">("start")
-const tempDate = ref<Date | undefined>(undefined)
 
 const postListParams = computed<PostListParams>(() => {
   const params: PostListParams = {
@@ -269,74 +292,36 @@ const postListParams = computed<PostListParams>(() => {
     mediaOnly: mediaOnly.value,
     orderDesc: orderDesc.value,
     queryTerm: queryTerm.value || undefined,
-    order: order.value,
+    order: order.value ?? undefined,
-    periodStart: periodStart.value,
+    periodStart: periodStart.value
-    periodEnd: periodEnd.value
+      ? Math.floor(periodStart.value / 1000)
+      : undefined,
+    periodEnd: periodEnd.value ? Math.floor(periodEnd.value / 1000) : undefined
   }
 
-  // Set type based on active tab
   if (activeCategoryTab.value === "posts") {
-    params.type = 0 // Assuming 0 is for posts
+    params.type = 0
   } else if (activeCategoryTab.value === "articles") {
-    params.type = 1 // Assuming 1 is for articles
+    params.type = 1
   }
-  // 'all' means no type filter
 
   return params
 })
 
-const periodStartFormatted = computed(() => {
-  return periodStart.value
-    ? new Date(periodStart.value * 1000).toISOString().split("T")[0]
-    : ""
-})
-
-const periodEndFormatted = computed(() => {
-  return periodEnd.value
-    ? new Date(periodEnd.value * 1000).toISOString().split("T")[0]
-    : ""
-})
-
-// Create a key that changes when filters change to force PostList re-mount
 const filterKey = computed(() => {
   return JSON.stringify(postListParams.value)
 })
 
 const cycleIncludeReplies = () => {
   if (includeReplies.value === null) {
-    includeReplies.value = false
-  } else if (includeReplies.value === false) {
     includeReplies.value = true
+  } else if (includeReplies.value === true) {
+    includeReplies.value = false
   } else {
     includeReplies.value = null
   }
 }
 
-const openDatePicker = (type: "start" | "end") => {
-  datePickerType.value = type
-  tempDate.value =
-    type === "start"
-      ? periodStart.value
-        ? new Date(periodStart.value * 1000)
-        : new Date()
-      : periodEnd.value
-      ? new Date(periodEnd.value * 1000)
-      : new Date()
-  datePickerDialog.value = true
-}
-
-const confirmDatePicker = () => {
-  if (tempDate.value) {
-    const timestamp = Math.floor(tempDate.value.getTime() / 1000)
-    if (datePickerType.value === "start") {
-      periodStart.value = timestamp
-    } else {
-      periodEnd.value = timestamp
-    }
-  }
-  datePickerDialog.value = false
-}
-
 definePageMeta({
   alias: ["/p/:name()"]
 })
@@ -344,12 +329,12 @@ definePageMeta({
 useHead({
   title: computed(() => {
     if (notFound.value) {
-      return "User not found"
+      return "Publisher not found"
     }
     if (user.value) {
       return user.value.nick || user.value.name
     }
-    return "Loading user..."
+    return "Loading publisher..."
   }),
   meta: computed(() => {
     if (user.value) {
@@ -364,6 +349,7 @@ useHead({
 
 defineOgImage({
   component: "ImageCard",
+  // @ts-ignore
   title: computed(() =>
     user.value ? user.value.nick || user.value.name : "Publisher Profile"
   ),
@@ -398,14 +384,12 @@ defineOgImage({
 
 .sidebar {
   order: 1;
-  overflow-y: auto;
   height: auto;
-  max-height: 100vh;
 }
 
 @media (min-width: 960px) {
   .layout {
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 1fr 2fr;
   }
 
   .main {
@@ -420,7 +404,8 @@ defineOgImage({
 @media (min-width: 1280px) {
   .sidebar {
     position: sticky;
-    top: calc(68px + 8px);
+    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}/id/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(`/id/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(`/id/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,73 +1,21 @@
-<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 v-if="done" type="success" 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
-          v-else-if="!!error"
-          type="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 v-if="spell.expiredAt" class="d-flex align-center gap-2 mb-4">
-            <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("/") || ""
+
 interface SnSpell {
   type: number
   account: {
@@ -77,13 +25,13 @@ interface SnSpell {
   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",
@@ -93,14 +41,17 @@ 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>(
+      `/id/spells/${encodeURIComponent(spellWord)}`
+    )
     spell.value = resp
   } catch (err: unknown) {
     error.value = err instanceof Error ? err.message : String(err)
+  } finally {
+    loading.value = false
   }
 }
 
@@ -117,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/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

@@ -61,7 +61,7 @@ export const useUserStore = defineStore("user", () => {
           console.error("Failed to fetch user... ", e)
         }
 
-        console.log(`[UserStore] Logged as @${user.value!.name}`)
+        // 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 * from "./post"
-export type { SnVerification, SnPublisher } from './publisher'
+export * from "./publisher"
-export type { SnActivity } from './activity'
+export * from "./activity"
-export type { SnWalletOrder, OrderStatus } from './order'
+export * from "./order"
-export type { SnVersion } from './version'
+export * from "./version"
-export type { SnAccountLink, SnAccountBadge, SnAccountPerkSubscription, SnAccountProfile, SnAccount } from './user'
+export * from "./user"
-export type { GeoIpLocation, SnAuthChallenge, SnAuthSession, SnAuthFactor, SnAccountConnection } from './geo'
+export * from "./geo"
+export * from "./realm"

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
+}

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

@@ -99,12 +99,17 @@ export default defineNuxtConfig({
           borderRadiusSmall: "8px"
         },
         Input: {
-          borderRadius: "8px",
+          borderRadius: "8px"
-          borderRadiusMedium: "8px",
+        },
-          borderRadiusSmall: "4px"
+        Select: {
+          borderRadius: "8px"
+        },
+        Dropdown: {
+          borderRadius: "8px"
         },
         Button: {
           borderRadius: "8px",
+          borderRadiusLarge: "12px",
           borderRadiusMedium: "8px",
           borderRadiusSmall: "4px"
         }

package.json

@@ -49,6 +49,8 @@
     "@types/node": "^24.10.1",
     "daisyui": "^5.5.5",
     "naive-ui": "^2.43.2",
-    "tailwindcss": "^4.1.17"
+    "tailwindcss": "^4.1.17",
+    "unplugin-auto-import": "^20.3.0",
+    "unplugin-vue-components": "^30.0.0"
   }
 }