From f4276f72416ab0eb8171b843d475d31f13533a44 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 1 Aug 2022 23:20:27 +0300
Subject: made quick settings into their own component, added quick view
 settings, added both to conversation view

---
 src/components/timeline/timeline.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 266c1d9a..627cafbb 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -16,7 +16,8 @@
       >
         {{ $t('timeline.up_to_date') }}
       </div>
-      <TimelineQuickSettings v-if="!embedded" />
+      <QuickFilterSettings v-if="!embedded" />
+      <QuickViewSettings v-if="!embedded" />
     </div>
     <div :class="classes.body">
       <div
-- 
cgit v1.2.3-70-g09d2


From 77127e2a588abb5bf329506ff7e006021b086e90 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Aug 2022 21:00:27 +0300
Subject: you can now pin lists

---
 src/App.scss                                       |  15 ++-
 src/components/lists_menu/lists_menu_content.js    |  32 +++---
 src/components/lists_menu/lists_menu_content.vue   |  16 +--
 src/components/nav_panel/nav_panel.js              | 123 ++++++---------------
 src/components/nav_panel/nav_panel.vue             |  56 +++-------
 src/components/timeline/timeline.js                |   1 +
 src/components/timeline/timeline.vue               |   2 +-
 src/components/timeline_menu/timeline_menu.js      |  16 ++-
 src/components/timeline_menu/timeline_menu.vue     |   8 +-
 .../timeline_menu/timeline_menu_content.js         |  52 ---------
 .../timeline_menu/timeline_menu_content.vue        |  31 ------
 11 files changed, 103 insertions(+), 249 deletions(-)
 delete mode 100644 src/components/timeline_menu/timeline_menu_content.js
 delete mode 100644 src/components/timeline_menu/timeline_menu_content.vue

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/App.scss b/src/App.scss
index c75c990a..4c9a8884 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -117,8 +117,15 @@ h4 {
   margin: 0;
 }
 
+.iconLetter {
+  display: inline-block;
+  text-align: center;
+  font-weight: 1000;
+}
+
 i[class*=icon-],
-.svg-inline--fa {
+.svg-inline--fa,
+.iconLetter {
   color: $fallback--icon;
   color: var(--icon, $fallback--icon);
 }
@@ -746,13 +753,15 @@ option {
 }
 
 .fa-scale-110 {
-  &.svg-inline--fa {
+  &.svg-inline--fa,
+  &.iconLetter {
     font-size: 1.1em;
   }
 }
 
 .fa-old-padding {
-  &.svg-inline--fa {
+  &.svg-inline--fa,
+  &.iconLetter {
     padding: 0 0.3em;
   }
 }
diff --git a/src/components/lists_menu/lists_menu_content.js b/src/components/lists_menu/lists_menu_content.js
index 37e7868c..99fea0f0 100644
--- a/src/components/lists_menu/lists_menu_content.js
+++ b/src/components/lists_menu/lists_menu_content.js
@@ -1,28 +1,26 @@
 import { mapState } from 'vuex'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome
-} from '@fortawesome/free-solid-svg-icons'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 
-library.add(
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome
-)
+export const getListEntries = state => state.lists.allLists.map(list => ({
+  name: 'list-' + list.id,
+  routeObject: { name: 'lists-timeline', params: { id: list.id } },
+  labelRaw: list.title,
+  iconLetter: list.title[0]
+}))
 
-const ListsMenuContent = {
+export const ListsMenuContent = {
+  props: [
+    'showPin'
+  ],
   created () {
     this.$store.dispatch('startFetchingLists')
   },
+  components: {
+    NavigationEntry
+  },
   computed: {
     ...mapState({
-      lists: state => state.lists.allLists,
+      lists: getListEntries,
       currentUser: state => state.users.currentUser,
       privateMode: state => state.instance.private,
       federating: state => state.instance.federating
diff --git a/src/components/lists_menu/lists_menu_content.vue b/src/components/lists_menu/lists_menu_content.vue
index e910d6eb..9c58b092 100644
--- a/src/components/lists_menu/lists_menu_content.vue
+++ b/src/components/lists_menu/lists_menu_content.vue
@@ -1,17 +1,7 @@
 <template>
-  <ul>
-    <li
-      v-for="list in lists.slice().reverse()"
-      :key="list.id"
-    >
-      <router-link
-        class="menu-item"
-        :to="{ name: 'lists-timeline', params: { id: list.id } }"
-      >
-        {{ list.title }}
-      </router-link>
-    </li>
-  </ul>
+<ul>
+  <NavigationEntry v-for="item in lists" :key="item.name" :show-pin="showPin" :item="item" />
+</ul>
 </template>
 
 <script src="./lists_menu_content.js"></script>
diff --git a/src/components/nav_panel/nav_panel.js b/src/components/nav_panel/nav_panel.js
index 7cc3122d..10998113 100644
--- a/src/components/nav_panel/nav_panel.js
+++ b/src/components/nav_panel/nav_panel.js
@@ -1,6 +1,8 @@
-import TimelineMenuContent from '../timeline_menu/timeline_menu_content.vue'
-import ListsMenuContent from '../lists_menu/lists_menu_content.vue'
+import { getListEntries, ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
 import { mapState, mapGetters } from 'vuex'
+import { TIMELINES, ROOT_ITEMS } from 'src/components/navigation/navigation.js'
+import { filterNavigation } from 'src/components/navigation/filter.js'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -30,67 +32,6 @@ library.add(
   faStream,
   faList
 )
-
-export const TIMELINES = {
-  home: {
-    route: 'friends',
-    anonRoute: 'public-timeline',
-    icon: 'home',
-    label: 'nav.home_timeline',
-    criteria: ['!private']
-  },
-  public: {
-    route: 'public-timeline',
-    anon: true,
-    icon: 'users',
-    label: 'nav.public_tl',
-    criteria: ['!private']
-  },
-  twkn: {
-    route: 'public-external-timeline',
-    anon: true,
-    icon: 'globe',
-    label: 'nav.twkn',
-    criteria: ['!private', 'federating']
-  },
-  bookmarks: {
-    route: 'bookmarks',
-    icon: 'bookmark',
-    label: 'nav.bookmarks'
-  },
-  dms: {
-    route: 'dms',
-    icon: 'envelope',
-    label: 'nav.dms'
-  }
-}
-export const ROOT_ITEMS = {
-  interactions: {
-    route: 'interactions',
-    icon: 'bell',
-    label: 'nav.interactions'
-  },
-  chats: {
-    route: 'chats',
-    icon: 'comments',
-    label: 'nav.chats',
-    badgeGetter: 'unreadChatCount'
-  },
-  friendRequests: {
-    route: 'friend-requests',
-    icon: 'user-plus',
-    label: 'nav.friend_requests',
-    criteria: ['lockedUser'],
-    badgeGetter: 'followRequestCount'
-  },
-  about: {
-    route: 'about',
-    anon: true,
-    icon: 'info-circle',
-    label: 'nav.about'
-  }
-}
-
 const NavPanel = {
   created () {
     if (this.currentUser && this.currentUser.locked) {
@@ -98,8 +39,8 @@ const NavPanel = {
     }
   },
   components: {
-    TimelineMenuContent,
-    ListsMenuContent
+    ListsMenuContent,
+    NavigationEntry
   },
   data () {
     return {
@@ -134,6 +75,7 @@ const NavPanel = {
   },
   computed: {
     ...mapState({
+      lists: getListEntries,
       currentUser: state => state.users.currentUser,
       followRequestCount: state => state.api.followRequests.length,
       privateMode: state => state.instance.private,
@@ -143,31 +85,36 @@ const NavPanel = {
       collapsed: state => state.serverSideStorage.prefsStorage.simple.collapseNav
     }),
     rootItems () {
-      return Object
-        .entries({ ...ROOT_ITEMS })
-        .map(([k, v]) => ({ ...v, name: k }))
-        .filter(({ criteria, anon, anonRoute }) => {
-          const set = new Set(criteria || [])
-          if (!this.federating && set.has('federating')) return false
-          if (this.private && set.has('!private')) return false
-          if (!this.currentUser && !(anon || anonRoute)) return false
-          if ((!this.currentUser || !this.currentUser.locked) && set.has('lockedUser')) return false
-          return true
-        })
+      return filterNavigation(
+        Object
+          .entries({ ...ROOT_ITEMS })
+          .map(([k, v]) => ({ ...v, name: k })),
+        {
+          isFederating: this.federating,
+          isPrivate: this.private,
+          currentUser: this.currentUser
+        }
+      )
     },
     pinnedList () {
-      return Object
-        .entries({ ...TIMELINES, ...ROOT_ITEMS })
-        .filter(([k]) => this.pinnedItems.has(k))
-        .map(([k, v]) => ({ ...v, name: k }))
-        .filter(({ criteria, anon, anonRoute }) => {
-          const set = new Set(criteria || [])
-          if (!this.federating && set.has('federating')) return false
-          if (this.private && set.has('!private')) return false
-          if (!this.currentUser && !(anon || anonRoute)) return false
-          if (this.currentUser && !this.currentUser.locked && set.has('locked')) return false
-          return true
-        })
+      return filterNavigation(
+        [
+          ...Object
+            .entries({
+              ...TIMELINES,
+              ...ROOT_ITEMS
+            })
+            .filter(([k]) => this.pinnedItems.has(k))
+            .map(([k, v]) => ({ ...v, name: k })),
+          ...this.lists.filter((k) => this.pinnedItems.has(k.name))
+
+        ],
+        {
+          isFederating: this.federating,
+          isPrivate: this.private,
+          currentUser: this.currentUser
+        }
+      )
     },
     ...mapGetters(['unreadChatCount'])
   }
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 99a4571e..767ba6ec 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -5,13 +5,18 @@
         <span>
           <span v-for="item in pinnedList" :key="item.name" class="pinned-item">
             <router-link
-              :to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
+              :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
             >
               <FAIcon
+                v-if="item.icon"
                 fixed-width
-                class="fa-scale-110 fa-old-padding "
+                class="fa-scale-110 fa-old-padding"
                 :icon="item.icon"
               />
+              <span
+                v-if="item.iconLetter"
+                class="iconLetter fa-scale-110 fa-old-padding"
+              >{{ item.iconLetter }}</span>
             </router-link>
           </span>
         </span>
@@ -48,7 +53,9 @@
             v-show="showTimelines"
             class="timelines-background"
           >
-            <TimelineMenuContent class="timelines" :content="timelinesList" />
+            <ul class="timelines">
+              <NavigationEntry v-for="item in timelinesList" :key="item.name" :show-pin="true" :item="item" />
+            </ul>
           </div>
         </li>
         <li v-if="currentUser">
@@ -81,34 +88,10 @@
             v-show="showLists"
             class="timelines-background"
           >
-            <ListsMenuContent class="timelines" />
+            <ListsMenuContent :showPin="true" class="timelines" />
           </div>
         </li>
-        <li v-for="item in rootItems" :key="item.name">
-          <router-link
-            class="menu-item"
-            :to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
-          >
-            <FAIcon
-              fixed-width
-              class="fa-scale-110 fa-old-padding "
-              :icon="item.icon"
-            />{{ $t(item.label) }}
-            <button
-              type="button"
-              class="button-unstyled"
-              @click.stop.prevent="togglePin(item.name)"
-              >
-              <FAIcon
-                fixed-width
-                class="fa-scale-110 fa-old-padding "
-                :class="{ 'veryfaint': !isPinned(item.name) }"
-                :transform="!isPinned(item.name) ? 'rotate-45' : ''"
-                icon="thumbtack"
-              />
-            </button>
-          </router-link>
-        </li>
+        <NavigationEntry v-for="item in rootItems" :key="item.name" :show-pin="true" :item="item" />
       </ul>
     </div>
   </div>
@@ -220,16 +203,13 @@
     margin-right: 0.8em;
   }
 
-  .badge {
-    position: absolute;
-    right: 0.6rem;
-    top: 1.25em;
-  }
-
   .pinned-item {
-    .router-link-exact-active .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
+    .router-link-active {
+      & .svg-inline--fa,
+      & .iconLetter {
+        color: $fallback--text;
+        color: var(--selectedMenuText, $fallback--text);
+      }
     }
   }
 }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8f6cae66..ee590c4b 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -28,6 +28,7 @@ const Timeline = {
     'footerSlipgate' // reference to an element where we should put our footer
   ],
   data () {
+    console.log(this.timelineName)
     return {
       paused: false,
       unfocused: false,
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 627cafbb..fad3ff13 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
-      <TimelineMenu v-if="!embedded" />
+      <TimelineMenu v-if="!embedded" :timeline-name="timelineName"/>
       <button
         v-if="showLoadButton"
         class="button-default loadmore-button"
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 5a67b0a5..d74fbf4e 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -1,6 +1,8 @@
 import Popover from '../popover/popover.vue'
-import TimelineMenuContent from './timeline_menu_content.vue'
+import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
+import { ListsMenuContent } from '../lists_menu/lists_menu_content.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { TIMELINES } from 'src/components/navigation/navigation.js'
 import {
   faChevronDown
 } from '@fortawesome/free-solid-svg-icons'
@@ -22,11 +24,13 @@ export const timelineNames = () => {
 const TimelineMenu = {
   components: {
     Popover,
-    TimelineMenuContent
+    NavigationEntry,
+    ListsMenuContent
   },
   data () {
     return {
-      isOpen: false
+      isOpen: false,
+      timelinesList: Object.entries(TIMELINES).map(([k, v]) => ({ ...v, name: k }))
     }
   },
   created () {
@@ -34,6 +38,12 @@ const TimelineMenu = {
       this.$store.dispatch('setLastTimeline', this.$route.name)
     }
   },
+  computed: {
+    useListsMenu () {
+      const route = this.$route.name
+      return route === 'lists-timeline'
+    }
+  },
   methods: {
     openMenu () {
       // $nextTick is too fast, animation won't play back but
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 5ef96328..9acaff46 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -10,7 +10,10 @@
     @close="() => isOpen = false"
   >
     <template #content>
-      <TimelineMenuContent :content="timelinesList" />
+    <ListsMenuContent v-if="useListsMenu" :showPin="false" class="timelines" />
+    <ul v-else>
+      <NavigationEntry v-for="item in timelinesList" :key="item.name" :show-pin="false" :item="item" />
+    </ul>
     </template>
     <template #trigger>
       <span class="button-unstyled title timeline-menu-title">
@@ -138,8 +141,7 @@
       background-color: $fallback--lightBg;
       background-color: var(--selectedMenu, $fallback--lightBg);
       color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
+      color: var(--selectedMenuText, $fallback--text); --faint: var(--selectedMenuFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
       --lightText: var(--selectedMenuLightText, $fallback--lightText);
       --icon: var(--selectedMenuIcon, $fallback--icon);
diff --git a/src/components/timeline_menu/timeline_menu_content.js b/src/components/timeline_menu/timeline_menu_content.js
deleted file mode 100644
index c5b1cff2..00000000
--- a/src/components/timeline_menu/timeline_menu_content.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import { mapState } from 'vuex'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome
-} from '@fortawesome/free-solid-svg-icons'
-
-library.add(
-  faUsers,
-  faGlobe,
-  faBookmark,
-  faEnvelope,
-  faHome
-)
-
-const TimelineMenuContent = {
-  props: ['content'],
-  methods: {
-    isPinned (item) {
-      return this.pinnedItems.has(item)
-    },
-    togglePin (item) {
-      if (this.isPinned(item)) {
-        this.$store.commit('removeCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
-      } else {
-        this.$store.commit('addCollectionPreference', { path: 'collections.pinnedNavItems', value: item })
-      }
-    }
-  },
-  computed: {
-    ...mapState({
-      currentUser: state => state.users.currentUser,
-      privateMode: state => state.instance.private,
-      federating: state => state.instance.federating,
-      pinnedItems: state => new Set(state.serverSideStorage.prefsStorage.collections.pinnedNavItems)
-    }),
-    list () {
-      return (this.content || []).filter(({ criteria, anon, anonRoute }) => {
-        const set = new Set(criteria || [])
-        if (!this.federating && set.has('federating')) return false
-        if (this.private && set.has('!private')) return false
-        if (!this.currentUser && !(anon || anonRoute)) return false
-        return true
-      })
-    }
-  }
-}
-
-export default TimelineMenuContent
diff --git a/src/components/timeline_menu/timeline_menu_content.vue b/src/components/timeline_menu/timeline_menu_content.vue
deleted file mode 100644
index 7dc76b62..00000000
--- a/src/components/timeline_menu/timeline_menu_content.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-  <ul>
-    <li v-for="item in list" :key="item.name">
-      <router-link
-        class="menu-item"
-        :to="{ name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
-      >
-        <FAIcon
-          fixed-width
-          class="fa-scale-110 fa-old-padding "
-          :icon="item.icon"
-        />{{ $t(item.label) }}
-        <button
-          type="button"
-          class="button-unstyled"
-          @click.stop.prevent="togglePin(item.name)"
-          >
-          <FAIcon
-            fixed-width
-            class="fa-scale-110 fa-old-padding "
-            :class="{ 'veryfaint': !isPinned(item.name) }"
-            :transform="!isPinned(item.name) ? 'rotate-45' : ''"
-            icon="thumbtack"
-          />
-        </button>
-      </router-link>
-    </li>
-  </ul>
-</template>
-
-<script src="./timeline_menu_content.js"></script>
-- 
cgit v1.2.3-70-g09d2


From 80600137d1be64c83737ca3296f4aaae1033870c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Aug 2022 01:27:09 +0300
Subject: lint

---
 src/components/desktop_nav/desktop_nav.vue       |  2 +-
 src/components/lists_menu/lists_menu_content.vue | 11 ++--
 src/components/mobile_nav/mobile_nav.vue         |  2 +-
 src/components/nav_panel/nav_panel.vue           | 36 +++++++++----
 src/components/navigation/navigation_entry.vue   | 64 ++++++++++++------------
 src/components/navigation/navigation_pins.vue    | 12 +++--
 src/components/search_bar/search_bar.vue         |  4 +-
 src/components/timeline/timeline.vue             |  5 +-
 src/components/timeline_menu/timeline_menu.vue   | 17 +++++--
 9 files changed, 94 insertions(+), 59 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/desktop_nav/desktop_nav.vue b/src/components/desktop_nav/desktop_nav.vue
index bbb22707..5db7fc79 100644
--- a/src/components/desktop_nav/desktop_nav.vue
+++ b/src/components/desktop_nav/desktop_nav.vue
@@ -61,7 +61,7 @@
             :title="$t('nav.administration')"
           />
         </a>
-        <span class="spacer"/>
+        <span class="spacer" />
         <button
           v-if="currentUser"
           class="button-unstyled nav-icon"
diff --git a/src/components/lists_menu/lists_menu_content.vue b/src/components/lists_menu/lists_menu_content.vue
index 9c58b092..f93e80c9 100644
--- a/src/components/lists_menu/lists_menu_content.vue
+++ b/src/components/lists_menu/lists_menu_content.vue
@@ -1,7 +1,12 @@
 <template>
-<ul>
-  <NavigationEntry v-for="item in lists" :key="item.name" :show-pin="showPin" :item="item" />
-</ul>
+  <ul>
+    <NavigationEntry
+      v-for="item in lists"
+      :key="item.name"
+      :show-pin="showPin"
+      :item="item"
+    />
+  </ul>
 </template>
 
 <script src="./lists_menu_content.js"></script>
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 01a77589..9152879c 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -21,7 +21,7 @@
             class="alert-dot"
           />
         </button>
-        <NavigationPins class="pins"/>
+        <NavigationPins class="pins" />
       </div> <div class="item right">
         <button
           v-if="currentUser"
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 0da5379a..077f97fc 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -6,7 +6,7 @@
         class="panel-heading"
       >
         <NavigationPins :limit="6" />
-        <div class="spacer"/>
+        <div class="spacer" />
         <button
           class="button-unstyled"
           @click="toggleCollapse"
@@ -18,7 +18,10 @@
           />
         </button>
       </div>
-      <ul class="panel-body" v-if="!collapsed || forceExpand">
+      <ul
+        v-if="!collapsed || forceExpand"
+        class="panel-body"
+      >
         <li v-if="currentUser || !privateMode">
           <button
             class="button-unstyled menu-item"
@@ -40,7 +43,12 @@
             class="timelines-background"
           >
             <ul class="timelines">
-              <NavigationEntry v-for="item in timelinesItems" :key="item.name" :show-pin="true" :item="item" />
+              <NavigationEntry
+                v-for="item in timelinesItems"
+                :key="item.name"
+                :show-pin="true"
+                :item="item"
+              />
             </ul>
           </div>
         </li>
@@ -49,11 +57,11 @@
             class="button-unstyled menu-item"
             @click="toggleLists"
           >
-              <FAIcon
-                fixed-width
-                class="fa-scale-110"
-                icon="list"
-              />{{ $t("nav.lists") }}
+            <FAIcon
+              fixed-width
+              class="fa-scale-110"
+              icon="list"
+            />{{ $t("nav.lists") }}
             <FAIcon
               class="timelines-chevron"
               fixed-width
@@ -74,10 +82,18 @@
             v-show="showLists"
             class="timelines-background"
           >
-            <ListsMenuContent :showPin="true" class="timelines" />
+            <ListsMenuContent
+              :show-pin="true"
+              class="timelines"
+            />
           </div>
         </li>
-        <NavigationEntry v-for="item in rootItems" :key="item.name" :show-pin="true" :item="item" />
+        <NavigationEntry
+          v-for="item in rootItems"
+          :key="item.name"
+          :show-pin="true"
+          :item="item"
+        />
       </ul>
     </div>
   </div>
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 0dcf5d85..64601be6 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,42 +1,42 @@
 <template>
-<li class="NavigationEntry">
-  <router-link
-    class="menu-item"
-    :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
+  <li class="NavigationEntry">
+    <router-link
+      class="menu-item"
+      :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
     >
-    <FAIcon
-      v-if="item.icon"
-      fixed-width
-      class="fa-scale-110"
-      :icon="item.icon"
-      />
-    <span
-      class="icon iconLetter fa-scale-110"
-      v-if="item.iconLetter"
-      >{{ item.iconLetter }}
-    </span>{{ item.labelRaw || $t(item.label) }}
-    <button
-      type="button"
-      class="button-unstyled"
-      @click.stop.prevent="togglePin(item.name)"
-      >
       <FAIcon
-        v-if="showPin && currentUser"
+        v-if="item.icon"
         fixed-width
         class="fa-scale-110"
-        :class="{ 'veryfaint': !isPinned(item.name) }"
-        :transform="!isPinned(item.name) ? 'rotate-45' : ''"
-        icon="thumbtack"
+        :icon="item.icon"
+      />
+      <span
+        v-if="item.iconLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ item.iconLetter }}
+      </span>{{ item.labelRaw || $t(item.label) }}
+      <button
+        type="button"
+        class="button-unstyled"
+        @click.stop.prevent="togglePin(item.name)"
+      >
+        <FAIcon
+          v-if="showPin && currentUser"
+          fixed-width
+          class="fa-scale-110"
+          :class="{ 'veryfaint': !isPinned(item.name) }"
+          :transform="!isPinned(item.name) ? 'rotate-45' : ''"
+          icon="thumbtack"
         />
-      <div
-        v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        <div
+          v-if="item.badgeGetter && getters[item.badgeGetter]"
+          class="badge badge-notification"
         >
-        {{ getters[item.badgeGetter] }}
-      </div>
-    </button>
-  </router-link>
-</li>
+          {{ getters[item.badgeGetter] }}
+        </div>
+      </button>
+    </router-link>
+  </li>
 </template>
 
 <script src="./navigation_entry.js"></script>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index f421b2be..fc89ca3d 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -1,22 +1,24 @@
 <template>
   <span class="NavigationPins">
     <router-link
-      v-for="item in pinnedList" :key="item.name" class="pinned-item"
+      v-for="item in pinnedList"
+      :key="item.name"
+      class="pinned-item"
       :to="item.routeObject || { name: (currentUser || item.anon) ? item.route : item.anonRoute, params: { username: currentUser.screen_name } }"
-      >
+    >
       <FAIcon
         v-if="item.icon"
         fixed-width
         :icon="item.icon"
-            />
+      />
       <span
         v-if="item.iconLetter"
         class="iconLetter fa-scale-110 fa-old-padding"
-        >{{ item.iconLetter }}</span>
+      >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
         class="alert-dot"
-        />
+      />
     </router-link>
   </span>
 </template>
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 14842835..199a7500 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -47,8 +47,8 @@
           class="cancel-icon fa-scale-110 fa-old-padding"
         />
       </button>
-      <span class="spacer"/>
-      <span class="spacer"/>
+      <span class="spacer" />
+      <span class="spacer" />
     </template>
   </div>
 </template>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index fad3ff13..f842240b 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,7 +1,10 @@
 <template>
   <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
-      <TimelineMenu v-if="!embedded" :timeline-name="timelineName"/>
+      <TimelineMenu
+        v-if="!embedded"
+        :timeline-name="timelineName"
+      />
       <button
         v-if="showLoadButton"
         class="button-default loadmore-button"
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 9acaff46..e7250282 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -10,10 +10,19 @@
     @close="() => isOpen = false"
   >
     <template #content>
-    <ListsMenuContent v-if="useListsMenu" :showPin="false" class="timelines" />
-    <ul v-else>
-      <NavigationEntry v-for="item in timelinesList" :key="item.name" :show-pin="false" :item="item" />
-    </ul>
+      <ListsMenuContent
+        v-if="useListsMenu"
+        :show-pin="false"
+        class="timelines"
+      />
+      <ul v-else>
+        <NavigationEntry
+          v-for="item in timelinesList"
+          :key="item.name"
+          :show-pin="false"
+          :item="item"
+        />
+      </ul>
     </template>
     <template #trigger>
       <span class="button-unstyled title timeline-menu-title">
-- 
cgit v1.2.3-70-g09d2


From efc6b6b703971acd9cff7bb452a1fad40b801f87 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Aug 2022 20:49:20 +0300
Subject: add "scroll to top" button to timelines and notifications

---
 src/components/notifications/notifications.js  | 22 ++++++++++++++++++++--
 src/components/notifications/notifications.vue | 12 +++++++++++-
 src/components/timeline/timeline.js            |  5 +++++
 src/components/timeline/timeline.vue           |  8 ++++++++
 4 files changed, 44 insertions(+), 3 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 0851f407..7a3d6759 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -10,10 +10,11 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faCircleNotch
+  faCircleNotch,
+  faCircleUp
 )
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
@@ -34,6 +35,7 @@ const Notifications = {
   },
   data () {
     return {
+      showScrollTop: false,
       bottomedOut: false,
       // How many seen notifications to display in the list. The more there are,
       // the heavier the page becomes. This count is increased when loading
@@ -90,8 +92,16 @@ const Notifications = {
     notificationsToDisplay () {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
+    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     ...mapGetters(['unreadChatCount'])
   },
+  mounted () {
+    this.scrollerRef = this.$refs.root.closest('.column.-scrollable')
+    this.scrollerRef.addEventListener('scroll', this.updateScrollPosition)
+  },
+  unmounted () {
+    this.scrollerRef.removeEventListener('scroll', this.updateScrollPosition)
+  },
   watch: {
     unseenCountTitle (count) {
       if (count > 0) {
@@ -104,6 +114,14 @@ const Notifications = {
     }
   },
   methods: {
+    scrollToTop () {
+      const scrollable = this.scrollerRef
+      scrollable.scrollTo({ top: this.$refs.root.offsetTop })
+      // this.$refs.root.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    },
+    updateScrollPosition () {
+      this.showScrollTop = this.$refs.root.offsetTop < this.scrollerRef.scrollTop
+    },
     markAsSeen () {
       this.$store.dispatch('markNotificationsAsSeen')
       this.seenToDisplayCount = DEFAULT_SEEN_TO_DISPLAY_COUNT
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index e778e27b..16b5e8f6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -6,6 +6,7 @@
     <div
       :class="{ minimal: minimalMode }"
       class="Notifications"
+      ref="root"
     >
       <div :class="mainClass">
         <div
@@ -19,12 +20,21 @@
               class="badge badge-notification unseen-count"
             >{{ unseenCount }}</span>
           </div>
+          <button
+            v-if="showScrollTop"
+            class="button-unstyled scroll-to-top-button"
+            type="button"
+            @click="scrollToTop"
+          >
+            <FAIcon icon="circle-up" />
+          </button>
           <button
             v-if="unseenCount"
             class="button-default read-button"
+            type="button"
             @click.prevent="markAsSeen"
           >
-            {{ $t('notifications.read') }}
+        <FAIcon icon="filter" />
           </button>
           <NotificationFilters />
         </div>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 8f6cae66..6fca869f 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -29,6 +29,7 @@ const Timeline = {
   ],
   data () {
     return {
+      showScrollTop: false,
       paused: false,
       unfocused: false,
       bottomedOut: false,
@@ -123,6 +124,9 @@ const Timeline = {
     this.$store.commit('setLoading', { timeline: this.timelineName, value: false })
   },
   methods: {
+    scrollToTop () {
+      window.scrollTo({ top: this.$el.offsetTop })
+    },
     stopBlockingClicks: debounce(function () {
       this.blockingClicks = false
     }, 1000),
@@ -222,6 +226,7 @@ const Timeline = {
       }
     },
     handleScroll: throttle(function (e) {
+      this.showScrollTop = this.$el.offsetTop < window.scrollY
       this.determineVisibleStatuses()
       this.scrollLoad(e)
     }, 200),
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 627cafbb..a6bfeed1 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -2,6 +2,14 @@
   <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
+      <button
+        v-if="showScrollTop"
+        class="button-unstyled scroll-to-top-button"
+        type="button"
+        @click="scrollToTop"
+      >
+        <FAIcon icon="circle-up" />
+      </button>
       <button
         v-if="showLoadButton"
         class="button-default loadmore-button"
-- 
cgit v1.2.3-70-g09d2


From 986c4537021842e9b21c89c0ffb84033169cafe6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Aug 2022 22:31:48 +0300
Subject: use a bit more compact layout on mobile

---
 src/components/notifications/notifications.js  |  5 ++-
 src/components/notifications/notifications.vue |  8 +++-
 src/components/timeline/timeline.js            | 14 ++++--
 src/components/timeline/timeline.scss          | 16 +++++++
 src/components/timeline/timeline.vue           | 61 +++++++++++++++++++-------
 5 files changed, 83 insertions(+), 21 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 7a3d6759..058d2669 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -10,11 +10,12 @@ import {
 } from '../../services/notification_utils/notification_utils.js'
 import FaviconService from '../../services/favicon_service/favicon_service.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCircleUp } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faArrowUp, faMinus } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faCircleNotch,
-  faCircleUp
+  faArrowUp,
+  faMinus
 )
 
 const DEFAULT_SEEN_TO_DISPLAY_COUNT = 30
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d57166eb..7577164d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -26,7 +26,13 @@
             type="button"
             @click="scrollToTop"
           >
-            <FAIcon icon="circle-up" />
+          <FALayers class="fa-scale-110 fa-old-padding-layer">
+            <FAIcon icon="arrow-up" />
+            <FAIcon
+              icon="minus"
+              transform="up-7"
+            />
+          </FALayers>
           </button>
           <button
             v-if="unseenCount"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 6fca869f..4eb63f84 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -1,4 +1,5 @@
 import Status from '../status/status.vue'
+import { mapState } from 'vuex'
 import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
 import Conversation from '../conversation/conversation.vue'
 import TimelineMenu from '../timeline_menu/timeline_menu.vue'
@@ -6,11 +7,15 @@ import QuickFilterSettings from '../quick_filter_settings/quick_filter_settings.
 import QuickViewSettings from '../quick_view_settings/quick_view_settings.vue'
 import { debounce, throttle, keyBy } from 'lodash'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faCircleNotch, faCog } from '@fortawesome/free-solid-svg-icons'
+import { faCircleNotch, faCirclePlus, faCog, faMinus, faArrowUp, faCheck } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
   faCircleNotch,
-  faCog
+  faCog,
+  faMinus,
+  faArrowUp,
+  faCirclePlus,
+  faCheck
 )
 
 const Timeline = {
@@ -88,7 +93,10 @@ const Timeline = {
     },
     virtualScrollingEnabled () {
       return this.$store.getters.mergedConfig.virtualScrolling
-    }
+    },
+    ...mapState({
+      mobileLayout: state => state.interface.layoutType === 'mobile',
+    })
   },
   created () {
     const store = this.$store
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9e009fd3..9d442a95 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,10 +1,26 @@
 @import '../../_variables.scss';
 
 .Timeline {
+  .alert-dot {
+    border-radius: 100%;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
+    background-color: var(--cBlue);
+  }
+
   .loadmore-text {
     opacity: 1;
   }
 
+  .loadmore-button {
+    position: relative
+  }
+
   &.-blocked {
     cursor: progress;
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index a6bfeed1..f9f5bf92 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -8,22 +8,53 @@
         type="button"
         @click="scrollToTop"
       >
-        <FAIcon icon="circle-up" />
-      </button>
-      <button
-        v-if="showLoadButton"
-        class="button-default loadmore-button"
-        @click.prevent="showNewStatuses"
-      >
-        {{ loadButtonString }}
+        <FALayers class="fa-scale-110 fa-old-padding-layer">
+          <FAIcon icon="arrow-up" />
+          <FAIcon
+            icon="minus"
+            transform="up-7"
+          />
+        </FALayers>
       </button>
-      <div
-        v-else-if="!embedded"
-        class="loadmore-text faint"
-        @click.prevent
-      >
-        {{ $t('timeline.up_to_date') }}
-      </div>
+      <template v-if="mobileLayout">
+        <button
+          v-if="showLoadButton"
+          class="button-unstyled loadmore-button"
+          @click.prevent="showNewStatuses"
+        >
+          <FAIcon
+            fixed-width
+            icon="circle-plus"
+          />
+          <div class="alert-dot" />
+        </button>
+        <div
+          v-else-if="!embedded"
+          class="loadmore-text faint"
+          @click.prevent
+        >
+          <FAIcon
+            fixed-width
+            icon="check"
+          />
+        </div>
+      </template>
+      <template v-else>
+        <button
+          v-if="showLoadButton"
+          class="button-default loadmore-button"
+          @click.prevent="showNewStatuses"
+        >
+          {{ loadButtonString }}
+        </button>
+        <div
+          v-else-if="!embedded"
+          class="loadmore-text faint"
+          @click.prevent
+        >
+          {{ $t('timeline.up_to_date') }}
+        </div>
+      </template>
       <QuickFilterSettings v-if="!embedded" />
       <QuickViewSettings v-if="!embedded" />
     </div>
-- 
cgit v1.2.3-70-g09d2


From 3ffe62acdccb8b556fcaec9bfa772ffb8196ad84 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 30 Aug 2022 23:55:35 +0300
Subject: make "up to date" icon even more faint to distinguish it from actual
 interactive elements

---
 src/components/timeline/timeline.scss | 2 +-
 src/components/timeline/timeline.vue  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9d442a95..ede60a5d 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,7 +10,7 @@
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
-    background-color: var(--cBlue);
+    background-color: var(--cGreen);
   }
 
   .loadmore-text {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index a196d65e..cffd4b68 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -33,7 +33,7 @@
         </button>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint"
+          class="loadmore-text faint veryfaint"
           @click.prevent
         >
           <FAIcon
-- 
cgit v1.2.3-70-g09d2


From c041d7aa9b148e829a7539c2c2bd47814f4b10ce Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:16:05 +0300
Subject: refactor css for timeline buttons, make it a bit easier to tap them

---
 .../quick_filter_settings.vue                      | 15 -----------
 .../quick_view_settings/quick_view_settings.vue    | 15 -----------
 src/components/timeline/timeline.scss              | 30 ++++++++++++++++++++++
 src/components/timeline/timeline.vue               | 30 ++++++++++++----------
 4 files changed, 47 insertions(+), 43 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 982238e7..554c6bde 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -89,19 +89,4 @@
 <script src="./quick_filter_settings.js"></script>
 
 <style lang="scss">
-
-.QuickFilterSettings {
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
 </style>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 99b14a66..5fdfd608 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -76,19 +76,4 @@
 <script src="./quick_view_settings.js"></script>
 
 <style lang="scss">
-
-.QuickViewSettings {
-
-  > button {
-    line-height: 100%;
-    height: 100%;
-    width: var(--__panel-heading-height-inner);
-    text-align: center;
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-}
-
 </style>
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 900bdad3..c38ecfea 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,6 +13,36 @@
     background-color: var(--cGreen);
   }
 
+  .timeline-header-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding));
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .timeline-header-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
+
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index cffd4b68..c8aeaf1e 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -19,21 +19,25 @@
           />
         </FALayers>
       </button>
-      <template v-if="mobileLayout">
-        <button
+      <template v-if="mobileLayout && !embedded">
+        <div
+          class="timeline-header-button"
           v-if="showLoadButton"
-          class="button-unstyled loadmore-button"
-          @click.prevent="showNewStatuses"
         >
-          <FAIcon
-            fixed-width
-            icon="circle-plus"
-          />
-          <div class="alert-dot" />
-        </button>
+          <button
+            class="button-unstyled loadmore-button"
+            @click.prevent="showNewStatuses"
+          >
+            <FAIcon
+              fixed-width
+              icon="circle-plus"
+            />
+            <div class="alert-dot" />
+          </button>
+        </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint"
+          class="loadmore-text faint veryfaint timeline-header-icon"
           @click.prevent
         >
           <FAIcon
@@ -58,8 +62,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" />
-      <QuickViewSettings v-if="!embedded" />
+      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
     </div>
     <div :class="classes.body">
       <div
-- 
cgit v1.2.3-70-g09d2


From 8c4de692f462552a7416540392df0f2a260fe817 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Sep 2022 21:17:44 +0300
Subject: apply same for scrolltop button

---
 src/components/timeline/timeline.vue | 30 ++++++++++++++++--------------
 1 file changed, 16 insertions(+), 14 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index c8aeaf1e..fe5d4822 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -5,20 +5,22 @@
         v-if="!embedded"
         :timeline-name="timelineName"
       />
-      <button
-        v-if="showScrollTop"
-        class="button-unstyled scroll-to-top-button"
-        type="button"
-        @click="scrollToTop"
-      >
-        <FALayers class="fa-scale-110 fa-old-padding-layer">
-          <FAIcon icon="arrow-up" />
-          <FAIcon
-            icon="minus"
-            transform="up-7"
-          />
-        </FALayers>
-      </button>
+      <div class="timeline-header-button">
+        <button
+          v-if="showScrollTop"
+          class="button-unstyled scroll-to-top-button"
+          type="button"
+          @click="scrollToTop"
+        >
+          <FALayers class="fa-scale-110 fa-old-padding-layer">
+            <FAIcon icon="arrow-up" />
+            <FAIcon
+              icon="minus"
+              transform="up-7"
+            />
+          </FALayers>
+        </button>
+      </div>
       <template v-if="mobileLayout && !embedded">
         <div
           class="timeline-header-button"
-- 
cgit v1.2.3-70-g09d2


From ce6ce4b6cdd3aea2712ce73c0b0fd9d64372ac8e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Sep 2022 11:52:48 +0300
Subject: minor improvements

---
 src/components/notifications/notifications.scss | 2 +-
 src/components/timeline/timeline.scss           | 4 ++--
 src/components/timeline/timeline.vue            | 6 ++++--
 src/panel.scss                                  | 3 ++-
 4 files changed, 9 insertions(+), 6 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index b57dfb3a..245e3f47 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -36,7 +36,7 @@
     width: var(--__panel-heading-height);
     height: var(--__panel-heading-height);
     margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: -0.5em;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
 
     > button {
       box-sizing: border-box;
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 18a80a63..f5dbb639 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -19,7 +19,7 @@
     width: var(--__panel-heading-height);
     height: var(--__panel-heading-height);
     margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: -0.5em;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
 
     > button {
       box-sizing: border-box;
@@ -38,7 +38,7 @@
     align-self: stretch;
     text-align: center;
     width: var(--__panel-heading-height);
-    margin-right: -0.5em;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
 
     svg {
       font-size: 1.2em;
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index fe5d4822..15d097e8 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -5,9 +5,11 @@
         v-if="!embedded"
         :timeline-name="timelineName"
       />
-      <div class="timeline-header-button">
+      <div
+        class="timeline-header-button"
+        v-if="showScrollTop && !embedded"
+      >
         <button
-          v-if="showScrollTop"
           class="button-unstyled scroll-to-top-button"
           type="button"
           @click="scrollToTop"
diff --git a/src/panel.scss b/src/panel.scss
index 2e769e27..b5ef67e9 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -45,6 +45,7 @@
 .panel-heading,
 .panel-footer {
   --panel-heading-height-padding: 0.6em;
+  --__panel-heading-gap: 0.5em;
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
@@ -54,7 +55,7 @@
   grid-auto-flow: column;
   grid-template-columns: minmax(50%, 1fr);
   grid-auto-columns: auto;
-  grid-column-gap: 0.5em;
+  grid-column-gap: var(--__panel-heading-gap);
   flex: none;
   background-size: cover;
   padding: var(--panel-heading-height-padding);
-- 
cgit v1.2.3-70-g09d2


From 0331e42ee8576893dab2c6319ee5c0d62895b8d8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 9 Oct 2022 18:50:13 +0300
Subject: move definitions for timeline header buttons to Panel.scss, now
 called rightside buttons

---
 src/components/conversation/conversation.vue    |  2 ++
 src/components/notifications/notifications.scss | 21 ----------------
 src/components/notifications/notifications.vue  |  4 ++--
 src/components/timeline/timeline.scss           | 32 -------------------------
 src/components/timeline/timeline.vue            | 10 ++++----
 src/panel.scss                                  | 32 +++++++++++++++++++++++++
 6 files changed, 41 insertions(+), 60 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 61832566..3752e3c1 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -20,10 +20,12 @@
       <QuickFilterSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
       <QuickViewSettings
         v-if="!collapsable"
         :conversation="true"
+        class="rightside-button"
       />
     </div>
     <div class="conversation-body panel-body">
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 245e3f47..f71f9b76 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -29,27 +29,6 @@
       }
     }
   }
-
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
 }
 
 .notification {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 22f67e65..3f4b1b42 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -21,7 +21,7 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="timeline-header-button"
+            class="rightside-button"
             v-if="showScrollTop"
           >
             <button
@@ -46,7 +46,7 @@
           >
             {{ $t('notifications.read') }}
           </button>
-          <NotificationFilters class="timeline-header-button" />
+          <NotificationFilters class="rightside-button" />
         </div>
         <div class="panel-body">
           <div
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index f5dbb639..900bdad3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,38 +13,6 @@
     background-color: var(--cGreen);
   }
 
-  .timeline-header-button {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    height: var(--__panel-heading-height);
-    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    > button {
-      box-sizing: border-box;
-      padding: calc(1 * var(--panel-heading-height-padding)) 0;
-      height: 100%;
-      width: 100%;
-      text-align: center;
-
-      svg {
-        font-size: 1.2em;
-      }
-    }
-  }
-
-  .timeline-header-icon {
-    align-self: stretch;
-    text-align: center;
-    width: var(--__panel-heading-height);
-    margin-right: calc(-1 * var(--__panel-heading-gap));
-
-    svg {
-      font-size: 1.2em;
-    }
-  }
-
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 15d097e8..77480345 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -6,7 +6,7 @@
         :timeline-name="timelineName"
       />
       <div
-        class="timeline-header-button"
+        class="rightside-button"
         v-if="showScrollTop && !embedded"
       >
         <button
@@ -25,7 +25,7 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="timeline-header-button"
+          class="rightside-button"
           v-if="showLoadButton"
         >
           <button
@@ -41,7 +41,7 @@
         </div>
         <div
           v-else-if="!embedded"
-          class="loadmore-text faint veryfaint timeline-header-icon"
+          class="loadmore-text faint veryfaint rightside-icon"
           @click.prevent
         >
           <FAIcon
@@ -66,8 +66,8 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="timeline-header-button"/>
-      <QuickViewSettings v-if="!embedded" class="timeline-header-button"/>
+      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
+      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
     </div>
     <div :class="classes.body">
       <div
diff --git a/src/panel.scss b/src/panel.scss
index b5ef67e9..a53e47c6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -196,6 +196,38 @@
       }
     }
   }
+
+  .rightside-button {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    height: var(--__panel-heading-height);
+    margin: calc(-1 * var(--panel-heading-height-padding)) 0;
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    > button {
+      box-sizing: border-box;
+      padding: calc(1 * var(--panel-heading-height-padding)) 0;
+      height: 100%;
+      width: 100%;
+      text-align: center;
+
+      svg {
+        font-size: 1.2em;
+      }
+    }
+  }
+
+  .rightside-icon {
+    align-self: stretch;
+    text-align: center;
+    width: var(--__panel-heading-height);
+    margin-right: calc(-1 * var(--__panel-heading-gap));
+
+    svg {
+      font-size: 1.2em;
+    }
+  }
 }
 
 .panel-footer {
-- 
cgit v1.2.3-70-g09d2


From 1435b65e36a21dd3a05a9393803beb7e06bcd4ae Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 17 Oct 2022 21:50:37 +0300
Subject: add titles to mobile buttons

---
 src/components/notifications/notifications.vue | 1 +
 src/components/timeline/timeline.vue           | 3 +++
 src/i18n/en.json                               | 1 +
 3 files changed, 5 insertions(+)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 3f4b1b42..f9c90a7e 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -27,6 +27,7 @@
             <button
               class="button-unstyled scroll-to-top-button"
               type="button"
+              :title="$t('general.scroll_to_top')"
               @click="scrollToTop"
             >
               <FALayers class="fa-scale-110 fa-old-padding-layer">
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 77480345..e6038830 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -12,6 +12,7 @@
         <button
           class="button-unstyled scroll-to-top-button"
           type="button"
+          :title="$t('general.scroll_to_top')"
           @click="scrollToTop"
         >
           <FALayers class="fa-scale-110 fa-old-padding-layer">
@@ -30,6 +31,7 @@
         >
           <button
             class="button-unstyled loadmore-button"
+            :title="loadButtonString"
             @click.prevent="showNewStatuses"
           >
             <FAIcon
@@ -42,6 +44,7 @@
         <div
           v-else-if="!embedded"
           class="loadmore-text faint veryfaint rightside-icon"
+          :title="$t('timeline.up_to_date')"
           @click.prevent
         >
           <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 30b59e82..246e22cf 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -84,6 +84,7 @@
     "yes": "Yes",
     "no": "No",
     "peek": "Peek",
+    "scroll_to_top": "Scroll to top",
     "role": {
       "admin": "Admin",
       "moderator": "Moderator"
-- 
cgit v1.2.3-70-g09d2


From 3aadad30133928bdac3067dfc1fd7f94dbf70b52 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 1 Nov 2022 22:26:04 +0200
Subject: show counter in show new button on mobile

---
 src/components/timeline/timeline.js   |  7 +++++++
 src/components/timeline/timeline.scss | 15 +++++++++++++++
 src/components/timeline/timeline.vue  |  4 +++-
 3 files changed, 25 insertions(+), 1 deletion(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index f4efc5e8..b7414610 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -69,6 +69,13 @@ const Timeline = {
         return `${this.$t('timeline.show_new')} (${this.newStatusCount})`
       }
     },
+    mobileLoadButtonString () {
+      if (this.timeline.flushMarker !== 0) {
+        return '+'
+      } else {
+        return this.newStatusCount > 99 ? '∞' : this.newStatusCount
+      }
+    },
     classes () {
       let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 9fc2aeab..24a45070 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,6 +13,21 @@
     background-color: var(--badgeNeutral);
   }
 
+  .alert-badge {
+    font-size: 0.75em;
+    line-height: 1;
+    text-align: right;
+    border-radius: var(--tooltipRadius);
+    position: absolute;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.4em);
+    padding: 0.2em;
+    margin-left: 0.7em;
+    margin-top: -1em;
+    background-color: var(--badgeNeutral);
+    color: var(--badgeNeutralText);
+  }
+
   .loadmore-button {
     position: relative
   }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index e6038830..8a036fd0 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -38,7 +38,9 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-dot" />
+            <div class="alert-badge">
+              {{ mobileLoadButtonString }}
+            </div>
           </button>
         </div>
         <div
-- 
cgit v1.2.3-70-g09d2


From f715de43f2bae1593128f34f7362c1963a54e3a1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 7 Nov 2022 13:22:40 -0500
Subject: Add labels for timeline header

---
 src/components/popover/popover.js                              | 7 ++++++-
 src/components/popover/popover.vue                             | 1 +
 src/components/quick_filter_settings/quick_filter_settings.vue | 5 ++---
 src/components/quick_view_settings/quick_view_settings.vue     | 5 ++---
 src/components/timeline/timeline.vue                           | 1 +
 src/i18n/en.json                                               | 4 +++-
 6 files changed, 15 insertions(+), 8 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index dd332c35..72b7c511 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -43,7 +43,12 @@ const Popover = {
     overlayCentersSelector: String,
 
     // Lets hover popover stay when clicking inside of it
-    stayOnClick: Boolean
+    stayOnClick: Boolean,
+
+    triggerAttrs: {
+      type: Object,
+      default: {}
+    }
   },
   inject: ['popoversZLayer'], // override popover z layer
   data () {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 623af8d2..9506728e 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -7,6 +7,7 @@
       ref="trigger"
       class="button-unstyled popover-trigger-button"
       type="button"
+      v-bind="triggerAttrs"
       @click="onClick"
     >
       <slot name="trigger" />
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 54ea037e..87fcd716 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
+    :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -79,9 +80,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
-        <FAIcon icon="filter" />
-      </button>
+      <FAIcon icon="filter" />
     </template>
   </Popover>
 </template>
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index b0413cac..d7c9bf3b 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -3,6 +3,7 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
+    :triggerAttrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
@@ -66,9 +67,7 @@
       </div>
     </template>
     <template #trigger>
-      <button class="button-unstyled">
-        <FAIcon icon="bars" />
-      </button>
+      <FAIcon icon="bars" />
     </template>
   </Popover>
 </template>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 8a036fd0..15cf043e 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -47,6 +47,7 @@
           v-else-if="!embedded"
           class="loadmore-text faint veryfaint rightside-icon"
           :title="$t('timeline.up_to_date')"
+          :aria-disabled="true"
           @click.prevent
         >
           <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 246e22cf..f16f6380 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -807,7 +807,9 @@
     "no_more_statuses": "No more statuses",
     "no_statuses": "No statuses",
     "socket_reconnected": "Realtime connection established",
-    "socket_broke": "Realtime connection lost: CloseEvent code {0}"
+    "socket_broke": "Realtime connection lost: CloseEvent code {0}",
+    "quick_view_settings": "Quick view settings",
+    "quick_filter_settings": "Quick filter settings"
   },
   "status": {
     "favorites": "Favorites",
-- 
cgit v1.2.3-70-g09d2


From d41e7a4c6d23ae272097b12ecdf9062d82e378b6 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Mon, 7 Nov 2022 13:53:56 -0500
Subject: Make timeline a list of articles

---
 src/components/conversation/conversation.vue | 58 ++++++++++++++--------------
 src/components/thread_tree/thread_tree.vue   |  4 +-
 src/components/timeline/timeline.vue         |  3 ++
 3 files changed, 35 insertions(+), 30 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 3752e3c1..afa04db0 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -60,7 +60,7 @@
           v-if="shouldShowAncestors"
           class="thread-ancestors"
         >
-          <div
+          <article
             v-for="status in ancestorsOf(diveRoot)"
             :key="status.id"
             class="thread-ancestor"
@@ -130,7 +130,7 @@
                 </i18n-t>
               </div>
             </div>
-          </div>
+          </article>
         </div>
         <thread-tree
           v-for="status in showingTopLevel"
@@ -168,34 +168,36 @@
         v-if="isLinearView"
         class="thread-body"
       >
-        <status
-          v-for="status in conversation"
-          :key="status.id"
-          ref="statusComponent"
-          :inline-expanded="collapsable && isExpanded"
-          :statusoid="status"
-          :expandable="!isExpanded"
-          :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
-          :focused="focused(status.id)"
-          :in-conversation="isExpanded"
-          :highlight="getHighlight()"
-          :replies="getReplies(status.id)"
-          :in-profile="inProfile"
-          :profile-user-id="profileUserId"
-          class="conversation-status status-fadein panel-body"
+        <article>
+          <status
+            v-for="status in conversation"
+            :key="status.id"
+            ref="statusComponent"
+            :inline-expanded="collapsable && isExpanded"
+            :statusoid="status"
+            :expandable="!isExpanded"
+            :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
+            :focused="focused(status.id)"
+            :in-conversation="isExpanded"
+            :highlight="getHighlight()"
+            :replies="getReplies(status.id)"
+            :in-profile="inProfile"
+            :profile-user-id="profileUserId"
+            class="conversation-status status-fadein panel-body"
 
-          :toggle-thread-display="toggleThreadDisplay"
-          :thread-display-status="threadDisplayStatus"
-          :show-thread-recursively="showThreadRecursively"
-          :total-reply-count="totalReplyCount"
-          :total-reply-depth="totalReplyDepth"
-          :status-content-properties="statusContentProperties"
-          :set-status-content-property="setStatusContentProperty"
-          :toggle-status-content-property="toggleStatusContentProperty"
+            :toggle-thread-display="toggleThreadDisplay"
+            :thread-display-status="threadDisplayStatus"
+            :show-thread-recursively="showThreadRecursively"
+            :total-reply-count="totalReplyCount"
+            :total-reply-depth="totalReplyDepth"
+            :status-content-properties="statusContentProperties"
+            :set-status-content-property="setStatusContentProperty"
+            :toggle-status-content-property="toggleStatusContentProperty"
 
-          @goto="setHighlight"
-          @toggleExpanded="toggleExpanded"
-        />
+            @goto="setHighlight"
+            @toggleExpanded="toggleExpanded"
+          />
+        </article>
       </div>
     </div>
   </div>
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 4eaf597d..c6fffc71 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="thread-tree">
+  <article class="thread-tree">
     <status
       :key="status.id"
       ref="statusComponent"
@@ -113,7 +113,7 @@
         </template>
       </i18n-t>
     </div>
-  </div>
+  </article>
 </template>
 
 <script src="./thread_tree.js"></script>
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 15cf043e..f561d974 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -79,10 +79,12 @@
       <div
         ref="timeline"
         class="timeline"
+        role="list"
       >
         <conversation
           v-for="statusId in filteredPinnedStatusIds"
           :key="statusId + '-pinned'"
+          role="listitem"
           class="status-fadein"
           :status-id="statusId"
           :collapsable="true"
@@ -93,6 +95,7 @@
         <conversation
           v-for="status in filteredVisibleStatuses"
           :key="status.id"
+          role="listitem"
           class="status-fadein"
           :status-id="status.id"
           :collapsable="true"
-- 
cgit v1.2.3-70-g09d2


From b718c0c77d16bf917dc564404cb0fa61a2c535b3 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Tue, 8 Nov 2022 10:34:38 -0500
Subject: Use feed role for notifs and timelines

---
 src/components/notifications/notifications.vue | 2 +-
 src/components/timeline/timeline.vue           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 02a87fcc..3d5878d4 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -52,7 +52,7 @@
         </div>
         <div
           class="panel-body"
-          role="list"
+          role="feed"
         >
           <div
             v-for="notification in notificationsToDisplay"
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index f561d974..877a0cc0 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -79,7 +79,7 @@
       <div
         ref="timeline"
         class="timeline"
-        role="list"
+        role="feed"
       >
         <conversation
           v-for="statusId in filteredPinnedStatusIds"
-- 
cgit v1.2.3-70-g09d2


From 3c0e7882b10989424c3ec98413b555373efa1719 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 21 Nov 2022 22:17:33 +0200
Subject: lint

---
 src/components/emoji_input/emoji_input.vue                 | 13 ++++++++++---
 src/components/emoji_picker/emoji_picker.vue               |  4 ++--
 src/components/mobile_nav/mobile_nav.vue                   |  6 +++---
 src/components/notifications/notifications.vue             |  2 +-
 src/components/popover/popover.vue                         |  5 ++++-
 .../quick_filter_settings/quick_filter_settings.vue        |  2 +-
 src/components/quick_view_settings/quick_view_settings.vue |  2 +-
 src/components/search/search.js                            |  4 ++--
 src/components/timeline/timeline.vue                       | 14 ++++++++++----
 9 files changed, 34 insertions(+), 18 deletions(-)

(limited to 'src/components/timeline/timeline.vue')

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 63bf856e..c9bbc18f 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -6,9 +6,16 @@
   >
     <slot />
     <!-- TODO: make the 'x' disappear if at the end maybe? -->
-    <div class="hidden-overlay" :style="overlayStyle" ref="hiddenOverlay">
+    <div
+      ref="hiddenOverlay"
+      class="hidden-overlay"
+      :style="overlayStyle"
+    >
       <span>{{ preText }}</span>
-      <span class="caret" ref="hiddenOverlayCaret">x</span>
+      <span
+        ref="hiddenOverlayCaret"
+        class="caret"
+      >x</span>
       <span>{{ postText }}</span>
     </div>
     <template v-if="enableEmojiPicker">
@@ -33,9 +40,9 @@
       />
     </template>
     <Popover
+      ref="suggestorPopover"
       class="autocomplete-panel"
       placement="bottom"
-      ref="suggestorPopover"
     >
       <template #content>
         <div
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index a2c99c16..ff56d637 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -1,8 +1,8 @@
 <template>
   <Popover
+    ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    ref="popover"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
@@ -66,12 +66,12 @@
         >
           <div class="emoji-search">
             <input
+              ref="search"
               v-model="keyword"
               type="text"
               class="form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
-              ref="search"
             >
           </div>
           <div
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6e732d1f..d642008b 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -11,7 +11,7 @@
         <button
           class="button-unstyled mobile-nav-button"
           :title="$t('nav.mobile_sidebar')"
-          :aria-expanaded="this.$refs.sideDrawer && !this.$refs.sideDrawer.closed"
+          :aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
           @click.stop.prevent="toggleMobileSidebar()"
         >
           <FAIcon
@@ -51,7 +51,7 @@
     >
       <div class="mobile-notifications-header">
         <span class="title">{{ $t('notifications.notifications') }}</span>
-        <span class="spacer"/>
+        <span class="spacer" />
         <button
           v-if="notificationsAtTop"
           class="button-unstyled mobile-nav-button"
@@ -79,8 +79,8 @@
       </div>
       <div
         id="mobile-notifications"
-        class="mobile-notifications"
         ref="mobileNotifications"
+        class="mobile-notifications"
         @scroll="onScroll"
       />
     </aside>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 3d5878d4..633efca6 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -22,8 +22,8 @@
             >{{ unseenCount }}</span>
           </div>
           <div
-            class="rightside-button"
             v-if="showScrollTop"
+            class="rightside-button"
           >
             <button
               class="button-unstyled scroll-to-top-button"
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index c2cf2327..2869d736 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -12,7 +12,10 @@
     >
       <slot name="trigger" />
     </button>
-    <teleport :disabled="!teleport" to="#popovers">
+    <teleport
+      :disabled="!teleport"
+      to="#popovers"
+    >
       <transition name="fade">
         <div
           v-if="!hidden"
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 87fcd716..f2aa61ee 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -3,7 +3,7 @@
     trigger="click"
     class="QuickFilterSettings"
     :bound-to="{ x: 'container' }"
-    :triggerAttrs="{ title: $t('timeline.quick_filter_settings') }"
+    :trigger-attrs="{ title: $t('timeline.quick_filter_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index d7c9bf3b..4bd81c5b 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -3,7 +3,7 @@
     trigger="click"
     class="QuickViewSettings"
     :bound-to="{ x: 'container' }"
-    :triggerAttrs="{ title: $t('timeline.quick_view_settings') }"
+    :trigger-attrs="{ title: $t('timeline.quick_view_settings') }"
   >
     <template #content>
       <div class="dropdown-menu">
diff --git a/src/components/search/search.js b/src/components/search/search.js
index 8d4212cd..877d6f30 100644
--- a/src/components/search/search.js
+++ b/src/components/search/search.js
@@ -83,11 +83,11 @@ const Search = {
         this.lastStatusFetchCount = 0
       }
 
-      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, 'type': searchType })
+      this.$store.dispatch('search', { q: query, resolve: true, offset: this.statusesOffset, type: searchType })
         .then(data => {
           this.loading = false
 
-          let oldLength = this.statuses.length
+          const oldLength = this.statuses.length
 
           // Always append to old results. If new results are empty, this doesn't change anything
           this.userIds = this.userIds.concat(map(data.accounts, 'id'))
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 877a0cc0..2279f21a 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -6,8 +6,8 @@
         :timeline-name="timelineName"
       />
       <div
-        class="rightside-button"
         v-if="showScrollTop && !embedded"
+        class="rightside-button"
       >
         <button
           class="button-unstyled scroll-to-top-button"
@@ -26,8 +26,8 @@
       </div>
       <template v-if="mobileLayout && !embedded">
         <div
-          class="rightside-button"
           v-if="showLoadButton"
+          class="rightside-button"
         >
           <button
             class="button-unstyled loadmore-button"
@@ -72,8 +72,14 @@
           {{ $t('timeline.up_to_date') }}
         </div>
       </template>
-      <QuickFilterSettings v-if="!embedded" class="rightside-button"/>
-      <QuickViewSettings v-if="!embedded" class="rightside-button"/>
+      <QuickFilterSettings
+        v-if="!embedded"
+        class="rightside-button"
+      />
+      <QuickViewSettings
+        v-if="!embedded"
+        class="rightside-button"
+      />
     </div>
     <div :class="classes.body">
       <div
-- 
cgit v1.2.3-70-g09d2

