Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/contacts.index.tsx

@@ -265,8 +265,50 @@ function ContactsIndex() {
         ))}
       </div>
 
+      {selected.size > 0 && (
+        <Card className="mb-4 border-primary/50 bg-primary/5">
+          <CardContent className="p-3 flex flex-wrap items-center gap-2">
+            <span className="text-sm font-medium mr-2">
+              {selected.size} selected
+            </span>
+            <Button size="sm" variant="outline" onClick={() => bulkArchive(view !== "archived")}>
+              {view === "archived" ? <ArchiveRestore className="h-4 w-4 mr-1.5" /> : <Archive className="h-4 w-4 mr-1.5" />}
+              {view === "archived" ? "Restore" : "Archive"}
+            </Button>
+            <Select value={bulkType} onValueChange={bulkChangeType}>
+              <SelectTrigger className="h-8 w-48">
+                <SelectValue placeholder="Change type to…" />
+              </SelectTrigger>
+              <SelectContent>
+                {CONTACT_TYPES.map((t) => (
+                  <SelectItem key={t.value} value={t.value}>{t.label}</SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <Button size="sm" variant="destructive" onClick={bulkDelete}>
+              <Trash2 className="h-4 w-4 mr-1.5" /> Delete
+            </Button>
+            <Button size="sm" variant="ghost" onClick={clearSelection} className="ml-auto">
+              <X className="h-4 w-4 mr-1.5" /> Clear
+            </Button>
+          </CardContent>
+        </Card>
+      )}
+
       <Card>
         <CardContent className="p-0">
+          {filtered.length > 0 && !loading && (
+            <div className="px-4 py-2 border-b flex items-center gap-3 bg-muted/30">
+              <Checkbox
+                checked={allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false}
+                onCheckedChange={toggleAllVisible}
+                aria-label="Select all visible"
+              />
+              <span className="text-xs text-muted-foreground">
+                Select all {filtered.length} visible
+              </span>
+            </div>
+          )}
           {loading ? (
             <p className="p-6 text-sm text-muted-foreground">Loading…</p>
           ) : filtered.length === 0 ? (