Toggle between different CW styles

locales/en-US.yml

@@ -2125,3 +2125,8 @@ _feeds:
   rss: "RSS"
   atom: "Atom"
   jsonFeed: "JSON feed"
+cwStyle: "Content Warning appearance"
+_cwStyle:
+  modern: "Modern"
+  classic: "Classic (Misskey/Foundkey-like)"
+  alternative: "Alternative (Firefish-like)"

packages/client/src/components/MkCwButton.vue

@@ -2,12 +2,12 @@
 	<button
 		ref="el"
 		class="_button"
-		:class="{ showLess: modelValue, fade: !modelValue }"
+		:class="[cwButton, { showLess: modelValue, fade: !modelValue, }]"
 		@click.stop="toggle"
 	>
-		<span
+		<span class="cw-toggle-text"
 			>{{ modelValue ? i18n.ts._cw.hide : i18n.ts._cw.show }}
-			<span v-if="!modelValue">{{ label }}</span>
+			<span class="cw-char-count" v-if="!modelValue">{{ label }}</span>
 		</span>
 	</button>
 </template>
@@ -18,6 +18,7 @@ import { length } from "stringz";
 import type * as misskey from "iceshrimp-js";
 import { concat } from "@/scripts/array";
 import { i18n } from "@/i18n";
+import {defaultStore} from "@/store";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -43,6 +44,8 @@ const label = computed(() => {
 	] as string[][]).join(", ");
 });
 
+const cwButton = computed (() => `_button_${defaultStore.state.cwStyle}`);
+
 const toggle = () => {
 	emit("update:modelValue", !props.modelValue);
 };
@@ -57,7 +60,7 @@ defineExpose({
 </script>
 
 <style lang="scss" scoped>
-._button {
+._button_modern {
 	font-weight: 700;
 	z-index: 5;
 	> span {
@@ -118,4 +121,95 @@ defineExpose({
 		}
 	}
 }
+
+._button_alternative {
+	font-weight: 700;
+	z-index: 5;
+	> span {
+		background: var(--cwBg) !important;
+		color: var(--cwFg);
+		transition:
+			background 0.2s,
+			color 0.2s;
+		> span {
+			font-weight: 500;
+			&::before {
+				content: "(";
+			}
+			&::after {
+				content: ")";
+			}
+		}
+	}
+	&:hover > span,
+	&:focus > span {
+		background: var(--cwFg) !important;
+		color: var(--cwBg) !important;
+	}
+
+	&.fade {
+		display: block;
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		> span {
+			display: inline-block;
+			background: var(--panel);
+			padding: 0.4em 1em;
+			font-size: 0.8em;
+			border-radius: 999px;
+			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+		}
+		&:hover {
+			> span {
+				background: var(--panelHighlight);
+			}
+		}
+	}
+	&.showLess {
+		width: 100%;
+		position: sticky;
+		bottom: calc(var(--stickyBottom) - 1em);
+		padding: 20px;
+
+		> span {
+			display: inline-block;
+			background: var(--panel);
+			padding: 6px 10px;
+			font-size: 0.8em;
+			border-radius: 999px;
+			box-shadow: 0 0 7px 7px var(--bg);
+		}
+	}
+}
+
+._button_classic {
+	display: inline-block;
+	padding: 4px 8px;
+	font-size: 0.7em;
+	color: var(--cwFg);
+	background: var(--cwBg);
+	border-radius: 2px;
+
+	&:hover {
+		background: var(--cwHoverBg);
+	}
+
+	> span.cw-toggle-text {
+		font-weight: bold;
+
+		> span.cw-char-count {
+			font-weight: normal;
+
+			&:before {
+				content: '(';
+			}
+
+			&:after {
+				content: ')';
+			}
+		}
+	}
+}
 </style>

packages/client/src/components/MkShowMoreButton.vue

@@ -2,7 +2,7 @@
 	<button
 		ref="el"
 		class="_button"
-		:class="{ fade: modelValue, showLess: !modelValue }"
+		:class="[cwButton, { fade: modelValue, showLess: !modelValue }]"
 		@click.stop="toggle"
 	>
 		<span>{{ modelValue ? i18n.ts.showMore : i18n.ts.showLess }}</span>
@@ -10,7 +10,8 @@
 </template>
 <script lang="ts" setup>
 import { i18n } from "@/i18n";
-import { ref } from "vue";
+import { computed, ref } from "vue";
+import {defaultStore} from "@/store";
 
 const props = defineProps<{
 	modelValue: boolean;
@@ -22,6 +23,8 @@ const emit = defineEmits<{
 	(ev: "update:modelValue", v: boolean): void;
 }>();
 
+const cwButton = computed (() => `_button_${defaultStore.state.cwStyle}`);
+
 const toggle = () => {
 	emit("update:modelValue", !props.modelValue);
 };
@@ -44,6 +47,7 @@ defineExpose({
 	padding: 20px;
 	margin-bottom: -10px;
 	z-index: 5;
+	&._button_modern {
 		> span {
 			display: inline-block;
 			background: var(--panel);
@@ -52,6 +56,17 @@ defineExpose({
 			border-radius: 999px;
 			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		}
+	}
+	&:not(._button_modern) {
+		> span {
+			display: inline-block;
+			background: var(--panel);
+			padding: 0.4em 1em;
+			font-size: 0.8em;
+			border-radius: 999px;
+			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+		}
+	}
 	&:hover {
 		> span {
 			background: var(--panelHighlight);
@@ -65,6 +80,7 @@ defineExpose({
 	padding: 20px;
 	z-index: 5;
 
+	&._button_modern {
 		> span {
 			display: inline-block;
 			background: var(--panel);
@@ -73,5 +89,17 @@ defineExpose({
 			border-radius: 999px;
 			box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
 		}
+	}
+
+	&:not(._button_modern) {
+		> span {
+			display: inline-block;
+			background: var(--panel);
+			padding: 6px 10px;
+			font-size: 0.8em;
+			border-radius: 999px;
+			box-shadow: 0 0 7px 7px var(--bg);
+		}
+	}
 }
 </style>

packages/client/src/components/MkSubNoteContent.vue

@@ -1,5 +1,5 @@
 <template>
-	<p v-if="note.cw != null" class="cw">
+	<p v-if="note.cw != null" class="cw" :class="cwStyle">
 		<MkA
 			v-if="conversation && note.renoteId == parentId"
 			:to="
@@ -34,24 +34,32 @@
 			<i class="ph-lock ph-bold"></i>
 		</span>
 		<Mfm
-			v-if="note.cw != '' && showContent"
+			v-if="note.cw != '' && (showContent || defaultStore.state.cwStyle !== 'modern')"
 			class="text"
 			:text="note.cw"
 			:author="note.user"
 			:i="$i"
 			:custom-emojis="note.emojis"
 		/>
+		<XCwButton
+			ref="cwButton"
+			v-if="note.cw && defaultStore.state.cwStyle === 'classic'"
+			v-model="showContent"
+			:note="note"
+			v-on:keydown="focusFooter"
+			v-on:update:model-value="(val) => emit('expanded', val)"
+		/>
 	</p>
 	<div class="wrmlmaau">
 		<div
 			class="content"
-			:class="{
+			:class="[{
 				collapsed,
 				isLong,
 				manyImages: note.files.length > 4,
 				showContent: note.cw && !showContent,
 				animatedMfm: !disableMfm,
-			}"
+			}, cwStyle]"
 		>
 			<XShowMoreButton
 				ref="showMoreButton"
@@ -59,10 +67,10 @@
 				v-model="collapsed"
 				v-on:keydown="focusFooter"
 			></XShowMoreButton>
-			<Mfm v-if="note.cw && !showContent" class="hiddenNote" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
+			<Mfm v-if="note.cw && ((!showContent && defaultStore.state.cwStyle === 'modern'))" class="hiddenNote" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 			<XCwButton
 				ref="cwButton"
-				v-if="note.cw && !showContent"
+				v-if="note.cw && !showContent && defaultStore.state.cwStyle !== 'classic'"
 				v-model="showContent"
 				:note="note"
 				v-on:keydown="focusFooter"
@@ -167,7 +175,7 @@
 				v-model="collapsed"
 			></XShowMoreButton>
 			<XCwButton
-				v-if="note.cw && showContent"
+				v-if="note.cw && showContent && defaultStore.state.cwStyle !== 'classic'"
 				v-model="showContent"
 				:note="note"
 			/>
@@ -193,7 +201,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { computed, ref } from "vue";
 import * as misskey from "iceshrimp-js";
 import * as mfm from "mfm-js";
 import * as os from "@/os";
@@ -240,6 +248,7 @@ const urls = props.note.text
 	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
 	: null;
 
+const cwStyle = computed (() => `_cw_style_${defaultStore.state.cwStyle}`);
 let _showContent = $ref(null);
 let showContent = $computed({
 	set(val) { _showContent = val },
@@ -309,7 +318,9 @@ function focusFooter(ev) {
 	display: block;
 	margin: 0;
 	padding: 0;
+	&:not(._cw_style_classic) {
 		margin-bottom: 10px;
+	}
 	overflow-wrap: break-word;
 	> .text {
 		margin-right: 8px;
@@ -319,6 +330,7 @@ function focusFooter(ev) {
 .wrmlmaau {
 	.content {
 		overflow-wrap: break-word;
+		&._cw_style_modern {
 			> .hiddenNote {
 				display: block;
 				padding: 0.5em 0 0.5em;
@@ -326,6 +338,16 @@ function focusFooter(ev) {
 				font-size: 1.1em;
 				text-align: center;
 			}
+		}
+		&._cw_style_classic {
+			overflow: clip;
+
+			cursor: default;
+			display: block;
+			margin: 0;
+			padding: 0;
+			overflow-wrap: break-word;
+		}
 		> .body {
 			transition: filter 0.1s;
 			> .rp {
@@ -375,7 +397,9 @@ function focusFooter(ev) {
 		&.collapsed,
 		&.showContent {
 			position: relative;
+			&._cw_style_modern {
 				min-height: calc(1em + 100px);
+			}
 			max-height: calc(15em + 100px);
 			> .body {
 				max-height: inherit;
@@ -403,6 +427,25 @@ function focusFooter(ev) {
 			}
 		}
 		&.showContent {
+			&._cw_style_alternative {
+				> .body {
+					min-height: 2em;
+					max-height: 5em;
+					filter: blur(4px);
+					:deep(span) {
+						animation: none !important;
+						transform: none !important;
+					}
+					:deep(img) {
+						filter: blur(12px);
+					}
+				}
+				:deep(.fade) {
+					inset: 0;
+					top: 90px;
+				}
+			}
+			&._cw_style_modern {
 				> .body {
 					min-height: 2em;
 					max-height: 5em;
@@ -413,6 +456,12 @@ function focusFooter(ev) {
 					top: 0;
 				}
 			}
+			&._cw_style_classic {
+				> .body {
+					display: none;
+				}
+			}
+		}
 
 		&:not(.animatedMfm) :deep(span) {
 			animation: none !important;

packages/client/src/pages/settings/general.vue

@@ -200,6 +200,20 @@
 				class="_formBlock"
 				>{{ i18n.ts.showAdminUpdates }}</FormSwitch
 			>
+
+			<FormSelect v-model="cwStyle" class="_formBlock">
+				<template #label>{{ i18n.ts.cwStyle }}</template>
+				<option value="modern">
+					{{ i18n.ts._cwStyle.modern }}
+				</option>
+				<option value="classic">
+					{{ i18n.ts._cwStyle.classic }}
+				</option>
+				<option value="alternative">
+					{{ i18n.ts._cwStyle.alternative }}
+				</option>
+			</FormSelect>
+
 			<FormSelect v-model="instanceTicker" class="_formBlock">
 				<template #label>{{ i18n.ts.instanceTicker }}</template>
 				<option value="none">{{ i18n.ts._instanceTicker.none }}</option>
@@ -353,6 +367,9 @@ const showAdminUpdates = computed(
 const showTimelineReplies = computed(
 	defaultStore.makeGetterSetter("showTimelineReplies"),
 );
+const cwStyle = computed(
+	defaultStore.makeGetterSetter("cwStyle"),
+);
 
 watch(swipeOnDesktop, () => {
 	defaultStore.set("swipeOnMobile", true);
@@ -397,6 +414,7 @@ watch(
 		advancedMfm,
 		autoplayMfm,
 		expandOnNoteClick,
+		cwStyle
 	],
 	async () => {
 		await reloadAsk();

packages/client/src/store.ts

@@ -334,6 +334,10 @@ export const defaultStore = markRaw(
 			where: "device",
 			default: false,
 		},
+		cwStyle: {
+			where: "device",
+			default: "modern" as "modern" | "classic" | "alternative",
+		},
 	}),
 );