Merge branch 'develop' into mkjs-n

locales/index.d.ts

@@ -1060,6 +1060,7 @@ export interface Locale {
     "rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn": string;
     "cancelReactionConfirm": string;
     "changeReactionConfirm": string;
+    "goToMisskey": string;
     "_initialAccountSetting": {
         "accountCreated": string;
         "letsStartAccountSetup": string;

locales/ja-JP.yml

@@ -1057,6 +1057,7 @@ rolesThatCanBeUsedThisEmojiAsReactionEmptyDescription: "ロールの指定が一
 rolesThatCanBeUsedThisEmojiAsReactionPublicRoleWarn: "ロールは公開ロールである必要があります。"
 cancelReactionConfirm: "リアクションを取り消しますか？"
 changeReactionConfirm: "リアクションを変更しますか？"
+goToMisskey: "Misskeyへ"
 
 _initialAccountSetting:
   accountCreated: "アカウントの作成が完了しました！"

packages/frontend/src/pages/share.vue

@@ -16,7 +16,10 @@
 			class="_panel"
 			@posted="state = 'posted'"
 		/>
-		<MkButton v-else-if="state === 'posted'" primary :class="$style.close" @click="close()">{{ i18n.ts.close }}</MkButton>
+		<div v-else-if="state === 'posted'" class="_buttonsCenter">
+			<MkButton primary @click="close">{{ i18n.ts.close }}</MkButton>
+			<MkButton @click="goToMisskey">{{ i18n.ts.goToMisskey }}</MkButton>
+		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
@@ -148,10 +151,14 @@ function close(): void {
 
 	// 閉じなければ100ms後タイムラインに
 	window.setTimeout(() => {
-		mainRouter.push('/');
+		location.href = '/';
 	}, 100);
 }
 
+function goToMisskey(): void {
+	location.href = '/';
+}
+
 const headerActions = $computed(() => []);
 
 const headerTabs = $computed(() => []);
@@ -161,9 +168,3 @@ definePageMetadata({
 	icon: 'ti ti-share',
 });
 </script>
-
-<style lang="scss" module>
-.close {
-	margin: 16px auto;
-}
-</style>

packages/frontend/src/themes/_dark.json5

@@ -77,7 +77,7 @@
 		codeString: '#ffb675',
 		codeNumber: '#cfff9e',
 		codeBoolean: '#c59eff',
-		deckDivider: '#000',
+		deckBg: '#000',
 		htmlThemeColor: '@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(255, 255, 255, 0.05)',

packages/frontend/src/themes/_light.json5

@@ -77,7 +77,7 @@
 		codeString: '#b98710',
 		codeNumber: '#0fbbbb',
 		codeBoolean: '#62b70c',
-		deckDivider: ':darken<3<@bg',
+		deckBg: ':darken<3<@bg',
 		htmlThemeColor: '@bg',
 		X2: ':darken<2<@panel',
 		X3: 'rgba(0, 0, 0, 0.05)',

packages/frontend/src/themes/d-u0.json5

@@ -83,6 +83,6 @@
 		fgTransparentWeak: ':alpha<0.75<@fg',
 		panelHeaderDivider: 'rgba(0, 0, 0, 0)',
 		scrollbarHandleHover: 'rgba(255, 255, 255, 0.4)',
-		deckDivider: '#142022',
+		deckBg: '#142022',
 	},
 }

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

@@ -1,18 +1,18 @@
 <template>
-<div class="dlrsnxqu">
+<div :class="$style.root">
 	<div
-		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" class="item" :class="[{ black: x.black }, {
+		v-for="x in defaultStore.reactiveState.statusbars.value" :key="x.id" :class="[$style.item, { [$style.black]: x.black,
-			verySmall: x.size === 'verySmall',
+			[$style.verySmall]: x.size === 'verySmall',
-			small: x.size === 'small',
+			[$style.small]: x.size === 'small',
-			medium: x.size === 'medium',
+			[$style.medium]: x.size === 'medium',
-			large: x.size === 'large',
+			[$style.large]: x.size === 'large',
-			veryLarge: x.size === 'veryLarge',
+			[$style.veryLarge]: x.size === 'veryLarge',
 		}]"
 	>
-		<span class="name">{{ x.name }}</span>
+		<span :class="$style.name">{{ x.name }}</span>
-		<XRss v-if="x.type === 'rss'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
+		<XRss v-if="x.type === 'rss'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :url="x.props.url" :shuffle="x.props.shuffle"/>
-		<XFederation v-else-if="x.type === 'federation'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
+		<XFederation v-else-if="x.type === 'federation'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :colored="x.props.colored"/>
-		<XUserList v-else-if="x.type === 'userList'" class="body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
+		<XUserList v-else-if="x.type === 'userList'" :class="$style.body" :refreshIntervalSec="x.props.refreshIntervalSec" :marqueeDuration="x.props.marqueeDuration" :marqueeReverse="x.props.marqueeReverse" :display="x.props.display" :userListId="x.props.userListId"/>
 	</div>
 </div>
 </template>
@@ -25,12 +25,13 @@ const XFederation = defineAsyncComponent(() => import('./statusbar-federation.vu
 const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue'));
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss" module>
-.dlrsnxqu {
+.root {
 	font-size: 15px;
 	background: var(--panel);
+}
 
-	> .item {
+.item {
 	--height: 24px;
 	--nameMargin: 10px;
 	font-size: 0.85em;
@@ -67,7 +68,13 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 	overflow: clip;
 	contain: strict;
 
-		> .name {
+	&.black {
+		background: #000;
+		color: #fff;
+	}
+}
+
+.name {
 	padding: 0 var(--nameMargin);
 	font-weight: bold;
 	color: var(--accent);
@@ -75,17 +82,10 @@ const XUserList = defineAsyncComponent(() => import('./statusbar-user-list.vue')
 	&:empty {
 		display: none;
 	}
-		}
+}
 
-		> .body {
+.body {
 	min-width: 0;
 	flex: 1;
-		}
-
-		&.black {
-			background: #000;
-			color: #fff;
-		}
-	}
 }
 </style>

packages/frontend/src/ui/deck.vue

@@ -4,7 +4,7 @@
 
 	<div :class="$style.main">
 		<XStatusBars/>
-		<div ref="columnsEl" :class="[$style.sections, deckStore.reactiveState.columnAlign.value, { [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
+		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.columnAlign.value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu">
 			<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 			<section
 				v-for="ids in layout"
@@ -282,7 +282,7 @@ async function deleteProfile() {
 
 	--margin: var(--marginHalf);
 
-	--deckDividerThickness: 5px;
+	--columnGap: 6px;
 
 	display: flex;
 	height: 100dvh;
@@ -306,14 +306,15 @@ async function deleteProfile() {
 	display: flex;
 	overflow-x: auto;
 	overflow-y: clip;
+	background: var(--deckBg);
 
 	&.center {
 		> .section:first-of-type {
-			margin-left: auto;
+			margin-left: auto !important;
 		}
 
 		> .section:last-of-type {
-			margin-right: auto;
+			margin-right: auto !important;
 		}
 	}
 
@@ -327,14 +328,16 @@ async function deleteProfile() {
 	flex-direction: column;
 	scroll-snap-align: start;
 	flex-shrink: 0;
-	border-right: solid var(--deckDividerThickness) var(--deckDivider);
+	margin-top: var(--columnGap);
+	margin-bottom: var(--columnGap);
+	margin-right: var(--columnGap);
 
 	&:first-of-type {
-		border-left: solid var(--deckDividerThickness) var(--deckDivider);
+		margin-left: var(--columnGap);
 	}
 
 	> .column:not(:last-of-type) {
-		border-bottom: solid var(--deckDividerThickness) var(--deckDivider);
+		margin-bottom: var(--columnGap);
 	}
 }
 

packages/frontend/src/ui/deck/column.vue

@@ -13,6 +13,12 @@
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
 	>
+		<svg viewBox="0 0 256 128" :class="$style.tabShape">
+			<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">
+				<path d="M149.512,4.707L108.507,4.707C116.252,4.719 118.758,14.958 118.758,14.958C118.758,14.958 121.381,25.283 129.009,25.209L149.512,25.209L149.512,4.707Z" style="fill:var(--deckBg);"/>
+			</g>
+		</svg>
+		<div :class="$style.color"></div>
 		<button v-if="isStacked && !isMainColumn" :class="$style.toggleActive" class="_button" @click="toggleActive">
 			<template v-if="active"><i class="ti ti-chevron-up"></i></template>
 			<template v-else><i class="ti ti-chevron-down"></i></template>
@@ -235,6 +241,7 @@ function onDrop(ev) {
 	height: 100%;
 	overflow: clip;
 	contain: strict;
+	border-radius: 10px;
 
 	&.draghover {
 		&:after {
@@ -274,6 +281,7 @@ function onDrop(ev) {
 	&:not(.active) {
 		flex-basis: var(--deckColumnHeaderHeight);
 		min-height: var(--deckColumnHeaderHeight);
+		border-bottom-right-radius: 0;
 	}
 
 	&.naked {
@@ -286,10 +294,22 @@ function onDrop(ev) {
 			box-shadow: none;
 			color: var(--fg);
 		}
+
+		> .body {
+			&::-webkit-scrollbar-track {
+				background: inherit;
+			}
+		}
 	}
 
 	&.paged {
 		background: var(--bg) !important;
+
+		> .body {
+			&::-webkit-scrollbar-track {
+				background: inherit;
+			}
+		}
 	}
 }
 
@@ -299,7 +319,7 @@ function onDrop(ev) {
 	z-index: 2;
 	line-height: var(--deckColumnHeaderHeight);
 	height: var(--deckColumnHeaderHeight);
-	padding: 0 16px;
+	padding: 0 16px 0 30px;
 	font-size: 0.9em;
 	color: var(--panelHeaderFg);
 	background: var(--panelHeaderBg);
@@ -308,6 +328,24 @@ function onDrop(ev) {
 	user-select: none;
 }
 
+.color {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	width: 3px;
+	height: calc(100% - 24px);
+	background: var(--accent);
+	border-radius: 999px;
+}
+
+.tabShape {
+	position: absolute;
+	top: 0;
+	right: -8px;
+	width: auto;
+	height: calc(100% - 6px);
+}
+
 .title {
 	display: inline-block;
 	align-items: center;
@@ -351,5 +389,9 @@ function onDrop(ev) {
 	box-sizing: border-box;
 	container-type: size;
 	background-color: var(--bg);
+
+	&::-webkit-scrollbar-track {
+		background: var(--panel);
+	}
 }
 </style>