✨ Realm page
This commit is contained in:
532
app/pages/realms/[slug].vue
Normal file
532
app/pages/realms/[slug].vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user