Merge branches 'develop' and 'develop' of codeberg.org:calckey/calckey into develop

locales/ca-ES.yml

@@ -385,12 +385,13 @@ _cw:
   chars: '{count} caràcters'
 _visibility:
   followers: "Seguidors"
-  publicDescription: La teva publicació serà visible per a tots els usuaris
+  publicDescription: La teva publicació serà visible per a totes les línies de temps
+    públiques
   localOnly: Només Local
   specified: Directe
   home: Sense llistar
   homeDescription: Publica només a la línea de temps local
-  followersDescription: Fes visible només per als teus seguidors
+  followersDescription: Fes visible només per als teus seguidors i usuaris mencionats
   specifiedDescription: Fer visible només per a usuaris determinats
   public: Públic
   localOnlyDescription: No és visible per als usuaris remots
@@ -2031,11 +2032,12 @@ _auth:
   shareAccessAsk: Estàs segur que vols autoritzar aquesta aplicació per accedir al
     teu compte?
   shareAccess: Vols autoritzar "{name}" per accedir a aquest compte?
-  permissionAsk: Aquesta aplicació sol·licita els següents permisos
+  permissionAsk: 'Aquesta aplicació sol·licita els següents permisos:'
   callback: Tornant a l'aplicació
   denied: Accés denegat
   pleaseGoBack: Si us plau, torneu a l'aplicació
-  copyAsk: Posa el següent codi d'autorització a l'aplicació
+  copyAsk: "Posa el següent codi d'autorització a l'aplicació:"
+  allPermissions: Accés complet al compte
 _weekday:
   wednesday: Dimecres
   saturday: Dissabte

locales/en-US.yml

@@ -941,6 +941,7 @@ deleteAccountConfirm: "This will irreversibly delete your account. Proceed?"
 incorrectPassword: "Incorrect password."
 voteConfirm: "Confirm your vote for \"{choice}\"?"
 hide: "Hide"
+alt: "ALT"
 leaveGroup: "Leave group"
 leaveGroupConfirm: "Are you sure you want to leave \"{name}\"?"
 useDrawerReactionPickerForMobile: "Display reaction picker as drawer on mobile"

packages/backend/src/services/note/create.ts

@@ -196,7 +196,13 @@ export default async (
 			data.channel = await Channels.findOneBy({ id: data.reply.channelId });
 		}
 
-		if (data.createdAt == null) data.createdAt = new Date();
+		const now = new Date();
+		if (
+			!data.createdAt ||
+			isNaN(data.createdAt.getTime()) ||
+			data.createdAt > now
+		)
+			data.createdAt = now;
 		if (data.visibility == null) data.visibility = "public";
 		if (data.localOnly == null) data.localOnly = false;
 		if (data.channel != null) data.visibility = "public";

packages/client/src/components/MkContainer.vue

@@ -196,6 +196,7 @@ export default defineComponent({
 	&.scrollable {
 		display: flex;
 		flex-direction: column;
+		flex-grow: 1;
 
 		> .content {
 			overflow: auto;

packages/client/src/components/MkMediaImage.vue

@@ -16,25 +16,34 @@
 		</div>
 	</button>
 	<div v-else class="gqnyydlz">
-		<a :href="image.url" :title="image.name">
+		<a :href="image.url">
 			<ImgWithBlurhash
 				:hash="image.blurhash"
 				:src="url"
 				:alt="image.comment"
 				:type="image.type"
-				:title="image.comment"
 				:cover="false"
 			/>
 			<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
 		</a>
+		<div class="buttons">
+			<button
+				v-if="image.comment"
+				v-tooltip="i18n.ts.alt"
+				class="_button"
+				@click.stop="captionPopup"
+			>
+				<i class="ph-subtitles ph-bold ph-lg"></i>
+			</button>
 			<button
 				v-tooltip="i18n.ts.hide"
-			class="_button hide"
+				class="_button"
 				@click="hide = true"
 			>
 				<i class="ph-eye-slash ph-bold ph-lg"></i>
 			</button>
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -44,6 +53,8 @@ import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import ImgWithBlurhash from "@/components/MkImgWithBlurhash.vue";
 import { defaultStore } from "@/store";
 import { i18n } from "@/i18n";
+import * as os from "@/os";
+
 
 const props = defineProps<{
 	image: misskey.entities.DriveFile;
@@ -59,6 +70,13 @@ const url =
 		? getStaticImageUrl(props.image.thumbnailUrl)
 		: props.image.thumbnailUrl;
 
+function captionPopup() {
+	os.alert({
+		type: "info",
+		text: props.image.comment
+	})
+}
+
 // Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
 watch(
 	() => props.image,
@@ -110,10 +128,15 @@ watch(
 	position: relative;
 	background: var(--bg);
 
-	> .hide {
+	> .buttons {
-		display: block;
+		display: flex;
+		gap: 4px;
 		position: absolute;
 		border-radius: 6px;
+		overflow: hidden;
+		top: 12px;
+		right: 12px;
+		> * {
 			background-color: var(--accentedBg);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
 			backdrop-filter: var(--blur, blur(15px));
@@ -121,11 +144,6 @@ watch(
 			font-size: 0.8em;
 			padding: 6px 8px;
 			text-align: center;
-		top: 12px;
-		right: 12px;
-
-		> i {
-			display: block;
 		}
 	}
 

packages/client/src/components/MkMediaVideo.vue

@@ -32,7 +32,6 @@
 		>
 			<video
 				:poster="video.thumbnailUrl"
-				:title="video.comment"
 				:aria-label="video.comment"
 				preload="none"
 				controls
@@ -41,14 +40,24 @@
 				<source :src="video.url" :type="video.type" />
 			</video>
 		</VuePlyr>
+		<div class="buttons">
+			<button
+				v-if="video.comment"
+				v-tooltip="i18n.ts.alt"
+				class="_button"
+				@click.stop="captionPopup"
+			>
+				<i class="ph-subtitles ph-bold ph-lg"></i>
+			</button>
 			<button
 				v-tooltip="i18n.ts.hide"
-			class="_button hide"
+				class="_button"
 				@click="hide = true"
 			>
 				<i class="ph-eye-slash ph-bold ph-lg"></i>
 			</button>
 		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -58,6 +67,7 @@ import type * as misskey from "calckey-js";
 import { defaultStore } from "@/store";
 import "vue-plyr/dist/vue-plyr.css";
 import { i18n } from "@/i18n";
+import * as os from "@/os";
 
 const props = defineProps<{
 	video: misskey.entities.DriveFile;
@@ -72,6 +82,13 @@ const hide = ref(
 		: props.video.isSensitive && defaultStore.state.nsfw !== "ignore"
 );
 
+function captionPopup() {
+	os.alert({
+		type: "info",
+		text: props.video.comment
+	})
+}
+
 onMounted(() => {
 	mini.value = plyr.value.player.media.scrollWidth < 300;
 	if (mini.value) {
@@ -87,10 +104,15 @@ onMounted(() => {
 	position: relative;
 	--plyr-color-main: var(--accent);
 
-	> .hide {
+	> .buttons {
-		display: block;
+		display: flex;
+		gap: 4px;
 		position: absolute;
 		border-radius: 6px;
+		overflow: hidden;
+		top: 12px;
+		right: 12px;
+		> * {
 			background-color: var(--accentedBg);
 			-webkit-backdrop-filter: var(--blur, blur(15px));
 			backdrop-filter: var(--blur, blur(15px));
@@ -98,11 +120,6 @@ onMounted(() => {
 			font-size: 0.8em;
 			padding: 6px 8px;
 			text-align: center;
-		top: 12px;
-		right: 12px;
-
-		> i {
-			display: block;
 		}
 	}
 

packages/client/src/components/MkWidgets.vue

@@ -172,6 +172,9 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 
 <style lang="scss" scoped>
 .vjoppmmu {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
 	> header {
 		margin: 16px 0;
 
@@ -184,7 +187,7 @@ function onContextmenu(widget: Widget, ev: MouseEvent) {
 	> .widget,
 	.customize-container {
 		contain: content;
-		margin: var(--margin) 0;
+		margin-bottom: var(--margin);
 
 		&:first-of-type {
 			margin-top: 0;

packages/client/src/pages/timeline.vue

@@ -17,8 +17,13 @@
 				/>
 
 				<div v-if="queue > 0" class="new">
-					<button class="_buttonPrimary" @click="top()">
+					<button 
+						class="_buttonPrimary _shadow" 
+						@click="top()"
+						:class="{ instant: !$store.state.animation }"
+					>
 						{{ i18n.ts.newNoteRecived }}
+						<i class="ph-arrow-up ph-bold"></i>
 					</button>
 				</div>
 				<!-- <div v-if="!isMobile" class="tl _block">
@@ -328,22 +333,65 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+@keyframes slideUp {
+	to {
+		transform: translateY(-100%);
+		opacity: 0;
+	}
+}
 .cmuxhskf {
 	--swiper-theme-color: var(--accent);
 
 	> .new {
 		position: sticky;
-		top: calc(var(--stickyTop, 0px) + 16px);
+		display: flex;
+		justify-content: center;
+		top: calc(var(--stickyTop, 0px) - 60px);
 		z-index: 1000;
-		width: 100%;
+		width: 600px;
+		max-width: 100%;
+		height: 60px;
+		margin-top: -60px;
 		pointer-events: none;
-
+		margin-inline: auto;
+		z-index: 1001;
+		box-shadow: 0 24px 24px -20px var(--accentedBg);
+		&::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			border: 2px solid var(--accentDarken);
+			mask: linear-gradient(to right, transparent,black 40% 60%,transparent);
+			-webkit-mask: linear-gradient(to right, transparent,black 40% 60%,transparent);
+		}
 		> button {
-			display: block;
+			display: flex;
-			margin: var(--margin) auto 0 auto;
+			position: absolute;
-			padding: 8px 16px;
+			top: 120%;
-			border-radius: 32px;
+			margin-inline: auto;
+			border-radius: 2em;
+			padding: .5em 1.2em;
+			background: var(--accentedBg);
+			border: 0;
+			color: var(--accent);
+			overflow: hidden;
 			pointer-events: all;
+			transform: translateY(-100%);
+			opacity: 0;
+			animation: reset .4s forwards cubic-bezier(0,.4,0,1.1),
+									slideUp 1s 5s forwards cubic-bezier(1,0,1,1);
+			&::before {
+				content: "";
+				position: absolute;
+				inset: 0;
+				background: var(--bg);
+				z-index: -1;
+			}
+			i {
+				margin-left: .7em;
+				border-left: 1px solid var(--accentedBg);
+				padding-left: .4em;
+			}
 		}
 	}
 

packages/client/src/style.scss

@@ -842,6 +842,16 @@ hr {
   margin: 0;
 }
 
+@keyframes reset {
+	to {
+		transform: none;
+		opacity: 1;
+	}
+}
+.instant {
+	animation-duration: 0s !important;
+}
+
 @media(prefers-reduced-motion: no-preference) {
 	@keyframes scaleIn {
 		from {

packages/client/src/ui/universal.widgets.vue

@@ -88,9 +88,11 @@ function updateWidgets(widgets) {
 	min-height: 100vh;
 	padding: var(--margin) 0;
 	box-sizing: border-box;
+	display: flex;
+	flex-direction: column;
 
-	> * {
+	> :deep(*) {
-		margin: var(--margin) 0;
+		margin-top: var(--margin);
 		width: 300px;
 
 		&:first-child {
@@ -98,6 +100,10 @@ function updateWidgets(widgets) {
 		}
 	}
 
+	.a:empty {
+		display: none;
+	}
+
 	> .add {
 		margin: 0 auto;
 	}

packages/client/src/widgets/rss.vue

@@ -1,5 +1,10 @@
 <template>
-	<MkContainer :show-header="widgetProps.showHeader" class="mkw-rss">
+	<MkContainer 
+		:show-header="widgetProps.showHeader"
+		class="mkw-rss" 
+		:scrollable="true"
+		:style="`height: ${widgetProps.height}px;`"
+	>
 		<template #header><i class="ph-rss ph-bold ph-lg"></i>RSS</template>
 		<template #func
 			><button class="_button" @click="configure">
@@ -44,6 +49,10 @@ const widgetPropsDef = {
 		type: "string" as const,
 		default: "http://feeds.afpbb.com/rss/afpbb/afpbbnews",
 	},
+	height: {
+		type: "number" as const,
+		default: 300,
+	},
 	showHeader: {
 		type: "boolean" as const,
 		default: true,