💄 Redesigned publisher page

app/components.d.ts

@@ -20,11 +20,15 @@ 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']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NForm: typeof import('naive-ui')['NForm']
@@ -48,6 +52,9 @@ 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']
@@ -66,11 +73,15 @@ 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 NDropdown: typeof import('naive-ui')['NDropdown']
   const NEmpty: typeof import('naive-ui')['NEmpty']
   const NForm: typeof import('naive-ui')['NForm']
@@ -94,6 +105,9 @@ 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']

app/pages/publishers/[name].vue

@@ -1,195 +1,177 @@
 <template>
-  <div v-if="user">
+  <div>
+    <div class="fixed inset-0" :style="pageStyle" />
     <img
       :src="userBackground"
-      class="object-cover w-full max-h-48 mb-8"
-      style="aspect-ratio: 16/7"
+      class="w-full max-h-48 object-cover object-top"
+      :style="{ aspectRatio: '16/7', opacity: headerOpacity }"
     />
-
-    <v-container>
-      <div class="layout">
-        <div class="main">
-          <!-- Filter Section -->
-          <v-card class="mb-4">
-            <v-tabs
-              v-model="activeCategoryTab"
-              color="primary"
-              class="mb-2"
-              grow
+    <div v-if="user" class="relative min-h-layout backdrop-blur-md">
+      <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"
             >
-              <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">
-                    @{{ user.name }}
-                  </div>
+                  <div class="text-sm opacity-80">@{{ user.name }}</div>
                 </div>
               </div>
-              <div v-if="htmlBio" class="bio-prose" v-html="htmlBio"></div>
-            </v-card-text>
-          </v-card>
+              <article
+                v-if="htmlBio"
+                class="bio-prose prose prose-sm dark:prose-invert prose-slate"
+                v-html="htmlBio"
+              ></article>
+            </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 v-else-if="notFound" class="flex justify-center items-center h-full">
-    <v-empty-state
-      icon="mdi-account-off"
-      title="User not found"
-      text="The user profile you're trying to access is not found."
-    />
-  </div>
-  <div v-else class="flex justify-center items-center h-full">
-    <v-progress-circular indeterminate size="64" color="primary" />
+    </div>
+    <div
+      v-else-if="notFound"
+      class="relative flex justify-center items-center h-full"
+    >
+      <n-empty
+        description="The publisher profile you're trying to access is not found."
+      >
+        <template #icon>
+          <n-icon :component="UserX" />
+        </template>
+      </n-empty>
+    </div>
+    <div v-else class="relative flex justify-center items-center h-full">
+      <n-spin size="large" />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from "vue"
+import { useWindowScroll } from "@vueuse/core"
 import { useMarkdownProcessor } from "~/composables/useMarkdownProcessor"
 import type { SnPublisher } from "~/types/api"
 import type { PostListParams } from "~/composables/usePostList"
-
 import PostList from "~/components/Post/PostList.vue"
+import {
+  Reply,
+  Paperclip,
+  ArrowUpDown,
+  Filter,
+  Search,
+  ChevronDown,
+  ChevronUp,
+  UserX
+} from "lucide-vue-next"
 
 const route = useRoute()
 
@@ -202,7 +184,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 +227,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 +272,9 @@ const mediaOnly = ref(false)
 const orderDesc = ref(true)
 const showAdvancedFilters = ref(false)
 const queryTerm = ref("")
-const order = ref<string | undefined>(undefined)
-const periodStart = ref<number | undefined>(undefined)
-const periodEnd = ref<number | undefined>(undefined)
-
-// Date picker dialog
-const datePickerDialog = ref(false)
-const datePickerType = ref<"start" | "end">("start")
-const tempDate = ref<Date | undefined>(undefined)
+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 = {
@@ -269,74 +283,36 @@ const postListParams = computed<PostListParams>(() => {
     mediaOnly: mediaOnly.value,
     orderDesc: orderDesc.value,
     queryTerm: queryTerm.value || undefined,
-    order: order.value,
-    periodStart: periodStart.value,
-    periodEnd: periodEnd.value
+    order: order.value ?? undefined,
+    periodStart: periodStart.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 +320,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 +340,7 @@ useHead({
 
 defineOgImage({
   component: "ImageCard",
+  // @ts-ignore
   title: computed(() =>
     user.value ? user.value.nick || user.value.name : "Publisher Profile"
   ),
@@ -405,7 +382,7 @@ defineOgImage({
 
 @media (min-width: 960px) {
   .layout {
-    grid-template-columns: 2fr 1fr;
+    grid-template-columns: 1fr 2fr;
   }
 
   .main {
@@ -420,7 +397,8 @@ defineOgImage({
 @media (min-width: 1280px) {
   .sidebar {
     position: sticky;
-    top: calc(68px + 8px);
+    top: calc(var(--header-height) + 8px);
+    align-self: start;
   }
 }
 </style>

nuxt.config.ts

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