Add guiderail for the second nest level in tree topic

resources/js/components/forum/post-guiderail.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="position-absolute post-guiderail post-guiderail-to-parent"/>
   <div class="position-absolute post-guiderail post-guiderail-to-sibling" v-if="hasNextSibling"/>
+  <div class="position-absolute post-guiderail post-guiderail-of-parent" v-if="parentHasNextSibling"/>
 </template>
 
 <script>
 export default {
   name: 'VuePostGuiderail',
   props: {
     hasNextSibling: {required: false, default: false},
+    parentHasNextSibling: {required: false, default: false},
   },
 };
 </script>

resources/js/components/forum/post.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="card card-post card-post-folded" :class="postIndentCssClasses" v-if="postFolded">
-    <vue-post-guiderail v-if="guiderailVisible" :has-next-sibling="hasNextSibling"/>
+    <vue-post-guiderail
+      v-if="guiderailVisible"
+      :has-next-sibling="hasNextSibling"
+      :parent-has-next-sibling="parentHasNextSibling"
+    />
     <div class="card-body cursor-pointer" @click="postUnfold">
       <vue-icon name="postFolded"/>
       {{ post.user.name }},
@@ -14,7 +18,11 @@
          {'is-deleted': hidden, 'not-read': !post.is_read, 'highlight-flash': highlight, 'post-deleted-collapsed': isCollapsed},
          postIndentCssClasses
        ]">
-    <vue-post-guiderail v-if="guiderailVisible" :has-next-sibling="hasNextSibling"/>
+    <vue-post-guiderail
+      v-if="guiderailVisible"
+      :has-next-sibling="hasNextSibling"
+      :parent-has-next-sibling="parentHasNextSibling"
+    />
     <div v-if="post.deleted_at"
          @click="isCollapsed = !isCollapsed"
          class="post-delete card-body text-decoration-none">
@@ -535,6 +543,13 @@ export default {
       }
       return this.$props.treeItem.nestLevel >= 2;
     },
+    parentHasNextSibling(): boolean {
+      const level = this.$props.treeItem.nestLevel;
+      if (level <= 2) {
+        return false;
+      }
+      return store.getters['posts/parentPostHasNextSibling'](this.$props.post);
+    },
     postDropdownVisible(): boolean {
       return this.postDropdownItems.length > 0;
     },

resources/js/store/modules/posts.ts

@@ -16,7 +16,11 @@ const state: Paginator = {
 };
 
 const getters = {
-  posts: state => Object.values(state.data).sort((a, b) => ((a as Post).created_at! > (b as Post).created_at!) ? 1 : -1),
+  posts(state): Post[] {
+    const posts: Post[] = Object.values(state.data);
+    posts.sort((a, b) => a.created_at > b.created_at ? 1 : -1); // this mutates state! Ugh!
+    return posts;
+  },
   linearTopicPosts(state, getters): Post[] {
     return getters.posts;
   },
@@ -26,13 +30,28 @@ const getters = {
   treeTopicPostsRemaining(state, getters): TreePost[] {
     return getters.treeTopicPosts.slice(1);
   },
-  treeTopicPosts(state, getters, rootState, rootGetters): TreePost[] {
-    const posts: Post[] = Object.values(state.data);
-    return postsOrdered(posts, rootGetters['topics/treeTopicPostOrdering']);
+  treeTopicPosts(state, getters): TreePost[] {
+    return Array.from(getters.treeTopicPostsMap.values());
+  },
+  treeTopicPostsMap(state, getters, rootState, rootGetters): Map<number, TreePost> {
+    const treePosts = new Map<number, TreePost>();
+    postsOrdered(getters.posts, rootGetters['topics/treeTopicPostOrdering'])
+      .forEach(treePost => treePosts.set(treePost.post.id, treePost));
+    return treePosts;
   },
   exists: state => (id: number) => id in state.data,
   currentPage: state => state.current_page,
   totalPages: state => state.last_page,
+  parentPostHasNextSibling: (state, getters) => (post: Post): boolean => {
+    if (post.parentPostId === null) {
+      return false;
+    }
+    const parentPost: TreePost = getters.treeTopicPostsMap.get(post.parentPostId);
+    if (parentPost.post.parentPostId === null) {
+      return false;
+    }
+    return parentPost.treeItem.hasNextSibling;
+  },
 };
 
 const mutations = {

resources/js/types/models.ts

@@ -164,7 +164,7 @@ export interface Post {
   editor?: User;
   deleter_name?: string;
   delete_reason?: string;
-  created_at: Date | null;
+  created_at: Date;
   updated_at: Date | null;
   deleted_at: Date | null;
   text: string;

resources/sass/components/forum/_tree_topic.scss

@@ -1,25 +1,30 @@
 @use "../../../feature/theme/theme" as theme;
 
+$indent-width:               16px;
+$guiderail-post-left-offset: 10px;
+$guiderail-post-top-offset:  18px;
+$post-top-margin:            20px;
+
 .card-post.indent {
   &.indent-none {margin-left: 0;}
-  &.indent-1 {margin-left: 16px * 1;}
-  &.indent-2 {margin-left: 16px * 2;}
-  &.indent-3 {margin-left: 16px * 3;}
-  &.indent-4 {margin-left: 16px * 4;}
-  &.indent-5 {margin-left: 16px * 5;}
-  &.indent-6 {margin-left: 16px * 6;}
-  &.indent-7 {margin-left: 16px * 7;}
-  &.indent-8 {margin-left: 16px * 8;}
-  &.indent-9 {margin-left: 16px * 9;}
-  &.indent-10 {margin-left: 16px * 10;}
-  &.indent-11 {margin-left: 16px * 11;}
-  &.indent-12 {margin-left: 16px * 12;}
+  &.indent-1 {margin-left: $indent-width * 1;}
+  &.indent-2 {margin-left: $indent-width * 2;}
+  &.indent-3 {margin-left: $indent-width * 3;}
+  &.indent-4 {margin-left: $indent-width * 4;}
+  &.indent-5 {margin-left: $indent-width * 5;}
+  &.indent-6 {margin-left: $indent-width * 6;}
+  &.indent-7 {margin-left: $indent-width * 7;}
+  &.indent-8 {margin-left: $indent-width * 8;}
+  &.indent-9 {margin-left: $indent-width * 9;}
+  &.indent-10 {margin-left: $indent-width * 10;}
+  &.indent-11 {margin-left: $indent-width * 11;}
+  &.indent-12 {margin-left: $indent-width * 12;}
 }
 
 .post-guiderail {
   z-index:      -1;
-  left:         -10px;
-  width:        10px;
+  width:        $guiderail-post-left-offset;
+  left:         -$guiderail-post-left-offset;
   border-width: 2px;
   border-style: solid;
   @include theme.light {
@@ -31,11 +36,8 @@
 }
 
 .post-guiderail-to-parent {
-  $topOffset:                18px;
-  $height:                   20px;
-
-  height:                    $height + $topOffset;
-  top:                       -$topOffset;
+  top:                       -$guiderail-post-top-offset;
+  height:                    $guiderail-post-top-offset + $post-top-margin;
   border-bottom-left-radius: 6px;
   border-top:                none;
   border-right:              none;
@@ -48,3 +50,12 @@
   top:           0;
   height:        100%;
 }
+
+.post-guiderail-of-parent {
+  border-top:    none;
+  border-right:  none;
+  border-bottom: none;
+  top:           -$guiderail-post-top-offset;
+  left:          -($guiderail-post-left-offset + $indent-width);
+  height:        calc(100% + $guiderail-post-top-offset);
+}