+ pageMenuKey() for adding queryParam.query into keys of `<ASubMe…

…nu>`

* fix new page or query won't update menu items by replace the prop `postPages` with `queryParam` for passing it as the `queryKey` of `useApiPosts()` to sync `data` with `pages/posts.vue`
* now will only expand menus of the current and previous cursor when pages get updated as currently it's not possible to move page backwards
@ `<PostNav>`

* now will display `H3Error.toJSON()` & `Error.stack` which is in html string: https://github.com/nuxt/nuxt/blob/fcf023e611efb662124164b5cbcae12503b0ee0a/packages/nuxt/src/core/runtime/nitro/error.ts#L19
* wrapping with a new root level `div.container`
@ error.vue

* partial revert 9046c33 due to TanStack/query#7733 @ `<PostRendererList>`
@ fe

fe/src/components/post/Nav.vue

@@ -5,10 +5,10 @@
     <AMenu
         v-model:selectedKeys="selectedThreads" v-model:openKeys="expandedPages" @click="e => selectThread(e)"
         forceSubMenuRender :inlineIndent="16" mode="inline">
-        <template v-for="posts in postPages">
+        <template v-for="posts in data?.pages ?? []">
             <ASubMenu
                 v-for="cursor in [posts.pages.currentCursor]"
-                :key="cursorKey(cursor)" :eventKey="cursorKey(cursor)" :title="cursorTemplate(cursor)">
+                :key="pageMenuKey(cursor)" :eventKey="pageMenuKey(cursor)" :title="cursorTemplate(cursor)">
                 <AMenuItem
                     v-for="thread in posts.threads" :key="threadMenuKey(cursor, thread.tid)"
                     ref="threadMenuItemRefs" :title="thread.title"
@@ -49,12 +49,13 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { faAngleLeft, faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import _ from 'lodash';
 
-const { postPages } = defineProps<{ postPages: Array<ApiPosts['response']> }>();
+const { queryParam } = defineProps<{ queryParam?: ApiPosts['queryParam'] }>();
 const route = useRoute();
 const router = useRouter();
 const highlightPostStore = useHighlightPostStore();
 const { viewportTopmostPost } = storeToRefs(useViewportTopmostPostStore());
 const hydrationStore = useHydrationStore();
+const { data } = useApiPosts(computed(() => queryParam));
 const expandedPages = ref<string[]>([]);
 const selectedThreads = ref<string[]>([]);
 const threadMenuItemRefs = ref<ComponentPublicInstance[]>([]);
@@ -91,6 +92,7 @@ const navigate = async (cursor: Cursor, postIdObj: PostIdObj) =>
         params: { ...route.params, cursor }
     });
 const cursorKey = (cursor: Cursor) => `cursor/${cursor}`;
+const pageMenuKey = (cursor: Cursor) => `${queryParam?.query}/${cursorKey(cursor)}`;
 const threadMenuKey = (cursor: Cursor, tid: Tid) => `${cursorKey(cursor)}/tid/${tid}`;
 const selectThread: ToPromise<MenuClickEventHandler> = async ({ domEvent, key }) => {
     if (!(domEvent.target as Element).classList.contains('post-nav-reply')) { // ignore clicks on reply link
@@ -129,8 +131,13 @@ const menuReplyClasses = (reply: Reply) => {
     /* eslint-enable @typescript-eslint/naming-convention */
 };
 
-watchEffect(() => {
-    expandedPages.value = postPages.map(i => cursorKey(i.pages.currentCursor));
+watchImmediate(() => data.value?.pages, () => {
+    if (data.value === undefined)
+        return;
+    const currentCursor = getRouteCursorParam(route);
+    const previousCursor = data.value.pages[
+        data.value.pages.findIndex(i => i.pages.currentCursor === currentCursor) - 1]?.pages.currentCursor;
+    expandedPages.value = [pageMenuKey(previousCursor), pageMenuKey(currentCursor)];
 });
 watch(viewportTopmostPost, (to, from) => {
     if (to === undefined)

fe/src/components/post/renderer/list/List.vue

@@ -13,9 +13,7 @@ import _ from 'lodash';
 
 const { posts } = defineProps<{ posts: ApiPosts['response'] }>();
 const nestedPosts = computed(() => {
-    // https://github.com/TanStack/query/pull/6657
-    // eslint-disable-next-line unicorn/prefer-structured-clone
-    const newPosts = _.cloneDeep(posts) as // https://github.com/microsoft/TypeScript/issues/33591
+    const newPosts = refDeepClone(posts) as // https://github.com/microsoft/TypeScript/issues/33591
         Modify<ApiPosts['response'], { threads: Array<ThreadWithGroupedSubReplies<SubReply>> }>;
     newPosts.threads = newPosts.threads.map(thread => {
         thread.replies = thread.replies.map(reply => {

fe/src/error.vue

@@ -1,11 +1,21 @@
 <template>
 <NuxtLayout>
-    <PlaceholderError :error="new ApiResponseError(error.statusCode, error.statusMessage ?? '')" />
+    <div class="container">
+        <PlaceholderError
+            :error="new ApiResponseError(
+                error.statusCode,
+                _.isEmpty(error.statusMessage) || error.statusMessage === undefined ? error.message : error.statusMessage
+            )" />
+        <!-- eslint-disable-next-line vue/no-v-html -->
+        <div v-if="'stack' in error" v-html="error.stack" />
+        <pre v-if="'toJSON' in error">{{ JSON.stringify(error.toJSON()) }}</pre>
+    </div>
 </NuxtLayout>
 </template>
 
 <script setup lang="ts">
 import type { NuxtError } from '#app';
+import _ from 'lodash';
 
 defineProps<{ error: NuxtError }>();
 </script>

fe/src/pages/posts.vue

@@ -9,7 +9,7 @@
     </aside>
     <div v-if="!(data === undefined || _.isEmpty(data.pages) || _.isEmpty(route.params))" class="container-fluid">
         <div class="row flex-nowrap">
-            <LazyPostNav v-if="renderType === 'list'" :postPages="data.pages" />
+            <LazyPostNav v-if="renderType === 'list'" :queryParam="queryParam" />
             <div class="post-page col mx-auto ps-0" :class="{ 'renderer-list': renderType === 'list' }">
                 <PostPage
                     v-for="(page, pageIndex) in data.pages"