enhance(frontend): お問い合わせページからデバイス情報を出力できるように (#16598)

* enhance(frontend): デバイス情報を出力できるように

* fix lint

* Update Changelog

* enhance: getHighEntropyValuesが使用できなかった場合のフォールバックを追加

* fix lint

* fix: getHighEntropyValuesが使用できない場合は生のUAを返すように

* enhance: getHighEntropyValuesが使用できる場合でも生のUAを含めるように

* ✌️

* onHeaderClicked -> onOpened

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

@@ -5,7 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <!-- eslint-disable vue/no-v-html -->
 <template>
-<div :class="[$style.codeBlockRoot, { [$style.codeEditor]: codeEditor }, (darkMode ? $style.dark : $style.light)]" v-html="html"></div>
+<div
+	:class="[$style.codeBlockRoot, {
+		[$style.codeEditor]: codeEditor,
+		[$style.outerStyle]: !codeEditor && withOuterStyle,
+		[$style.dark]: darkMode,
+		[$style.light]: !darkMode,
+	}]" v-html="html"></div>
 </template>
 
 <script lang="ts" setup>
@@ -15,11 +21,15 @@ import type { BundledLanguage } from 'shiki/langs';
 import { getHighlighter, getTheme } from '@/utility/code-highlighter.js';
 import { store } from '@/store.js';
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
 	code: string;
 	lang?: string;
 	codeEditor?: boolean;
-}>();
+	withOuterStyle?: boolean;
+}>(), {
+	codeEditor: false,
+	withOuterStyle: true,
+});
 
 const highlighter = await getHighlighter();
 const darkMode = store.r.darkMode;
@@ -73,17 +83,13 @@ watch(() => props.lang, (to) => {
 
 <style module lang="scss">
 .codeBlockRoot :global(.shiki) {
-	padding: 1em;
-	margin: 0;
 	overflow: auto;
 	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 
 	color: var(--shiki-fallback);
-	background-color: var(--shiki-fallback-bg);
 
 	& span {
 		color: var(--shiki-fallback);
-		background-color: var(--shiki-fallback-bg);
 	}
 
 	& pre,
@@ -92,26 +98,40 @@ watch(() => props.lang, (to) => {
 	}
 }
 
+.outerStyle.codeBlockRoot :global(.shiki) {
+	padding: 1em;
+	margin: 0;
+	border-radius: 8px;
+	border: 1px solid var(--MI_THEME-divider);
+	background-color: var(--shiki-fallback-bg);
+}
+
 .light.codeBlockRoot :global(.shiki) {
 	color: var(--shiki-light);
-	background-color: var(--shiki-light-bg);
 
 	& span {
 		color: var(--shiki-light);
-		background-color: var(--shiki-light-bg);
 	}
 }
 
+.light.outerStyle.codeBlockRoot :global(.shiki),
+.light.codeEditor.codeBlockRoot :global(.shiki) {
+	background-color: var(--shiki-light-bg);
+}
+
 .dark.codeBlockRoot :global(.shiki) {
 	color: var(--shiki-dark);
-	background-color: var(--shiki-dark-bg);
 
 	& span {
 		color: var(--shiki-dark);
-		background-color: var(--shiki-dark-bg);
 	}
 }
 
+.dark.outerStyle.codeBlockRoot :global(.shiki),
+.dark.codeEditor.codeBlockRoot :global(.shiki) {
+	background-color: var(--shiki-dark-bg);
+}
+
 .codeBlockRoot.codeEditor {
 	min-width: 100%;
 	height: 100%;

packages/frontend/src/components/MkCode.vue

@@ -5,15 +5,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div :class="$style.codeBlockRoot">
-	<button v-if="copyButton" :class="$style.codeBlockCopyButton" class="_button" @click="copy">
+	<button v-if="copyButton" :class="[$style.codeBlockCopyButton, { [$style.withOuterStyle]: withOuterStyle }]" class="_button" @click="copy">
 		<i class="ti ti-copy"></i>
 	</button>
 	<Suspense>
 		<template #fallback>
-			<MkLoading/>
+			<pre
+				class="_selectable"
+				:class="[$style.codeBlockFallbackRoot, {
+					[$style.outerStyle]: withOuterStyle,
+				}]"
+			><code :class="$style.codeBlockFallbackCode">Loading...</code></pre>
 		</template>
-		<XCode v-if="show && lang" class="_selectable" :code="code" :lang="lang"/>
-		<pre v-else-if="show" class="_selectable" :class="$style.codeBlockFallbackRoot"><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
+		<XCode
+			v-if="show && lang"
+			class="_selectable"
+			:code="code"
+			:lang="lang"
+			:withOuterStyle="withOuterStyle"
+		/>
+		<pre
+			v-else-if="show"
+			class="_selectable"
+			:class="[$style.codeBlockFallbackRoot, {
+				[$style.outerStyle]: withOuterStyle,
+			}]"
+		><code :class="$style.codeBlockFallbackCode">{{ code }}</code></pre>
 		<button v-else :class="$style.codePlaceholderRoot" @click="show = true">
 			<div :class="$style.codePlaceholderContainer">
 				<div><i class="ti ti-code"></i> {{ i18n.ts.code }}</div>
@@ -26,8 +43,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue';
-import * as os from '@/os.js';
-import MkLoading from '@/components/global/MkLoading.vue';
 import { i18n } from '@/i18n.js';
 import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
 import { prefer } from '@/preferences.js';
@@ -36,10 +51,12 @@ const props = withDefaults(defineProps<{
 	code: string;
 	forceShow?: boolean;
 	copyButton?: boolean;
+	withOuterStyle?: boolean;
 	lang?: string;
 }>(), {
 	copyButton: true,
 	forceShow: false,
+	withOuterStyle: true,
 });
 
 const show = ref(props.forceShow === true ? true : !prefer.s.dataSaver.code);
@@ -58,10 +75,16 @@ function copy() {
 
 .codeBlockCopyButton {
 	position: absolute;
-	top: 8px;
-	right: 8px;
 	opacity: 0.5;
 
+	top: 0;
+	right: 0;
+
+	&.withOuterStyle {
+		top: 8px;
+		right: 8px;
+	}
+
 	&:hover {
 		opacity: 0.8;
 	}
@@ -70,11 +93,17 @@ function copy() {
 .codeBlockFallbackRoot {
 	display: block;
 	overflow-wrap: anywhere;
-	padding: 1em;
-	margin: 0;
 	overflow: auto;
 }
 
+.outerStyle.codeBlockFallbackRoot {
+	background: var(--MI_THEME-bg);
+	padding: 1em;
+	margin: .5em 0;
+	border-radius: 8px;
+	border: 1px solid var(--MI_THEME-divider);
+}
+
 .codeBlockFallbackCode {
 	font-family: Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace;
 }

packages/frontend/src/components/MkFolder.vue

@@ -96,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, ref, useTemplateRef } from 'vue';
+import { nextTick, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { prefer } from '@/preferences.js';
 import { getBgColor } from '@/utility/get-bg-color.js';
 import { pageFolderTeleportCount, popup } from '@/os.js';
@@ -119,6 +119,11 @@ const props = withDefaults(defineProps<{
 	canPage: true,
 });
 
+const emit = defineEmits<{
+	(ev: 'opened'): void;
+	(ev: 'closed'): void;
+}>();
+
 const rootEl = useTemplateRef('rootEl');
 const asPage = props.canPage && deviceKind === 'smartphone' && prefer.s['experimental.enableFolderPageView'];
 const bgSame = ref(false);
@@ -164,7 +169,7 @@ function afterLeave(el: Element) {
 let pageId = pageFolderTeleportCount.value;
 pageFolderTeleportCount.value += 1000;
 
-async function toggle() {
+async function toggle(ev: MouseEvent) {
 	if (asPage && !opened.value) {
 		pageId++;
 		const { dispose } = await popup(MkFolderPage, {
@@ -192,6 +197,14 @@ onMounted(() => {
 	const myBg = computedStyle.getPropertyValue('--MI_THEME-panel');
 	bgSame.value = parentBg === myBg;
 });
+
+watch(opened, (isOpened) => {
+	if (isOpened) {
+		emit('opened');
+	} else {
+		emit('closed');
+	}
+}, { flush: 'post' });
 </script>
 
 <style lang="scss" module>