refactor(feed): optimize feed display and error handling

- Introduced a constant `SIZE` to manage the number of feeds displayed, improving maintainability.
- Updated the feed count display to use `list.data.feedCount` for accuracy.
- Enhanced error handling in `callNotFound` to specifically manage `FetchError` instances, improving robustness.

These changes aim to streamline feed management and enhance error reporting in the application.

Signed-off-by: Innei <tukon479@gmail.com>

apps/ssr/client/pages/(main)/share/lists/[id]/index.tsx

@@ -48,6 +48,8 @@ const FeedRow = memo<{ feed: Feed["feed"] }>(({ feed }) => {
   )
 })
 
+// Backend limit
+const SIZE = 5
 FeedRow.displayName = "FeedRow"
 
 export function Component() {
@@ -142,7 +144,7 @@ export function Component() {
                 <div className="divide-material-ultra-thick flex items-center divide-x">
                   <div className="px-4 text-center">
                     <div className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">
-                      {list.data.list.feedIds?.length || 0}
+                      {list.data.feedCount || 0}
                     </div>
                     <div className="text-sm text-zinc-500 dark:text-zinc-400">
                       {(list.data.list.feedIds?.length || 0) > 1 ? "Feeds" : "Feed"}
@@ -189,13 +191,14 @@ export function Component() {
 
           <div className="grid gap-3 sm:grid-cols-1 lg:grid-cols-2">
             {listData.feedIds
-              ?.slice(0, 7)
+              ?.slice(0, SIZE)
               .map((feedId) => <FeedRow feed={feedMap[feedId]!} key={feedId} />)}
           </div>
 
-          {"feedCount" in list.data && list.data.feedCount > 7 && (
+          {"feedCount" in list.data && list.data.feedCount > SIZE && (
             <div className="mt-6 text-center">
               <button
+                type="button"
                 onClick={handleOpenInFollowApp}
                 className="hover:text-accent text-sm text-zinc-500 transition-colors dark:text-zinc-400"
               >

apps/ssr/client/pages/(main)/share/users/[id]/metadata.ts

@@ -20,7 +20,7 @@ export default defineMetadata(async ({ params, apiClient, origin }): Promise<Met
         id: isBizId(handle || "") ? handle : undefined,
       },
     })
-    .catch((e) => callNotFound(e.message))
+    .catch(callNotFound)
 
   const realUserId = profileRes.data.id
   const [subscriptionsRes, listsRes] = await Promise.allSettled([

apps/ssr/src/lib/not-found.ts

@@ -1,8 +1,13 @@
+import { FetchError } from "ofetch"
+
 export class NotFoundError extends Error {
   constructor(reason: string) {
     super(`Page not found: ${reason}`)
   }
 }
-export const callNotFound = (reason: string) => {
-  throw new NotFoundError(reason)
+export const callNotFound = (e: any) => {
+  if (e instanceof FetchError && e.status === 404) {
+    throw new NotFoundError(e.message)
+  }
+  throw e
 }