💄 Improvements and adjustments in new UI

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,7 +25,7 @@
         @load="imageLoaded = true"
         @error="imageLoaded = true"
       />
-    </template>
+    </div>
 
     <audio
       v-else-if="itemType == 'audio'"
@@ -105,8 +108,8 @@ const blurhashContainerStyle = computed(() => {
 
 const containerStyle = computed(() => {
   return {
-    "max-height": props.maxHeight ?? "720px",
-    "aspect-ratio": aspectRatio.value
+    maxHeight: props.maxHeight ?? "720px",
+    aspectRatio: aspectRatio.value?.toString()
   }
 })
 

app/components/Attachment/AttachmentList.vue

@@ -19,9 +19,14 @@
             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>

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
-      height="auto"
-      class="space-y-4 overflow-y-hidden"
-      side="end"
-      @load="loadMore"
-    >
+    <n-infinite-scroll :distance="0" @load="loadMore" style="overflow: auto">
       <template v-for="item in posts" :key="item.id">
         <post-item
+          class="mb-4"
           :item="item"
-          @react="(symbol, attitude, delta) => $emit('react', item.id, symbol, attitude, delta)"
+          @react="
+            (symbol, attitude, delta) =>
+              $emit('react', item.id, symbol, attitude, delta)
+          "
           @click="router.push('/posts/' + item.id)"
         />
       </template>
 
       <!-- Loading State -->
-      <template #loading>
-        <div class="flex justify-center py-4">
-          <v-progress-circular indeterminate size="32" />
-        </div>
-      </template>
+      <div v-if="loading" class="flex justify-center py-4">
+        <n-spin size="medium" />
+      </div>
 
       <!-- Empty State -->
-      <template #empty>
-        <div v-if="!posts" class="text-center py-8 text-muted-foreground">
-          <v-icon icon="mdi-post-outline" size="48" class="mb-2 opacity-50" />
-          <p>No posts found</p>
-        </div>
-      </template>
-    </v-infinite-scroll>
+      <div
+        v-if="!loading && posts.length === 0 && !hasError"
+        class="text-center py-8 text-muted-foreground"
+      >
+        <n-icon :component="FileText" size="48" class="mb-2 opacity-50" />
+        <p>No posts found</p>
+      </div>
+    </n-infinite-scroll>
   </div>
 </template>
 
 <script setup lang="ts">
 import { usePostList } from "~/composables/usePostList"
 import type { PostListParams } from "~/composables/usePostList"
+import { FileText } from "lucide-vue-next"
 
 import PostItem from "./PostItem.vue"
 
@@ -60,12 +59,7 @@ defineEmits<{
   react: [postId: string, symbol: string, attitude: number, delta: number]
 }>()
 
-const { posts, hasError, error, loadMore, refresh } =
-  usePostList(props.params)
+const { posts, hasError, error, loading, loadMore, refresh } = usePostList(
+  props.params
+)
 </script>
-
-<style>
-.post-list .v-infinite-scroll .v-infinite-scroll__side:first-child {
-  display: none;
-}
-</style>

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" />
-        <p>No replies yet</p>
-      </div>
+        No Replies
+      </n-empty>
     </div>
   </n-card>
 </template>

app/components/Post/RepliesList.vue

@@ -33,15 +33,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">
-          <i class="mdi mdi-comment-outline"></i>
-        </n-icon>
-        <p>No replies yet</p>
-      </div>
+        No Replies
+      </n-empty>
     </n-infinite-scroll>
   </div>
 </template>

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/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" />

app/pages/publishers/[name].vue

@@ -1,12 +1,12 @@
 <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-4 sm:p-8">
         <div class="layout">
           <div class="sidebar flex flex-col gap-3">
@@ -375,9 +375,7 @@ defineOgImage({
 
 .sidebar {
   order: 1;
-  overflow-y: auto;
   height: auto;
-  max-height: 100vh;
 }
 
 @media (min-width: 960px) {