Add React Router v7 future flags to routers

src/App.tsx

@@ -42,7 +42,7 @@ const AppRoutes = () => {
 export const App = () => (
   <ThemeProvider theme={theme}>
     <CssBaseline />
-    <BrowserRouter>
+    <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
       <DBProvider>
         <AppRoutes />
       </DBProvider>

src/components/ProductRow.tsx

@@ -169,7 +169,7 @@ export const ProductRow = ({ product, categories, onSave, onDelete }: ProductRow
                   {product.name}
                 </Typography>
                 <Typography variant="caption" color="text.secondary" noWrap>
-                  {product.category} • {product.unit_type || DEFAULT_UNIT_TYPE}
+                  {product.category}
                 </Typography>
               </Stack>
               {product.barcode ? (

src/screens/ActivePickListScreen.test.tsx

@@ -86,7 +86,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -118,7 +118,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -171,7 +171,7 @@ describe('ActivePickListScreen product search', () => {
     ]);
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -185,7 +185,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -210,7 +210,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -237,7 +237,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -269,7 +269,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -302,7 +302,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -339,7 +339,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -401,7 +401,7 @@ describe('ActivePickListScreen product search', () => {
     ]);
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -430,7 +430,7 @@ describe('ActivePickListScreen product search', () => {
     ]);
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -469,7 +469,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -514,7 +514,7 @@ describe('ActivePickListScreen product search', () => {
     ]);
 
     const { rerender } = render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -538,7 +538,7 @@ describe('ActivePickListScreen product search', () => {
     ]);
 
     rerender(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -577,7 +577,7 @@ describe('ActivePickListScreen product search', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>
@@ -612,7 +612,7 @@ describe('ActivePickListScreen product search', () => {
     ]);
 
     render(
-      <MemoryRouter initialEntries={['/pick-lists/1']}>
+      <MemoryRouter initialEntries={['/pick-lists/1']} future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <Routes>
           <Route path="/pick-lists/:id" element={<ActivePickListScreen />} />
         </Routes>

src/screens/ManageAreasScreen.test.tsx

@@ -36,7 +36,7 @@ describe('ManageAreasScreen deletion safeguards', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageAreasScreen />
       </MemoryRouter>,
     );

src/screens/ManageCategoriesScreen.test.tsx

@@ -44,7 +44,7 @@ describe('ManageCategoriesScreen deletion safeguards', () => {
   it('shows an error when trying to delete an in-use category', async () => {
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageCategoriesScreen />
       </MemoryRouter>,
     );

src/screens/ManageProductsScreen.test.tsx

@@ -120,7 +120,7 @@ describe('ManageProductsScreen barcode lookup', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );
@@ -150,7 +150,7 @@ describe('ManageProductsScreen barcode lookup', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );
@@ -182,7 +182,7 @@ describe('ManageProductsScreen barcode lookup', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );
@@ -204,7 +204,7 @@ describe('ManageProductsScreen barcode lookup', () => {
     try {
       const user = userEvent.setup();
       render(
-        <MemoryRouter>
+        <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
           <ManageProductsScreen />
         </MemoryRouter>,
       );
@@ -249,7 +249,7 @@ describe('ManageProductsScreen barcode lookup', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );
@@ -295,7 +295,7 @@ describe('ManageProductsScreen barcode lookup', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );
@@ -333,7 +333,7 @@ describe('ManageProductsScreen auto-adding products to pick lists', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );
@@ -374,7 +374,7 @@ describe('ManageProductsScreen deletion safeguards', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );
@@ -407,7 +407,7 @@ describe('ManageProductsScreen filtering feedback', () => {
 
     const user = userEvent.setup();
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <ManageProductsScreen />
       </MemoryRouter>,
     );

src/screens/PickListsScreen.test.tsx

@@ -40,7 +40,7 @@ vi.mock('../context/DBProvider', () => ({
 describe('PickListsScreen sorting', () => {
   it('sorts pick lists alphabetically by area name', () => {
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <PickListsScreen />
       </MemoryRouter>,
     );

src/screens/StartPickListScreen.test.tsx

@@ -92,7 +92,7 @@ beforeEach(() => {
 describe('StartPickListScreen', () => {
   it('shows category selection controls', () => {
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <StartPickListScreen />
       </MemoryRouter>,
     );
@@ -108,7 +108,7 @@ describe('StartPickListScreen', () => {
     const user = userEvent.setup();
 
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <StartPickListScreen />
       </MemoryRouter>,
     );
@@ -149,7 +149,7 @@ describe('StartPickListScreen', () => {
     ]);
 
     render(
-      <MemoryRouter>
+      <MemoryRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
         <StartPickListScreen />
       </MemoryRouter>,
     );