Formatting

.gitignore

@@ -42,6 +42,8 @@ api-docs.json
 files
 ormconfig.json
 packages/backend/assets/instance.css
+packages/backend/assets/sounds/None.mp3
+
 
 # blender backups
 *.blend1

packages/client/src/components/global/MkPageHeader.vue

@@ -33,26 +33,25 @@
 </template>
 
 <script lang="ts" setup>
-	import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
+import { computed, onMounted, onUnmounted, ref, inject, watch, shallowReactive, nextTick, reactive } from 'vue';
-	import tinycolor from 'tinycolor2';
+import tinycolor from 'tinycolor2';
-	import { popupMenu } from '@/os';
+import { popupMenu } from '@/os';
-	import { scrollToTop } from '@/scripts/scroll';
+import { scrollToTop } from '@/scripts/scroll';
-	import { i18n } from '@/i18n';
+import { globalEvents } from '@/events';
-	import { globalEvents } from '@/events';
+import { deviceKind } from '@/scripts/device-kind';
-	import { deviceKind } from '@/scripts/device-kind';
+import { isTouchUsing } from '@/scripts/touch';
-	import { isTouchUsing } from '@/scripts/touch';
+import { injectPageMetadata } from '@/scripts/page-metadata';
-	import { injectPageMetadata } from '@/scripts/page-metadata';
+import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
-	import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 
-	type Tab = {
+type Tab = {
 	key?: string | null;
 	title: string;
 	icon?: string;
 	iconOnly?: boolean;
 	onClick?: (ev: MouseEvent) => void;
-	};
+};
 
-	const props = defineProps<{
+const props = defineProps<{
 	tabs?: Tab[];
 	tab?: string;
 	actions?: {
@@ -62,37 +61,37 @@
 	}[];
 	thin?: boolean;
 	displayMyAvatar?: boolean;
-	}>();
+}>();
 
-	const emit = defineEmits<{
+const emit = defineEmits<{
 	(ev: 'update:tab', key: string);
-	}>();
+}>();
 
-	const metadata = injectPageMetadata();
+const metadata = injectPageMetadata();
 
-	const hideTitle = inject('shouldOmitHeaderTitle', false);
+const hideTitle = inject('shouldOmitHeaderTitle', false);
-	const thin_ = props.thin || inject('shouldHeaderThin', false);
+const thin_ = props.thin || inject('shouldHeaderThin', false);
 
-	const el = $ref<HTMLElement | null>(null);
+const el = $ref<HTMLElement | null>(null);
-	const tabRefs = {};
+const tabRefs = {};
-	const tabHighlightEl = $ref<HTMLElement | null>(null);
+const tabHighlightEl = $ref<HTMLElement | null>(null);
-	const tabsEl = $ref<HTMLElement | null>(null);
+const tabsEl = $ref<HTMLElement | null>(null);
-	const bg = ref(null);
+const bg = ref(null);
-	let narrow = $ref(false);
+let narrow = $ref(false);
-	const height = ref(0);
+const height = ref(0);
-	const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
+const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
-	const hasActions = $computed(() => props.actions && props.actions.length > 0);
+const hasActions = $computed(() => props.actions && props.actions.length > 0);
-	const show = $computed(() => {
+const show = $computed(() => {
 	return !hideTitle || hasTabs || hasActions;
-	});
+});
 
-	const openAccountMenu = (ev: MouseEvent) => {
+const openAccountMenu = (ev: MouseEvent) => {
 	openAccountMenu_({
 		withExtraOperation: true,
 	}, ev);
-	};
+};
 
-	const showTabsPopup = (ev: MouseEvent) => {
+const showTabsPopup = (ev: MouseEvent) => {
 	if (!hasTabs) return;
 	if (!narrow) return;
 	ev.preventDefault();
@@ -106,24 +105,24 @@
 		},
 	}));
 	popupMenu(menu, ev.currentTarget ?? ev.target);
-	};
+};
 
-	const preventDrag = (ev: TouchEvent) => {
+const preventDrag = (ev: TouchEvent) => {
 	ev.stopPropagation();
-	};
+};
 
-	const onClick = () => {
+const onClick = () => {
 	scrollToTop(el, { behavior: 'smooth' });
-	};
+};
 
-	function onTabMousedown(tab: Tab, ev: MouseEvent): void {
+function onTabMousedown(tab: Tab, ev: MouseEvent): void {
 	// ユーザビリティの観点からmousedown時にはonClickは呼ばない
 	if (tab.key) {
 		emit('update:tab', tab.key);
 	}
-	}
+}
 
-	function onTabClick(tab: Tab, ev: MouseEvent): void {
+function onTabClick(tab: Tab, ev: MouseEvent): void {
 	if (tab.onClick) {
 		ev.preventDefault();
 		ev.stopPropagation();
@@ -132,18 +131,18 @@
 	if (tab.key) {
 		emit('update:tab', tab.key);
 	}
-	}
+}
 
-	const calcBg = () => {
+const calcBg = () => {
 	const rawBg = metadata?.bg || 'var(--bg)';
 	const tinyBg = tinycolor(rawBg.startsWith('var(') ? getComputedStyle(document.documentElement).getPropertyValue(rawBg.slice(4, -1)) : rawBg);
 	tinyBg.setAlpha(0.85);
 	bg.value = tinyBg.toRgbString();
-	};
+};
 
-	let ro: ResizeObserver | null;
+let ro: ResizeObserver | null;
 
-	onMounted(() => {
+onMounted(() => {
 	calcBg();
 	globalEvents.on('themeChanged', calcBg);
 
@@ -176,16 +175,16 @@
 		});
 		ro.observe(el.parentElement);
 	}
-	});
+});
 
-	onUnmounted(() => {
+onUnmounted(() => {
 	globalEvents.off('themeChanged', calcBg);
 	if (ro) ro.disconnect();
-	});
+});
 </script>
 
 <style lang="scss" scoped>
-	.fdidabkb {
+.fdidabkb {
 	--height: 55px;
 	display: flex;
 	width: 100%;
@@ -399,5 +398,5 @@
 			pointer-events: none;
 		}
 	}
-	}
+}
 </style>