From 32965857e777286df321354bce9cf46c0f08b130 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Mon, 9 Mar 2026 21:12:01 -0500
Subject: [PATCH] fix: wire up empty-state Add Device button to open dialog

The FleetTable empty state navigated with ?add=true but the devices page
never read that param. Now it opens the AddDeviceForm when add=true is
in the search params.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../tenants/$tenantId/devices/index.tsx       | 22 ++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/index.tsx b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/index.tsx
index 3014060..ecb3846 100644
--- a/frontend/src/routes/_authenticated/tenants/$tenantId/devices/index.tsx
+++ b/frontend/src/routes/_authenticated/tenants/$tenantId/devices/index.tsx
@@ -1,5 +1,5 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
-import { useState } from 'react'
+import { createFileRoute, Link, useNavigate } from '@tanstack/react-router'
+import { useState, useEffect } from 'react'
 import { Plus, Scan, ChevronRight } from 'lucide-react'
 import { useQuery } from '@tanstack/react-query'
 import { z } from 'zod'
@@ -17,6 +17,7 @@ const searchSchema = z.object({
   sort_dir: z.enum(['asc', 'desc']).optional(),
   page: z.number().int().positive().optional(),
   page_size: z.number().int().positive().optional(),
+  add: z.string().optional(),
 })
 
 export const Route = createFileRoute('/_authenticated/tenants/$tenantId/devices/')({
@@ -28,7 +29,22 @@ function DevicesPage() {
   const { tenantId } = Route.useParams()
   const search = Route.useSearch()
   const { user } = useAuth()
-  const [addOpen, setAddOpen] = useState(false)
+  const navigate = useNavigate()
+  const [addOpen, setAddOpen] = useState(search.add === 'true')
+
+  // Open dialog when ?add=true is set (e.g. from empty state button)
+  useEffect(() => {
+    if (search.add === 'true') {
+      setAddOpen(true)
+      // Clear the search param so it doesn't re-open on navigation
+      void navigate({
+        to: '/tenants/$tenantId/devices',
+        params: { tenantId },
+        search: { ...search, add: undefined },
+        replace: true,
+      })
+    }
+  }, [search.add])
 
   const { data: tenant } = useQuery({
     queryKey: ['tenants', tenantId],