refactor(client): use css modules

packages/frontend/src/ui/deck/column.vue

@@ -8,7 +8,7 @@
 	@drop.prevent.stop="onDrop"
 >
 	<header
-		:class="[$style.header, { [$style.indicated]: indicated }]"
+		:class="[$style.header]"
 		draggable="true"
 		@click="goTop"
 		@dragstart="onDragstart"
@@ -43,12 +43,10 @@ const props = withDefaults(defineProps<{
 	column: Column;
 	isStacked?: boolean;
 	naked?: boolean;
-	indicated?: boolean;
 	menu?: MenuItem[];
 }>(), {
 	isStacked: false,
 	naked: false,
-	indicated: false,
 });
 
 const emit = defineEmits<{
@@ -289,10 +287,6 @@ function onDrop(ev) {
 	&:not(.active) {
 		flex-basis: var(--deckColumnHeaderHeight);
 		min-height: var(--deckColumnHeaderHeight);
-
-		> .header.indicated {
-			box-shadow: 4px 0px var(--accent) inset;
-		}
 	}
 
 	&.naked {
@@ -328,10 +322,6 @@ function onDrop(ev) {
 	&, * {
 		user-select: none;
 	}
-
-	&.indicated {
-		box-shadow: 0 3px 0 0 var(--accent);
-	}
 }
 
 .title {

packages/frontend/src/ui/deck/tl-column.vue

@@ -1,5 +1,5 @@
 <template>
-<XColumn :menu="menu" :column="column" :is-stacked="isStacked" :indicated="indicated" @change-active-state="onChangeActiveState" @parent-focus="$event => emit('parent-focus', $event)">
+<XColumn :menu="menu" :column="column" :is-stacked="isStacked" @parent-focus="$event => emit('parent-focus', $event)">
 	<template #header>
 		<i v-if="column.tl === 'home'" class="ti ti-home"></i>
 		<i v-else-if="column.tl === 'local'" class="ti ti-planet"></i>
@@ -15,7 +15,7 @@
 		</p>
 		<p class="desc">{{ $t('disabled-timeline.description') }}</p>
 	</div>
-	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')" @queue="queueUpdated" @note="onNote"/>
+	<XTimeline v-else-if="column.tl" ref="timeline" :key="column.tl" :src="column.tl" @after="() => emit('loaded')"/>
 </XColumn>
 </template>
 
@@ -40,8 +40,6 @@ const emit = defineEmits<{
 }>();
 
 let disabled = $ref(false);
-let indicated = $ref(false);
-let columnActive = $ref(true);
 
 onMounted(() => {
 	if (props.column.tl == null) {
@@ -77,26 +75,6 @@ async function setType() {
 	});
 }
 
-function queueUpdated(q) {
-	if (columnActive) {
-		indicated = q !== 0;
-	}
-}
-
-function onNote() {
-	if (!columnActive) {
-		indicated = true;
-	}
-}
-
-function onChangeActiveState(state) {
-	columnActive = state;
-
-	if (columnActive) {
-		indicated = false;
-	}
-}
-
 const menu = [{
 	icon: 'ti ti-pencil',
 	text: i18n.ts.timeline,