feat: SelectorList component

src/components/SelectorList.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import AppBox from 'components/app/AppBox.vue';
+
+const selector = defineModel('selector');
+
+defineProps<{
+  list: {
+    label: string;
+    count: number;
+  }[];
+}>();
+</script>
+<template>
+  <AppBox bordered class="col-4 q-mr-md">
+    <q-list>
+      <q-item
+        v-for="v in list"
+        :key="v.label"
+        clickable
+        :active="selector === v.label"
+        :active-class="
+          selector === v.label
+            ? $q.dark.isActive
+              ? 'active dark'
+              : 'active'
+            : ''
+        "
+        @click="selector = v.label"
+      >
+        <q-item-section>{{ v.label }}</q-item-section>
+        <div class="dot text-weight-bold">1</div>
+      </q-item>
+    </q-list>
+  </AppBox>
+</template>
+
+<style scoped>
+.active {
+  color: hsl(var(--main-fg)) !important;
+  background-color: hsl(var(--main-bg));
+  border-radius: var(--radius-3);
+
+  .dot {
+    color: var(--blue-6);
+    background-color: white;
+  }
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--main-bg));
+  }
+}
+
+.q-item {
+  align-items: center;
+  border-radius: var(--radius-3);
+  color: hsl(var(--text-mute));
+  border: 1px solid transparent;
+}
+
+.dot {
+  height: 25px;
+  width: 25px;
+  background-color: hsl(var(--text-mute));
+  color: white;
+  border-radius: 50%;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>