Tweak UI

src/client/directives/index.ts

@@ -7,6 +7,7 @@ import tooltip from './tooltip';
 import hotkey from './hotkey';
 import appear from './appear';
 import anim from './anim';
+import stickyContainer from './sticky-container';
 
 export default function(app: App) {
 	app.directive('userPreview', userPreview);
@@ -17,4 +18,5 @@ export default function(app: App) {
 	app.directive('hotkey', hotkey);
 	app.directive('appear', appear);
 	app.directive('anim', anim);
+	app.directive('sticky-container', stickyContainer);
 }

src/client/directives/sticky-container.ts

@@ -0,0 +1,15 @@
+import { Directive } from 'vue';
+
+export default {
+	mounted(src, binding, vn) {
+		//const query = binding.value;
+
+		const header = src.children[0];
+		const currentStickyTop = getComputedStyle(src).getPropertyValue('--stickyTop');
+		src.style.setProperty('--stickyTop', `${parseInt(currentStickyTop) + header.offsetHeight}px`);
+		header.style.setProperty('--stickyTop', currentStickyTop);
+		header.style.position = 'sticky';
+		header.style.top = 'var(--stickyTop)';
+		header.style.zIndex = '1';
+	},
+} as Directive;

src/client/pages/user/index.timeline.vue

@@ -1,11 +1,11 @@
 <template>
-<div>
-	<MkTab v-model:value="with_" class="_gap _section">
+<div class="yrzkoczt" v-sticky-container>
+	<MkTab v-model:value="with_" class="_gap tab">
 		<option :value="null">{{ $ts.notes }}</option>
 		<option value="replies">{{ $ts.notesAndReplies }}</option>
 		<option value="files">{{ $ts.withFiles }}</option>
 	</MkTab>
-	<XNotes ref="timeline" class="_section _noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
+	<XNotes ref="timeline" class="_noGap_" :pagination="pagination" @before="$emit('before')" @after="e => $emit('after', e)"/>
 </div>
 </template>
 
@@ -56,3 +56,11 @@ export default defineComponent({
 	},
 });
 </script>
+
+<style lang="scss" scoped>
+.yrzkoczt {
+	> .tab {
+		background: var(--bg);
+	}
+}
+</style>