Merge branch 'develop' of codeberg.org:calckey/calckey into develop

packages/client/src/components/MkNote.vue

@@ -148,7 +148,7 @@
 						{{ appearNote.channel.name }}</MkA
 					>
 				</div>
-				<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
+				<footer ref="footerEl" class="footer" tabindex="-1">
 					<XReactionsViewer
 						v-if="enableEmojiReactions"
 						ref="reactionsViewer"
@@ -157,7 +157,7 @@
 					<button
 						v-tooltip.noDelay.bottom="i18n.ts.reply"
 						class="button _button"
-						@click="reply()"
+						@click.stop="reply()"
 					>
 						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 						<template
@@ -202,7 +202,7 @@
 						ref="reactButton"
 						v-tooltip.noDelay.bottom="i18n.ts.reaction"
 						class="button _button"
-						@click="react()"
+						@click.stop="react()"
 					>
 						<i class="ph-smiley ph-bold ph-lg"></i>
 					</button>
@@ -213,7 +213,7 @@
 						"
 						ref="reactButton"
 						class="button _button reacted"
-						@click="undoReact(appearNote)"
+						@click.stop="undoReact(appearNote)"
 						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 					>
 						<i class="ph-minus ph-bold ph-lg"></i>
@@ -223,7 +223,7 @@
 						ref="menuButton"
 						v-tooltip.noDelay.bottom="i18n.ts.more"
 						class="button _button"
-						@click="menu()"
+						@click.stop="menu()"
 					>
 						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 					</button>
@@ -862,7 +862,6 @@ defineExpose({
 				z-index: 2;
 				display: flex;
 				flex-wrap: wrap;
-				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 				margin-top: 0.4em;
 				> :deep(.button) {
 					position: relative;
@@ -876,7 +875,6 @@ defineExpose({
 					max-width: 3.5em;
 					width: max-content;
 					min-width: max-content;
-					pointer-events: all;
 					height: auto;
 					transition: opacity 0.2s;
 					&::before {

packages/client/src/components/MkNoteSub.vue

@@ -56,7 +56,7 @@
 						</div>
 					</div>
 				</div>
-				<footer ref="footerEl" class="footer" @click.stop tabindex="-1">
+				<footer ref="footerEl" class="footer" tabindex="-1">
 					<XReactionsViewer
 						v-if="enableEmojiReactions"
 						ref="reactionsViewer"
@@ -65,7 +65,7 @@
 					<button
 						v-tooltip.noDelay.bottom="i18n.ts.reply"
 						class="button _button"
-						@click="reply()"
+						@click.stop="reply()"
 					>
 						<i class="ph-arrow-u-up-left ph-bold ph-lg"></i>
 						<template v-if="appearNote.repliesCount > 0">
@@ -107,7 +107,7 @@
 						ref="reactButton"
 						v-tooltip.noDelay.bottom="i18n.ts.reaction"
 						class="button _button"
-						@click="react()"
+						@click.stop="react()"
 					>
 						<i class="ph-smiley ph-bold ph-lg"></i>
 					</button>
@@ -118,7 +118,7 @@
 						"
 						ref="reactButton"
 						class="button _button reacted"
-						@click="undoReact(appearNote)"
+						@click.stop="undoReact(appearNote)"
 						v-tooltip.noDelay.bottom="i18n.ts.removeReaction"
 					>
 						<i class="ph-minus ph-bold ph-lg"></i>
@@ -128,7 +128,7 @@
 						ref="menuButton"
 						v-tooltip.noDelay.bottom="i18n.ts.more"
 						class="button _button"
-						@click="menu()"
+						@click.stop="menu()"
 					>
 						<i class="ph-dots-three-outline ph-bold ph-lg"></i>
 					</button>
@@ -470,7 +470,6 @@ function noteClick(e) {
 				z-index: 2;
 				display: flex;
 				flex-wrap: wrap;
-				pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
 
 				> :deep(.button) {
 					position: relative;
@@ -484,7 +483,6 @@ function noteClick(e) {
 					max-width: 3.5em;
 					width: max-content;
 					min-width: max-content;
-					pointer-events: all;
 					height: auto;
 					transition: opacity 0.2s;
 					&::before {

packages/client/src/components/MkQuoteButton.vue

@@ -3,7 +3,7 @@
 		v-if="canRenote && $store.state.seperateRenoteQuote"
 		v-tooltip.noDelay.bottom="i18n.ts.quote"
 		class="eddddedb _button"
-		@click="quote()"
+		@click.stop="quote()"
 	>
 		<i class="ph-quotes ph-bold ph-lg"></i>
 	</button>

packages/client/src/components/MkReactionsViewer.reaction.vue

@@ -9,7 +9,7 @@
 			canToggle,
 			newlyAdded: !isInitial,
 		}"
-		@click="toggleReaction()"
+		@click.stop="toggleReaction()"
 	>
 		<XReactionIcon
 			class="icon"
@@ -100,13 +100,20 @@ useTooltip(
 
 <style lang="scss" scoped>
 .hkzvhatu {
+	position: relative;
 	display: inline-block;
 	height: 32px;
-	margin: 2px;
+	margin-block: 2px;
-	padding: 0 6px;
+	padding: 0 8px;
-	border-radius: 4px;
 	pointer-events: all;
 	min-width: max-content;
+	&::before {
+		content: "";
+		position: absolute;
+		inset: 0 2px;
+		border-radius: 4px;
+		z-index: -1;
+	}
 	&.newlyAdded {
 		animation: scaleInSmall 0.3s cubic-bezier(0, 0, 0, 1.2);
 		:deep(.mk-emoji) {
@@ -126,9 +133,10 @@ useTooltip(
 		}
 	}
 	&.canToggle {
-		background: rgba(0, 0, 0, 0.05);
+		&::before {
-
+			background: rgba(0, 0, 0, 0.05);
-		&:hover {
+		}
+		&:hover:not(.reacted)::before {
 			background: rgba(0, 0, 0, 0.1);
 		}
 	}
@@ -139,9 +147,7 @@ useTooltip(
 
 	&.reacted {
 		order: -1;
-		background: var(--accent);
+		&::before {
-
-		&:hover {
 			background: var(--accent);
 		}
 

packages/client/src/components/MkReactionsViewer.vue

@@ -1,5 +1,5 @@
 <template>
-	<div ref="reactionsEl" class="reactions-list tdflqwzn" :class="{ isMe }">
+	<div ref="reactionsEl" class="reactions-list swiper-no-swiping tdflqwzn" :class="{ isMe }">
 		<XReaction
 			v-for="(count, reaction) in note.reactions"
 			:key="reaction"
@@ -50,6 +50,11 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
 		transparent
 	);
 	scrollbar-width: none;
+	pointer-events: none;
+	:deep(*) {
+		pointer-events: all;
+	}
+
 	&::-webkit-scrollbar {
 		display: none;
 	}

packages/client/src/components/MkRenoteButton.vue

@@ -5,7 +5,7 @@
 		v-tooltip.noDelay.bottom="i18n.ts.renote"
 		class="button _button canRenote"
 		:class="{ renoted: hasRenotedBefore }"
-		@click="renote(false, $event)"
+		@click.stop="renote(false, $event)"
 	>
 		<i class="ph-repeat ph-bold ph-lg"></i>
 		<p v-if="count > 0 && !detailedView" class="count">{{ count }}</p>

packages/client/src/components/MkStarButton.vue

@@ -2,7 +2,7 @@
 	<button
 		v-tooltip.noDelay.bottom="i18n.ts._gallery.like"
 		class="button _button"
-		@click="star($event)"
+		@click.stop="star($event)"
 	>
 		<svg
 			v-if="defaultStore.state.woozyMode === true"

packages/client/src/components/MkStarButtonNoEmoji.vue

@@ -4,7 +4,7 @@
 		class="button _button"
 		:class="$style.root"
 		ref="buttonRef"
-		@click="toggleStar($event)"
+		@click.stop="toggleStar($event)"
 	>
 		<span v-if="!reacted">
 			<i

packages/client/src/scripts/get-user-menu.ts

@@ -260,6 +260,15 @@ export function getUserMenu(user, router: Router = mainRouter) {
 					to: `/my/messaging/${Acct.toString(user)}`,
 			  }
 			: undefined,
+		user.host != null && user.url
+			? {
+					type: "a",
+					icon: "ph-arrow-square-out ph-bold ph-lg",
+					text: i18n.ts.showOnRemote,
+					href: user.url,
+					target: "_blank",
+					
+				} : undefined,
 		null,
 		{
 			icon: "ph-list-bullets ph-bold ph-lg",