locales/index.d.ts

@@ -10142,7 +10142,7 @@ export interface Locale extends ILocale {
          */
         "introduction": string;
         /**
-         * カラムを追加するには、画面の + をクリックします。
+         * 画面の右にある + を押して、いつでもカラムを追加できます。
          */
         "introduction2": string;
         /**

locales/ja-JP.yml

@@ -2681,7 +2681,7 @@ _deck:
   newProfile: "新規プロファイル"
   deleteProfile: "プロファイルを削除"
   introduction: "カラムを組み合わせて自分だけのインターフェイスを作りましょう！"
-  introduction2: "カラムを追加するには、画面の + をクリックします。"
+  introduction2: "画面の右にある + を押して、いつでもカラムを追加できます。"
   widgetsIntroduction: "カラムのメニューから、「ウィジェットの編集」を選択してウィジェットを追加してください"
   useSimpleUiForNonRootPages: "非ルートページは簡易UIで表示"
   usedAsMinWidthWhenFlexible: "「幅を自動調整」が有効の場合、これが幅の最小値となります"

packages/frontend/src/components/MkFukidashi.vue

@@ -19,11 +19,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<path d="m188.19 87.657c-1.469 2.3218-3.9315 3.8312-6.667 4.0865-2.2309-1.7379-4.9781-2.6816-7.8061-2.6815h-5.1e-4v12.702h12.702v-5.1e-4c2e-5 -1.9998-0.47213-3.9713-1.378-5.754 2.0709-1.6834 3.2732-4.2102 3.273-6.8791-6e-5 -0.49375-0.0413-0.98662-0.1235-1.4735z" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-width=".33225" style="paint-order:stroke fill markers"/>
 			</g>
 		</svg>
-		<div :class="$style.content">
+		<div
+			:class="[$style.content, {
+				[$style.contentBgPanel]: contentBgPanel,
+				[$style.small]: small,
+			}]"
+		>
+			<div :class="$style.contentInner">
 				<slot></slot>
 			</div>
 		</div>
 	</div>
+</div>
 </template>
 
 <script setup lang="ts">
@@ -32,11 +39,15 @@ withDefaults(defineProps<{
 	negativeMargin?: boolean;
 	shadow?: boolean;
 	accented?: boolean;
+	contentBgPanel?: boolean;
+	small?: boolean;
 }>(), {
 	tail: 'right',
 	negativeMargin: false,
 	shadow: false,
 	accented: false,
+	contentBgPanel: false,
+	small: false,
 });
 </script>
 
@@ -51,7 +62,7 @@ withDefaults(defineProps<{
 	padding-top: calc(var(--fukidashi-radius) * .13);
 
 	&.accented {
-		--fukidashi-bg: color-mix(in srgb, var(--MI_THEME-accent), var(--MI_THEME-panel) 85%);
+		--fukidashi-bg: var(--MI_THEME-accent);
 	}
 
 	&.shadow {
@@ -85,14 +96,28 @@ withDefaults(defineProps<{
 .content {
 	position: relative;
 	padding: 10px 14px;
+
+	&.small {
+		padding: 6px 10px;
 	}
 
-@container (max-width: 450px) {
+	&.contentBgPanel::before {
-	.content {
+		content: '';
-		padding: 8px 12px;
+		position: absolute;
+		top: 2px;
+		left: 2px;
+		width: calc(100% - 4px);
+		height: calc(100% - 4px);
+		background: var(--MI_THEME-panel);
+		border-radius: calc(var(--fukidashi-radius) - 2px);
 	}
 }
 
+.contentInner {
+	position: relative;
+	z-index: 1;
+}
+
 .tail {
 	position: absolute;
 	top: 0;

packages/frontend/src/pages/chat/XMessage.vue

@@ -5,10 +5,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="[$style.root, { [$style.isMe]: isMe }]">
-	<MkAvatar :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
+	<MkAvatar v-if="!isMe" :class="$style.avatar" :user="message.fromUser" :link="!isMe" :preview="false"/>
 	<div :class="$style.body" @contextmenu.stop="onContextmenu">
-		<div :class="$style.header"><MkUserName v-if="!isMe && prefer.s['chat.showSenderName']" :user="message.fromUser"/></div>
+		<div v-if="!isMe && prefer.s['chat.showSenderName']" :class="$style.header"><MkUserName :user="message.fromUser"/></div>
-		<MkFukidashi :class="$style.fukidashi" :tail="isMe ? 'right' : 'left'" :accented="isMe">
+		<MkFukidashi :tail="isMe ? 'right' : 'left'" :accented="isMe" negativeMargin contentBgPanel small>
 			<div v-if="!message.isDeleted" :class="$style.content">
 				<Mfm
 					v-if="message.text"
@@ -226,35 +226,17 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 	position: sticky;
 	top: calc(16px + var(--MI-stickyTop, 0px));
 	display: block;
-	width: 50px;
+	width: 32px;
-	height: 50px;
+	height: 32px;
-}
-
-@container (max-width: 450px) {
-	.root {
-		&.isMe {
-			.avatar {
-				display: none;
-			}
-		}
-	}
-
-	.avatar {
-		width: 42px;
-		height: 42px;
-	}
-
-	.fukidashi {
-		font-size: 90%;
-	}
 }
 
 .body {
+	padding-top: 4px;
 	margin: 0 12px;
+	box-sizing: border-box;
 }
 
 .header {
-	min-height: 4px; // fukidashiの位置調整も兼ねるため
 	font-size: 80%;
 }
 

packages/frontend/src/ui/deck.vue

@@ -35,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</section>
 				<div v-if="layout.length === 0" class="_panel" :class="$style.onboarding">
 					<div>{{ i18n.ts._deck.introduction }}</div>
+					<MkButton primary style="margin: 1em auto;" @click="addColumn">{{ i18n.ts._deck.addColumn }}</MkButton>
 					<div>{{ i18n.ts._deck.introduction2 }}</div>
 				</div>
 			</div>