Merge pull request 'Display author's replies first, fixes, other stuff' (#10194) from Freeplay/calckey:notes into develop

Reviewed-on: https://codeberg.org/calckey/calckey/pulls/10194

packages/backend/src/server/web/views/base.pug

@@ -31,7 +31,7 @@ html
 		meta(name='theme-color-orig' content= themeColor || '#31748f')
 		meta(property='twitter:card' content='summary')
 		meta(property='og:site_name' content= instanceName || 'Calckey')
-		meta(name='viewport' content='width=device-width, initial-scale=1')
+		meta(name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no')
 		link(rel='icon' href= icon || `/favicon.ico?${ timestamp }`)
 		link(rel='apple-touch-icon' href= icon || `/apple-touch-icon.png?${ timestamp }`)
 		link(rel='manifest' href='/manifest.json')

packages/client/src/components/MkNote.vue

@@ -401,20 +401,20 @@ function onContextmenu(ev: MouseEvent): void {
 						os.pageWindow(notePage(appearNote));
 					},
 				},
-				{
+				notePage(appearNote) != location.pathname ? {
 					icon: "ph-arrows-out-simple ph-bold ph-lg",
 					text: i18n.ts.showInPage,
 					action: () => {
 						router.push(notePage(appearNote), "forcePage");
 					},
-				},
+				} : undefined,
 				null,
 				{
+					type: "a",
 					icon: "ph-arrow-square-out ph-bold ph-lg",
 					text: i18n.ts.openInNewTab,
-					action: () => {
+					href: notePage(appearNote),
-						window.open(notePage(appearNote), "_blank");
+					target: "_blank",
-					},
 				},
 				{
 					icon: "ph-link-simple ph-bold ph-lg",
@@ -423,6 +423,13 @@ function onContextmenu(ev: MouseEvent): void {
 						copyToClipboard(`${url}${notePage(appearNote)}`);
 					},
 				},
+				note.user.host != null ? {
+					type: "a",
+					icon: "ph-arrow-square-up-right ph-bold ph-lg",
+					text: i18n.ts.showOnRemote,
+					href: note.url ?? note.uri ?? "",
+					target: "_blank",
+				} : undefined,
 			],
 			ev
 		);

packages/client/src/components/MkNoteDetailed.vue

@@ -82,7 +82,7 @@
 			:key="note.id"
 			:note="note"
 			class="reply"
-			:conversation="directQuotes"
+			:conversation="replies"
 			:detailedView="true"
 		/>
 		<MkLoading v-else-if="tab === 'quotes' && directQuotes.length > 0" />
@@ -357,6 +357,12 @@ os.api("notes/children", {
 	limit: 30,
 	depth: 12,
 }).then((res) => {
+	res = res.reduce((acc, note) => {
+		if (note.userId == appearNote.userId) {
+			return [...acc, note];
+		}
+		return [note, ...acc];
+	}, []);
 	replies.value = res;
 	directReplies = res
 		.filter((note) => note.replyId === appearNote.id)
@@ -619,10 +625,7 @@ onUnmounted(() => {
 			opacity: 1;
 		}
 	}
-
+	
-	&.max-width_500px {
-		font-size: 0.9em;
-	}
 	&.max-width_450px {
 		> .reply-to:first-child {
 			padding-top: 14px;

packages/client/src/components/MkNoteSub.vue

@@ -337,7 +337,7 @@ function onContextmenu(ev: MouseEvent): void {
 	} else {
 		os.contextMenu(
 			[
-				{
+			{
 					type: "label",
 					text: notePage(appearNote),
 				},
@@ -348,20 +348,20 @@ function onContextmenu(ev: MouseEvent): void {
 						os.pageWindow(notePage(appearNote));
 					},
 				},
-				{
+				notePage(appearNote) != location.pathname ? {
 					icon: "ph-arrows-out-simple ph-bold ph-lg",
 					text: i18n.ts.showInPage,
 					action: () => {
 						router.push(notePage(appearNote), "forcePage");
 					},
-				},
+				} : undefined,
 				null,
 				{
+					type: "a",
 					icon: "ph-arrow-square-out ph-bold ph-lg",
 					text: i18n.ts.openInNewTab,
-					action: () => {
+					href: notePage(appearNote),
-						window.open(notePage(appearNote), "_blank");
+					target: "_blank",
-					},
 				},
 				{
 					icon: "ph-link-simple ph-bold ph-lg",
@@ -370,6 +370,13 @@ function onContextmenu(ev: MouseEvent): void {
 						copyToClipboard(`${url}${notePage(appearNote)}`);
 					},
 				},
+				note.user.host != null ? {
+					type: "a",
+					icon: "ph-arrow-square-up-right ph-bold ph-lg",
+					text: i18n.ts.showOnRemote,
+					href: note.url ?? note.uri ?? "",
+					target: "_blank",
+				} : undefined,
 			],
 			ev
 		);

packages/client/src/components/global/MkPageHeader.vue

@@ -305,7 +305,10 @@ onUnmounted(() => {
 	box-sizing: border-box;
 	overflow: hidden;
 	@media (max-width: 500px) {
-		padding-inline: 12p;
+		padding-inline: 16px;
+		&.tabs > .buttons > :deep(.follow-button > span) {
+			display: none;
+		}
 	}
 	@media (max-width: 700px) {
 		> .left {
@@ -432,8 +435,6 @@ onUnmounted(() => {
 			text-align: left;
 			font-weight: bold;
 			flex-shrink: 0;
-			margin-right: 1rem;
-
 			> .avatar {
 				$size: 32px;
 				display: inline-block;

packages/client/src/init.ts

@@ -104,17 +104,6 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
 	});
 	//#endregion
 
-	// If mobile, insert the viewport meta tag
-	if (["smartphone", "tablet"].includes(deviceKind)) {
-		const viewport = document.getElementsByName("viewport").item(0);
-		viewport.setAttribute(
-			"content",
-			`${viewport.getAttribute(
-				"content",
-			)}, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover`,
-		);
-	}
-
 	//#region Set lang attr
 	const html = document.documentElement;
 	html.setAttribute("lang", lang);
@@ -311,12 +300,11 @@ import { getAccountFromId } from "@/scripts/get-account-from-id";
 	if (ColdDeviceStorage.get("syncDeviceDarkMode")) {
 		defaultStore.set("darkMode", isDeviceDarkmode());
 	}
-
+	window.matchMedia("(prefers-color-scheme: dark)").onchange = (mql) => {
-	window.matchMedia("(prefers-color-scheme: dark)").addListener((mql) => {
 		if (ColdDeviceStorage.get("syncDeviceDarkMode")) {
 			defaultStore.set("darkMode", mql.matches);
 		}
-	});
+	};
 	//#endregion
 
 	fetchInstanceMetaPromise.then(() => {

packages/client/src/pages/note.vue

@@ -162,12 +162,12 @@ definePageMetadata(
 	computed(() =>
 		note
 			? {
-					title: i18n.t("noteOf", { user: note.user.name }),
+					title: i18n.t("noteOf", { user: note.user.name || note.user.username }),
 					subtitle: new Date(note.createdAt).toLocaleString(),
 					avatar: note.user,
 					path: `/notes/${note.id}`,
 					share: {
-						title: i18n.t("noteOf", { user: note.user.name }),
+						title: i18n.t("noteOf", { user: note.user.name || note.user.username }),
 						text: note.text,
 					},
 			  }

packages/client/src/ui/universal.vue

@@ -15,10 +15,7 @@
 				:style="{ background: pageMetadata?.value?.bg }"
 				@contextmenu.stop="onContextmenu"
 			>
-				<div :class="$style.content">
+				<RouterView />
-					<RouterView />
-				</div>
-				<div :class="$style.spacer"></div>
 			</main>
 		</MkStickyContainer>
 
@@ -173,6 +170,7 @@ import type { PageMetadata } from "@/scripts/page-metadata";
 import { instanceName, ui } from "@/config";
 import { StickySidebar } from "@/scripts/sticky-sidebar";
 import XDrawerMenu from "@/ui/_common_/navbar-for-mobile.vue";
+import XSidebar from "@/ui/_common_/navbar.vue";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
 import { navbarItemDef } from "@/navbar";
@@ -186,7 +184,6 @@ import {
 import { deviceKind } from "@/scripts/device-kind";
 
 const XWidgets = defineAsyncComponent(() => import("./universal.widgets.vue"));
-const XSidebar = defineAsyncComponent(() => import("@/ui/_common_/navbar.vue"));
 const XStatusBars = defineAsyncComponent(
 	() => import("@/ui/_common_/statusbars.vue")
 );
@@ -462,6 +459,11 @@ console.log(mainRouter.currentRoute.value.name);
 	&.isMobile {
 		--stickyBottom: 6rem;
 	}
+	&:not(.isMobile) {
+		> .contents {
+			border-right: .5px solid var(--divider);
+		}
+	}
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
 	}
@@ -470,6 +472,10 @@ console.log(mainRouter.currentRoute.value.name);
 		justify-content: center;
 		&:not(.isMobile) {
 			--navBg: transparent;
+			> .contents {
+				border-inline: .5px solid var(--divider);
+				margin-inline: -1px;
+			}
 		}
 
 		> :deep(.sidebar:not(.iconOnly)) {
@@ -545,18 +551,19 @@ console.log(mainRouter.currentRoute.value.name);
 		}
 	}
 
-	> .sidebar {
-		border-right: solid 0.5px var(--divider);
-	}
-
 	> .contents {
 		width: 100%;
 		min-width: 0;
+		$widgets-hide-threshold: 1090px;
+		@media (max-width: $widgets-hide-threshold) {
+			padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
+		}
 	}
 
 	> .widgets {
 		padding: 0 var(--margin);
-		border-left: solid 0.5px var(--divider);
+		width: 300px;
+		box-sizing: content-box;
 
 		@media (max-width: $widgets-hide-threshold) {
 			display: none;
@@ -732,14 +739,4 @@ console.log(mainRouter.currentRoute.value.name);
 	top: 0;
 	left: 0;
 }
-
-.spacer {
-	$widgets-hide-threshold: 1090px;
-
-	height: calc(env(safe-area-inset-bottom, 0px) + 96px);
-
-	@media (min-width: ($widgets-hide-threshold + 1px)) {
-		display: none;
-	}
-}
 </style>