From 95797ae54d256157195c20bf5f952ecdb62ff98b Mon Sep 17 00:00:00 2001
From: ctot-nondef <christoph.hoffmann@oeaw.ac.at>
Date: Mon, 9 Sep 2024 10:00:32 +0200
Subject: [PATCH] chore: linting/formatting

---
 src/components/CombinedMapChart.vue           |  2 +-
 src/components/CorpsumDataTable.vue           | 14 ++++-----
 .../DataDisplay/DataDisplayCollocations.vue   | 12 ++++----
 .../DataDisplayKeywordInContext.vue           |  4 +--
 .../DataDisplay/DataDisplayMediaSource.vue    | 22 +++++++-------
 .../DataDisplayRegionalFrequencies.vue        | 30 +++++++++----------
 .../DataDisplay/DataDisplaySourceTable.vue    |  2 +-
 .../DataDisplayWordFormFrequencies.vue        | 12 ++++----
 .../DataDisplayYearlyFrequencies.vue          | 12 ++++----
 src/components/Dev.vue                        | 26 ++++++++--------
 src/components/DisplayCard.vue                |  2 +-
 src/components/Facetting/FacettingModal.vue   |  6 ++--
 .../Facetting/FacettingSelection.vue          |  2 +-
 src/components/KWIC/KWICAttributeSelect.vue   | 24 +++++++--------
 src/components/Media/MediaStackedBarChart.vue |  2 +-
 src/components/Search/CorpusSelection.vue     | 18 +++++------
 src/components/Search/QueryItem.vue           |  4 +--
 src/components/Search/Search.vue              | 10 +++----
 src/components/Search/SearchDimensions.vue    | 10 +++----
 src/components/ui/DataTable.vue               |  6 ++--
 src/components/ui/badge/index.ts              |  2 --
 src/components/ui/button/index.ts             |  2 --
 src/components/ui/checkbox/Checkbox.vue       |  2 +-
 .../DropdownMenuCheckboxItem.vue              |  2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  2 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  2 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  2 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  2 +-
 src/components/ui/input/Input.vue             |  2 +-
 src/components/ui/table/TableCaption.vue      |  2 +-
 src/components/ui/table/TableEmpty.vue        |  2 +-
 src/components/ui/table/TableFooter.vue       |  2 +-
 src/components/ui/table/TableHead.vue         |  2 +-
 src/components/ui/table/TableRow.vue          |  2 +-
 src/pages/login.vue                           |  4 +--
 src/plugins/query-client.ts                   |  6 ++--
 src/utils/kwic.ts                             |  4 ++-
 39 files changed, 132 insertions(+), 134 deletions(-)

diff --git a/src/components/CombinedMapChart.vue b/src/components/CombinedMapChart.vue
index f05c4ea..85c5b76 100644
--- a/src/components/CombinedMapChart.vue
+++ b/src/components/CombinedMapChart.vue
@@ -36,7 +36,7 @@ const pieInfo: Array<PieInfo> = [
 const pieInfoWithData: ComputedRef<Array<PieInfoWithData>> = computed(() => {
 	return dataByRegion.value.map((regionData) => {
 		const [region] = regionData;
-		let [_, ...values] = regionData;
+		const [_, ...values] = regionData;
 		values.pop();
 		const queryData = props.queries.map((query) => ({
 			color: query.color,
diff --git a/src/components/CorpsumDataTable.vue b/src/components/CorpsumDataTable.vue
index 3101d4e..8566c03 100644
--- a/src/components/CorpsumDataTable.vue
+++ b/src/components/CorpsumDataTable.vue
@@ -43,8 +43,8 @@ const t = useTranslations("Corpsum");
 					<TableHead v-for="header in headerGroup.headers" :key="header.id">
 						<FlexRender
 							v-if="!header.isPlaceholder"
-							:render="header.column.columnDef.header"
 							:props="header.getContext()"
+							:render="header.column.columnDef.header"
 						/>
 					</TableHead>
 				</TableRow>
@@ -58,13 +58,13 @@ const t = useTranslations("Corpsum");
 						:data-state="row.getIsSelected() ? 'selected' : undefined"
 					>
 						<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-							<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+							<FlexRender :props="cell.getContext()" :render="cell.column.columnDef.cell" />
 						</TableCell>
 					</TableRow>
 				</template>
 				<template v-else>
 					<TableRow>
-						<TableCell :colspan="columns.length" class="h-24 text-center">
+						<TableCell class="h-24 text-center" :colspan="columns.length">
 							{{ t("No results.") }}
 						</TableCell>
 					</TableRow>
@@ -79,18 +79,18 @@ const t = useTranslations("Corpsum");
 			</div>
 			<div class="space-x-2">
 				<Button
-					variant="outline"
-					size="sm"
 					:disabled="!table.getCanPreviousPage()"
+					size="sm"
+					variant="outline"
 					@click="table.previousPage()"
 				>
 					{{ t("previous") }}
 				</Button>
 				<Button
-					variant="outline"
 					class="mr-2"
-					size="sm"
 					:disabled="!table.getCanNextPage()"
+					size="sm"
+					variant="outline"
 					@click="table.nextPage()"
 				>
 					{{ t("next") }}
diff --git a/src/components/DataDisplay/DataDisplayCollocations.vue b/src/components/DataDisplay/DataDisplayCollocations.vue
index 554369a..4606d33 100644
--- a/src/components/DataDisplay/DataDisplayCollocations.vue
+++ b/src/components/DataDisplay/DataDisplayCollocations.vue
@@ -171,14 +171,14 @@ function pointFormatter() {
 
 		<VCardText class="py-0">
 			<VBtnToggle v-model="mode" density="compact">
-				<VBtn variant="outlined" value="coll_freq">
+				<VBtn value="coll_freq" variant="outlined">
 					{{ t("coll_freq") }}
 				</VBtn>
-				<VBtn variant="outlined" value="freq">{{ t("freq") }}</VBtn>
+				<VBtn value="freq" variant="outlined">{{ t("freq") }}</VBtn>
 			</VBtnToggle>
 
 			<div v-for="(query, index) of queries" :key="query.id">
-				<QueryDisplay :query="query" :loading="collocationsLoading[index]" />
+				<QueryDisplay :loading="collocationsLoading[index]" :query="query" />
 				<HighCharts
 					v-if="!collocationsLoading[index]"
 					:options="{
@@ -195,17 +195,17 @@ function pointFormatter() {
 		<VExpandTransition v-if="expand">
 			<DataDisplaySourceTable
 				v-if="!loading"
-				:queries="queries"
 				:data="sortedCollocations"
-				:loading="collocationsLoading"
 				datatype="collocations"
+				:loading="collocationsLoading"
+				:queries="queries"
 			></DataDisplaySourceTable>
 		</VExpandTransition>
 
 		<VDivider></VDivider>
 
 		<VCardActions>
-			<VBtn variant="outlined" size="small" @click="expand = !expand">
+			<VBtn size="small" variant="outlined" @click="expand = !expand">
 				{{ !expand ? t("ShowData") : t("HideData") }}
 			</VBtn>
 		</VCardActions>
diff --git a/src/components/DataDisplay/DataDisplayKeywordInContext.vue b/src/components/DataDisplay/DataDisplayKeywordInContext.vue
index 4bef893..0628389 100644
--- a/src/components/DataDisplay/DataDisplayKeywordInContext.vue
+++ b/src/components/DataDisplay/DataDisplayKeywordInContext.vue
@@ -90,7 +90,7 @@ const columns = getKWICColumns(t as unknown as (s: string) => string, open);
 				<VCheckbox v-model="showViewOptionsMode" :label="t('viewOptions')"></VCheckbox>
 				<KWICAttributeSelect v-if="showViewOptionsMode" :query="query" />
 				<div>
-					<QueryDisplay :query="query" :loading="KWICresultsLoading[index]" />
+					<QueryDisplay :loading="KWICresultsLoading[index]" :query="query" />
 
 					<CorpsumDataTable
 						v-if="!KWICresultsLoading[index]"
@@ -100,8 +100,8 @@ const columns = getKWICColumns(t as unknown as (s: string) => string, open);
 
 					<KWICDetailDialog
 						v-if="selectedKWIC"
-						:query="query"
 						:kwic="selectedKWIC"
+						:query="query"
 						@close="selectedKWIC = null"
 					/>
 				</div>
diff --git a/src/components/DataDisplay/DataDisplayMediaSource.vue b/src/components/DataDisplay/DataDisplayMediaSource.vue
index bad2e0e..5e04b54 100644
--- a/src/components/DataDisplay/DataDisplayMediaSource.vue
+++ b/src/components/DataDisplay/DataDisplayMediaSource.vue
@@ -80,24 +80,24 @@ const isStacked = computed(() => chartMode.value === "stack");
 		<VCardText>
 			<div class="flex items-center gap-2">
 				<VBtnToggle v-model="chartMode" density="compact">
-					<VBtn variant="outlined" value="stack">
+					<VBtn value="stack" variant="outlined">
 						<VIcon icon="mdi-chart-bar-stacked" />
-						<VTooltip location="top" activator="parent">stacked bar chart</VTooltip>
+						<VTooltip activator="parent" location="top">stacked bar chart</VTooltip>
 					</VBtn>
-					<VBtn variant="outlined" value="seperate">
+					<VBtn value="seperate" variant="outlined">
 						<VIcon icon="mdi-poll" />
-						<VTooltip location="top" activator="parent">seperated bar chart</VTooltip>
+						<VTooltip activator="parent" location="top">seperated bar chart</VTooltip>
 					</VBtn>
 				</VBtnToggle>
 
 				<VBtnToggle v-model="mode" density="compact">
-					<VBtn variant="outlined" value="absolute">{{ t("absolute") }}</VBtn>
-					<VBtn variant="outlined" value="relative">{{ t("relative") }}</VBtn>
+					<VBtn value="absolute" variant="outlined">{{ t("absolute") }}</VBtn>
+					<VBtn value="relative" variant="outlined">{{ t("relative") }}</VBtn>
 				</VBtnToggle>
 			</div>
 			<div v-for="(query, index) of queries" :key="query.id">
 				<div v-if="sourceDistributionsLoading[index]">
-					<QueryDisplay :query="query" :loading="sourceDistributionsLoading[index]" />
+					<QueryDisplay :loading="sourceDistributionsLoading[index]" :query="query" />
 				</div>
 			</div>
 			<!-- {{ series }} -->
@@ -105,9 +105,9 @@ const isStacked = computed(() => chartMode.value === "stack");
 
 			<template v-if="sourceDistributions && queries">
 				<MediaStackedBarChart
+					:mode="mode as 'absolute' | 'relative'"
 					:queries="queries"
 					:source-distributions="sourceDistributions"
-					:mode="mode as 'absolute' | 'relative'"
 					:stack="isStacked"
 				/>
 			</template>
@@ -115,17 +115,17 @@ const isStacked = computed(() => chartMode.value === "stack");
 
 		<VExpandTransition v-if="expand">
 			<DataDisplaySourceTable
-				:queries="queries"
-				datatype="mediaSources"
 				:data="sourceDistributions"
+				datatype="mediaSources"
 				:loading="sourceDistributionsLoading"
+				:queries="queries"
 			></DataDisplaySourceTable>
 		</VExpandTransition>
 
 		<VDivider></VDivider>
 
 		<VCardActions>
-			<VBtn variant="outlined" size="small" @click="expand = !expand">
+			<VBtn size="small" variant="outlined" @click="expand = !expand">
 				{{ !expand ? t("ShowData") : t("HideData") }}
 			</VBtn>
 		</VCardActions>
diff --git a/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue b/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue
index f592e79..ef46cca 100644
--- a/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue
+++ b/src/components/DataDisplay/DataDisplayRegionalFrequencies.vue
@@ -98,57 +98,57 @@ const expand = ref(false);
 		<VCardText class="py-0">
 			<div class="flex items-center gap-2">
 				<VBtnToggle v-model="chartMode" density="compact">
-					<VBtn variant="outlined" value="combined">
+					<VBtn value="combined" variant="outlined">
 						<VIcon icon="mdi-map" />
-						<VIcon icon="mdi-chart-pie-outline" class="ml-[-0.3rem]" />
+						<VIcon class="ml-[-0.3rem]" icon="mdi-chart-pie-outline" />
 
-						<VTooltip location="top" activator="parent">combined map chart</VTooltip>
+						<VTooltip activator="parent" location="top">combined map chart</VTooltip>
 					</VBtn>
-					<VBtn variant="outlined" value="seperate">
-						<VIcon icon="mdi-map" class="z-30 bg-white" />
-						<VIcon icon="mdi-map" class="z-20 -mt-2 ml-[-0.80rem]" />
-						<VTooltip location="top" activator="parent">seperated map charts</VTooltip>
+					<VBtn value="seperate" variant="outlined">
+						<VIcon class="z-30 bg-white" icon="mdi-map" />
+						<VIcon class="z-20 -mt-2 ml-[-0.80rem]" icon="mdi-map" />
+						<VTooltip activator="parent" location="top">seperated map charts</VTooltip>
 					</VBtn>
 				</VBtnToggle>
 				<VBtnToggle v-model="mode" density="compact">
-					<VBtn variant="outlined" value="absolute">{{ t("absolute") }}</VBtn>
-					<VBtn variant="outlined" value="relative">{{ t("relative") }}</VBtn>
+					<VBtn value="absolute" variant="outlined">{{ t("absolute") }}</VBtn>
+					<VBtn value="relative" variant="outlined">{{ t("relative") }}</VBtn>
 				</VBtnToggle>
 			</div>
 			<!-- <JsonViewer boxed :value="regionalFrequencies" :expand-depth="5"></JsonViewer> -->
 
 			<div v-for="(query, index) of queries" :key="query.id">
 				<div class="mt-1">
-					<QueryDisplay :query="query" :loading="regionalFrequenciesLoading[index]" />
+					<QueryDisplay :loading="regionalFrequenciesLoading[index]" :query="query" />
 					<ClientOnly v-if="!regionalFrequenciesLoading[index] && regionalFrequencies[index]">
 						<MapChart
 							v-if="!isCombined"
+							:mode="mode"
 							:query="query"
 							:resdata="regionalFrequencies[index].data"
-							:mode="mode"
 						/>
 					</ClientOnly>
 				</div>
 			</div>
 			<div v-if="isCombined && !loading && queries.length > 0">
-				<CombinedMapChart :queries="queries" :resdata="regionalFrequencies" :mode="mode" />
+				<CombinedMapChart :mode="mode" :queries="queries" :resdata="regionalFrequencies" />
 				<!-- <DemoChart /> -->
 			</div>
 		</VCardText>
 
 		<VExpandTransition v-if="expand">
 			<DataDisplaySourceTable
+				:data="regionalFrequencies.map((a) => a.data)"
 				datatype="regionalFrequencies"
-				:queries="queries"
 				:loading="regionalFrequenciesLoading"
-				:data="regionalFrequencies.map((a) => a.data)"
+				:queries="queries"
 			></DataDisplaySourceTable>
 		</VExpandTransition>
 
 		<VDivider></VDivider>
 
 		<VCardActions>
-			<VBtn variant="outlined" size="small" @click="expand = !expand">
+			<VBtn size="small" variant="outlined" @click="expand = !expand">
 				{{ !expand ? t("ShowData") : t("HideData") }}
 			</VBtn>
 		</VCardActions>
diff --git a/src/components/DataDisplay/DataDisplaySourceTable.vue b/src/components/DataDisplay/DataDisplaySourceTable.vue
index 98fc146..2e31371 100644
--- a/src/components/DataDisplay/DataDisplaySourceTable.vue
+++ b/src/components/DataDisplay/DataDisplaySourceTable.vue
@@ -41,7 +41,7 @@ const columns = computed(() => {
 				<div v-for="(query, index) of props.queries" :key="query.id">
 					<VWindowItem :value="query.id">
 						<div>
-							<QueryDisplay :query="query" :loading="loading[index]" />
+							<QueryDisplay :loading="loading[index]" :query="query" />
 							<CorpsumDataTable v-if="!loading[index]" :columns="columns" :data="data[index]!" />
 						</div>
 					</VWindowItem>
diff --git a/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue b/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue
index 652ccb8..9d2bd28 100644
--- a/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue
+++ b/src/components/DataDisplay/DataDisplayWordFormFrequencies.vue
@@ -69,11 +69,11 @@ const expand = ref(false);
 
 		<VCardText class="py-0">
 			<VBtnToggle v-model="mode" density="compact">
-				<VBtn variant="outlined" value="absolute">{{ t("absolute") }}</VBtn>
-				<VBtn variant="outlined" value="relative">{{ t("relative") }}</VBtn>
+				<VBtn value="absolute" variant="outlined">{{ t("absolute") }}</VBtn>
+				<VBtn value="relative" variant="outlined">{{ t("relative") }}</VBtn>
 			</VBtnToggle>
 			<div v-for="(query, index) of queries" :key="query.id">
-				<QueryDisplay :query="query" :loading="wordFormFrequenciesLoading[index]" />
+				<QueryDisplay :loading="wordFormFrequenciesLoading[index]" :query="query" />
 				<HighCharts
 					:options="{
 						chart: {
@@ -109,17 +109,17 @@ const expand = ref(false);
 
 		<VExpandTransition v-if="expand">
 			<DataDisplaySourceTable
-				:queries="queries"
-				:loading="wordFormFrequenciesLoading"
 				:data="wordFormFrequencies"
 				datatype="wordFormFrequencies"
+				:loading="wordFormFrequenciesLoading"
+				:queries="queries"
 			></DataDisplaySourceTable>
 		</VExpandTransition>
 
 		<VDivider></VDivider>
 
 		<VCardActions>
-			<VBtn variant="outlined" size="small" @click="expand = !expand">
+			<VBtn size="small" variant="outlined" @click="expand = !expand">
 				{{ !expand ? t("ShowData") : t("HideData") }}
 			</VBtn>
 		</VCardActions>
diff --git a/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue b/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue
index ea35f7f..c19b40f 100644
--- a/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue
+++ b/src/components/DataDisplay/DataDisplayYearlyFrequencies.vue
@@ -91,11 +91,11 @@ const series = computed(() =>
 
 		<VCardText class="py-0">
 			<VBtnToggle v-model="mode" density="compact">
-				<VBtn variant="outlined" value="absolute">{{ t("absolute") }}</VBtn>
-				<VBtn variant="outlined" value="relative">{{ t("relative") }}</VBtn>
+				<VBtn value="absolute" variant="outlined">{{ t("absolute") }}</VBtn>
+				<VBtn value="relative" variant="outlined">{{ t("relative") }}</VBtn>
 			</VBtnToggle>
 			<div v-for="(query, index) of queries" :key="query.id">
-				<QueryDisplay :query="query" :loading="yearlyFrequenciesLoading[index]" />
+				<QueryDisplay :loading="yearlyFrequenciesLoading[index]" :query="query" />
 			</div>
 			<HighCharts
 				:options="{
@@ -115,17 +115,17 @@ const series = computed(() =>
 
 		<VExpandTransition v-if="expand">
 			<DataDisplaySourceTable
-				:queries="queries"
 				:data="yearlyFrequencies"
-				:loading="yearlyFrequenciesLoading"
 				datatype="yearlyFrequencies"
+				:loading="yearlyFrequenciesLoading"
+				:queries="queries"
 			></DataDisplaySourceTable>
 		</VExpandTransition>
 
 		<VDivider></VDivider>
 
 		<VCardActions>
-			<VBtn variant="outlined" size="small" @click="expand = !expand">
+			<VBtn size="small" variant="outlined" @click="expand = !expand">
 				{{ !expand ? t("ShowData") : t("HideData") }}
 			</VBtn>
 		</VCardActions>
diff --git a/src/components/Dev.vue b/src/components/Dev.vue
index 58dbf9e..a13d0ec 100644
--- a/src/components/Dev.vue
+++ b/src/components/Dev.vue
@@ -32,30 +32,30 @@ function refresh() {
 
 					<JsonViewer
 						v-if="!disabled"
+						boxed
+						:expand-depth="5"
 						preview-mode
 						:value="corpora"
-						:expand-depth="5"
-						boxed
 						@click.alt="refresh()"
 					></JsonViewer>
 
 					<p>selectedCorpus:</p>
 					<JsonViewer
 						v-if="!disabled"
+						boxed
+						:expand-depth="5"
 						preview-mode
 						:value="selectedCorpus"
-						:expand-depth="5"
-						boxed
 						@click.alt="refresh()"
 					></JsonViewer>
 					<p>corpInfoResponse:</p>
 					<JsonViewer
 						v-if="!disabled"
-						:show-array-index="false"
+						boxed
+						:expand-depth="5"
 						preview-mode
+						:show-array-index="false"
 						:value="corpInfoResponse"
-						:expand-depth="5"
-						boxed
 						@click.alt="refresh()"
 					></JsonViewer>
 				</div>
@@ -66,20 +66,20 @@ function refresh() {
 
 					<JsonViewer
 						v-if="!disabled"
+						boxed
+						:expand-depth="5"
 						preview-mode
 						:value="queries"
-						:expand-depth="5"
-						boxed
 						@click.alt="refresh()"
 					></JsonViewer>
 
 					<p>nextQueryId</p>
 					<JsonViewer
 						v-if="!disabled"
+						boxed
+						:expand-depth="5"
 						preview-mode
 						:value="nextQueryId"
-						:expand-depth="5"
-						boxed
 						@click.alt="refresh()"
 					></JsonViewer>
 				</div>
@@ -87,10 +87,10 @@ function refresh() {
 					<h2>Search Settings</h2>
 					<JsonViewer
 						v-if="!disabled"
+						boxed
+						:expand-depth="5"
 						preview-mode
 						:value="searchSettings.selectedSearches"
-						:expand-depth="5"
-						boxed
 						@click.alt="refresh()"
 					></JsonViewer>
 				</div>
diff --git a/src/components/DisplayCard.vue b/src/components/DisplayCard.vue
index 9a896b0..8f913a2 100644
--- a/src/components/DisplayCard.vue
+++ b/src/components/DisplayCard.vue
@@ -26,7 +26,7 @@ const expand = ref(false);
 		<VDivider></VDivider>
 
 		<VCardActions>
-			<VBtn variant="outlined" size="small" @click="expand = !expand">
+			<VBtn size="small" variant="outlined" @click="expand = !expand">
 				{{ !expand ? "Show Data" : "Hide Data" }}
 			</VBtn>
 		</VCardActions>
diff --git a/src/components/Facetting/FacettingModal.vue b/src/components/Facetting/FacettingModal.vue
index 68be50d..61d62e7 100644
--- a/src/components/Facetting/FacettingModal.vue
+++ b/src/components/Facetting/FacettingModal.vue
@@ -88,9 +88,9 @@ const selected: Ref<EntryLine | null> = ref(null);
 										</span>
 
 										<Button
-											variant="outline"
-											size="xs"
 											class="rounded border border-solid"
+											size="xs"
+											variant="outline"
 											@click="removeFromSelection(entry.Line[0].name, i)"
 										>
 											x
@@ -114,8 +114,8 @@ const selected: Ref<EntryLine | null> = ref(null);
 											}}
 										</Badge>
 										<Button
-											variant="outline"
 											size="xs"
+											variant="outline"
 											@click="clearRegexSearch(entry.Line[0].name)"
 										>
 											x
diff --git a/src/components/Facetting/FacettingSelection.vue b/src/components/Facetting/FacettingSelection.vue
index 009dca8..fef9abd 100644
--- a/src/components/Facetting/FacettingSelection.vue
+++ b/src/components/Facetting/FacettingSelection.vue
@@ -125,8 +125,8 @@ await changeSuggs();
 				<div class="flex flex-col items-start gap-1">
 					<Label for="search">{{ t("Mode") }}</Label>
 					<Button
-						variant="outline"
 						class="flex gap-1"
+						variant="outline"
 						@click="modeIndex = (modeIndex + 1) % modes.length"
 					>
 						<VIcon icon="mdi-swap-horizontal" />
diff --git a/src/components/KWIC/KWICAttributeSelect.vue b/src/components/KWIC/KWICAttributeSelect.vue
index 55075cd..de771e4 100644
--- a/src/components/KWIC/KWICAttributeSelect.vue
+++ b/src/components/KWIC/KWICAttributeSelect.vue
@@ -19,28 +19,28 @@ const _query = queryStore.queries.find((q) => q.id === props.query.id);
 		<div v-if="_query" class="flex w-full flex-row justify-start gap-3 p-0">
 			<VAutocomplete
 				v-model="_query.KWICAttrsStructs.attributes"
-				:label="t('Attributes')"
-				return-object
-				dese
-				closable-chips
-				placeholer="please select"
 				chips
-				multiple
+				closable-chips
+				dese
 				item-title="name"
 				:items="_query.KWICAttrsStructsOptions.attributes"
+				:label="t('Attributes')"
+				multiple
+				placeholer="please select"
+				return-object
 			/>
 
 			<VAutocomplete
 				v-model="_query.KWICAttrsStructs.structures"
-				:label="t('Structures')"
-				return-object
-				dese
-				closable-chips
-				placeholer="please select"
 				chips
-				multiple
+				closable-chips
+				dese
 				item-title="name"
 				:items="_query.KWICAttrsStructsOptions.structures"
+				:label="t('Structures')"
+				multiple
+				placeholer="please select"
+				return-object
 			/>
 		</div>
 	</div>
diff --git a/src/components/Media/MediaStackedBarChart.vue b/src/components/Media/MediaStackedBarChart.vue
index 526598f..472b2db 100644
--- a/src/components/Media/MediaStackedBarChart.vue
+++ b/src/components/Media/MediaStackedBarChart.vue
@@ -80,7 +80,7 @@ const highChartsOptions = computed(() => ({
 <template>
 	<HighCharts
 		v-if="smoothReloadForBarChart"
-		style="height: 1200px"
 		:options="highChartsOptions"
+		style="height: 1200px"
 	></HighCharts>
 </template>
diff --git a/src/components/Search/CorpusSelection.vue b/src/components/Search/CorpusSelection.vue
index 16869df..75b52d2 100644
--- a/src/components/Search/CorpusSelection.vue
+++ b/src/components/Search/CorpusSelection.vue
@@ -40,12 +40,12 @@ const t = useTranslations("Corpsum");
 		<div class="flex flex-col justify-start">
 			<VSelect
 				v-model="selectedCorpus"
-				:loading="corporaLoading"
-				:items="corpora!.data!"
 				item-title="name"
-				:return-object="true"
+				:items="corpora!.data!"
 				:label="t('Corpus')"
+				:loading="corporaLoading"
 				:no-data-text="t('NoData')"
+				:return-object="true"
 				style="flex-grow: 0; min-width: 15rem"
 				@update:model-value="selectedSubCorpus = null"
 			></VSelect>
@@ -62,16 +62,16 @@ const t = useTranslations("Corpsum");
 		<div class="flex h-full flex-col items-start justify-start">
 			<VAutocomplete
 				v-model="corporaStore.selectedSubCorpus"
-				:items="subCorpora?.subcorpora"
-				:loading="subCorporaLoading"
+				:clearable="true"
+				dese
 				item-title="name"
 				item-value="name"
-				dese
-				:return-object="true"
-				:clearable="true"
+				:items="subCorpora?.subcorpora"
 				:label="t('SubCorpus')"
-				:placeholder="t('SelectSubCorpus')"
+				:loading="subCorporaLoading"
 				:no-data-text="t('NoData')"
+				:placeholder="t('SelectSubCorpus')"
+				:return-object="true"
 				style="flex-grow: 0; min-width: 10rem"
 			></VAutocomplete>
 			<p v-if="corporaStore.selectedSubCorpus">
diff --git a/src/components/Search/QueryItem.vue b/src/components/Search/QueryItem.vue
index 0f8191b..77055ce 100644
--- a/src/components/Search/QueryItem.vue
+++ b/src/components/Search/QueryItem.vue
@@ -39,9 +39,9 @@ const showFacettingInterface = ref(false);
 
 					<VBadge
 						v-if="setFilters.length"
-						location="bottom end"
 						:color="query.color"
 						:content="setFilters.length"
+						location="bottom end"
 					>
 						<VBtn density="compact" icon="mdi-filter" @click="showFacettingInterface = true"></VBtn>
 					</VBadge>
@@ -69,7 +69,7 @@ const showFacettingInterface = ref(false);
 		<VCardText class="flex justify-between gap-1" :style="`color: ${props.query.color}`">
 			<div class="flex flex-col justify-between">
 				<!-- <JsonViewer preview-mode :value="query.concordance_query" boxed></JsonViewer> -->
-				<JsonViewer preview-mode :value="queryWithFacetting" boxed></JsonViewer>
+				<JsonViewer boxed preview-mode :value="queryWithFacetting"></JsonViewer>
 				<!-- <JsonViewer preview-mode :value="query.KWICAttrsStructs" boxed></JsonViewer> -->
 			</div>
 			<div class="flex flex-col gap-1">
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index 87f7515..ac8dd65 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -36,21 +36,21 @@ const _alert = (msg: string) => {
 
 					<VSelect
 						v-model="newSelectedType"
-						:items="CORPUS_QUERY_TYPES"
+						class="ml-4"
 						item-title="description"
 						item-value="value"
+						:items="CORPUS_QUERY_TYPES"
 						:label="t('querytype')"
 						style="flex-grow: 0"
-						class="ml-4"
 					></VSelect>
 					<VTextField
 						v-model="newUserInput"
+						append-inner-icon="mdi-send-circle"
+						class="flex-1"
 						:placeholder="t('SearchTerm')"
 						vafriant="outlined"
-						class="flex-1"
-						append-inner-icon="mdi-send-circle"
-						@keydown.enter="addQuery"
 						@click:append-inner="addQuery"
+						@keydown.enter="addQuery"
 					></VTextField>
 				</div>
 			</VForm>
diff --git a/src/components/Search/SearchDimensions.vue b/src/components/Search/SearchDimensions.vue
index ebadc89..f1613e7 100644
--- a/src/components/Search/SearchDimensions.vue
+++ b/src/components/Search/SearchDimensions.vue
@@ -10,12 +10,12 @@ const { selectedSearches, possibleSearchKeys } = storeToRefs(searchSettings);
 <template>
 	<VAutocomplete
 		v-model="selectedSearches"
-		:label="t('SearchDimensions')"
-		multiple
-		closable-chips
-		clearable
 		chips
+		clearable
+		closable-chips
 		:items="possibleSearchKeys"
+		:label="t('SearchDimensions')"
+		multiple
 	>
 		<template #chip="{ props, item }">
 			<VChip v-bind="props" :text="t(item.value)"></VChip>
@@ -25,8 +25,8 @@ const { selectedSearches, possibleSearchKeys } = storeToRefs(searchSettings);
 			<!-- @vue-ignore i18n typing doesn't seem to work for templated strings -->
 			<VListItem
 				v-bind="props"
-				:title="t(item.value)"
 				:subtitle="t(`${item.value}Desc`)"
+				:title="t(item.value)"
 			></VListItem>
 		</template>
 	</VAutocomplete>
diff --git a/src/components/ui/DataTable.vue b/src/components/ui/DataTable.vue
index 0a1c6c4..20e07ac 100644
--- a/src/components/ui/DataTable.vue
+++ b/src/components/ui/DataTable.vue
@@ -34,8 +34,8 @@ const table = useVueTable({
 					<TableHead v-for="header in headerGroup.headers" :key="header.id">
 						<FlexRender
 							v-if="!header.isPlaceholder"
-							:render="header.column.columnDef.header"
 							:props="header.getContext()"
+							:render="header.column.columnDef.header"
 						/>
 					</TableHead>
 				</TableRow>
@@ -48,13 +48,13 @@ const table = useVueTable({
 						:data-state="row.getIsSelected() ? 'selected' : undefined"
 					>
 						<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-							<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+							<FlexRender :props="cell.getContext()" :render="cell.column.columnDef.cell" />
 						</TableCell>
 					</TableRow>
 				</template>
 				<template v-else>
 					<TableRow>
-						<TableCell :colspan="columns.length" class="h-24 text-center">No results.</TableCell>
+						<TableCell class="h-24 text-center" :colspan="columns.length">No results.</TableCell>
 					</TableRow>
 				</template>
 			</TableBody>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
index 32850b9..e7959f3 100644
--- a/src/components/ui/badge/index.ts
+++ b/src/components/ui/badge/index.ts
@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 import { cva, type VariantProps } from "class-variance-authority";
 
 export { default as Badge } from "./Badge.vue";
diff --git a/src/components/ui/button/index.ts b/src/components/ui/button/index.ts
index 80cf801..f7c7326 100644
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@@ -1,5 +1,3 @@
-/* eslint-disable */
-
 import { cva, type VariantProps } from "class-variance-authority";
 
 export { default as Button } from "./Button.vue";
diff --git a/src/components/ui/checkbox/Checkbox.vue b/src/components/ui/checkbox/Checkbox.vue
index 9166330..298be9f 100644
--- a/src/components/ui/checkbox/Checkbox.vue
+++ b/src/components/ui/checkbox/Checkbox.vue
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 		v-bind="forwarded"
 		:class="
 			cn(
-				'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+				'border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
 				props.class,
 			)
 		"
diff --git a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 950f668..43c8cf9 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 		v-bind="forwarded"
 		:class="
 			cn(
-				'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 				props.class,
 			)
 		"
diff --git a/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index 398d4d1..ad555c3 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 			v-bind="forwarded"
 			:class="
 				cn(
-					'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+					'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 					props.class,
 				)
 			"
diff --git a/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index 11e4b1f..0db139a 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -22,7 +22,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 		v-bind="forwardedProps"
 		:class="
 			cn(
-				'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 				inset && 'pl-8',
 				props.class,
 			)
diff --git a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index 84fff6f..60584c1 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 		v-bind="forwarded"
 		:class="
 			cn(
-				'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
 				props.class,
 			)
 		"
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index 978005a..0419fb6 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -20,6 +20,6 @@ const delegatedProps = computed(() => {
 <template>
 	<DropdownMenuSeparator
 		v-bind="delegatedProps"
-		:class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
+		:class="cn('bg-muted -mx-1 my-1 h-px', props.class)"
 	/>
 </template>
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index e7cb256..f4a61fb 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
 		v-bind="forwarded"
 		:class="
 			cn(
-				'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+				'bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
 				props.class,
 			)
 		"
diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index 22a3f3b..17c0491 100644
--- a/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps);
 		v-bind="forwardedProps"
 		:class="
 			cn(
-				'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+				'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
 				props.class,
 			)
 		"
diff --git a/src/components/ui/input/Input.vue b/src/components/ui/input/Input.vue
index f9a081c..b3480a6 100644
--- a/src/components/ui/input/Input.vue
+++ b/src/components/ui/input/Input.vue
@@ -25,7 +25,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
 		v-model="modelValue"
 		:class="
 			cn(
-				'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+				'border-input placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50',
 				props.class,
 			)
 		"
diff --git a/src/components/ui/table/TableCaption.vue b/src/components/ui/table/TableCaption.vue
index ee35dad..9210e3d 100644
--- a/src/components/ui/table/TableCaption.vue
+++ b/src/components/ui/table/TableCaption.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-	<caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+	<caption :class="cn('text-muted-foreground mt-4 text-sm', props.class)">
 		<slot />
 	</caption>
 </template>
diff --git a/src/components/ui/table/TableEmpty.vue b/src/components/ui/table/TableEmpty.vue
index 3d40a68..f67114c 100644
--- a/src/components/ui/table/TableEmpty.vue
+++ b/src/components/ui/table/TableEmpty.vue
@@ -26,7 +26,7 @@ const delegatedProps = computed(() => {
 <template>
 	<TableRow>
 		<TableCell
-			:class="cn('p-4 whitespace-nowrap align-middle text-sm text-foreground', props.class)"
+			:class="cn('text-foreground whitespace-nowrap p-4 align-middle text-sm', props.class)"
 			v-bind="delegatedProps"
 		>
 			<div class="flex items-center justify-center py-10">
diff --git a/src/components/ui/table/TableFooter.vue b/src/components/ui/table/TableFooter.vue
index ac0fbaf..d7d0492 100644
--- a/src/components/ui/table/TableFooter.vue
+++ b/src/components/ui/table/TableFooter.vue
@@ -9,7 +9,7 @@ const props = defineProps<{
 </script>
 
 <template>
-	<tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+	<tfoot :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)">
 		<slot />
 	</tfoot>
 </template>
diff --git a/src/components/ui/table/TableHead.vue b/src/components/ui/table/TableHead.vue
index 96985bc..b7fc17e 100644
--- a/src/components/ui/table/TableHead.vue
+++ b/src/components/ui/table/TableHead.vue
@@ -12,7 +12,7 @@ const props = defineProps<{
 	<th
 		:class="
 			cn(
-				'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+				'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
 				props.class,
 			)
 		"
diff --git a/src/components/ui/table/TableRow.vue b/src/components/ui/table/TableRow.vue
index 791e8fb..756d5e2 100644
--- a/src/components/ui/table/TableRow.vue
+++ b/src/components/ui/table/TableRow.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
 <template>
 	<tr
 		:class="
-			cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)
+			cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', props.class)
 		"
 	>
 		<slot />
diff --git a/src/pages/login.vue b/src/pages/login.vue
index f54082e..eb646a5 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -28,8 +28,8 @@ onMounted(async () => {
 				<div class="flex w-full flex-col sm:w-1/2">
 					<h1>Please Login</h1>
 					<VTextField v-model="username" :label="t('username')"></VTextField>
-					<VTextField v-model="password" type="password" :label="t('password')"></VTextField>
-					<VBtn type="submit" block>{{ t("login") }}</VBtn>
+					<VTextField v-model="password" :label="t('password')" type="password"></VTextField>
+					<VBtn block type="submit">{{ t("login") }}</VBtn>
 				</div>
 			</VContainer>
 		</VForm>
diff --git a/src/plugins/query-client.ts b/src/plugins/query-client.ts
index 829c96f..a8d5578 100644
--- a/src/plugins/query-client.ts
+++ b/src/plugins/query-client.ts
@@ -31,7 +31,7 @@ export default defineNuxtPlugin((nuxt) => {
 							((error.error?.title as string | undefined) ?? error.statusText)
 						: error.message;
 
-				if (process.client) {
+				if (import.meta.client) {
 					addToast({
 						title: "Error",
 						description: message,
@@ -49,13 +49,13 @@ export default defineNuxtPlugin((nuxt) => {
 
 	nuxt.vueApp.use(VueQueryPlugin, options);
 
-	if (process.server) {
+	if (import.meta.server) {
 		nuxt.hooks.hook("app:rendered", () => {
 			state.value = dehydrate(queryClient);
 		});
 	}
 
-	if (process.client) {
+	if (import.meta.client) {
 		nuxt.hooks.hook("app:created", () => {
 			hydrate(queryClient, state.value);
 		});
diff --git a/src/utils/kwic.ts b/src/utils/kwic.ts
index 57f8f4f..7b5db4b 100644
--- a/src/utils/kwic.ts
+++ b/src/utils/kwic.ts
@@ -62,7 +62,9 @@ export const getKWICColumns = (
 			return h(
 				VIcon,
 				{
-					onClick: () => open(row.original),
+					onClick: () => {
+						open(row.original);
+					},
 					size: "small",
 					icon: "mdi-open-in-new",
 					class: "me-2 cursor-pointer font-medium",