From 13c262184af26dd19938411ba75bfd644dcc4d27 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Wed, 13 May 2026 11:12:50 +0100
Subject: [PATCH] refactor(reports): SegmentedControl, Button, EmptyState

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/views/ReportsView.vue | 49 ++++++++++++++---------------------
 1 file changed, 19 insertions(+), 30 deletions(-)

diff --git a/web/src/views/ReportsView.vue b/web/src/views/ReportsView.vue
index 094f997..b973902 100644
--- a/web/src/views/ReportsView.vue
+++ b/web/src/views/ReportsView.vue
@@ -6,11 +6,14 @@ import CardContent from '@/components/ui/CardContent.vue'
 import Badge from '@/components/ui/Badge.vue'
 import Button from '@/components/ui/Button.vue'
 import Spinner from '@/components/ui/Spinner.vue'
+import SegmentedControl from '@/components/ui/SegmentedControl.vue'
+import EmptyState from '@/components/ui/EmptyState.vue'
 import { toast } from 'vue-sonner'
 import { formatDate, isoDateStr } from '@/lib/utils'
 import { marked } from 'marked'
 import type { AiReport } from '@/types'
 import { useAuthStore } from '@/stores/auth'
+import { FileText, Calendar } from 'lucide-vue-next'
 
 const authStore = useAuthStore()
 
@@ -82,26 +85,14 @@ async function downloadReport(report: AiReport, fmt: 'md' | 'html') {
       <h2 class="text-lg font-semibold text-foreground flex-1">AI Reports</h2>
 
       <div class="flex items-center gap-2">
-        <div class="flex items-center rounded-md border border-border overflow-hidden">
-          <button
-            :class="[
-              'px-3 py-1.5 text-xs font-medium transition-colors',
-              generateType === 'daily'
-                ? 'bg-primary text-primary-foreground'
-                : 'text-muted-foreground hover:bg-muted',
-            ]"
-            @click="generateType = 'daily'"
-          >Daily</button>
-          <button
-            :class="[
-              'px-3 py-1.5 text-xs font-medium transition-colors',
-              generateType === 'weekly'
-                ? 'bg-primary text-primary-foreground'
-                : 'text-muted-foreground hover:bg-muted',
-            ]"
-            @click="generateType = 'weekly'"
-          >Weekly</button>
-        </div>
+        <SegmentedControl
+          v-model="generateType"
+          :options="[
+            { value: 'daily', label: 'Daily' },
+            { value: 'weekly', label: 'Weekly' },
+          ]"
+          aria-label="Report type"
+        />
         <Button size="sm" :loading="generating" @click="generate">
           Generate Now
         </Button>
@@ -114,8 +105,12 @@ async function downloadReport(report: AiReport, fmt: 'md' | 'html') {
     </div>
 
     <!-- Reports list -->
-    <div v-else-if="reports.length === 0" class="text-center text-muted-foreground py-12 text-sm">
-      No reports generated yet
+    <div v-else-if="reports.length === 0" class="py-12">
+      <EmptyState
+        title="No reports yet"
+        description="Reports are generated automatically after sessions."
+        :icons="[FileText, Calendar]"
+      />
     </div>
 
     <div v-else class="space-y-3">
@@ -153,14 +148,8 @@ async function downloadReport(report: AiReport, fmt: 'md' | 'html') {
           <!-- Expanded content -->
           <div v-if="expandedId === report.id" class="mt-4 pt-4 border-t border-border">
             <div class="flex gap-2 mb-3">
-              <button
-                class="text-xs px-2.5 py-1 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/30 transition-colors"
-                @click="downloadReport(report, 'md')"
-              >↓ Markdown</button>
-              <button
-                class="text-xs px-2.5 py-1 rounded-lg border border-border text-muted-foreground hover:text-foreground hover:border-foreground/30 transition-colors"
-                @click="downloadReport(report, 'html')"
-              >↓ HTML</button>
+              <Button variant="outline" size="sm" @click="downloadReport(report, 'md')">↓ Markdown</Button>
+              <Button variant="outline" size="sm" @click="downloadReport(report, 'html')">↓ HTML</Button>
             </div>
             <div
               class="prose prose-sm prose-invert max-w-none text-sm text-foreground break-words"