From 433ea02a18c0328b8079a40657220633c09e363a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 18 Apr 2021 14:58:02 +0300
Subject: Changed some of TabSwitcher's internals for easier Vue3 migration

---
 src/components/user_profile/user_profile.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/components/user_profile')

diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index c0b55a6c..c5ccf747 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -3,7 +3,7 @@ import UserCard from '../user_card/user_card.vue'
 import FollowCard from '../follow_card/follow_card.vue'
 import Timeline from '../timeline/timeline.vue'
 import Conversation from '../conversation/conversation.vue'
-import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import List from '../list/list.vue'
 import withLoadMore from '../../hocs/with_load_more/with_load_more'
 import { library } from '@fortawesome/fontawesome-svg-core'
-- 
cgit v1.2.3-70-g09d2


From caed89f0ae64217602a2832bbf2b5df9b66c0999 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 25 Apr 2021 13:44:50 +0300
Subject: destroyed -> unmounted

---
 src/components/bookmark_timeline/bookmark_timeline.js                   | 2 +-
 src/components/chat/chat.js                                             | 2 +-
 src/components/media_modal/media_modal.js                               | 2 +-
 src/components/mobile_post_status_button/mobile_post_status_button.js   | 2 +-
 src/components/poll/poll.js                                             | 2 +-
 src/components/popover/popover.js                                       | 2 +-
 .../public_and_external_timeline/public_and_external_timeline.js        | 2 +-
 src/components/public_timeline/public_timeline.js                       | 2 +-
 src/components/tag_timeline/tag_timeline.js                             | 2 +-
 src/components/timeago/timeago.vue                                      | 2 +-
 src/components/timeline/timeline.js                                     | 2 +-
 src/components/user_profile/user_profile.js                             | 2 +-
 12 files changed, 12 insertions(+), 12 deletions(-)

(limited to 'src/components/user_profile')

diff --git a/src/components/bookmark_timeline/bookmark_timeline.js b/src/components/bookmark_timeline/bookmark_timeline.js
index 64b69e5d..5ac43d90 100644
--- a/src/components/bookmark_timeline/bookmark_timeline.js
+++ b/src/components/bookmark_timeline/bookmark_timeline.js
@@ -9,7 +9,7 @@ const Bookmarks = {
   components: {
     Timeline
   },
-  destroyed () {
+  unmounted () {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
   }
 }
diff --git a/src/components/chat/chat.js b/src/components/chat/chat.js
index b54f5fb2..aef11712 100644
--- a/src/components/chat/chat.js
+++ b/src/components/chat/chat.js
@@ -57,7 +57,7 @@ const Chat = {
     })
     this.setChatLayout()
   },
-  destroyed () {
+  unmounted () {
     window.removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('resize', this.handleLayoutChange)
     this.unsetChatLayout()
diff --git a/src/components/media_modal/media_modal.js b/src/components/media_modal/media_modal.js
index e7384c93..38d66160 100644
--- a/src/components/media_modal/media_modal.js
+++ b/src/components/media_modal/media_modal.js
@@ -98,7 +98,7 @@ const MediaModal = {
     document.addEventListener('keyup', this.handleKeyupEvent)
     document.addEventListener('keydown', this.handleKeydownEvent)
   },
-  destroyed () {
+  unmounted () {
     window.removeEventListener('popstate', this.hide)
     document.removeEventListener('keyup', this.handleKeyupEvent)
     document.removeEventListener('keydown', this.handleKeydownEvent)
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js
index 366ea89c..293b85fd 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.js
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.js
@@ -29,7 +29,7 @@ const MobilePostStatusButton = {
     }
     window.addEventListener('resize', this.handleOSK)
   },
-  destroyed () {
+  unmounted () {
     if (this.autohideFloatingPostButton) {
       this.deactivateFloatingPostButtonAutohide()
     }
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index 98db5582..4611a95c 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -17,7 +17,7 @@ export default {
     }
     this.$store.dispatch('trackPoll', this.pollId)
   },
-  destroyed () {
+  unmounted () {
     this.$store.dispatch('untrackPoll', this.pollId)
   },
   computed: {
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index bc6cd8e7..849846f5 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -178,7 +178,7 @@ const Popover = {
   created () {
     document.addEventListener('click', this.onClickOutside)
   },
-  destroyed () {
+  unmounted () {
     document.removeEventListener('click', this.onClickOutside)
     this.hidePopover()
   }
diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.js b/src/components/public_and_external_timeline/public_and_external_timeline.js
index cbd4491b..bfcce6ae 100644
--- a/src/components/public_and_external_timeline/public_and_external_timeline.js
+++ b/src/components/public_and_external_timeline/public_and_external_timeline.js
@@ -9,7 +9,7 @@ const PublicAndExternalTimeline = {
   created () {
     this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' })
   },
-  destroyed () {
+  unmounted () {
     this.$store.dispatch('stopFetchingTimeline', 'publicAndExternal')
   }
 }
diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js
index 66c40d3a..30693544 100644
--- a/src/components/public_timeline/public_timeline.js
+++ b/src/components/public_timeline/public_timeline.js
@@ -9,7 +9,7 @@ const PublicTimeline = {
   created () {
     this.$store.dispatch('startFetchingTimeline', { timeline: 'public' })
   },
-  destroyed () {
+  unmounted () {
     this.$store.dispatch('stopFetchingTimeline', 'public')
   }
 
diff --git a/src/components/tag_timeline/tag_timeline.js b/src/components/tag_timeline/tag_timeline.js
index 400c6a4b..bda61ae0 100644
--- a/src/components/tag_timeline/tag_timeline.js
+++ b/src/components/tag_timeline/tag_timeline.js
@@ -18,7 +18,7 @@ const TagTimeline = {
       this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag })
     }
   },
-  destroyed () {
+  unmounted () {
     this.$store.dispatch('stopFetchingTimeline', 'tag')
   }
 }
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index 55a2dd94..bed29020 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -31,7 +31,7 @@ export default {
   created () {
     this.refreshRelativeTimeObject()
   },
-  destroyed () {
+  unmounted () {
     clearTimeout(this.interval)
   },
   methods: {
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 44f749c3..b5a45926 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -122,7 +122,7 @@ const Timeline = {
     window.addEventListener('keydown', this.handleShortKey)
     setTimeout(this.determineVisibleStatuses, 250)
   },
-  destroyed () {
+  unmounted () {
     window.removeEventListener('scroll', this.handleScroll)
     window.removeEventListener('keydown', this.handleShortKey)
     if (typeof document.hidden !== 'undefined') document.removeEventListener('visibilitychange', this.handleVisibilityChange, false)
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index c5ccf747..8aa67765 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -46,7 +46,7 @@ const UserProfile = {
     this.load(routeParams.name || routeParams.id)
     this.tab = get(this.$route, 'query.tab', defaultTabKey)
   },
-  destroyed () {
+  unmounted () {
     this.stopFetching()
   },
   computed: {
-- 
cgit v1.2.3-70-g09d2


From 8d46fd78c7ada7600afe7b74932a6f2380964592 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Apr 2021 22:42:34 +0300
Subject: migrate to v-slot

---
 src/components/account_actions/account_actions.vue |  25 ++---
 src/components/chat_list/chat_list.vue             |   5 +-
 src/components/chat_message/chat_message.vue       |  32 +++---
 .../domain_mute_card/domain_mute_card.vue          |   4 +-
 src/components/extra_buttons/extra_buttons.vue     |  24 ++---
 .../moderation_tools/moderation_tools.vue          |  25 ++---
 .../notifications/notification_filters.vue         |   8 +-
 src/components/popover/popover.js                  |   2 +-
 src/components/react_button/react_button.vue       |  28 +++---
 src/components/selectable_list/selectable_list.vue |   7 +-
 .../settings_modal/helpers/modified_indicator.vue  |  16 +--
 src/components/settings_modal/settings_modal.vue   |  28 +++---
 .../settings_modal/tabs/mutes_and_blocks_tab.vue   |  73 ++++++--------
 src/components/status_popover/status_popover.vue   |   8 +-
 .../timeline/timeline_quick_settings.vue           | 109 +++++++++++----------
 src/components/timeline_menu/timeline_menu.vue     |  43 ++++----
 src/components/user_card/user_card.vue             |   6 +-
 .../user_list_popover/user_list_popover.vue        |  59 ++++++-----
 src/components/user_profile/user_profile.vue       |  10 +-
 .../user_reporting_modal/user_reporting_modal.vue  |   5 +-
 20 files changed, 238 insertions(+), 279 deletions(-)

(limited to 'src/components/user_profile')

diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index ab5d1d29..1e31151c 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -6,10 +6,7 @@
       :bound-to="{ x: 'container' }"
       remove-padding
     >
-      <div
-        slot="content"
-        class="account-tools-popover"
-      >
+      <template v-slot:content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
             <button
@@ -59,16 +56,15 @@
             {{ $t('user_card.message') }}
           </button>
         </div>
-      </div>
-      <div
-        slot="trigger"
-        class="ellipsis-button"
-      >
-        <FAIcon
-          class="icon"
-          icon="ellipsis-v"
-        />
-      </div>
+      </template>
+      <template v-slot:trigger>
+        <button class="button-unstyled ellipsis-button">
+          <FAIcon
+            class="icon"
+            icon="ellipsis-v"
+          />
+        </button>
+      </template>
     </Popover>
   </div>
 </template>
@@ -83,7 +79,6 @@
   }
 
   .ellipsis-button {
-    cursor: pointer;
     width: 2.5em;
     margin: -0.5em 0;
     padding: 0.5em 0;
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index e23eec13..f98b7ed2 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -23,10 +23,7 @@
         class="timeline"
       >
         <List :items="sortedChatList">
-          <template
-            slot="item"
-            slot-scope="{item}"
-          >
+          <template v-slot:item="{item}">
             <ChatListItem
               :key="item.id"
               :compact="false"
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 0777f880..0f3fc97d 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -50,7 +50,7 @@
                 @show="menuOpened = true"
                 @close="menuOpened = false"
               >
-                <div slot="content">
+                <template v-slot:content>
                   <div class="dropdown-menu">
                     <button
                       class="button-default dropdown-item dropdown-item-icon"
@@ -59,26 +59,28 @@
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
                     </button>
                   </div>
-                </div>
-                <button
-                  slot="trigger"
-                  class="button-default menu-icon"
-                  :title="$t('chats.more')"
-                >
-                  <FAIcon icon="ellipsis-h" />
-                </button>
+                </template>
+                <template v-slot:trigger>
+                  <button
+                    class="button-default menu-icon"
+                    :title="$t('chats.more')"
+                  >
+                    <FAIcon icon="ellipsis-h" />
+                  </button>
+                </template>
               </Popover>
             </div>
             <StatusContent
               :status="messageForStatusContent"
               :full-content="true"
             >
-              <span
-                slot="footer"
-                class="created-at"
-              >
-                {{ createdAt }}
-              </span>
+              <template v-slot:footer>
+                <span
+                  class="created-at"
+                >
+                  {{ createdAt }}
+                </span>
+              </template>
             </StatusContent>
           </div>
         </div>
diff --git a/src/components/domain_mute_card/domain_mute_card.vue b/src/components/domain_mute_card/domain_mute_card.vue
index 3b5aec14..836688aa 100644
--- a/src/components/domain_mute_card/domain_mute_card.vue
+++ b/src/components/domain_mute_card/domain_mute_card.vue
@@ -9,7 +9,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.unmute') }}
-      <template slot="progress">
+      <template v-slot:progress>
         {{ $t('domain_mute_card.unmute_progress') }}
       </template>
     </ProgressButton>
@@ -19,7 +19,7 @@
       class="btn button-default"
     >
       {{ $t('domain_mute_card.mute') }}
-      <template slot="progress">
+      <template v-slot:progress>
         {{ $t('domain_mute_card.mute_progress') }}
       </template>
     </ProgressButton>
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index c6cb9fbe..a3c3c767 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -7,10 +7,7 @@
     :bound-to="{ x: 'container' }"
     remove-padding
   >
-    <div
-      slot="content"
-      slot-scope="{close}"
-    >
+    <template v-slot:content="{close}">
       <div class="dropdown-menu">
         <button
           v-if="canMute && !status.thread_muted"
@@ -120,16 +117,15 @@
           /><span>{{ $t("user_card.report") }}</span>
         </button>
       </div>
-    </div>
-    <span
-      slot="trigger"
-      class="popover-trigger"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        icon="ellipsis-h"
-      />
-    </span>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled popover-trigger">
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          icon="ellipsis-h"
+        />
+      </button>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index bd7e6448..96b8c3a3 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -8,7 +8,7 @@
       @show="setToggled(true)"
       @close="setToggled(false)"
     >
-      <div slot="content">
+      <template v-slot:content>
         <div class="dropdown-menu">
           <span v-if="user.is_local">
             <button
@@ -121,26 +121,27 @@
             </button>
           </span>
         </div>
-      </div>
-      <button
-        slot="trigger"
-        class="btn button-default btn-block moderation-tools-button"
-        :class="{ toggled }"
-      >
-        {{ $t('user_card.admin_menu.moderation') }}
-        <FAIcon icon="chevron-down" />
-      </button>
+      </template>
+      <template v-slot:trigger>
+        <button
+          class="btn button-default btn-block moderation-tools-button"
+          :class="{ toggled }"
+        >
+          {{ $t('user_card.admin_menu.moderation') }}
+          <FAIcon icon="chevron-down" />
+        </button>
+      </template>
     </Popover>
     <teleport to="#modal">
       <DialogModal
         v-if="showDeleteUserDialog"
         :on-cancel="deleteUserDialog.bind(this, false)"
       >
-        <template slot="header">
+        <template v-slot:header>
           {{ $t('user_card.admin_menu.delete_user') }}
         </template>
         <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
-        <template slot="footer">
+        <template v-slot:footer>
           <button
             class="btn button-default"
             @click="deleteUserDialog(false)"
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index e86a0fcc..ba0e90a0 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -5,9 +5,7 @@
     placement="bottom"
     :bound-to="{ x: 'container' }"
   >
-    <template
-      v-slot:content
-    >
+    <template v-slot:content>
       <div class="dropdown-menu">
         <button
           class="button-default dropdown-item"
@@ -66,7 +64,9 @@
       </div>
     </template>
     <template v-slot:trigger>
-      <FAIcon icon="filter" />
+      <button class="button-unstyled">
+        <FAIcon icon="filter" />
+      </button>
     </template>
   </Popover>
 </template>
diff --git a/src/components/popover/popover.js b/src/components/popover/popover.js
index 849846f5..a30a37c9 100644
--- a/src/components/popover/popover.js
+++ b/src/components/popover/popover.js
@@ -54,7 +54,7 @@ const Popover = {
       }
 
       // Popover will be anchored around this element, trigger ref is the container, so
-      // its children are what are inside the slot. Expect only one slot="trigger".
+      // its children are what are inside the slot. Expect only one v-slot:trigger.
       const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
       // SVGs don't have offsetWidth/Height, use fallback
       const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 4839024c..c69c315b 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -8,10 +8,7 @@
     remove-padding
     @show="focusInput"
   >
-    <div
-      slot="content"
-      slot-scope="{close}"
-    >
+    <template v-slot:content="{close}">
       <div class="reaction-picker-filter">
         <input
           v-model="filterWord"
@@ -41,17 +38,18 @@
         </span>
         <div class="reaction-bottom-fader" />
       </div>
-    </div>
-    <span
-      slot="trigger"
-      class="popover-trigger"
-      :title="$t('tool_tip.add_reaction')"
-    >
-      <FAIcon
-        class="fa-scale-110 fa-old-padding"
-        :icon="['far', 'smile-beam']"
-      />
-    </span>
+    </template>
+    <template v-slot:trigger>
+      <button
+        class="button-unstyled popover-trigger"
+        :title="$t('tool_tip.add_reaction')"
+      >
+        <FAIcon
+          class="fa-scale-110 fa-old-padding"
+          :icon="['far', 'smile-beam']"
+        />
+      </button>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index a9bb12a1..3f885881 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -24,10 +24,7 @@
       :items="items"
       :get-key="getKey"
     >
-      <template
-        slot="item"
-        slot-scope="{item}"
-      >
+      <template v-slot:item="{item}">
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
@@ -44,7 +41,7 @@
           />
         </div>
       </template>
-      <template slot="empty">
+      <template v-slot:empty>
         <slot name="empty" />
       </template>
     </List>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 9f4e81fe..ad212db9 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -6,18 +6,18 @@
     <Popover
       trigger="hover"
     >
-      <span slot="trigger">
+      <template v-slot:trigger>
         &nbsp;
         <FAIcon
           icon="wrench"
+          :aria-label="$t('settings.setting_changed')"
         />
-      </span>
-      <div
-        slot="content"
-        class="modified-tooltip"
-      >
-        {{ $t('settings.setting_changed') }}
-      </div>
+      </template>
+      <template v-slot:content>
+        <div class="modified-tooltip">
+          {{ $t('settings.setting_changed') }}
+        </div>
+      </template>
     </Popover>
   </span>
 </template>
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 12519925..0c261474 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -64,20 +64,18 @@
           :bound-to="{ x: 'container' }"
           remove-padding
         >
-          <button
-            slot="trigger"
-            class="btn button-default"
-            :title="$t('general.close')"
-          >
-            <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
-            <FAIcon
-              icon="chevron-down"
-            />
-          </button>
-          <div
-            slot="content"
-            slot-scope="{close}"
-          >
+          <template v-slot:trigger>
+            <button
+              class="btn button-default"
+              :title="$t('general.close')"
+            >
+              <span>{{ $t("settings.file_export_import.backup_restore") }}</span>
+              <FAIcon
+                icon="chevron-down"
+              />
+            </button>
+          </template>
+          <template v-slot:content ="{close}">
             <div class="dropdown-menu">
               <button
                 class="button-default dropdown-item dropdown-item-icon"
@@ -110,7 +108,7 @@
                 /><span>{{ $t("settings.file_export_import.restore_settings") }}</span>
               </button>
             </div>
-          </div>
+          </template>
         </Popover>
       </div>
     </div>
diff --git a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
index 63d36bf9..32a21415 100644
--- a/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
+++ b/src/components/settings_modal/tabs/mutes_and_blocks_tab.vue
@@ -10,20 +10,18 @@
           :query="queryUserIds"
           :placeholder="$t('settings.search_user_to_block')"
         >
-          <BlockCard
-            slot-scope="row"
-            :user-id="row.item"
-          />
+          <template v-slot="row">
+            <BlockCard
+              :user-id="row.item"
+            />
+          </template>
         </Autosuggest>
       </div>
       <BlockList
         :refresh="true"
         :get-key="i => i"
       >
-        <template
-          slot="header"
-          slot-scope="{selected}"
-        >
+        <template v-slot:header="{selected}">
           <div class="bulk-actions">
             <ProgressButton
               v-if="selected.length > 0"
@@ -31,7 +29,7 @@
               :click="() => blockUsers(selected)"
             >
               {{ $t('user_card.block') }}
-              <template slot="progress">
+              <template v-slot:progress>
                 {{ $t('user_card.block_progress') }}
               </template>
             </ProgressButton>
@@ -41,19 +39,16 @@
               :click="() => unblockUsers(selected)"
             >
               {{ $t('user_card.unblock') }}
-              <template slot="progress">
+              <template v-slot:progress>
                 {{ $t('user_card.unblock_progress') }}
               </template>
             </ProgressButton>
           </div>
         </template>
-        <template
-          slot="item"
-          slot-scope="{item}"
-        >
+        <template v-slot:item="{item}">
           <BlockCard :user-id="item" />
         </template>
-        <template slot="empty">
+        <template v-slot:empty>
           {{ $t('settings.no_blocks') }}
         </template>
       </BlockList>
@@ -68,20 +63,18 @@
               :query="queryUserIds"
               :placeholder="$t('settings.search_user_to_mute')"
             >
-              <MuteCard
-                slot-scope="row"
-                :user-id="row.item"
-              />
+              <template v-slot="row">
+                <MuteCard
+                  :user-id="row.item"
+                />
+              </template>
             </Autosuggest>
           </div>
           <MuteList
             :refresh="true"
             :get-key="i => i"
           >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -89,7 +82,7 @@
                   :click="() => muteUsers(selected)"
                 >
                   {{ $t('user_card.mute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.mute_progress') }}
                   </template>
                 </ProgressButton>
@@ -99,19 +92,16 @@
                   :click="() => unmuteUsers(selected)"
                 >
                   {{ $t('user_card.unmute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('user_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <MuteCard :user-id="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </MuteList>
@@ -124,20 +114,18 @@
               :query="queryKnownDomains"
               :placeholder="$t('settings.type_domains_to_mute')"
             >
-              <DomainMuteCard
-                slot-scope="row"
-                :domain="row.item"
-              />
+              <template v-slot="row">
+                <DomainMuteCard
+                  :domain="row.item"
+                />
+              </template>
             </Autosuggest>
           </div>
           <DomainMuteList
             :refresh="true"
             :get-key="i => i"
           >
-            <template
-              slot="header"
-              slot-scope="{selected}"
-            >
+            <template v-slot:header="{selected}">
               <div class="bulk-actions">
                 <ProgressButton
                   v-if="selected.length > 0"
@@ -145,19 +133,16 @@
                   :click="() => unmuteDomains(selected)"
                 >
                   {{ $t('domain_mute_card.unmute') }}
-                  <template slot="progress">
+                  <template v-slot:progress>
                     {{ $t('domain_mute_card.unmute_progress') }}
                   </template>
                 </ProgressButton>
               </div>
             </template>
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <DomainMuteCard :domain="item" />
             </template>
-            <template slot="empty">
+            <template v-slot:empty>
               {{ $t('settings.no_mutes') }}
             </template>
           </DomainMuteList>
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 8237ce00..fdca8c9c 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -5,12 +5,10 @@
     :bound-to="{ x: 'container' }"
     @show="enter"
   >
-    <template slot="trigger">
+    <template v-slot:trigger>
       <slot />
     </template>
-    <div
-      slot="content"
-    >
+    <template v-slot:content>
       <Status
         v-if="status"
         :is-preview="true"
@@ -33,7 +31,7 @@
           size="2x"
         />
       </div>
-    </div>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 94997c0d..98996ebd 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -4,77 +4,78 @@
     class="TimelineQuickSettings"
     :bound-to="{ x: 'container' }"
   >
-    <div
-      slot="content"
-      class="dropdown-menu"
-    >
-      <div v-if="loggedIn">
+    <template v-slot:content>
+      <div class="dropdown-menu">
+        <div v-if="loggedIn">
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilityAll = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+            />{{ $t('settings.reply_visibility_all') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilityFollowing = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+            />{{ $t('settings.reply_visibility_following_short') }}
+          </button>
+          <button
+            class="button-default dropdown-item"
+            @click="replyVisibilitySelf = true"
+          >
+            <span
+              class="menu-checkbox"
+              :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+            />{{ $t('settings.reply_visibility_self_short') }}
+          </button>
+          <div
+            role="separator"
+            class="dropdown-divider"
+          />
+        </div>
         <button
           class="button-default dropdown-item"
-          @click="replyVisibilityAll = true"
+          @click="hideMedia = !hideMedia"
         >
           <span
             class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
-          />{{ $t('settings.reply_visibility_all') }}
+            :class="{ 'menu-checkbox-checked': hideMedia }"
+          />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
           class="button-default dropdown-item"
-          @click="replyVisibilityFollowing = true"
+          @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
             class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
-          />{{ $t('settings.reply_visibility_following_short') }}
+            :class="{ 'menu-checkbox-checked': hideMutedPosts }"
+          />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
-          class="button-default dropdown-item"
-          @click="replyVisibilitySelf = true"
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('filtering')"
         >
-          <span
-            class="menu-checkbox"
-            :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
-          />{{ $t('settings.reply_visibility_self_short') }}
+          <FAIcon icon="font" />{{ $t('settings.word_filter') }}
+        </button>
+        <button
+          class="button-default dropdown-item dropdown-item-icon"
+          @click="openTab('general')"
+        >
+          <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
         </button>
-        <div
-          role="separator"
-          class="dropdown-divider"
-        />
       </div>
-      <button
-        class="button-default dropdown-item"
-        @click="hideMedia = !hideMedia"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': hideMedia }"
-        />{{ $t('settings.hide_media_previews') }}
-      </button>
-      <button
-        class="button-default dropdown-item"
-        @click="hideMutedPosts = !hideMutedPosts"
-      >
-        <span
-          class="menu-checkbox"
-          :class="{ 'menu-checkbox-checked': hideMutedPosts }"
-        />{{ $t('settings.hide_all_muted_posts') }}
-      </button>
-      <button
-        class="button-default dropdown-item dropdown-item-icon"
-        @click="openTab('filtering')"
-      >
-        <FAIcon icon="font" />{{ $t('settings.word_filter') }}
-      </button>
-      <button
-        class="button-default dropdown-item dropdown-item-icon"
-        @click="openTab('general')"
-      >
-        <FAIcon icon="wrench" />{{ $t('settings.more_settings') }}
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled">
+        <FAIcon icon="filter" />
       </button>
-    </div>
-    <div slot="trigger">
-      <FAIcon icon="filter" />
-    </div>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 22dc3432..4f6681b8 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -9,28 +9,29 @@
     @show="openMenu"
     @close="() => isOpen = false"
   >
-    <div
-      slot="content"
-      class="timeline-menu-popover panel panel-default"
-    >
-      <TimelineMenuContent />
-    </div>
-    <div
-      slot="trigger"
-      class="title timeline-menu-title"
-    >
-      <span class="timeline-title">{{ timelineName() }}</span>
-      <span>
-        <FAIcon
-          size="sm"
-          icon="chevron-down"
+    <template v-slot:content>
+      <div
+        slot="content"
+        class="timeline-menu-popover popover-default"
+        >
+        <TimelineMenuContent />
+      </div>
+    </template>
+    <template v-slot:trigger>
+      <button class="button-unstyled title timeline-menu-title">
+        <span class="timeline-title">{{ timelineName() }}</span>
+        <span>
+          <FAIcon
+            size="sm"
+            icon="chevron-down"
+          />
+        </span>
+        <span
+          class="click-blocker"
+          @click="blockOpen"
         />
-      </span>
-      <span
-        class="click-blocker"
-        @click="blockOpen"
-      />
-    </div>
+      </button>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 4b7ee7d5..78b0813f 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -53,17 +53,17 @@
               >
                 {{ user.name }}
               </div>
-              <a
+              <button
                 v-if="isOtherUser && !user.is_local"
                 :href="user.statusnet_profile_url"
                 target="_blank"
-                class="external-link-button"
+                class="button-unstyled external-link-button"
               >
                 <FAIcon
                   class="icon"
                   icon="external-link-alt"
                 />
-              </a>
+              </button>
               <AccountActions
                 v-if="isOtherUser && loggedIn"
                 :user="user"
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index d0aa315e..f4b93c9a 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -4,40 +4,39 @@
     placement="top"
     :offset="{ y: 5 }"
   >
-    <template slot="trigger">
+    <template v-slot:trigger>
       <slot />
     </template>
-    <div
-      slot="content"
-      class="user-list-popover"
-    >
-      <div v-if="users.length">
-        <div
-          v-for="(user) in usersCapped"
-          :key="user.id"
-          class="user-list-row"
-        >
-          <UserAvatar
-            :user="user"
-            class="avatar-small"
-            :compact="true"
-          />
-          <div class="user-list-names">
-            <!-- eslint-disable vue/no-v-html -->
-            <span v-html="user.name_html" />
-            <!-- eslint-enable vue/no-v-html -->
-            <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+    <template v-slot:content>
+      <div class="user-list-popover">
+        <template v-if="users.length">
+          <div
+            v-for="(user) in usersCapped"
+            :key="user.id"
+            class="user-list-row"
+          >
+            <UserAvatar
+              :user="user"
+              class="avatar-small"
+              :compact="true"
+            />
+            <div class="user-list-names">
+              <!-- eslint-disable vue/no-v-html -->
+              <span v-html="user.name_html" />
+              <!-- eslint-enable vue/no-v-html -->
+              <span class="user-list-screen-name">{{ user.screen_name_ui }}</span>
+            </div>
           </div>
-        </div>
-      </div>
-      <div v-else>
-        <FAIcon
-          icon="circle-notch"
-          spin
-          size="3x"
-        />
+        </template>
+        <template v-else>
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="3x"
+          />
+        </template>
       </div>
-    </div>
+    </template>
   </Popover>
 </template>
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 745e795d..aef897ae 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -60,10 +60,7 @@
           :disabled="!user.friends_count"
         >
           <FriendList :user-id="userId">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <FollowCard :user="item" />
             </template>
           </FriendList>
@@ -75,10 +72,7 @@
           :disabled="!user.followers_count"
         >
           <FollowerList :user-id="userId">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <FollowCard
                 :user="item"
                 :no-follows-you="isUs"
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index a71c02c1..1f67a5cc 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -45,10 +45,7 @@
         </div>
         <div class="user-reporting-panel-right">
           <List :items="statuses">
-            <template
-              slot="item"
-              slot-scope="{item}"
-            >
+            <template v-slot:item="{item}">
               <div class="status-fadein user-reporting-panel-sitem">
                 <Status
                   :in-conversation="false"
-- 
cgit v1.2.3-70-g09d2


From 631b8b93a4a8dd548bae5ab9fa7bc4d6e892ae3f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 19:44:31 +0300
Subject: tons of fixes mainly aimed at panel headings

---
 src/App.scss                                       |   6 +-
 src/components/account_actions/account_actions.vue |   4 -
 src/components/popover/popover.vue                 |  12 +-
 .../settings_modal/tabs/theme_tab/theme_tab.scss   |  17 --
 src/components/timeline/timeline.js                |   2 +-
 src/components/timeline/timeline.scss              |  22 +-
 src/components/timeline/timeline.vue               |   2 +-
 .../timeline/timeline_quick_settings.vue           |  16 +-
 src/components/user_card/user_card.vue             | 325 +--------------------
 src/components/user_profile/user_profile.vue       |  18 --
 .../user_reporting_modal/user_reporting_modal.vue  |  11 -
 src/panel.scss                                     |  77 ++---
 12 files changed, 73 insertions(+), 439 deletions(-)

(limited to 'src/components/user_profile')

diff --git a/src/App.scss b/src/App.scss
index 0ee1c610..bc792263 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -641,12 +641,10 @@ option {
 }
 
 .alert {
-  margin: 0.35em;
-  padding: 0.25em;
+  margin: 0 0.35em;
+  padding: 0 0.25em;
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-  min-height: 28px;
-  line-height: 28px;
 
   &.error {
     background-color: $fallback--alertError;
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 1e31151c..c35d01af 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -74,10 +74,6 @@
 <style lang="scss">
 @import '../../_variables.scss';
 .AccountActions {
-  button.dropdown-item {
-    margin-left: 0;
-  }
-
   .ellipsis-button {
     width: 2.5em;
     margin: -0.5em 0;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 044b887d..0350daa1 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -93,7 +93,7 @@
 
   .dropdown-item {
     line-height: 21px;
-    overflow: auto;
+    overflow: hidden;
     display: block;
     padding: 0.25em 0.75em;
     clear: both;
@@ -154,9 +154,13 @@
         content: '✓';
       }
 
-      &.menu-checkbox-radio::after {
-        font-size: 2em;
-        content: '•';
+      &.-radio {
+        border-radius: 9999px;
+
+        &.menu-checkbox-checked::after {
+          font-size: 2em;
+          content: '•';
+        }
       }
     }
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 21b49a32..cb8e477c 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -245,25 +245,8 @@
         border-color: var(--border, $fallback--border);
       }
 
-      .panel-heading {
-        .badge, .alert, .btn, .faint {
-          margin-left: 1em;
-          white-space: nowrap;
-        }
-        .faint {
-          text-overflow: ellipsis;
-          min-width: 2em;
-          overflow-x: hidden;
-        }
-        .flex-spacer {
-          flex: 1;
-        }
-      }
       .btn {
-        margin-left: 0;
-        padding: 0 1em;
         min-width: 3em;
-        min-height: 30px;
       }
     }
   }
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 4ae7410e..f79b5167 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -60,7 +60,7 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : []
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index ae8324b3..4c58e686 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -13,15 +13,6 @@
     max-width: 100%;
     flex-wrap: nowrap;
     align-items: center;
-
-    .loadmore-button {
-      flex-shrink: 0;
-    }
-
-    .loadmore-text {
-      flex-shrink: 0;
-      line-height: 1em;
-    }
   }
 
   .timeline-footer {
@@ -31,4 +22,17 @@
   .conversation-heading {
     top: calc(var(--panel-heading-height) * 2);
   }
+
+  &.-nonpanel {
+    .timeline-heading {
+      text-align: center;
+      line-height: 2.75em;
+      padding: 0 0.5em;
+    }
+
+    .button-default, .alert {
+      line-height: 2em;
+      width: 100%;
+    }
+  }
 }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index d37a9e2a..ff3cd72d 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="[classes.root, 'Timeline']">
+  <div :class="['Timeline', classes.root]">
     <div :class="classes.header">
       <TimelineMenu v-if="!embedded" />
       <button
diff --git a/src/components/timeline/timeline_quick_settings.vue b/src/components/timeline/timeline_quick_settings.vue
index 4d67e06b..c62d0fe9 100644
--- a/src/components/timeline/timeline_quick_settings.vue
+++ b/src/components/timeline/timeline_quick_settings.vue
@@ -12,8 +12,8 @@
             @click="replyVisibilityAll = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilityAll }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
             />{{ $t('settings.reply_visibility_all') }}
           </button>
           <button
@@ -21,8 +21,8 @@
             @click="replyVisibilityFollowing = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilityFollowing }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
             />{{ $t('settings.reply_visibility_following_short') }}
           </button>
           <button
@@ -30,8 +30,8 @@
             @click="replyVisibilitySelf = true"
           >
             <span
-              class="menu-checkbox"
-              :class="{ 'menu-checkbox-radio': replyVisibilitySelf }"
+              class="menu-checkbox -radio"
+              :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
             />{{ $t('settings.reply_visibility_self_short') }}
           </button>
           <div
@@ -102,10 +102,6 @@
     line-height: 100%;
     height: 100%;
   }
-
-  .dropdown-item {
-    margin: 0;
-  }
 }
 
 </style>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 43a660e1..67837845 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -284,327 +284,4 @@
 
 <script src="./user_card.js"></script>
 
-<style lang="scss">
-@import '../../_variables.scss';
-
-.user-card {
-  position: relative;
-  z-index: 1;
-
-  &:hover {
-    --_still-image-img-visibility: visible;
-    --_still-image-canvas-visibility: hidden;
-    --_still-image-label-visibility: hidden;
-  }
-
-  .panel-heading {
-    padding: .5em 0;
-    text-align: center;
-    box-shadow: none;
-    background: transparent;
-    flex-direction: column;
-    align-items: stretch;
-    // create new stacking context
-    position: relative;
-  }
-
-  .panel-body {
-    word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    // create new stacking context
-    position: relative;
-  }
-
-  .background-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    mask: linear-gradient(to top, white, transparent) bottom no-repeat,
-          linear-gradient(to top, white, white);
-    // Autoprefixed seem to ignore this one, and also syntax is different
-                                                 -webkit-mask-composite: xor;
-    mask-composite: exclude;
-    background-size: cover;
-    mask-size: 100% 60%;
-    border-top-left-radius: calc(var(--panelRadius) - 1px);
-    border-top-right-radius: calc(var(--panelRadius) - 1px);
-    background-color: var(--profileBg);
-    z-index: -2;
-
-    &.hide-bio {
-      mask-size: 100% 40px;
-    }
-  }
-
-  &-bio {
-    text-align: center;
-    display: block;
-    line-height: 18px;
-    padding: 1em;
-    margin: 0;
-
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
-    img {
-      object-fit: contain;
-      vertical-align: middle;
-      max-width: 100%;
-      max-height: 400px;
-    }
-  }
-
-  // Modifiers
-
-  &-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-
-  &-rounded {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
-  }
-
-  &-bordered {
-    border-width: 1px;
-    border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-}
-
-.user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  padding: 0 26px;
-
-  .container {
-    min-width: 0;
-    padding: 16px 0 6px;
-    display: flex;
-    align-items: flex-start;
-    max-height: 56px;
-
-    > * {
-      min-width: 0;
-    }
-
-    .Avatar {
-      --_avatarShadowBox: var(--avatarShadow);
-      --_avatarShadowFilter: var(--avatarShadowFilter);
-      --_avatarShadowInset: var(--avatarShadowInset);
-
-      flex: 1 0 100%;
-      width: 56px;
-      height: 56px;
-      object-fit: cover;
-    }
-  }
-
-  &-avatar-link {
-    position: relative;
-    cursor: pointer;
-
-    &-overlay {
-      position: absolute;
-      left: 0;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.3);
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
-      opacity: 0;
-      transition: opacity .2s ease;
-
-      svg {
-        color: #FFF;
-      }
-    }
-
-    &:hover &-overlay {
-      opacity: 1;
-    }
-  }
-
-  .external-link-button, .edit-profile-button {
-    cursor: pointer;
-    width: 2.5em;
-    text-align: center;
-    margin: -0.5em 0;
-    padding: 0.5em 0;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-  }
-
-  .user-summary {
-    display: block;
-    margin-left: 0.6em;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    flex: 1 1 0;
-    // This is so that text doesn't get overlapped by avatar's shadow if it has
-    // big one
-    z-index: 1;
-
-    .top-line {
-      display: flex;
-    }
-  }
-
-  .user-name {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    flex: 1 1 auto;
-    margin-right: 1em;
-    font-size: 15px;
-
-    --emoji-size: 14px;
-  }
-
-  .bottom-line {
-    display: flex;
-    font-weight: light;
-    font-size: 15px;
-
-    .lock-icon {
-      margin-left: 0.5em;
-    }
-
-    .user-screen-name {
-      min-width: 1px;
-      flex: 0 1 auto;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-
-    .dailyAvg {
-      min-width: 1px;
-      flex: 0 0 auto;
-      margin-left: 1em;
-      font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
-    .user-role {
-      flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
-    }
-  }
-
-  .user-meta {
-    margin-bottom: .15em;
-    display: flex;
-    align-items: baseline;
-    font-size: 14px;
-    line-height: 22px;
-    flex-wrap: wrap;
-
-    .following {
-      flex: 1 0 auto;
-      margin: 0;
-      margin-bottom: .25em;
-      text-align: left;
-    }
-
-    .highlighter {
-      flex: 0 1 auto;
-      display: flex;
-      flex-wrap: wrap;
-      margin-right: -.5em;
-      align-self: start;
-
-      .userHighlightCl {
-        padding: 2px 10px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightSel {
-        padding-top: 0;
-        padding-bottom: 0;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightText {
-        width: 70px;
-        flex: 1 0 auto;
-      }
-
-      .userHighlightCl,
-      .userHighlightText,
-      .userHighlightSel {
-        vertical-align: top;
-        margin-right: .5em;
-        margin-bottom: .25em;
-      }
-    }
-  }
-  .user-interactions {
-    position: relative;
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: -.75em;
-
-    > * {
-      margin: 0 .75em .6em 0;
-      white-space: nowrap;
-      min-width: 95px;
-    }
-
-    button {
-      margin: 0;
-    }
-  }
-}
-
-.sidebar .edit-profile-button {
-  display: none;
-}
-
-.user-counts {
-  display: flex;
-  line-height:16px;
-  padding: .5em 1.5em 0em 1.5em;
-  text-align: center;
-  justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
-  flex-wrap: wrap;
-}
-
-.user-count {
-  flex: 1 0 auto;
-  padding: .5em 0 .5em 0;
-  margin: 0 .5em;
-
-  h5 {
-    font-size:1em;
-    font-weight: bolder;
-    margin: 0 0 0.25em;
-  }
-  a {
-    text-decoration: none;
-  }
-}
-</style>
+<style lang="scss" src="./user_card.scss" />
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 726216ff..f1e3cb72 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -192,24 +192,6 @@
     align-items: middle;
     padding: 2em;
   }
-
-  .timeline-heading {
-    display: flex;
-    justify-content: center;
-
-    .loadmore-button, .alert {
-      flex: 1;
-    }
-
-    .loadmore-button {
-      height: 28px;
-      margin: 10px .6em;
-    }
-
-    .title, .loadmore-text {
-      display: none
-    }
-  }
 }
 .user-profile-placeholder {
   .panel-body {
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index cc456365..ba12a246 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -76,17 +76,6 @@
   min-height: 20vh;
   max-height: 80vh;
 
-  .panel-heading {
-    .title {
-      text-align: center;
-      // TODO: Consider making these as default of panel
-      flex: 1;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
   .panel-body {
     display: flex;
     flex-direction: column-reverse;
diff --git a/src/panel.scss b/src/panel.scss
index 147b17a9..167c60a6 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -39,7 +39,11 @@
 
   position: relative;
   box-sizing: border-box;
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr;
+  grid-auto-columns: auto;
+  grid-column-gap: 0.5em;
   flex: none;
   border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
@@ -89,7 +93,6 @@
   }
 
   .title {
-    flex: 1 0 auto;
     font-size: 1.3em;
   }
 
@@ -110,42 +113,44 @@
     overflow-x: hidden;
   }
 
-  > .button-default,
-  > .alert {
-    height: var(--__panel-heading-height-inner);
-    min-height: 0;
-    box-sizing: border-box;
-    margin: 0;
-    margin-left: 0.5em;
-    min-width: 1px;
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-
-  > .button-default {
-    flex-shrink: 0;
-
-    &,
-    i[class*=icon-] {
-      color: $fallback--text;
-      color: var(--btnPanelText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedPanel, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedPanelText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledPanelText, $fallback--text);
+  &:not(.-flexible-height) {
+    > .button-default,
+    > .alert {
+      height: var(--__panel-heading-height-inner);
+      min-height: 0;
+      box-sizing: border-box;
+      margin: 0;
+      min-width: 1px;
+      padding-top: 0;
+      padding-bottom: 0;
+      align-self: stretch;
     }
 
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledPanelText, $fallback--text);
+    > .button-default {
+      flex-shrink: 0;
+
+      &,
+      i[class*=icon-] {
+        color: $fallback--text;
+        color: var(--btnPanelText, $fallback--text);
+      }
+
+      &:active {
+        background-color: $fallback--fg;
+        background-color: var(--btnPressedPanel, $fallback--fg);
+        color: $fallback--text;
+        color: var(--btnPressedPanelText, $fallback--text);
+      }
+
+      &:disabled {
+        color: $fallback--text;
+        color: var(--btnDisabledPanelText, $fallback--text);
+      }
+
+      &.toggled {
+        color: $fallback--text;
+        color: var(--btnToggledPanelText, $fallback--text);
+      }
     }
   }
 
-- 
cgit v1.2.3-70-g09d2


From 33d92f9b16267415d1e62285a4f305ae10baf489 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 20 Apr 2022 23:55:34 +0300
Subject: relative units in line-height + some cleanup

---
 src/App.scss                                     | 6 +++---
 src/components/notifications/notifications.scss  | 3 ++-
 src/components/password_reset/password_reset.vue | 7 ++++---
 src/components/react_button/react_button.vue     | 2 +-
 src/components/status/status.scss                | 4 ++--
 src/components/user_card/user_card.scss          | 2 +-
 src/components/user_profile/user_profile.vue     | 2 +-
 src/panel.scss                                   | 2 +-
 8 files changed, 15 insertions(+), 13 deletions(-)

(limited to 'src/components/user_profile')

diff --git a/src/App.scss b/src/App.scss
index 8c59c77a..3d30ec79 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -457,7 +457,7 @@ textarea,
   display: inline-block;
   position: relative;
   height: 2em;
-  line-height: 16px;
+  line-height: 1.2;
   hyphens: none;
   padding: 8px 0.5em;
 
@@ -508,7 +508,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
@@ -548,7 +548,7 @@ textarea,
       background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
-      line-height: 1.1em;
+      line-height: 1.1;
       font-size: 1.1em;
       box-sizing: border-box;
       color: transparent;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index aa4ae346..976688d1 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -155,7 +155,8 @@
       margin: 0 0 0.3em;
       padding: 0;
       font-size: 1em;
-      line-height:20px;
+      line-height: 1.5;
+
       small {
         font-weight: lighter;
       }
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index e0579568..90673f44 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -91,6 +91,7 @@
     flex-direction: column;
     margin-top: 0.6em;
     max-width: 18rem;
+
     > * {
       min-width: 0;
     }
@@ -100,8 +101,8 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 1em;
-    padding: 0.3em 0.0em 0.3em;
-    line-height: 24px;
+    padding: 0.3em 0;
+    line-height: 1.85em;
   }
 
   .error {
@@ -113,7 +114,7 @@
 
   .alert {
     padding: 0.5em;
-    margin: 0.3em 0.0em 1em;
+    margin: 0.3em 0 1em;
   }
 
   .password-reset-required {
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index c69c315b..7f35b7b5 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -101,7 +101,7 @@
       cursor: pointer;
 
       flex-basis: 20%;
-      line-height: 1.5em;
+      line-height: 1.5;
       align-content: center;
 
       &:hover {
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 36a2cca1..b3ad3818 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -106,7 +106,7 @@
   .heading-name-row {
     display: flex;
     justify-content: space-between;
-    line-height: 18px;
+    line-height: 1.3;
 
     a {
       display: inline-block;
@@ -227,7 +227,7 @@
 
   .replies {
     margin-top: 0.25em;
-    line-height: 18px;
+    line-height: 1.3;
     font-size: 0.85em;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 44657bdf..2e153120 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -55,7 +55,7 @@
   &-bio {
     text-align: center;
     display: block;
-    line-height: 18px;
+    line-height: 1.3;
     padding: 1em;
     margin: 0;
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index f1e3cb72..67966ff4 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -176,7 +176,7 @@
       }
 
       .user-profile-field-name, .user-profile-field-value {
-        line-height: 18px;
+        line-height: 1.3;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
diff --git a/src/panel.scss b/src/panel.scss
index 637ea17c..776ed863 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -195,7 +195,7 @@
 }
 
 .panel-body > p {
-  line-height: 18px;
+  line-height: 1.3;
   padding: 1em;
   margin: 0;
 }
-- 
cgit v1.2.3-70-g09d2


From 2a6f42fef3ff9c087aab4589d229e0f6c1b45c90 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Apr 2022 23:50:22 +0300
Subject: unified how panel-footer works between regular timelines and user
 timeline

---
 src/components/conversation/conversation.vue    |  5 ++
 src/components/notifications/notifications.scss |  8 ++--
 src/components/notifications/notifications.vue  |  2 +-
 src/components/timeline/timeline.js             |  3 +-
 src/components/timeline/timeline.vue            | 62 +++++++++++++------------
 src/components/user_profile/user_profile.js     |  6 ++-
 src/components/user_profile/user_profile.vue    |  4 ++
 7 files changed, 53 insertions(+), 37 deletions(-)

(limited to 'src/components/user_profile')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index c2c323c1..48e7934c 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -223,6 +223,7 @@
     --text: var(--faint);
     color: var(--text);
   }
+
   .thread-ancestor-dive-box {
     padding-left: var(--status-margin, $status-margin);
     border-bottom-width: 1px;
@@ -254,6 +255,10 @@
     border-bottom: none;
   }
 
+  &:last-child .conversation-status {
+    border-bottom: none;
+  }
+
   .thread-ancestors + .thread-tree > .conversation-status {
     border-top-width: 1px;
     border-top-style: solid;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 976688d1..07abee27 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -11,10 +11,6 @@
     color: var(--text, $fallback--text);
   }
 
-  .notifications-footer {
-    border: none;
-  }
-
   .notification {
     position: relative;
 
@@ -47,6 +43,10 @@
     }
   }
 
+  &:last-child .Notification {
+    border-bottom: none;
+  }
+
   .non-mention {
     display: flex;
     flex: 1;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index bfc97dc0..d5b2d1d5 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -36,7 +36,7 @@
             <notification :notification="notification" />
           </div>
         </div>
-        <div class="panel-footer notifications-footer">
+        <div class="panel-footer">
           <div
             v-if="bottomedOut"
             class="new-status-notification text-center faint"
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index f79b5167..94f0e916 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -22,7 +22,8 @@ const Timeline = {
     'embedded',
     'count',
     'pinnedStatusIds',
-    'inProfile'
+    'inProfile',
+    'footerSlipgate' // reference to an element where we should put our footer
   ],
   data () {
     return {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 958808f6..ebf8ab52 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -46,37 +46,39 @@
       </div>
     </div>
     <div :class="classes.footer">
-      <div
-        v-if="count===0"
-        class="new-status-notification text-center faint"
-      >
-        {{ $t('timeline.no_statuses') }}
-      </div>
-      <div
-        v-else-if="bottomedOut"
-        class="new-status-notification text-center faint"
-      >
-        {{ $t('timeline.no_more_statuses') }}
-      </div>
-      <button
-        v-else-if="!timeline.loading"
-        class="button-unstyled -link"
-        @click.prevent="fetchOlderStatuses()"
-      >
-        <div class="new-status-notification text-center">
-          {{ $t('timeline.load_older') }}
+      <teleport :to="footerSlipgate" :disabled="!embedded || !footerSlipgate">
+        <div
+          v-if="count===0"
+          class="new-status-notification text-center faint"
+        >
+          {{ $t('timeline.no_statuses') }}
         </div>
-      </button>
-      <div
-        v-else
-        class="new-status-notification text-center"
-      >
-        <FAIcon
-          icon="circle-notch"
-          spin
-          size="lg"
-        />
-      </div>
+        <div
+          v-else-if="bottomedOut"
+          class="new-status-notification text-center faint"
+        >
+          {{ $t('timeline.no_more_statuses') }}
+        </div>
+        <button
+          v-else-if="!timeline.loading"
+          class="button-unstyled -link"
+          @click.prevent="fetchOlderStatuses()"
+        >
+          <div class="new-status-notification text-center">
+            {{ $t('timeline.load_older') }}
+          </div>
+        </button>
+        <div
+          v-else
+          class="new-status-notification text-center"
+        >
+          <FAIcon
+            icon="circle-notch"
+            spin
+            size="lg"
+          />
+        </div>
+      </teleport>
     </div>
   </div>
 </template>
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index eeb6ea40..f779b823 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -39,7 +39,8 @@ const UserProfile = {
     return {
       error: false,
       userId: null,
-      tab: defaultTabKey
+      tab: defaultTabKey,
+      footerRef: null
     }
   },
   created () {
@@ -78,6 +79,9 @@ const UserProfile = {
     }
   },
   methods: {
+    setFooterRef (el) {
+      this.footerRef = el
+    },
     load (userNameOrId) {
       const startFetchingTimeline = (timeline, userId) => {
         // Clear timeline only if load another user's profile
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 67966ff4..74d101c4 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -56,6 +56,7 @@
           :user-id="userId"
           :pinned-status-ids="user.pinnedStatusIds"
           :in-profile="true"
+          :footerSlipgate="footerRef"
         />
         <div
           v-if="followsTabVisible"
@@ -94,6 +95,7 @@
           :timeline="media"
           :user-id="userId"
           :in-profile="true"
+          :footerSlipgate="footerRef"
         />
         <Timeline
           v-if="isUs"
@@ -105,8 +107,10 @@
           timeline-name="favorites"
           :timeline="favorites"
           :in-profile="true"
+          :footerSlipgate="footerRef"
         />
       </tab-switcher>
+      <div class="panel-footer" :ref="setFooterRef"></div>
     </div>
     <div
       v-else
-- 
cgit v1.2.3-70-g09d2


From cc1e3c6792747553cb1b2aa55a2a9077e3eefa2d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:14:58 +0300
Subject: fix incorrect sticking in user profile page

---
 src/components/timeline/timeline.scss        | 2 +-
 src/components/user_profile/user_profile.vue | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components/user_profile')

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index bed2a175..c7ea0dff 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,7 +10,7 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * 2);
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
     z-index: 1;
   }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 74d101c4..62792599 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -142,6 +142,9 @@
   flex: 2;
   flex-basis: 500px;
 
+  // No sticky header on user profile
+  --currentPanelStack: 1;
+
   .user-profile-fields {
     margin: 0 0.5em;
 
-- 
cgit v1.2.3-70-g09d2