Create sidebar layout component

src/App.vue

@@ -20,7 +20,7 @@
       </div>
     </div>
   </header>
-  <router-view :key="route.fullPath" :class="{ wide: isPublicPage() }" />
+  <router-view :key="route.fullPath" />
 </template>
 
 <script setup lang="ts">

src/components/SidebarLayout.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="main" :class="{ wide: currentUser === null }">
+    <div class="content">
+      <slot name="content"></slot>
+    </div>
+    <sidebar></sidebar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { $ } from "vue/macros"
+
+import { useCurrentUser } from "@/store/user"
+import Sidebar from "./Sidebar.vue"
+
+const { currentUser } = $(useCurrentUser())
+</script>
+
+<style scoped lang="scss">
+@import "../styles/layout";
+@import "../styles/theme";
+</style>

src/views/About.vue

@@ -1,17 +1,16 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <div class="content about" v-if="instance">
+    <template #content v-if="instance">
       <h1>{{ instance.title }}</h1>
       <div class="description static-text" v-html="renderMarkdown(instance.description)"></div>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
 import { $ } from "vue/macros"
 
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { renderMarkdown } from "@/utils/markdown"
 

src/views/AboutPublic.vue

@@ -1,5 +1,5 @@
 <template>
-  <static-page v-if="instance">
+  <static-page v-if="instance" class="wide">
     <template #heading>{{ instance.title }}</template>
     <template #text>
       <div v-html="renderMarkdown(instance.description)"></div>

src/views/Ethereum.vue

@@ -1,5 +1,5 @@
 <template>
-  <static-page>
+  <static-page class="wide">
     <template #heading>Ethereum</template>
     <template #text>
       <div v-html="text"></div>

src/views/HomeTimeline.vue

@@ -1,11 +1,10 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <div class="content posts">
+    <template #content>
       <post-editor @post-created="insertPost"></post-editor>
       <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +14,7 @@ import { $ref } from "vue/macros"
 import { Post, getHomeTimeline } from "@/api/posts"
 import PostEditor from "@/components/PostEditor.vue"
 import PostList from "@/components/PostList.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const { ensureAuthToken } = useCurrentUser()

src/views/LandingPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="landing-page">
+  <div class="landing-page wide">
     <div class="instance-group">
       <div v-if="instance" class="instance-info">
         <h1 class="instance-title">{{ instance.title }}</h1>

src/views/NotificationList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <div class="content">
+    <template #content>
       <div
         class="notification"
         v-for="(notification, index) in notifications"
@@ -84,9 +84,8 @@
       >
         Show more notifications
       </button>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -97,7 +96,7 @@ import { updateNotificationMarker } from "@/api/markers"
 import { getNotifications, Notification } from "@/api/notifications"
 import Avatar from "@/components/Avatar.vue"
 import Post from "@/components/Post.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useInstanceInfo } from "@/store/instance"
 import { useNotifications } from "@/store/notifications"
 import { useCurrentUser } from "@/store/user"

src/views/PostDetail.vue

@@ -1,9 +1,9 @@
 <template>
-  <div id="main" ref="containerRef">
+  <sidebar-layout>
-    <div v-if="!isLoading && thread.length === 0" class="content not-found">
+    <template #content>
+      <div v-if="!isLoading && thread.length === 0" class="not-found">
         Not found
       </div>
-    <div v-else class="content posts">
       <post
         v-for="(post, index) in thread"
         :key="post.id"
@@ -15,9 +15,8 @@
         @comment-created="onCommentCreated(index, $event)"
         @post-deleted="onPostDeleted(index)"
       ></post>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -27,7 +26,7 @@ import { useRoute } from "vue-router"
 
 import { Post as PostObject, getPostContext } from "@/api/posts"
 import Post from "@/components/Post.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const route = useRoute()
@@ -37,7 +36,6 @@ let selectedId = $ref(route.params.postId as string)
 let highlightedId = $ref<string | null>(null)
 let thread = $ref<PostObject[]>([])
 let isLoading = $ref(true)
-const containerRef = $ref<HTMLElement | null>(null)
 const loader = $ref(getPostContext(authToken, selectedId))
 
 onMounted(async () => {
@@ -58,11 +56,12 @@ onMounted(async () => {
 })
 
 function scrollTo(postId: string, options: any = {}) {
-  if (containerRef === null) {
+  const container = document.getElementById("main")
+  if (!container) {
     return
   }
-  const containerOffset = containerRef.offsetTop // sticky header height or top margin
+  const containerOffset = container.offsetTop // sticky header height or top margin
-  const postElem: HTMLElement | null = containerRef.querySelector(`div[data-post-id="${postId}"]`)
+  const postElem: HTMLElement | null = container.querySelector(`div[data-post-id="${postId}"]`)
   if (postElem === null) {
     return
   }

src/views/PostOverlay.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="post && token" class="post-overlay">
+  <div v-if="post && token" class="post-overlay wide">
     <div v-if="canGoBack()" class="back-btn-wrapper">
       <a class="back-btn" title="Back" @click="goBack()">
         <img :src="require('@/assets/feather/arrow-left.svg')">

src/views/Profile.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="main" v-if="profile">
+  <sidebar-layout v-if="profile">
-    <div class="content posts">
+    <template #content>
       <div class="profile-block">
         <div class="profile-header">
           <img v-if="profile.header" :src="profile.header">
@@ -180,9 +180,8 @@
           :key="profile.id"
         ></profile-list-item>
       </template>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -210,7 +209,7 @@ import {
 import Avatar from "@/components/Avatar.vue"
 import PostList from "@/components/PostList.vue"
 import ProfileListItem from "@/components/ProfileListItem.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { BACKEND_URL } from "@/constants"
 import { useInstanceInfo } from "@/store/instance"
 import { useCurrentUser } from "@/store/user"

src/views/ProfileDirectory.vue

@@ -1,6 +1,7 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <div class="content profile-list">
+    <template #content>
+      <div class="profile-grid">
         <router-link
           v-for="profile in profiles"
           class="profile-list-item"
@@ -9,6 +10,7 @@
         >
           <profile-card :profile="profile" :compact="false"></profile-card>
         </router-link>
+      </div>
       <button
         v-if="isPageFull()"
         class="btn secondary next-btn"
@@ -16,9 +18,8 @@
       >
         Show more profiles
       </button>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -28,7 +29,7 @@ import { $ref } from "vue/macros"
 import { PAGE_SIZE } from "@/api/common"
 import { Profile, getProfiles } from "@/api/users"
 import ProfileCard from "@/components/ProfileCard.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const { ensureAuthToken } = useCurrentUser()
@@ -61,7 +62,7 @@ async function loadNextPage() {
 @import "../styles/layout";
 @import "../styles/theme";
 
-.profile-list {
+.profile-grid {
   display: grid;
   gap: $block-outer-padding;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

src/views/ProfileForm.vue

@@ -1,6 +1,7 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <form class="content settings" @submit.prevent="save()">
+    <template #content>
+      <form @submit.prevent="save()">
         <h1>Edit profile</h1>
         <div class="input-group">
           <label for="display-name">Display name</label>
@@ -77,8 +78,8 @@
           Save
         </button>
       </form>
-    <sidebar></sidebar>
+    </template>
-  </div>
+  </sidebar-layout>
 </template>
 
 <script setup lang="ts">
@@ -93,7 +94,7 @@ import {
   updateProfile,
 } from "@/api/users"
 import ProfileCard from "@/components/ProfileCard.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 import { setupAutoResize } from "@/utils/autoresize"
 import { renderMarkdownLite } from "@/utils/markdown"

src/views/PublicTimeline.vue

@@ -1,10 +1,9 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <div class="content posts">
+    <template #content>
       <post-list :posts="posts" @load-next-page="loadNextPage"></post-list>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -13,7 +12,7 @@ import { $ref } from "vue/macros"
 
 import { Post, getPublicTimeline } from "@/api/posts"
 import PostList from "@/components/PostList.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const { ensureAuthToken } = useCurrentUser()
@@ -30,6 +29,3 @@ async function loadNextPage(maxId: string) {
   posts.push(...nextPage)
 }
 </script>
-
-<style scoped lang="scss">
-</style>

src/views/SearchResultList.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <div class="content search-result-group">
+    <template #content>
       <loader v-if="isLoading"></loader>
       <div v-if="!isLoading" class="search-message">
         <template v-if="errorMessage">{{ errorMessage }}</template>
@@ -20,9 +20,8 @@
           :key="post.id"
         ></post>
       </div>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -36,7 +35,7 @@ import { Profile } from "@/api/users"
 import Loader from "@/components/Loader.vue"
 import Post from "@/components/Post.vue"
 import ProfileListItem from "@/components/ProfileListItem.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const route = useRoute()

src/views/SubscriptionPage.vue

@@ -1,13 +1,12 @@
 <template>
-  <div id="main" v-if="profile && isLocalUser()">
+  <sidebar-layout v-if="profile && isLocalUser()">
-    <div class="content">
+    <template #content>
       <component
         :is="isCurrentUser() ? SubscriptionSetup : Subscription"
         :profile="profile"
       ></component>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -16,7 +15,7 @@ import { $, $ref } from "vue/macros"
 import { useRoute } from "vue-router"
 
 import { getProfile, Profile } from "@/api/users"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import Subscription from "@/components/Subscription.vue"
 import SubscriptionSetup from "@/components/SubscriptionSetup.vue"
 import { useCurrentUser } from "@/store/user"

src/views/TagTimeline.vue

@@ -1,13 +1,12 @@
 <template>
-  <div id="main">
+  <sidebar-layout>
-    <div class="content posts">
+    <template #content>
       <post-list
         :posts="posts"
         @load-next-page="loadNextPage"
       ></post-list>
-    </div>
+    </template>
-    <sidebar></sidebar>
+  </sidebar-layout>
-  </div>
 </template>
 
 <script setup lang="ts">
@@ -16,7 +15,7 @@ import { useRoute } from "vue-router"
 
 import { Post, getTagTimeline } from "@/api/posts"
 import PostList from "@/components/PostList.vue"
-import Sidebar from "@/components/Sidebar.vue"
+import SidebarLayout from "@/components/SidebarLayout.vue"
 import { useCurrentUser } from "@/store/user"
 
 const route = useRoute()