From 684650e14fd88e47180b2feda6c5cff9171eb566 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 14:47:47 +0300
Subject: restore margins for inline convos

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

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

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index ccc523a2..04078cf4 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -270,5 +270,8 @@
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
     border-bottom: 1px solid var(--border, $fallback--border);
   }
+  &.-expanded {
+    margin: calc(var(--status-margin, $status-margin) / 2);
+  }
 }
 </style>
-- 
cgit v1.2.3-70-g09d2


From d9f8091ce648d033a69b47d811edf1c8019fb179 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 19:28:52 +0300
Subject: fix extra padding in thread view

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

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

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 04078cf4..2e7f8684 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -270,7 +270,8 @@
     border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
     border-bottom: 1px solid var(--border, $fallback--border);
   }
-  &.-expanded {
+
+  &.-expanded.status-fadein {
     margin: calc(var(--status-margin, $status-margin) / 2);
   }
 }
-- 
cgit v1.2.3-70-g09d2


From bb29218a6cb3682d230c12c630916562f8b24028 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 19 Apr 2022 23:06:57 +0300
Subject: fixate conversation heading

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

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

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 2e7f8684..c2c323c1 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -7,7 +7,7 @@
   >
     <div
       v-if="isExpanded"
-      class="panel-heading conversation-heading"
+      class="panel-heading conversation-heading -sticky"
     >
       <span class="title"> {{ $t('timeline.conversation') }} </span>
       <button
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index c10375d4..ae8324b3 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -27,4 +27,8 @@
   .timeline-footer {
     border: none;
   }
+
+  .conversation-heading {
+    top: calc(var(--panel-heading-height) * 2);
+  }
 }
-- 
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/conversation/conversation.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 deece5758437d305d8df3db87c5012322e1e53c8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Apr 2022 00:10:33 +0300
Subject: better formatting

---
 src/components/conversation/conversation.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

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

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 48e7934c..ccedc121 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -251,14 +251,11 @@
   .thread-ancestor-has-other-replies .conversation-status,
   .thread-ancestor:last-child .conversation-status,
   .thread-ancestor:last-child .thread-ancestor-dive-box,
+  &:last-child .conversation-status,
   &.-expanded .thread-tree .conversation-status {
     border-bottom: none;
   }
 
-  &:last-child .conversation-status {
-    border-bottom: none;
-  }
-
   .thread-ancestors + .thread-tree > .conversation-status {
     border-top-width: 1px;
     border-top-style: solid;
-- 
cgit v1.2.3-70-g09d2


From 54a40bfa01b64214b45f1d1142cb6bc2909a8673 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 9 May 2022 23:18:39 +0300
Subject: fix inline conversation's shadow showing through outer header

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

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

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index ccedc121..6088e1ca 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -201,6 +201,8 @@
 @import '../../_variables.scss';
 
 .Conversation {
+  z-index: 1;
+
   .conversation-dive-to-top-level-box {
     padding: var(--status-margin, $status-margin);
     border-bottom-width: 1px;
diff --git a/src/panel.scss b/src/panel.scss
index a14e732f..3a814269 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -18,7 +18,7 @@
     bottom: 0;
     left: 0;
     right: 0;
-    z-index: 3;
+    z-index: 5;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6);
     box-shadow: var(--panelShadow);
     pointer-events: none;
@@ -60,7 +60,7 @@
   padding: 0.6em;
   height: var(--__panel-heading-height);
   line-height: var(--__panel-heading-height-inner);
-  z-index: 3;
+  z-index: 4;
 
   &.-flexible-height {
     --__panel-heading-height: auto;
-- 
cgit v1.2.3-70-g09d2