From d09e1f492577f5987f89b926646aaf8daf1726ef Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 7 Jan 2023 14:59:54 +0900
Subject: refactor

---
 packages/frontend/src/components/MkAbuseReport.vue |   2 +-
 packages/frontend/src/components/MkAsUi.vue        |   2 +-
 packages/frontend/src/components/MkCheckbox.vue    | 144 +++++++++++++++++++++
 packages/frontend/src/components/MkFormDialog.vue  |   8 +-
 packages/frontend/src/components/MkMenu.vue        |   4 +-
 .../src/components/MkNotificationSettingWindow.vue |   2 +-
 packages/frontend/src/components/MkPollEditor.vue  |   2 +-
 packages/frontend/src/components/MkSample.vue      |   2 +-
 packages/frontend/src/components/MkSignup.vue      |   2 +-
 packages/frontend/src/components/MkSwitch.vue      | 144 +++++++++++++++++++++
 .../src/components/MkTokenGenerateWindow.vue       |   2 +-
 packages/frontend/src/components/form/checkbox.vue | 144 ---------------------
 packages/frontend/src/components/form/switch.vue   | 144 ---------------------
 .../frontend/src/components/page/page.switch.vue   |   2 +-
 14 files changed, 302 insertions(+), 302 deletions(-)
 create mode 100644 packages/frontend/src/components/MkCheckbox.vue
 create mode 100644 packages/frontend/src/components/MkSwitch.vue
 delete mode 100644 packages/frontend/src/components/form/checkbox.vue
 delete mode 100644 packages/frontend/src/components/form/switch.vue

(limited to 'packages/frontend/src/components')

diff --git a/packages/frontend/src/components/MkAbuseReport.vue b/packages/frontend/src/components/MkAbuseReport.vue
index cdfe323d50..96f58269c4 100644
--- a/packages/frontend/src/components/MkAbuseReport.vue
+++ b/packages/frontend/src/components/MkAbuseReport.vue
@@ -37,7 +37,7 @@
 
 <script lang="ts" setup>
 import MkButton from '@/components/MkButton.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
 import { acct, userPage } from '@/filters/user';
 import * as os from '@/os';
diff --git a/packages/frontend/src/components/MkAsUi.vue b/packages/frontend/src/components/MkAsUi.vue
index e2d8c010a2..9115de93cc 100644
--- a/packages/frontend/src/components/MkAsUi.vue
+++ b/packages/frontend/src/components/MkAsUi.vue
@@ -52,7 +52,7 @@ import { computed, defineAsyncComponent, onMounted, onUnmounted, Ref } from 'vue
 import * as os from '@/os';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkSelect from '@/components/form/select.vue';
 import { AsUiComponent } from '@/scripts/aiscript/ui';
diff --git a/packages/frontend/src/components/MkCheckbox.vue b/packages/frontend/src/components/MkCheckbox.vue
new file mode 100644
index 0000000000..a8e24dd839
--- /dev/null
+++ b/packages/frontend/src/components/MkCheckbox.vue
@@ -0,0 +1,144 @@
+<template>
+<div
+	class="ziffeoms"
+	:class="{ disabled, checked }"
+>
+	<input
+		ref="input"
+		type="checkbox"
+		:disabled="disabled"
+		@keydown.enter="toggle"
+	>
+	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
+		<i class="check ti ti-check"></i>
+	</span>
+	<span class="label">
+		<!-- TODO: 無名slotの方は廃止 -->
+		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+		<p class="caption"><slot name="caption"></slot></p>
+	</span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, Ref } from 'vue';
+import * as os from '@/os';
+import MkRippleEffect from '@/components/MkRippleEffect.vue';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	modelValue: boolean | Ref<boolean>;
+	disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', v: boolean): void;
+}>();
+
+let button = $shallowRef<HTMLElement>();
+const checked = toRefs(props).modelValue;
+const toggle = () => {
+	if (props.disabled) return;
+	emit('update:modelValue', !checked.value);
+
+	if (!checked.value) {
+		const rect = button.getBoundingClientRect();
+		const x = rect.left + (button.offsetWidth / 2);
+		const y = rect.top + (button.offsetHeight / 2);
+		os.popup(MkRippleEffect, { x, y, particle: false }, {}, 'end');
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.ziffeoms {
+	position: relative;
+	display: flex;
+	transition: all 0.2s ease;
+
+	> * {
+		user-select: none;
+	}
+
+	> input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+	}
+
+	> .button {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		margin: 0;
+		box-sizing: border-box;
+		width: 23px;
+		height: 23px;
+		outline: none;
+		background: var(--panel);
+		border: solid 1px var(--panel);
+		border-radius: 4px;
+		cursor: pointer;
+		transition: inherit;
+
+		> .check {
+			margin: auto;
+			opacity: 0;
+			color: var(--fgOnAccent);
+			font-size: 13px;
+			transform: scale(0.5);
+			transition: all 0.2s ease;
+		}
+	}
+
+	&:hover {
+		> .button {
+			border-color: var(--inputBorderHover) !important;
+		}
+	}
+
+	> .label {
+		margin-left: 12px;
+		margin-top: 2px;
+		display: block;
+		transition: inherit;
+		color: var(--fg);
+
+		> span {
+			display: block;
+			line-height: 20px;
+			cursor: pointer;
+			transition: inherit;
+		}
+
+		> .caption {
+			margin: 8px 0 0 0;
+			color: var(--fgTransparentWeak);
+			font-size: 0.85em;
+
+			&:empty {
+				display: none;
+			}
+		}
+	}
+
+	&.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	&.checked {
+		> .button {
+			background-color: var(--accent) !important;
+			border-color: var(--accent) !important;
+
+			> .check {
+				opacity: 1;
+				transform: scale(1);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkFormDialog.vue b/packages/frontend/src/components/MkFormDialog.vue
index 76c6c164d4..d9a07b45d4 100644
--- a/packages/frontend/src/components/MkFormDialog.vue
+++ b/packages/frontend/src/components/MkFormDialog.vue
@@ -29,10 +29,10 @@
 					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
 				</FormTextarea>
-				<FormSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
+				<MkSwitch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
 					<span v-text="form[item].label || item"></span>
 					<template v-if="form[item].description" #caption>{{ form[item].description }}</template>
-				</FormSwitch>
+				</MkSwitch>
 				<FormSelect v-else-if="form[item].type === 'enum'" v-model="values[item]">
 					<template #label><span v-text="form[item].label || item"></span><span v-if="form[item].required === false"> ({{ $ts.optional }})</span></template>
 					<option v-for="item in form[item].enum" :key="item.value" :value="item.value">{{ item.label }}</option>
@@ -58,7 +58,7 @@
 import { defineComponent } from 'vue';
 import FormInput from './form/input.vue';
 import FormTextarea from './form/textarea.vue';
-import FormSwitch from './form/switch.vue';
+import MkSwitch from './MkSwitch.vue';
 import FormSelect from './form/select.vue';
 import FormRange from './form/range.vue';
 import MkButton from './MkButton.vue';
@@ -70,7 +70,7 @@ export default defineComponent({
 		MkModalWindow,
 		FormInput,
 		FormTextarea,
-		FormSwitch,
+		MkSwitch,
 		FormSelect,
 		FormRange,
 		MkButton,
diff --git a/packages/frontend/src/components/MkMenu.vue b/packages/frontend/src/components/MkMenu.vue
index e9076138c6..31a3f7f1c1 100644
--- a/packages/frontend/src/components/MkMenu.vue
+++ b/packages/frontend/src/components/MkMenu.vue
@@ -31,7 +31,7 @@
 				<span v-if="item.indicate" class="indicator"><i class="_indicatorCircle"></i></span>
 			</button>
 			<span v-else-if="item.type === 'switch'" :tabindex="i" class="item" @mouseenter.passive="onItemMouseEnter(item)" @mouseleave.passive="onItemMouseLeave(item)">
-				<FormSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</FormSwitch>
+				<MkSwitch v-model="item.ref" :disabled="item.disabled" class="form-switch">{{ item.text }}</MkSwitch>
 			</span>
 			<button v-else-if="item.type === 'parent'" :tabindex="i" class="_button item parent" :class="{ childShowing: childShowingItem === item }" @mouseenter="showChildren(item, $event)">
 				<i v-if="item.icon" class="ti-fw" :class="item.icon"></i>
@@ -58,7 +58,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, nextTick, onBeforeUnmount, onMounted, onUnmounted, Ref, ref, watch } from 'vue';
 import { focusPrev, focusNext } from '@/scripts/focus';
-import FormSwitch from '@/components/form/switch.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from '@/types/menu';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
diff --git a/packages/frontend/src/components/MkNotificationSettingWindow.vue b/packages/frontend/src/components/MkNotificationSettingWindow.vue
index cb054b1a29..e303403872 100644
--- a/packages/frontend/src/components/MkNotificationSettingWindow.vue
+++ b/packages/frontend/src/components/MkNotificationSettingWindow.vue
@@ -35,7 +35,7 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import { notificationTypes } from 'misskey-js';
-import MkSwitch from './form/switch.vue';
+import MkSwitch from './MkSwitch.vue';
 import MkInfo from './MkInfo.vue';
 import MkButton from './MkButton.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
diff --git a/packages/frontend/src/components/MkPollEditor.vue b/packages/frontend/src/components/MkPollEditor.vue
index 556abc5fd0..9eb45d0f9c 100644
--- a/packages/frontend/src/components/MkPollEditor.vue
+++ b/packages/frontend/src/components/MkPollEditor.vue
@@ -51,7 +51,7 @@
 import { ref, watch } from 'vue';
 import MkInput from './form/input.vue';
 import MkSelect from './form/select.vue';
-import MkSwitch from './form/switch.vue';
+import MkSwitch from './MkSwitch.vue';
 import MkButton from './MkButton.vue';
 import { formatDateTimeString } from '@/scripts/format-time-string';
 import { addTime } from '@/scripts/time';
diff --git a/packages/frontend/src/components/MkSample.vue b/packages/frontend/src/components/MkSample.vue
index ded5ac3f7a..8d9b5d0205 100644
--- a/packages/frontend/src/components/MkSample.vue
+++ b/packages/frontend/src/components/MkSample.vue
@@ -31,7 +31,7 @@
 import { defineComponent } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/form/input.vue';
-import MkSwitch from '@/components/form/switch.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
 import MkTextarea from '@/components/form/textarea.vue';
 import MkRadio from '@/components/form/radio.vue';
 import * as os from '@/os';
diff --git a/packages/frontend/src/components/MkSignup.vue b/packages/frontend/src/components/MkSignup.vue
index dcffee47bd..da6464ed6a 100644
--- a/packages/frontend/src/components/MkSignup.vue
+++ b/packages/frontend/src/components/MkSignup.vue
@@ -70,7 +70,7 @@ import getPasswordStrength from 'syuilo-password-strength';
 import { toUnicode } from 'punycode/';
 import MkButton from './MkButton.vue';
 import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
+import MkSwitch from './MkSwitch.vue';
 import MkCaptcha from '@/components/MkCaptcha.vue';
 import * as config from '@/config';
 import * as os from '@/os';
diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue
new file mode 100644
index 0000000000..5c9e3a5223
--- /dev/null
+++ b/packages/frontend/src/components/MkSwitch.vue
@@ -0,0 +1,144 @@
+<template>
+<div
+	class="ziffeomt"
+	:class="{ disabled, checked }"
+>
+	<input
+		ref="input"
+		type="checkbox"
+		:disabled="disabled"
+		@keydown.enter="toggle"
+	>
+	<span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
+		<div class="knob"></div>
+	</span>
+	<span class="label">
+		<!-- TODO: 無名slotの方は廃止 -->
+		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
+		<p class="caption"><slot name="caption"></slot></p>
+	</span>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, Ref } from 'vue';
+import * as os from '@/os';
+import { i18n } from '@/i18n';
+
+const props = defineProps<{
+	modelValue: boolean | Ref<boolean>;
+	disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update:modelValue', v: boolean): void;
+}>();
+
+let button = $shallowRef<HTMLElement>();
+const checked = toRefs(props).modelValue;
+const toggle = () => {
+	if (props.disabled) return;
+	emit('update:modelValue', !checked.value);
+
+	if (!checked.value) {
+
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.ziffeomt {
+	position: relative;
+	display: flex;
+	transition: all 0.2s ease;
+
+	> * {
+		user-select: none;
+	}
+
+	> input {
+		position: absolute;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		margin: 0;
+	}
+
+	> .button {
+		position: relative;
+		display: inline-flex;
+		flex-shrink: 0;
+		margin: 0;
+		box-sizing: border-box;
+		width: 32px;
+		height: 23px;
+		outline: none;
+		background: var(--swutchOffBg);
+		background-clip: content-box;
+		border: solid 1px var(--swutchOffBg);
+		border-radius: 999px;
+		cursor: pointer;
+		transition: inherit;
+		user-select: none;
+
+		> .knob {
+			position: absolute;
+			top: 3px;
+			left: 3px;
+			width: 15px;
+			height: 15px;
+			background: var(--swutchOffFg);
+			border-radius: 999px;
+			transition: all 0.2s ease;
+		}
+	}
+
+	&:hover {
+		> .button {
+			border-color: var(--inputBorderHover) !important;
+		}
+	}
+
+	> .label {
+		margin-left: 12px;
+		margin-top: 2px;
+		display: block;
+		transition: inherit;
+		color: var(--fg);
+
+		> span {
+			display: block;
+			line-height: 20px;
+			cursor: pointer;
+			transition: inherit;
+		}
+
+		> .caption {
+			margin: 8px 0 0 0;
+			color: var(--fgTransparentWeak);
+			font-size: 0.85em;
+
+			&:empty {
+				display: none;
+			}
+		}
+	}
+
+	&.disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	&.checked {
+		> .button {
+			background-color: var(--swutchOnBg) !important;
+			border-color: var(--swutchOnBg) !important;
+
+			> .knob {
+				left: 12px;
+				background: var(--swutchOnFg);
+			}
+		}
+	}
+}
+</style>
diff --git a/packages/frontend/src/components/MkTokenGenerateWindow.vue b/packages/frontend/src/components/MkTokenGenerateWindow.vue
index 5e12aa8319..5b9badd6df 100644
--- a/packages/frontend/src/components/MkTokenGenerateWindow.vue
+++ b/packages/frontend/src/components/MkTokenGenerateWindow.vue
@@ -37,7 +37,7 @@
 import { } from 'vue';
 import { permissions as kinds } from 'misskey-js';
 import MkInput from './form/input.vue';
-import MkSwitch from './form/switch.vue';
+import MkSwitch from './MkSwitch.vue';
 import MkButton from './MkButton.vue';
 import MkInfo from './MkInfo.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
diff --git a/packages/frontend/src/components/form/checkbox.vue b/packages/frontend/src/components/form/checkbox.vue
deleted file mode 100644
index a8e24dd839..0000000000
--- a/packages/frontend/src/components/form/checkbox.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-<div
-	class="ziffeoms"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-adaptive-border v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<i class="check ti ti-check"></i>
-	</span>
-	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
-		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
-		<p class="caption"><slot name="caption"></slot></p>
-	</span>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import * as os from '@/os';
-import MkRippleEffect from '@/components/MkRippleEffect.vue';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	modelValue: boolean | Ref<boolean>;
-	disabled?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
-}>();
-
-let button = $shallowRef<HTMLElement>();
-const checked = toRefs(props).modelValue;
-const toggle = () => {
-	if (props.disabled) return;
-	emit('update:modelValue', !checked.value);
-
-	if (!checked.value) {
-		const rect = button.getBoundingClientRect();
-		const x = rect.left + (button.offsetWidth / 2);
-		const y = rect.top + (button.offsetHeight / 2);
-		os.popup(MkRippleEffect, { x, y, particle: false }, {}, 'end');
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.ziffeoms {
-	position: relative;
-	display: flex;
-	transition: all 0.2s ease;
-
-	> * {
-		user-select: none;
-	}
-
-	> input {
-		position: absolute;
-		width: 0;
-		height: 0;
-		opacity: 0;
-		margin: 0;
-	}
-
-	> .button {
-		position: relative;
-		display: inline-flex;
-		flex-shrink: 0;
-		margin: 0;
-		box-sizing: border-box;
-		width: 23px;
-		height: 23px;
-		outline: none;
-		background: var(--panel);
-		border: solid 1px var(--panel);
-		border-radius: 4px;
-		cursor: pointer;
-		transition: inherit;
-
-		> .check {
-			margin: auto;
-			opacity: 0;
-			color: var(--fgOnAccent);
-			font-size: 13px;
-			transform: scale(0.5);
-			transition: all 0.2s ease;
-		}
-	}
-
-	&:hover {
-		> .button {
-			border-color: var(--inputBorderHover) !important;
-		}
-	}
-
-	> .label {
-		margin-left: 12px;
-		margin-top: 2px;
-		display: block;
-		transition: inherit;
-		color: var(--fg);
-
-		> span {
-			display: block;
-			line-height: 20px;
-			cursor: pointer;
-			transition: inherit;
-		}
-
-		> .caption {
-			margin: 8px 0 0 0;
-			color: var(--fgTransparentWeak);
-			font-size: 0.85em;
-
-			&:empty {
-				display: none;
-			}
-		}
-	}
-
-	&.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	&.checked {
-		> .button {
-			background-color: var(--accent) !important;
-			border-color: var(--accent) !important;
-
-			> .check {
-				opacity: 1;
-				transform: scale(1);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/components/form/switch.vue b/packages/frontend/src/components/form/switch.vue
deleted file mode 100644
index 5c9e3a5223..0000000000
--- a/packages/frontend/src/components/form/switch.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<template>
-<div
-	class="ziffeomt"
-	:class="{ disabled, checked }"
->
-	<input
-		ref="input"
-		type="checkbox"
-		:disabled="disabled"
-		@keydown.enter="toggle"
-	>
-	<span ref="button" v-tooltip="checked ? i18n.ts.itsOn : i18n.ts.itsOff" class="button" @click.prevent="toggle">
-		<div class="knob"></div>
-	</span>
-	<span class="label">
-		<!-- TODO: 無名slotの方は廃止 -->
-		<span @click="toggle"><slot name="label"></slot><slot></slot></span>
-		<p class="caption"><slot name="caption"></slot></p>
-	</span>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { toRefs, Ref } from 'vue';
-import * as os from '@/os';
-import { i18n } from '@/i18n';
-
-const props = defineProps<{
-	modelValue: boolean | Ref<boolean>;
-	disabled?: boolean;
-}>();
-
-const emit = defineEmits<{
-	(ev: 'update:modelValue', v: boolean): void;
-}>();
-
-let button = $shallowRef<HTMLElement>();
-const checked = toRefs(props).modelValue;
-const toggle = () => {
-	if (props.disabled) return;
-	emit('update:modelValue', !checked.value);
-
-	if (!checked.value) {
-
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-.ziffeomt {
-	position: relative;
-	display: flex;
-	transition: all 0.2s ease;
-
-	> * {
-		user-select: none;
-	}
-
-	> input {
-		position: absolute;
-		width: 0;
-		height: 0;
-		opacity: 0;
-		margin: 0;
-	}
-
-	> .button {
-		position: relative;
-		display: inline-flex;
-		flex-shrink: 0;
-		margin: 0;
-		box-sizing: border-box;
-		width: 32px;
-		height: 23px;
-		outline: none;
-		background: var(--swutchOffBg);
-		background-clip: content-box;
-		border: solid 1px var(--swutchOffBg);
-		border-radius: 999px;
-		cursor: pointer;
-		transition: inherit;
-		user-select: none;
-
-		> .knob {
-			position: absolute;
-			top: 3px;
-			left: 3px;
-			width: 15px;
-			height: 15px;
-			background: var(--swutchOffFg);
-			border-radius: 999px;
-			transition: all 0.2s ease;
-		}
-	}
-
-	&:hover {
-		> .button {
-			border-color: var(--inputBorderHover) !important;
-		}
-	}
-
-	> .label {
-		margin-left: 12px;
-		margin-top: 2px;
-		display: block;
-		transition: inherit;
-		color: var(--fg);
-
-		> span {
-			display: block;
-			line-height: 20px;
-			cursor: pointer;
-			transition: inherit;
-		}
-
-		> .caption {
-			margin: 8px 0 0 0;
-			color: var(--fgTransparentWeak);
-			font-size: 0.85em;
-
-			&:empty {
-				display: none;
-			}
-		}
-	}
-
-	&.disabled {
-		opacity: 0.6;
-		cursor: not-allowed;
-	}
-
-	&.checked {
-		> .button {
-			background-color: var(--swutchOnBg) !important;
-			border-color: var(--swutchOnBg) !important;
-
-			> .knob {
-				left: 12px;
-				background: var(--swutchOnFg);
-			}
-		}
-	}
-}
-</style>
diff --git a/packages/frontend/src/components/page/page.switch.vue b/packages/frontend/src/components/page/page.switch.vue
index 64dc4ff8aa..d0d2637afa 100644
--- a/packages/frontend/src/components/page/page.switch.vue
+++ b/packages/frontend/src/components/page/page.switch.vue
@@ -6,7 +6,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import MkSwitch from '../form/switch.vue';
+import MkSwitch from '../MkSwitch.vue';
 import * as os from '@/os';
 import { Hpml } from '@/scripts/hpml/evaluator';
 import { SwitchVarBlock } from '@/scripts/hpml/block';
-- 
cgit v1.2.3-freya