✨ Realm page

app/components.d.ts

@@ -48,6 +48,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']
@@ -105,6 +106,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']

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/pages/accounts/[name].vue

@@ -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/publishers/[name].vue

@@ -30,6 +30,15 @@
                 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 -->

app/pages/realms/[slug].vue

@@ -0,0 +1,532 @@
+<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 px-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"
+                @click="handleJoin"
+              >
+                <template #icon>
+                  <n-icon :component="UserPlus" />
+                </template>
+                Join Realm
+              </n-button>
+            </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>
+            <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)
+
+// 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
+  }
+}
+
+// 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}!`)
+    // Redirect to the realm page without invite query
+    await navigateTo(`/realms/${realm.value.slug}`)
+  } catch (err) {
+    message.error(err instanceof Error ? err.message : String(err))
+  } finally {
+    isJoining.value = false
+  }
+}
+
+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/types/api/index.ts

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

app/types/api/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
+}