enhance(client): provide sticktyFooter

2 files changed, 33 insertions, 15 deletions

diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index b87d46ee94..bb1269562d 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -289,12 +289,12 @@ function renote(viaKeyboard = false) {
 		icon: 'ti ti-repeat',
 		action: () => {
 			const el = renoteButton.value as HTMLElement | null | undefined;
-				if (el) {
-					const rect = el.getBoundingClientRect();
-					const x = rect.left + (el.offsetWidth / 2);
-					const y = rect.top + (el.offsetHeight / 2);
-					os.popup(MkRippleEffect, { x, y }, {}, 'end');
-				}
+			if (el) {
+				const rect = el.getBoundingClientRect();
+				const x = rect.left + (el.offsetWidth / 2);
+				const y = rect.top + (el.offsetHeight / 2);
+				os.popup(MkRippleEffect, { x, y }, {}, 'end');
+			}
 				
 			os.api('notes/create', {
 				renoteId: appearNote.id,
@@ -622,9 +622,9 @@ function showReactions(): void {
 
 .showLess {
 	width: 100%;
-	margin-top: 1em;
+	margin-top: 14px;
 	position: sticky;
-	bottom: 1em;
+	bottom: calc(var(--stickyBottom, 0px) + 14px);
 }
 
 .showLessLabel {
diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue
index a3fee91a36..3f9c1bc353 100644
--- a/packages/frontend/src/components/global/MkStickyContainer.vue
+++ b/packages/frontend/src/components/global/MkStickyContainer.vue
@@ -6,20 +6,19 @@
 	<div ref="bodyEl" :data-sticky-container-header-height="headerHeight">
 		<slot></slot>
 	</div>
+	<div ref="footerEl">
+		<slot name="footer"></slot>
+	</div>
 </div>
 </template>
 
-<script lang="ts">
-// なんか動かない
-//const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP');
-const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP';
-</script>
-
 <script lang="ts" setup>
 import { onMounted, onUnmounted, provide, inject, Ref, ref, watch } from 'vue';
+import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@/const';
 
 const rootEl = $shallowRef<HTMLElement>();
 const headerEl = $shallowRef<HTMLElement>();
+const footerEl = $shallowRef<HTMLElement>();
 const bodyEl = $shallowRef<HTMLElement>();
 
 let headerHeight = $ref<string | undefined>();
@@ -27,9 +26,17 @@ let childStickyTop = $ref(0);
 const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
 provide(CURRENT_STICKY_TOP, $$(childStickyTop));
 
+let footerHeight = $ref<string | undefined>();
+let childStickyBottom = $ref(0);
+const parentStickyBottom = inject<Ref<number>>(CURRENT_STICKY_BOTTOM, ref(0));
+provide(CURRENT_STICKY_BOTTOM, $$(childStickyBottom));
+
 const calc = () => {
 	childStickyTop = parentStickyTop.value + headerEl.offsetHeight;
 	headerHeight = headerEl.offsetHeight.toString();
+
+	childStickyBottom = parentStickyBottom.value + footerEl.offsetHeight;
+	footerHeight = footerEl.offsetHeight.toString();
 };
 
 const observer = new ResizeObserver(() => {
@@ -41,7 +48,7 @@ const observer = new ResizeObserver(() => {
 onMounted(() => {
 	calc();
 
-	watch(parentStickyTop, calc);
+	watch([parentStickyTop, parentStickyBottom], calc);
 
 	watch($$(childStickyTop), () => {
 		bodyEl.style.setProperty('--stickyTop', `${childStickyTop}px`);
@@ -49,11 +56,22 @@ onMounted(() => {
 		immediate: true,
 	});
 
+	watch($$(childStickyBottom), () => {
+		bodyEl.style.setProperty('--stickyBottom', `${childStickyBottom}px`);
+	}, {
+		immediate: true,
+	});
+
 	headerEl.style.position = 'sticky';
 	headerEl.style.top = 'var(--stickyTop, 0)';
 	headerEl.style.zIndex = '1000';
 
+	footerEl.style.position = 'sticky';
+	footerEl.style.bottom = 'var(--stickyBottom, 0)';
+	footerEl.style.zIndex = '1000';
+
 	observer.observe(headerEl);
+	observer.observe(footerEl);
 });
 
 onUnmounted(() => {