merge: another batch of small ui tweaks (#255)

packages/frontend/src/components/MkChannelPreview.vue

@@ -198,7 +198,7 @@ const bannerStyle = computed(() => {
 	transform: translate(25%, -25%);
 	background-color: var(--accent);
 	border: solid var(--bg) 4px;
-	border-radius: 100%;
+	border-radius: var(--radius-full);
 	width: 1.5rem;
 	height: 1.5rem;
 	aspect-ratio: 1 / 1;

packages/frontend/src/components/MkCode.core.vue

@@ -62,7 +62,7 @@ watch(() => props.lang, (to) => {
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 
 	& pre,
 	& code {

packages/frontend/src/components/MkCode.vue

@@ -56,7 +56,7 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'))
 	padding: 1em;
 	margin: .5em 0;
 	overflow: auto;
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 }
 
 .codeBlockFallbackCode {
@@ -74,7 +74,7 @@ const XCode = defineAsyncComponent(() => import('@/components/MkCode.core.vue'))
 	cursor: pointer;
 
 	box-sizing: border-box;
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 	padding: 24px;
 	margin-top: 4px;
 	color: #D4D4D4;

packages/frontend/src/components/MkCodeEditor.vue

@@ -161,7 +161,7 @@ watch(v, newValue => {
 	overflow-y: hidden;
 	box-sizing: border-box;
 	margin: 0;
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 	padding: 0;
 	color: var(--fg);
 	border: solid 1px var(--panel);
@@ -202,7 +202,7 @@ watch(v, newValue => {
 	caret-color: rgb(225, 228, 232);
 	background-color: transparent;
 	border: 0;
-	border-radius: 6px;
+	border-radius: var(--radius-sm);
 	outline: 0;
 	min-width: calc(100% - 24px);
 	height: 100%;

packages/frontend/src/components/MkEmojiPicker.section.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <!-- このコンポーネントの要素のclassは親から利用されるのでむやみに弄らないこと -->
 <!-- フォルダの中にはカスタム絵文字だけ（Unicode絵文字もこっち） -->
-<section v-if="!hasChildSection" v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
+<section v-if="!hasChildSection" v-panel style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--divider);">
 	<header class="_acrylic" @click="shown = !shown">
 		<i class="toggle ti-fw" :class="shown ? 'ph-caret-down ph-bold ph-lg' : 'ph-caret-up ph-bold ph-lg'"></i> <slot></slot> (<i class="ph-bold ph-lg"></i>:{{ emojis.length }})
 	</header>
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</div>
 </section>
 <!-- フォルダの中にはカスタム絵文字やフォルダがある -->
-<section v-else v-panel style="border-radius: 6px; border-bottom: 0.5px solid var(--divider);">
+<section v-else v-panel style="border-radius: var(--radius-sm); border-bottom: 0.5px solid var(--divider);">
 	<header class="_acrylic" @click="shown = !shown">
 		<i class="toggle ti-fw" :class="shown ? 'ph-caret-down ph-bold ph-lg' : 'ph-caret-up ph-bold ph-lg'"></i> <slot></slot> (<i class="ph-folder ph-bold ph-lg"></i>:{{ customEmojiTree.length }} <i class="ti ti-icons ti-fw"></i>:{{ emojis.length }})
 	</header>

packages/frontend/src/components/MkMediaBanner.vue

@@ -14,7 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<audio
 			ref="audioEl"
 			:src="media.url"
-			:title="media.name"
+			:title="media.comment ?? undefined"
 			controls
 			preload="metadata"
 		/>

packages/frontend/src/components/MkMediaImage.vue

@@ -8,10 +8,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<component
 		:is="disableImageLink ? 'div' : 'a'"
 		v-bind="disableImageLink ? {
-			title: image.name,
+			title: image.comment,
 			class: $style.imageContainer,
 		} : {
-			title: image.name,
+			title: image.comment,
 			class: $style.imageContainer,
 			href: image.url,
 			style: 'cursor: zoom-in;'
@@ -22,8 +22,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 			:src="(defaultStore.state.dataSaver.media && hide) ? null : url"
 			:forceBlurhash="hide"
 			:cover="hide || cover"
-			:alt="image.comment || image.name"
+			:alt="image.comment"
-			:title="image.comment || image.name"
+			:title="image.comment"
 			:width="image.properties.width"
 			:height="image.properties.height"
 			:style="hide ? 'filter: brightness(0.7);' : null"

packages/frontend/src/components/MkMediaList.vue

@@ -156,8 +156,8 @@ onMounted(() => {
 			[itemData.w, itemData.h] = [itemData.h, itemData.w];
 		}
 		itemData.msrc = file.thumbnailUrl;
-		itemData.alt = file.comment ?? file.name;
+		itemData.alt = file.comment ?? undefined;
-		itemData.comment = file.comment ?? file.name;
+		itemData.comment = file.comment;
 		itemData.thumbCropped = true;
 	});
 
@@ -172,6 +172,12 @@ onMounted(() => {
 				el.appendChild(textBox);
 
 				pwsp.on('change', (a) => {
+					if (pwsp.currSlide?.data.comment) {
+						textBox.style.display = '';
+					} else {
+						textBox.style.display = 'none';
+					}
+
 					textBox.textContent = pwsp.currSlide.data.comment;
 				});
 			},

packages/frontend/src/components/MkMediaVideo.vue

@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		ref="videoEl"
 		:class="$style.video"
 		:poster="video.thumbnailUrl"
-		:title="video.comment"
+		:title="video.comment ?? undefined"
 		:alt="video.comment"
 		preload="none"
 		controls

packages/frontend/src/components/MkPostForm.vue

@@ -923,12 +923,19 @@ onMounted(() => {
 		if (!props.instant && !props.mention && !props.specified && !props.mock) {
 			const draft = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}')[draftKey.value];
 			if (draft) {
-				text.value = draft.data.text;
+				if (typeof draft.data.text === 'string' && draft.data.text.trim()) {
+					text.value = draft.data.text;
+				}
+
+				if (typeof draft.data.cw === 'string' && draft.data.cw.trim()) {
+					cw.value = draft.data.cw;
+				}
+
 				useCw.value = draft.data.useCw;
-				cw.value = draft.data.cw;
 				visibility.value = draft.data.visibility;
 				localOnly.value = draft.data.localOnly;
 				files.value = (draft.data.files || []).filter(draftFile => draftFile);
+
 				if (draft.data.poll) {
 					poll.value = draft.data.poll;
 				}
@@ -1052,7 +1059,7 @@ defineExpose({
 	left: 12px;
 	width: 5px;
 	height: 100% ;
-	border-radius: 999px;
+	border-radius: var(--radius-ellipse);
 	pointer-events: none;
 }
 

packages/frontend/src/components/SkOldNoteWindow.vue

@@ -132,7 +132,7 @@ const isRenote = (
 );
 
 const el = shallowRef<HTMLElement>();
-let appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note);
+let appearNote = computed(() => isRenote ? note.value.renote as Misskey.entities.Note : note.value);
 const renoteUrl = appearNote.value.renote ? appearNote.value.renote.url : null;
 const renoteUri = appearNote.value.renote ? appearNote.value.renote.uri : null;
 

packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts

@@ -277,7 +277,7 @@ export default function(props: MfmProps) {
 						const child = token.children[0];
 						const unixtime = parseInt(child.type === 'text' ? child.props.text : '');
 						return h('span', {
-							style: 'display: inline-block; font-size: 90%; border: solid 1px var(--divider); border-radius: 999px; padding: 4px 10px 4px 6px;',
+							style: 'display: inline-block; font-size: 90%; border: solid 1px var(--divider); border-radius: var(--radius-ellipse); padding: 4px 10px 4px 6px;',
 						}, [
 							h('i', {
 								class: 'ph-clock ph-bold ph-lg',

packages/frontend/src/pages/settings/avatar-decoration.decoration.vue

@@ -42,7 +42,7 @@ const emit = defineEmits<{
 	cursor: pointer;
 	padding: 16px 16px 28px 16px;
 	border: solid 2px var(--divider);
-	border-radius: 8px;
+	border-radius: var(--radius-sm);
 	text-align: center;
 	font-size: 90%;
 	overflow: clip;

packages/frontend/src/pages/settings/emoji-picker.vue

@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div class="_gaps">
 			<div>
-				<div v-panel style="border-radius: 6px;">
+				<div v-panel style="border-radius: var(--radius-sm);">
 					<Sortable
 						v-model="pinnedEmojisForReaction"
 						:class="$style.emojis"
@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<div class="_gaps">
 			<div>
-				<div v-panel style="border-radius: 6px;">
+				<div v-panel style="border-radius: var(--radius-sm);">
 					<Sortable
 						v-model="pinnedEmojis"
 						:class="$style.emojis"

packages/frontend/src/pages/user/raw.vue

@@ -107,7 +107,7 @@ const suspended = computed(() => props.user.isSuspended ?? false);
 	> .moderator {
 		display: inline-block;
 		border: solid 1px;
-		border-radius: 6px;
+		border-radius: var(--radius-sm);
 		padding: 2px 6px;
 		font-size: 85%;
 	}

packages/frontend/src/ui/_common_/navbar.vue

@@ -29,7 +29,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}"
 				>
 					<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
-					<span v-if="navbarItemDef[item].indicated" :class="[$style.itemIndicator, { [$style.hasItemIndicateValueIcon]: navbarItemDef[item].indicateValue }]">
+					<span v-if="navbarItemDef[item].indicated" :class="$style.itemIndicator">
 						<span v-if="navbarItemDef[item].indicateValue" class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ navbarItemDef[item].indicateValue }}</span>
 						<i v-else class="_indicatorCircle"></i>
 					</span>
@@ -315,7 +315,7 @@ function more(ev: MouseEvent) {
 		font-size: 8px;
 		animation: blink 1s infinite;
 
-		&.hasItemIndicateValueIcon {
+		&:has(.itemIndicateValueIcon) {
 			animation: none;
 			left: auto;
 			right: 40px;