From c23ec0cb539e00273dd9fe43841072b98e46cf13 Mon Sep 17 00:00:00 2001
From: Sirttas <sophiegaelle.calloch@gmail.com>
Date: Mon, 1 Jun 2026 19:22:27 +0200
Subject: [PATCH] ledger balance

---
 src/App.vue                                   | 10 ++--
 src/components/Dropdown.vue                   |  2 +-
 src/components/Modal.vue                      |  8 ++--
 src/components/SelectInput.vue                |  2 +-
 src/components/SliderCheckbox.vue             |  2 +-
 src/components/table/SortableHeader.vue       |  4 +-
 src/components/table/VirtualScrollTable.vue   | 48 ++++++++++---------
 src/ledger/EditLedgerModal.vue                |  2 +-
 src/ledger/LedgerSelect.vue                   |  2 +-
 src/ledger/ledger.ts                          |  6 ++-
 .../AcquisitionQuantilsTooltip.vue            |  2 +-
 .../acquisition/AcquisitionResultTable.vue    | 15 +++---
 src/market/tax/TaxInput.vue                   |  6 +--
 src/market/tracking/TrackingResultTable.vue   | 19 ++++----
 src/market/type/MarketTypeInput.vue           | 10 ++--
 src/market/type/MarketTypeLabel.vue           | 34 ++++++++-----
 src/pages/ledger/ListLedgerTransactions.vue   |  2 +-
 src/pages/ledger/ListLedgers.vue              | 41 ++++++++++++----
 src/pages/ledger/ViewLedgerBalance.vue        | 23 +++++++--
 src/pages/market/TypeInfo.vue                 |  2 +-
 src/pages/rules/EditRuleBook.vue              |  2 +-
 src/reprocess/BuySellSlider.vue               |  2 +-
 src/rules/RuleClauseInput.vue                 |  2 +-
 src/rules/RuleInput.vue                       |  2 +-
 src/sidebar/Sidebar.vue                       |  2 +-
 src/style.css                                 | 11 +++--
 26 files changed, 161 insertions(+), 100 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 80efca1..773444b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue';
-import { RouterView, useRoute } from 'vue-router';
-import { Sidebar } from './sidebar';
-import { routeNames } from '@/routes';
+import {computed} from 'vue';
+import {RouterView, useRoute} from 'vue-router';
+import {Sidebar} from './sidebar';
+import {routeNames} from '@/routes';
 
 const route = useRoute();
 
@@ -24,7 +24,7 @@ const hideSidebar = computed(() => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 div.main-container {
     @apply px-4 sm:ml-64;
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index b0bca1b..02578cb 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -61,7 +61,7 @@ useEventListener('keyup', e => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .chevron {
     @apply w-4 h-4 me-1;
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 299c36d..ad6fcec 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components';
-import { useEventListener } from '@vueuse/core';
-import { watch } from 'vue';
+import {vOnClickOutside} from '@vueuse/components';
+import {useEventListener} from '@vueuse/core';
+import {watch} from 'vue';
 
 const open = defineModel('open', { default: false });
 
@@ -35,7 +35,7 @@ useEventListener('keyup', e => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .fade-enter-from, .fade-leave-to {
     @apply opacity-0;
 }
diff --git a/src/components/SelectInput.vue b/src/components/SelectInput.vue
index 6eef467..2762fad 100644
--- a/src/components/SelectInput.vue
+++ b/src/components/SelectInput.vue
@@ -64,7 +64,7 @@ const submit = () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .fake-input {
     @apply flex border bg-slate-500 rounded px-1 py-0.5;
 }
diff --git a/src/components/SliderCheckbox.vue b/src/components/SliderCheckbox.vue
index 9936d47..5577871 100644
--- a/src/components/SliderCheckbox.vue
+++ b/src/components/SliderCheckbox.vue
@@ -11,7 +11,7 @@ const modelValue = defineModel({ default: false });
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
     input:checked ~ span:last-child {
         --tw-translate-x: 1.25rem;
     }
diff --git a/src/components/table/SortableHeader.vue b/src/components/table/SortableHeader.vue
index 242f5e4..b0fff82 100644
--- a/src/components/table/SortableHeader.vue
+++ b/src/components/table/SortableHeader.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { HeaderComponent, SortDirection } from './sort';
+import {HeaderComponent, SortDirection} from './sort';
 
 interface Props {
     currentSortKey: string | null;
@@ -33,7 +33,7 @@ const emit = defineEmits<Emit>();
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .sort-header {
     @apply relative h-8 pe-3;
 }
diff --git a/src/components/table/VirtualScrollTable.vue b/src/components/table/VirtualScrollTable.vue
index b4d4d38..962ce82 100644
--- a/src/components/table/VirtualScrollTable.vue
+++ b/src/components/table/VirtualScrollTable.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useElementBounding, useVirtualList } from '@vueuse/core';
-import { computed, ref } from 'vue';
+import {useElementBounding, useVirtualList} from '@vueuse/core';
+import {computed, ref} from 'vue';
 
 interface Props {
     list?: any[];
@@ -68,29 +68,31 @@ const itemHeightStyle = computed(() => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
+
 div.table-container {
-    @apply bg-slate-600;
-    max-height: calc(100vh - v-bind(ypx));
-    :deep(>div) {
-        @apply bg-slate-800;
-        >table {
-            >thead {
-                @apply sticky z-10;
-                top: -1px;
-            }
-            >tfoot {
-                @apply bg-slate-600 sticky z-10;
-                bottom: -1px;
-            }
-            >*>tr, >*>tr>td {
-                height: v-bind(itemHeightStyle);
-            }
+  @apply bg-slate-600;
+  max-height: calc(100vh - v-bind(ypx));
+
+  &::-webkit-scrollbar-track {
+    margin-top: v-bind(computedHeaderHeight);
+    margin-bottom: v-bind(computedFooterHeight);
+  }
+}
+div.table-container:deep(>div) {
+    @apply bg-slate-800;
+    >table {
+        >thead {
+            @apply sticky z-10;
+            top: -1px;
+        }
+        >tfoot {
+            @apply bg-slate-600 sticky z-10;
+            bottom: -1px;
+        }
+        >*>tr, >*>tr>td {
+            height: v-bind(itemHeightStyle);
         }
-    }
-    &::-webkit-scrollbar-track {
-        margin-top: v-bind(computedHeaderHeight);
-        margin-bottom: v-bind(computedFooterHeight);
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/ledger/EditLedgerModal.vue b/src/ledger/EditLedgerModal.vue
index 68b2c0d..5e86ea7 100644
--- a/src/ledger/EditLedgerModal.vue
+++ b/src/ledger/EditLedgerModal.vue
@@ -136,7 +136,7 @@ defineExpose({ open });
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 button.switch {
   @apply flex items-center px-4 rounded-md bg-slate-600;
diff --git a/src/ledger/LedgerSelect.vue b/src/ledger/LedgerSelect.vue
index d6621ff..446bba7 100644
--- a/src/ledger/LedgerSelect.vue
+++ b/src/ledger/LedgerSelect.vue
@@ -26,7 +26,7 @@ const ledgerId = computed({
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .system-ledger {
   @apply text-emerald-400;
diff --git a/src/ledger/ledger.ts b/src/ledger/ledger.ts
index 0b0ee9a..23d6861 100644
--- a/src/ledger/ledger.ts
+++ b/src/ledger/ledger.ts
@@ -1,4 +1,5 @@
 import {
+    BalanceResponse,
     CombinedLedgerResponse,
     CombinedLedgerResponseTypeEnum,
     CreateCombinedLedgerRequest,
@@ -75,7 +76,10 @@ export const useLedgersStore = defineStore('ledgers', () => {
     return {ledgers, findById, findAllById, createMain, createCombined, updateMain, updateCombined, refresh};
 })
 
-export const findAllTransactionInLeger = (ledger: Ledger | string): Promise<TransactionResponse[]> => transactionApi.finAllTransactionsInLedger(typeof ledger == 'string' ? ledger : ledger.ledgerId).then(response => response.data)
+const getLedgerId = (ledger: Ledger | string): string => typeof ledger == 'string' ? ledger : ledger.ledgerId;
+
+export const findAllTransactionInLeger = (ledger: Ledger | string): Promise<TransactionResponse[]> => transactionApi.finAllTransactionsInLedger(getLedgerId(ledger)).then(response => response.data)
+export const getLedgerBalance = (ledger: Ledger | string): Promise<BalanceResponse> => ledgerApi.findBalanceByLedgerId(getLedgerId(ledger)).then(response => response.data)
 
 export const useLedgerParam = () => {
     const {findById} = useLedgersStore();
diff --git a/src/market/acquisition/AcquisitionQuantilsTooltip.vue b/src/market/acquisition/AcquisitionQuantilsTooltip.vue
index b29f3dc..1aa05ae 100644
--- a/src/market/acquisition/AcquisitionQuantilsTooltip.vue
+++ b/src/market/acquisition/AcquisitionQuantilsTooltip.vue
@@ -75,7 +75,7 @@ watchEffect(async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .tooltip {
     @apply ms-auto;
diff --git a/src/market/acquisition/AcquisitionResultTable.vue b/src/market/acquisition/AcquisitionResultTable.vue
index f5f91ee..3889cf7 100644
--- a/src/market/acquisition/AcquisitionResultTable.vue
+++ b/src/market/acquisition/AcquisitionResultTable.vue
@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
-import { formatEveDate, formatIsk, percentFormater } from '@/formaters';
-import { MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { MinusIcon, PlusIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { AcquiredType } from './AcquiredType';
+import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
+import {MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore} from "@/market";
+import {MinusIcon, PlusIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {AcquiredType} from './AcquiredType';
 import AcquisitionQuantilsTooltip from './AcquisitionQuantilsTooltip.vue';
 
 type Result = {
@@ -246,7 +245,7 @@ const total = computed(() => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }
diff --git a/src/market/tax/TaxInput.vue b/src/market/tax/TaxInput.vue
index 25d4f80..f1c88c6 100644
--- a/src/market/tax/TaxInput.vue
+++ b/src/market/tax/TaxInput.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { storeToRefs } from "pinia";
-import { useMarketTaxStore } from "./tax";
+import {storeToRefs} from "pinia";
+import {useMarketTaxStore} from "./tax";
 
 const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
 
@@ -18,7 +18,7 @@ const { brokerFee, scc } = storeToRefs(useMarketTaxStore());
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }
diff --git a/src/market/tracking/TrackingResultTable.vue b/src/market/tracking/TrackingResultTable.vue
index 1d6496e..eb4f6d5 100644
--- a/src/market/tracking/TrackingResultTable.vue
+++ b/src/market/tracking/TrackingResultTable.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { SliderCheckbox } from '@/components';
-import { SortableHeader, useSort, VirtualScrollTable } from '@/components/table';
-import { formatIsk, percentFormater } from '@/formaters';
-import { getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore } from "@/market";
-import { BookmarkSlashIcon, ShoppingCartIcon } from '@heroicons/vue/24/outline';
-import { useStorage } from '@vueuse/core';
-import { computed, ref } from 'vue';
-import { useAcquiredTypesStore } from '../acquisition';
-import { TrackingResult } from './tracking';
+import {SliderCheckbox} from '@/components';
+import {SortableHeader, useSort, VirtualScrollTable} from '@/components/table';
+import {getHistoryQuartils, MarketType, MarketTypeLabel, TaxInput, useMarketTaxStore} from "@/market";
+import {BookmarkSlashIcon, ShoppingCartIcon} from '@heroicons/vue/24/outline';
+import {useStorage} from '@vueuse/core';
+import {computed, ref} from 'vue';
+import {useAcquiredTypesStore} from '../acquisition';
+import {TrackingResult} from './tracking';
 
 type Result = {
     type: MarketType;
@@ -168,7 +167,7 @@ const getLineColor = (result: Result) => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 div.end {
     @apply justify-self-end ms-2;
 }
diff --git a/src/market/type/MarketTypeInput.vue b/src/market/type/MarketTypeInput.vue
index a8fd3e0..9d37962 100644
--- a/src/market/type/MarketTypeInput.vue
+++ b/src/market/type/MarketTypeInput.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { vOnClickOutside } from '@vueuse/components';
-import { useVirtualList } from '@vueuse/core';
+import {vOnClickOutside} from '@vueuse/components';
+import {useVirtualList} from '@vueuse/core';
 import log from 'loglevel';
-import { nextTick, ref, watch, watchEffect } from 'vue';
-import { MarketType, searchMarketTypes } from './MarketType';
+import {nextTick, ref, watch, watchEffect} from 'vue';
+import {MarketType, searchMarketTypes} from './MarketType';
 import MarketTypeLabel from "./MarketTypeLabel.vue";
 
 interface Emits {
@@ -105,7 +105,7 @@ watchEffect(async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 .fake-input {
     @apply w-96 flex border bg-slate-500 rounded px-1 py-0.5;
 
diff --git a/src/market/type/MarketTypeLabel.vue b/src/market/type/MarketTypeLabel.vue
index 3eade8e..b87bbce 100644
--- a/src/market/type/MarketTypeLabel.vue
+++ b/src/market/type/MarketTypeLabel.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { ClipboardButton } from '@/components';
-import { InformationCircleIcon } from '@heroicons/vue/24/outline';
-import { routeNames } from '@/routes';
+import {ClipboardButton} from '@/components';
+import {InformationCircleIcon} from '@heroicons/vue/24/outline';
+import {routeNames} from '@/routes';
+import {computedAsync} from "@vueuse/core";
+import {getMarketType} from "@/market";
 
 
 interface Props {
@@ -10,29 +12,39 @@ interface Props {
     hideCopy?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
     name: "",
     id: 0,
     hideCopy: false
 });
+
+const computedName = computedAsync<string>(async () => {
+  if (props.name) {
+    return props.name;
+  } else if (props.id) {
+    return await getMarketType(props.id).then(marketType => marketType.name);
+  }
+  return "";
+}, "");
 </script>
 
 <template>
-    <div v-if="id || name" class="flex flex-row">
+    <div v-if="id || computedName" class="flex flex-row">
         <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon?size=32`" class="inline-block w-5 h-5 me-1 mt-1" alt="" />
-        <template v-if="name">
-            {{ name }}
-            <RouterLink v-if="id" :to="{ name: routeNames.marketTypes, params: { type: id } }" class="button btn-icon ms-1 me-1 mt-1" title="Show item info">
+        <template v-if="computedName">
+          {{ computedName }}
+          <RouterLink v-if="id" :to="{ name: routeNames.marketTypes, params: { type: id } }" class="btn-icon ms-1 me-1 mt-1" title="Show item info">
                 <InformationCircleIcon  />
             </RouterLink>
-            <ClipboardButton v-if="!hideCopy" :value="name" />
+            <ClipboardButton v-if="!hideCopy" :value="computedName" />
         </template>
     </div>
 </template>
 
 <style scoped>
-@reference "tailwindcss";
-button:deep(>svg), .button:deep(>svg) {
+@reference "@/style.css";
+
+button:deep(>svg), .btn-icon:deep(>svg) {
     @apply !w-4 !h-4;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/ledger/ListLedgerTransactions.vue b/src/pages/ledger/ListLedgerTransactions.vue
index d34d65e..f0b8073 100644
--- a/src/pages/ledger/ListLedgerTransactions.vue
+++ b/src/pages/ledger/ListLedgerTransactions.vue
@@ -6,7 +6,7 @@ import {TransactionResponse} from "@/generated/mammon";
 import {formatEveDate} from "@/formaters.ts";
 import {IskLabel} from "@/market";
 
-const {ledgerId, ledger} = useLedgerParam();
+const {ledgerId} = useLedgerParam();
 
 const transactions = computedAsync<TransactionResponse[]>(async () => {
   if (ledgerId.value) {
diff --git a/src/pages/ledger/ListLedgers.vue b/src/pages/ledger/ListLedgers.vue
index 2f20fba..76fd7b6 100644
--- a/src/pages/ledger/ListLedgers.vue
+++ b/src/pages/ledger/ListLedgers.vue
@@ -1,13 +1,16 @@
 <script setup lang="ts">
 
-import {EditLedgerModal, LedgerLabel, useLedgersStore} from "@/ledger";
+import {EditLedgerModal, Ledger, LedgerLabel, useLedgersStore} from "@/ledger";
 import {storeToRefs} from "pinia";
 import {nextTick, ref} from "vue";
 import {PencilSquareIcon} from "@heroicons/vue/24/outline";
 import {IskLabel} from "@/market";
+import {SortableHeader, useSort, VirtualScrollTable} from "@/components/table";
 
 const {ledgers} = storeToRefs(useLedgersStore());
 
+const { sortedArray, headerProps } = useSort<Ledger>(ledgers)
+
 const editModal = ref<typeof EditLedgerModal>();
 const editingLedgerId = ref("");
 
@@ -21,13 +24,35 @@ const openEdit = async (ledgerId: string) => {
 
 <template>
   <div class="mt-4">
-    <div v-for="ledger in ledgers" :key="ledger.ledgerId" class="flex items-center mb-2">
-      <LedgerLabel :ledger="ledger" :link="true" />
-      <div class="flex grow">
-        <IskLabel class="ms-2" :amount="ledger.balance" />
-      </div>
-      <button class="btn-icon ms-2" @click="openEdit(ledger.ledgerId)"><PencilSquareIcon /></button>
-    </div>
+    <VirtualScrollTable :list="sortedArray" :itemHeight="33" bottom="1rem">
+      <template #default="{ list }">
+        <thead>
+        <tr>
+          <SortableHeader v-bind="headerProps" sortKey="name">Ledger</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="balance">Isk Balance</SortableHeader>
+          <SortableHeader v-bind="headerProps" sortKey="buttons" unsortable />
+        </tr>
+        </thead>
+        <tbody>
+        <tr v-for="l in list" :key="l.data.ledgerId">
+          <td>
+            <LedgerLabel :ledger="l.data" :link="true" />
+          </td>
+          <td class="text-right">
+            <IskLabel class="ms-2" :amount="l.data.balance" />
+          </td>
+          <td class="text-right">
+            <button class="btn-icon ms-2" @click="openEdit(l.data.ledgerId)"><PencilSquareIcon /></button>
+          </td>
+        </tr>
+        </tbody>
+      </template>
+      <template #empty>
+        <div class="text-center mt-4">
+          <span>No ledgers found</span>
+        </div>
+      </template>
+    </VirtualScrollTable>
   </div>
   <EditLedgerModal ref="editModal" :ledger-id="editingLedgerId" />
 </template>
diff --git a/src/pages/ledger/ViewLedgerBalance.vue b/src/pages/ledger/ViewLedgerBalance.vue
index 18c80cd..63194e2 100644
--- a/src/pages/ledger/ViewLedgerBalance.vue
+++ b/src/pages/ledger/ViewLedgerBalance.vue
@@ -1,11 +1,28 @@
 <script setup lang="ts">
-import {useLedgerParam} from "@/ledger";
+import {getLedgerBalance, useLedgerParam} from "@/ledger";
+import {computedAsync} from "@vueuse/core";
+import {BalanceResponse} from "@/generated/mammon";
+import {IskLabel, MarketTypeLabel} from "@/market";
 
-const {ledgerId, ledger} = useLedgerParam();
+const {ledgerId} = useLedgerParam();
+
+const balance = computedAsync<BalanceResponse>(async () => {
+  if (ledgerId.value) {
+    return await getLedgerBalance(ledgerId.value);
+  }
+  return undefined;
+});
 
 </script>
 
 <template>
-  <div class="mt-4">
+  <div v-if="balance" class="mt-4">
+    <div class="border-b-1">
+      <IskLabel class="mb-2" :amount="balance.iskBalance" />
+    </div>
+    <div v-for="item in balance.itemBalances" :key="item.typeId" class="mt-2 flex gap-2">
+      <MarketTypeLabel :id="item.typeId" />
+      <span>{{item.quantity}}</span>
+    </div>
   </div>
 </template>
diff --git a/src/pages/market/TypeInfo.vue b/src/pages/market/TypeInfo.vue
index 9622471..31c7e3d 100644
--- a/src/pages/market/TypeInfo.vue
+++ b/src/pages/market/TypeInfo.vue
@@ -115,7 +115,7 @@ watch(useRoute(), async route => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 img.type-image {
     width: 64px;
diff --git a/src/pages/rules/EditRuleBook.vue b/src/pages/rules/EditRuleBook.vue
index 0980ae2..a2b7c90 100644
--- a/src/pages/rules/EditRuleBook.vue
+++ b/src/pages/rules/EditRuleBook.vue
@@ -108,7 +108,7 @@ watch(useRoute(), async route => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .rule-dropdown :deep(>button) {
   @apply bg-slate-800 hover:bg-slate-800 border-none flex items-center w-full;
diff --git a/src/reprocess/BuySellSlider.vue b/src/reprocess/BuySellSlider.vue
index 7b8ece5..f7723ce 100644
--- a/src/reprocess/BuySellSlider.vue
+++ b/src/reprocess/BuySellSlider.vue
@@ -13,7 +13,7 @@ const modelValue = defineModel({ default: false });
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
     input:checked ~ span:last-child {
         --tw-translate-x: 1.75rem;
     }
diff --git a/src/rules/RuleClauseInput.vue b/src/rules/RuleClauseInput.vue
index 62877c1..f89e85c 100644
--- a/src/rules/RuleClauseInput.vue
+++ b/src/rules/RuleClauseInput.vue
@@ -49,7 +49,7 @@ watch(ledgerRefsWithSystem, (newVal, oldVal) => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .system-ledger {
   @apply text-emerald-400;
diff --git a/src/rules/RuleInput.vue b/src/rules/RuleInput.vue
index 5066156..d6b07b4 100644
--- a/src/rules/RuleInput.vue
+++ b/src/rules/RuleInput.vue
@@ -60,7 +60,7 @@ useSortable(sortableContainer, clauses, { handle: '.sortable-handle'});
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .sortable-handle {
   @apply cursor-grab;
diff --git a/src/sidebar/Sidebar.vue b/src/sidebar/Sidebar.vue
index 95b4891..6bb812f 100644
--- a/src/sidebar/Sidebar.vue
+++ b/src/sidebar/Sidebar.vue
@@ -49,7 +49,7 @@ const logout = async () => {
 </template>
 
 <style scoped>
-@reference "tailwindcss";
+@reference "@/style.css";
 
 .sidebar-button {
   @apply flex items-center rounded-md hover:bg-slate-800 cursor-pointer;
diff --git a/src/style.css b/src/style.css
index abe5520..0eb446c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -2,6 +2,12 @@
 
 @custom-variant search-cancel (&::-webkit-search-cancel-button);
 
+@utility btn-icon {
+    @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent cursor-pointer;
+    > svg {
+        @apply w-6 h-6;
+    }
+}
 @layer base {
     span, table, input, th, tr, td, button, a.button, div, hr {
         @apply border-slate-600 text-slate-100 placeholder-slate-400;
@@ -72,10 +78,7 @@
     }
 
     .btn-icon {
-        @apply p-0 border-none bg-transparent hover:text-slate-400 hover:bg-transparent cursor-pointer;
-        > svg {
-            @apply w-6 h-6;
-        }
+        @apply btn-icon;
     }
 
     a.tab {