refactor(client): use css modules

packages/frontend/src/components/MkDateSeparatedList.vue

@@ -80,7 +80,6 @@ export default defineComponent({
 			} else {
 				if (props.ad && item._shouldInsertAd_) {
 					return [h(MkAd, {
-						class: 'a', // advertiseの意(ブロッカー対策)
 						key: item.id + ':ad',
 						prefer: ['horizontal', 'horizontal-big'],
 					}), el];

packages/frontend/src/components/MkNote.vue

@@ -4,7 +4,7 @@
 	v-show="!isDeleted"
 	ref="el"
 	v-hotkey="keymap"
-	:class="[$style.root, { [$style.isRenote]: isRenote }]"
+	:class="$style.root"
 	:tabindex="!isDeleted ? '-1' : null"
 >
 	<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/>

packages/frontend/src/components/MkNotes.vue

@@ -8,9 +8,9 @@
 	</template>
 
 	<template #default="{ items: notes }">
-		<div class="giivymft" :class="{ noGap }">
-			<MkDateSeparatedList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" class="notes">
-				<XNote :key="note._featuredId_ || note._prId_ || note.id" class="qtqtichx" :note="note"/>
+		<div :class="[$style.root, { [$style.noGap]: noGap }]">
+			<MkDateSeparatedList ref="notes" v-slot="{ item: note }" :items="notes" :direction="pagination.reversed ? 'up' : 'down'" :reversed="pagination.reversed" :no-gap="noGap" :ad="true" :class="$style.notes">
+				<XNote :key="note._featuredId_ || note._prId_ || note.id" :class="$style.note" :note="note"/>
 			</MkDateSeparatedList>
 		</div>
 	</template>
@@ -36,8 +36,8 @@ defineExpose({
 });
 </script>
 
-<style lang="scss" scoped>
-.giivymft {
+<style lang="scss" module>
+.root {
 	&.noGap {
 		> .notes {
 			background: var(--panel);
@@ -48,7 +48,7 @@ defineExpose({
 		> .notes {
 			background: var(--bg);
 
-			.qtqtichx {
+			.note {
 				background: var(--panel);
 				border-radius: var(--radius);
 			}