3 files changed, 26 insertions, 20 deletions

diff --git a/src/client/scripts/autocomplete.ts b/src/client/scripts/autocomplete.ts
index eab893a386..99c54c69c5 100644
--- a/src/client/scripts/autocomplete.ts
+++ b/src/client/scripts/autocomplete.ts
@@ -1,6 +1,6 @@
 import { Ref, ref } from 'vue';
 import * as getCaretCoordinates from 'textarea-caret';
-import { toASCII } from 'punycode';
+import { toASCII } from 'punycode/';
 import { popup } from '@client/os';
 
 export class Autocomplete {
diff --git a/src/client/scripts/sticky-sidebar.ts b/src/client/scripts/sticky-sidebar.ts
index 9d46a7831f..18670bc037 100644
--- a/src/client/scripts/sticky-sidebar.ts
+++ b/src/client/scripts/sticky-sidebar.ts
@@ -1,40 +1,45 @@
 export class StickySidebar {
 	private lastScrollTop = 0;
+	private container: HTMLElement;
 	private el: HTMLElement;
 	private spacer: HTMLElement;
 	private marginTop: number;
 	private isTop = false;
 	private isBottom = false;
+	private offsetTop: number;
 
-	constructor(el: StickySidebar['el'], spacer: StickySidebar['spacer'], marginTop = 0) {
-		this.el = el;
-		this.spacer = spacer;
+	constructor(container: StickySidebar['container'], marginTop = 0) {
+		this.container = container;
+		this.el = this.container.children[0] as HTMLElement;
+		this.el.style.position = 'sticky';
+		this.spacer = document.createElement('div');
+		this.container.prepend(this.spacer);
 		this.marginTop = marginTop;
+		this.offsetTop = this.container.getBoundingClientRect().top;
 	}
 
 	public calc(scrollTop: number) {
 		if (scrollTop > this.lastScrollTop) { // downscroll
-			const overflow = this.el.clientHeight - window.innerHeight;
+			const overflow = Math.max(0, (this.el.clientHeight + this.marginTop) - window.innerHeight);
 			this.el.style.bottom = null;
-			this.el.style.top = `${-overflow}px`;
+			this.el.style.top = `${-overflow + this.marginTop}px`;
 
 			this.isBottom = (scrollTop + window.innerHeight) >= (this.el.offsetTop + this.el.clientHeight);
 
 			if (this.isTop) {
 				this.isTop = false;
-				this.spacer.style.marginTop = `${this.lastScrollTop}px`;
+				this.spacer.style.marginTop = `${Math.max(0, this.lastScrollTop + this.marginTop - this.offsetTop)}px`;
 			}
 		} else { // upscroll
-			const overflow = this.el.clientHeight - window.innerHeight;
+			const overflow = (this.el.clientHeight + this.marginTop) - window.innerHeight;
 			this.el.style.top = null;
-			this.el.style.bottom = `${-overflow - this.marginTop}px`;
+			this.el.style.bottom = `${-overflow}px`;
 
 			this.isTop = scrollTop <= this.el.offsetTop;
 
 			if (this.isBottom) {
 				this.isBottom = false;
-				const overflow = this.el.clientHeight - window.innerHeight;
-				this.spacer.style.marginTop = `${this.lastScrollTop - (overflow + this.marginTop)}px`;
+				this.spacer.style.marginTop = `${this.lastScrollTop + this.marginTop - this.offsetTop - overflow}px`;
 			}
 		}
 
diff --git a/src/client/scripts/theme.ts b/src/client/scripts/theme.ts
index c1580c6367..b0bf620a7d 100644
--- a/src/client/scripts/theme.ts
+++ b/src/client/scripts/theme.ts
@@ -9,18 +9,19 @@ export type Theme = {
 	props: Record<string, string>;
 };
 
-export const lightTheme: Theme = require('../themes/_light.json5');
-export const darkTheme: Theme = require('../themes/_dark.json5');
+export const lightTheme: Theme = require('@client/themes/_light.json5');
+export const darkTheme: Theme = require('@client/themes/_dark.json5');
 
 export const themeProps = Object.keys(lightTheme.props).filter(key => !key.startsWith('X'));
 
 export const builtinThemes = [
-	require('../themes/l-light.json5'),
-	require('../themes/l-apricot.json5'),
+	require('@client/themes/l-light.json5'),
+	require('@client/themes/l-apricot.json5'),
+	require('@client/themes/l-rainy.json5'),
 
-	require('../themes/d-dark.json5'),
-	require('../themes/d-persimmon.json5'),
-	require('../themes/d-black.json5'),
+	require('@client/themes/d-dark.json5'),
+	require('@client/themes/d-persimmon.json5'),
+	require('@client/themes/d-black.json5'),
 ] as Theme[];
 
 let timeout = null;
@@ -28,10 +29,10 @@ let timeout = null;
 export function applyTheme(theme: Theme, persist = true) {
 	if (timeout) clearTimeout(timeout);
 
-	document.documentElement.classList.add('changing-theme');
+	document.documentElement.classList.add('_themeChanging_');
 
 	timeout = setTimeout(() => {
-		document.documentElement.classList.remove('changing-theme');
+		document.documentElement.classList.remove('_themeChanging_');
 	}, 1000);
 
 	// Deep copy