feat(dashboard): source facet in the inbox sidebar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: Ripwords

apps/dashboard/app/components/inbox/facet-sidebar.vue

@@ -27,9 +27,11 @@ interface Props {
   priorityCounts: Record<ReportPriority, number>
   assignees: Assignee[]
   tags: Array<{ name: string; count: number }>
+  sourceCounts: { web: number; expo: number; ios: number; android: number }
   selectedPriority: ReportPriority[]
   selectedAssignee: string[]
   selectedTags: string[]
+  selectedSource: string[]
   sessionUserId: string
 }
 
@@ -38,6 +40,7 @@ const emit = defineEmits<{
   priority: [ReportPriority[]]
   assignee: [string[]]
   tag: [string[]]
+  source: [string[]]
 }>()
 
 const PRIORITIES: ReportPriority[] = ["urgent", "high", "normal", "low"]
@@ -60,6 +63,13 @@ function toggleTag(name: string) {
   const has = props.selectedTags.includes(name)
   emit("tag", has ? props.selectedTags.filter((x) => x !== name) : [...props.selectedTags, name])
 }
+function toggleSource(token: string) {
+  const has = props.selectedSource.includes(token)
+  emit(
+    "source",
+    has ? props.selectedSource.filter((x) => x !== token) : [...props.selectedSource, token],
+  )
+}
 
 function isAssigneeSelected(a: Assignee): boolean {
   if (a.id === null) return props.selectedAssignee.includes("unassigned")
@@ -81,6 +91,12 @@ function priorityLabel(p: ReportPriority): string {
   return p.charAt(0).toUpperCase() + p.slice(1)
 }
 
+const sourceItems = computed(() => [
+  { token: "web", label: "Web", count: props.sourceCounts.web },
+  { token: "ios", label: "iOS", count: props.sourceCounts.ios },
+  { token: "android", label: "Android", count: props.sourceCounts.android },
+])
+
 // Priority rows get a colored leading dot (urgent=red, high=orange,
 // normal=teal, low=muted). That single dot carries more signal than a
 // pill badge and pairs visually with the priority column in the table.
@@ -195,5 +211,41 @@ const priorityDot: Record<ReportPriority, string> = {
         </li>
       </ul>
     </section>
+
+    <section>
+      <h3 class="px-2 mb-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted">Source</h3>
+      <ul>
+        <li v-for="item in sourceItems" :key="item.token">
+          <button
+            type="button"
+            :aria-pressed="selectedSource.includes(item.token)"
+            class="group w-full flex items-center gap-2 rounded-lg px-2.5 py-1.5 transition-colors"
+            :class="
+              selectedSource.includes(item.token)
+                ? 'bg-elevated text-default font-semibold'
+                : 'text-muted hover:text-default hover:bg-elevated/60'
+            "
+            @click="toggleSource(item.token)"
+          >
+            <span
+              class="size-1.5 rounded-full shrink-0"
+              :class="
+                selectedSource.includes(item.token)
+                  ? 'bg-primary'
+                  : 'bg-transparent group-hover:bg-muted/60'
+              "
+              aria-hidden="true"
+            />
+            <span class="flex-1 text-left font-medium">{{ item.label }}</span>
+            <span
+              class="text-xs font-medium tabular-nums"
+              :class="selectedSource.includes(item.token) ? 'text-primary' : 'text-muted'"
+            >
+              {{ item.count }}
+            </span>
+          </button>
+        </li>
+      </ul>
+    </section>
   </aside>
 </template>

apps/dashboard/app/pages/projects/[id]/reports/index.vue

@@ -42,6 +42,7 @@ const { data, pending, refresh } = useApi<{
       count: number
     }>
     tags: Array<{ name: string; count: number }>
+    source: { web: number; expo: number; ios: number; android: number }
   }
 }>(listUrl, { watch: [listUrl] })
 
@@ -145,11 +146,12 @@ const hasActiveFilters = computed(
     query.value.status.length > 0 ||
     query.value.priority.length > 0 ||
     query.value.assignee.length > 0 ||
-    query.value.tag.length > 0,
+    query.value.tag.length > 0 ||
+    query.value.source.length > 0,
 )
 
 function clearFilters() {
-  update({ q: "", status: [], priority: [], assignee: [], tag: [] })
+  update({ q: "", status: [], priority: [], assignee: [], tag: [], source: [] })
 }
 
 // ---- Keyboard navigation ----
@@ -324,13 +326,16 @@ function onRowSelect(_e: Event, row: TableRowLike) {
       :priority-counts="data?.facets.priority ?? ({} as Record<ReportPriority, number>)"
       :assignees="data?.facets.assignees ?? []"
       :tags="data?.facets.tags ?? []"
+      :source-counts="data?.facets.source ?? { web: 0, expo: 0, ios: 0, android: 0 }"
       :selected-priority="query.priority as ReportPriority[]"
       :selected-assignee="query.assignee"
       :selected-tags="query.tag"
+      :selected-source="query.source"
       :session-user-id="sessionUserId"
       @priority="update({ priority: $event })"
       @assignee="update({ assignee: $event })"
       @tag="update({ tag: $event })"
+      @source="update({ source: $event, offset: 0 })"
     />
 
     <div class="flex-1 min-w-0 flex flex-col">