From 71863061c691df7f59cf4be283a3e0772d485378 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Apr 2022 19:41:09 +0300
Subject: fixed tons of stuff, at least it looks normalish on desktop

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

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

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 2ce5d56f..9d8fa059 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -6,7 +6,7 @@
     <div :class="mainClass">
       <div
         v-if="!noHeading"
-        class="panel-heading"
+        class="notifications-heading panel-heading -sticky"
       >
         <div class="title">
           {{ $t('notifications.notifications') }}
-- 
cgit v1.2.3-70-g09d2


From 6a319154d94c51f0464e0de31c6f88fbe20defea Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 5 Apr 2022 19:22:15 +0300
Subject: teleport bread

---
 src/App.js                                     |   4 +-
 src/App.scss                                   |  10 ++-
 src/App.vue                                    |   9 +-
 src/components/mobile_nav/mobile_nav.js        |   3 +-
 src/components/mobile_nav/mobile_nav.vue       |   5 +-
 src/components/notifications/notifications.js  |  15 +++-
 src/components/notifications/notifications.vue | 116 +++++++++++++------------
 7 files changed, 88 insertions(+), 74 deletions(-)

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

diff --git a/src/App.js b/src/App.js
index b2ec95d4..827692a6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,5 @@
 import UserPanel from './components/user_panel/user_panel.vue'
 import NavPanel from './components/nav_panel/nav_panel.vue'
-import Notifications from './components/notifications/notifications.vue'
 import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from './components/features_panel/features_panel.vue'
 import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
@@ -16,13 +15,14 @@ import PostStatusModal from './components/post_status_modal/post_status_modal.vu
 import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
 import { mapGetters } from 'vuex'
+import { defineAsyncComponent } from 'vue'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications,
+    Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
diff --git a/src/App.scss b/src/App.scss
index e32a2d36..1867a54d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -64,10 +64,10 @@ nav {
 
 #sidebar {
   grid-area: sidebar;
+}
 
-  @media all and (max-width: 800px) {
-    display: none;
-  }
+#notifs-column {
+  grid-area: notifs;
 }
 
 #main-scroller {
@@ -177,6 +177,10 @@ nav {
     .underlay {
       display: none;
     }
+
+    #sidebar {
+      display: none;
+    }
   }
 }
 
diff --git a/src/App.vue b/src/App.vue
index f87d895b..70084538 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,23 +9,21 @@
     />
     <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
+    <notifications v-if="currentUser" />
     <div
       id="content"
       class="app-layout container"
       :class="[{ '-reverse': reverseLayout }, '-' + layoutType]"
     >
       <div class="underlay"/>
-      <div
-        id="sidebar"
-        class="column -scrollable -mini mobile-hidden"
-      >
+      <div id="sidebar" class="column -scrollable">
         <user-panel />
         <template v-if="layoutType !== 'mobile'">
           <nav-panel />
           <instance-specific-panel v-if="showInstanceSpecificPanel" />
           <features-panel v-if="!currentUser && showFeaturesPanel" />
           <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
-          <notifications v-if="currentUser" />
+          <div id="notifs-sidebar" />
         </template>
       </div>
       <div id="main-scroller" class="column main">
@@ -42,6 +40,7 @@
         </div>
         <router-view />
       </div>
+      <div id="notifs-column" class="column -scrollable"/>
       <media-modal />
     </div>
     <shout-panel
diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 9e736cfb..877d52a9 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -78,7 +78,8 @@ const MobileNav = {
       this.$store.dispatch('logout')
     },
     markNotificationsAsSeen () {
-      this.$refs.notifications.markAsSeen()
+      // this.$refs.notifications.markAsSeen()
+      this.$store.dispatch('markNotificationsAsSeen')
     },
     onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) {
       if (scrollTop + clientHeight >= scrollHeight) {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 09680910..6c810bba 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -69,12 +69,9 @@
       </div>
       <div
         class="mobile-notifications"
+        id="mobile-notifications"
         @scroll="onScroll"
       >
-        <Notifications
-          ref="notifications"
-          :no-heading="true"
-        />
       </div>
     </div>
     <SideDrawer
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index c8f1ebcb..2bb8a1d1 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -23,8 +23,6 @@ const Notifications = {
     NotificationFilters
   },
   props: {
-    // Disables display of panel header
-    noHeading: Boolean,
     // Disables panel styles, unread mark, potentially other notification-related actions
     // meant for "Interactions" timeline
     minimalMode: Boolean,
@@ -65,6 +63,19 @@ const Notifications = {
     loading () {
       return this.$store.state.statuses.notifications.loading
     },
+    noHeading () {
+      const { layoutType } = this.$store.state.interface
+      console.log(layoutType)
+      return layoutType === 'mobile'
+    },
+    teleportTarget () {
+      const { layoutType } = this.$store.state.interface
+      const map = {
+        wide: '#notifs-column',
+        mobile: '#mobile-notifications'
+      }
+      return map[layoutType] || '#notifs-sidebar'
+    },
     notificationsToDisplay () {
       return this.filteredNotifications.slice(0, this.unseenCount + this.seenToDisplayCount)
     },
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 9d8fa059..f50d3d38 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,69 +1,71 @@
 <template>
-  <div
-    :class="{ minimal: minimalMode }"
-    class="Notifications"
-  >
-    <div :class="mainClass">
-      <div
-        v-if="!noHeading"
-        class="notifications-heading panel-heading -sticky"
-      >
-        <div class="title">
-          {{ $t('notifications.notifications') }}
-          <span
-            v-if="unseenCount"
-            class="badge badge-notification unseen-count"
-          >{{ unseenCount }}</span>
-        </div>
-        <button
-          v-if="unseenCount"
-          class="button-default read-button"
-          @click.prevent="markAsSeen"
-        >
-          {{ $t('notifications.read') }}
-        </button>
-        <NotificationFilters />
-      </div>
-      <div class="panel-body">
+  <teleport :to="teleportTarget">
+    <div
+      :class="{ minimal: minimalMode }"
+      class="Notifications"
+    >
+      <div :class="mainClass">
         <div
-          v-for="notification in notificationsToDisplay"
-          :key="notification.id"
-          class="notification"
-          :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+          v-if="!noHeading"
+          class="notifications-heading panel-heading -sticky"
         >
-          <div class="notification-overlay" />
-          <notification :notification="notification" />
+          <div class="title">
+            {{ $t('notifications.notifications') }}
+            <span
+              v-if="unseenCount"
+              class="badge badge-notification unseen-count"
+            >{{ unseenCount }}</span>
+          </div>
+          <button
+            v-if="unseenCount"
+            class="button-default read-button"
+            @click.prevent="markAsSeen"
+          >
+            {{ $t('notifications.read') }}
+          </button>
+          <NotificationFilters />
         </div>
-      </div>
-      <div class="panel-footer notifications-footer">
-        <div
-          v-if="bottomedOut"
-          class="new-status-notification text-center faint"
-        >
-          {{ $t('notifications.no_more_notifications') }}
+        <div class="panel-body">
+          <div
+            v-for="notification in notificationsToDisplay"
+            :key="notification.id"
+            class="notification"
+            :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+          >
+            <div class="notification-overlay" />
+            <notification :notification="notification" />
+          </div>
         </div>
-        <button
-          v-else-if="!loading"
-          class="button-unstyled -link -fullwidth"
-          @click.prevent="fetchOlderNotifications()"
-        >
-          <div class="new-status-notification text-center">
-            {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+        <div class="panel-footer notifications-footer">
+          <div
+            v-if="bottomedOut"
+            class="new-status-notification text-center faint"
+          >
+            {{ $t('notifications.no_more_notifications') }}
+          </div>
+          <button
+            v-else-if="!loading"
+            class="button-unstyled -link -fullwidth"
+            @click.prevent="fetchOlderNotifications()"
+          >
+            <div class="new-status-notification text-center">
+              {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }}
+            </div>
+          </button>
+          <div
+            v-else
+            class="new-status-notification text-center"
+          >
+            <FAIcon
+              icon="circle-notch"
+              spin
+              size="lg"
+            />
           </div>
-        </button>
-        <div
-          v-else
-          class="new-status-notification text-center"
-        >
-          <FAIcon
-            icon="circle-notch"
-            spin
-            size="lg"
-          />
         </div>
       </div>
     </div>
-  </div>
+  </teleport>
 </template>
 
 <script src="./notifications.js"></script>
-- 
cgit v1.2.3-70-g09d2


From d3d219f15d4bac88f58d4fd0fed6f798b81cca82 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Apr 2022 14:37:16 +0300
Subject: fix interactions page

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

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

diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 2bb8a1d1..fb2579a5 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -65,8 +65,7 @@ const Notifications = {
     },
     noHeading () {
       const { layoutType } = this.$store.state.interface
-      console.log(layoutType)
-      return layoutType === 'mobile'
+      return this.minimalMode || layoutType === 'mobile'
     },
     teleportTarget () {
       const { layoutType } = this.$store.state.interface
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index f50d3d38..bfc97dc0 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport :to="teleportTarget">
+  <teleport :disabled="minimalMode" :to="teleportTarget">
     <div
       :class="{ minimal: minimalMode }"
       class="Notifications"
-- 
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/notifications/notifications.vue')

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 c3c120e91da987ecb54c7d743b6791f904b56f4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 22 May 2022 21:50:30 +0300
Subject: fix?

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

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

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index d5b2d1d5..794ef51d 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -30,7 +30,7 @@
             v-for="notification in notificationsToDisplay"
             :key="notification.id"
             class="notification"
-            :class="{&quot;unseen&quot;: !minimalMode && !notification.seen}"
+            :class="{unseen: !minimalMode && !notification.seen}"
           >
             <div class="notification-overlay" />
             <notification :notification="notification" />
-- 
cgit v1.2.3-70-g09d2


From 9b5fe24ca455af5420a326e78878ca7b35b5bf66 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 7 Jun 2022 16:52:03 +0300
Subject: restore notifications page, fix z-index issues

---
 src/App.vue                                    | 2 +-
 src/boot/routes.js                             | 2 +-
 src/components/notifications/notifications.js  | 4 +++-
 src/components/notifications/notifications.vue | 2 +-
 src/components/timeline/timeline.scss          | 2 +-
 5 files changed, 7 insertions(+), 5 deletions(-)

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

diff --git a/src/App.vue b/src/App.vue
index 5b448972..21f6f686 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
     />
     <MobileNav v-if="layoutType === 'mobile'" />
     <DesktopNav v-else />
-    <notifications v-if="currentUser" />
+    <Notifications v-if="currentUser" />
     <div
       id="content"
       class="app-layout container"
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 905ffe41..726476a8 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -62,7 +62,7 @@ export default (store) => {
     { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
     { name: 'registration-token', path: '/registration/:token', component: Registration },
     { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute },
+    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
     { name: 'login', path: '/login', component: AuthForm },
     { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
     { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index fb2579a5..82aa1489 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -27,7 +27,9 @@ const Notifications = {
     // meant for "Interactions" timeline
     minimalMode: Boolean,
     // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
-    filterMode: Array
+    filterMode: Array,
+    // Disable teleporting (i.e. for /users/user/notifications)
+    disableTeleport: Boolean
   },
   data () {
     return {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 794ef51d..b46c06aa 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,5 +1,5 @@
 <template>
-  <teleport :disabled="minimalMode" :to="teleportTarget">
+  <teleport :disabled="minimalMode || disableTeleport" :to="teleportTarget">
     <div
       :class="{ minimal: minimalMode }"
       class="Notifications"
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index c7ea0dff..9e009fd3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -11,7 +11,7 @@
 
   .conversation-heading {
     top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
-    z-index: 1;
+    z-index: 2;
   }
 
   &.-nonpanel {
-- 
cgit v1.2.3-70-g09d2