filter

src/components/AssigneeFilter.vue

@@ -63,6 +63,17 @@ async function loadMore({ done }: { done: (status: 'ok' | 'empty' | 'error') =>
   }
 }
 
+const hover = (userId: string) => {
+  if (hoveredId.value === userId) {
+    return { zIndex: 2 }
+  }
+  if (props.selected.includes(userId)) {
+    return { zIndex: 1 }
+  }
+
+  return { zIndex: 0 }
+}
+
 onMounted(() => {
   loadMore({ done: () => {} })
 })
@@ -71,7 +82,7 @@ onMounted(() => {
 <template>
   <div class="d-flex align-center">
     <v-avatar
-      v-for="(user, index) in avatarUsers"
+      v-for="user in avatarUsers"
       :key="user.id"
       rounded="circle"
       border
@@ -80,7 +91,7 @@ onMounted(() => {
       :text="initials(user)"
       class="stack-avatar cursor-pointer"
       :class="{ 'bg-primary': isSelected(user.id) }"
-      :style="{ zIndex: hoveredId === user.id ? avatarUsers.length + 1 : avatarUsers.length - index }"
+      :style="hover(user.id)"
       @mouseenter="hoveredId = user.id"
       @mouseleave="hoveredId = null"
       @click="toggle(user.id)"
@@ -92,7 +103,6 @@ onMounted(() => {
           rounded="circle"
           border
           density="compact"
-          variant="tonal"
           class="stack-avatar cursor-pointer"
           :style="{ zIndex: hoveredId === 'more' ? avatarUsers.length + 1 : 0 }"
           v-bind="activatorProps"

src/components/IssueContent.vue

@@ -36,11 +36,11 @@ const cancel = () => {
     </template>
 
     <template v-else>
-      <v-textarea class="mb-1" hide-details v-model="draft" variant="outlined" auto-grow rows="4" />
+      <v-textarea autofocus class="mb-1" hide-details v-model="draft" variant="outlined" auto-grow rows="4" />
 
       <div class="d-flex justify-end ga-1">
         <v-btn density="compact" variant="text" text="Cancel" @click="cancel" />
-        <v-btn density="compact" color="primary" variant="tonal" text="Save" @click="save" />
+        <v-btn density="compact" color="primary" variant="flat" text="Save" @click="save" />
       </div>
     </template>
   </div>

src/components/IssueFilter.vue

@@ -1,29 +1,37 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import AssigneeFilter from '@/components/AssigneeFilter.vue'
 import TextFilter from '@/components/TextFilter.vue'
 
 interface Props {
   text?: string | null
+  assigneeId?: string | null
 }
 
-withDefaults(defineProps<Props>(), { text: null })
-const emit = defineEmits<{ 'update:text': [value: string | null] }>()
+const props = withDefaults(defineProps<Props>(), { text: null, assigneeId: null })
+const emit = defineEmits<{
+  'update:text': [value: string | null]
+  'update:assigneeId': [value: string | null]
+  'update:clear': []
+}>()
 
-function onChanged(value: string[]) {
-  console.log(value)
+const selectedAssignees = computed(() => (props.assigneeId ? [props.assigneeId] : []))
+
+function onAssigneeChanged(value: string[]) {
+  emit('update:assigneeId', value.at(-1) ?? null)
 }
 </script>
 
 <template>
-  <div class="u-grid2 ga-4 align-center">
+  <div class="filter-grid ga-4 align-center">
     <text-filter :model-value="text" @update:model-value="emit('update:text', $event)" />
-    <assignee-filter @changed="onChanged" :selected="['4Jpoz4EgViFrMpl7jQ969mVyX2IFYg5H']" />
-    <v-btn variant="text">clear filters</v-btn>
+    <assignee-filter :selected="selectedAssignees" @changed="onAssigneeChanged" />
+    <v-btn prepend-icon="mdi-close" variant="tonal" @click="emit('update:clear')">Clear Filters</v-btn>
   </div>
 </template>
 
 <style scoped lang="scss">
-.u-grid2 {
+.filter-grid {
   display: grid;
   grid-template-columns: 1fr auto auto;
 }