diff options
| author | nsfisis <nsfisis@gmail.com> | 2025-12-07 23:41:28 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2025-12-07 23:41:28 +0900 |
| commit | f0635f9beb0ff85bbea2264a1b19160f0beed257 (patch) | |
| tree | 8e7be36100a8de5dcd7301c5e7be91f2ddfdbc0c /src/client/App.tsx | |
| parent | 445781bc40afee2c64f645abcfa2575b4218aa08 (diff) | |
| download | kioku-f0635f9beb0ff85bbea2264a1b19160f0beed257.tar.gz kioku-f0635f9beb0ff85bbea2264a1b19160f0beed257.tar.zst kioku-f0635f9beb0ff85bbea2264a1b19160f0beed257.zip | |
feat(client): add offline mode banner indicator
Displays a prominent banner at the top of all pages when the user
is offline, informing them that changes will sync when reconnected.
Shows pending change count when applicable.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Diffstat (limited to 'src/client/App.tsx')
| -rw-r--r-- | src/client/App.tsx | 43 |
1 files changed, 23 insertions, 20 deletions
diff --git a/src/client/App.tsx b/src/client/App.tsx index f774003..3c20c54 100644 --- a/src/client/App.tsx +++ b/src/client/App.tsx @@ -1,5 +1,5 @@ import { Route, Switch } from "wouter"; -import { ProtectedRoute } from "./components"; +import { OfflineBanner, ProtectedRoute } from "./components"; import { DeckDetailPage, HomePage, @@ -10,24 +10,27 @@ import { export function App() { return ( - <Switch> - <Route path="/"> - <ProtectedRoute> - <HomePage /> - </ProtectedRoute> - </Route> - <Route path="/decks/:deckId"> - <ProtectedRoute> - <DeckDetailPage /> - </ProtectedRoute> - </Route> - <Route path="/decks/:deckId/study"> - <ProtectedRoute> - <StudyPage /> - </ProtectedRoute> - </Route> - <Route path="/login" component={LoginPage} /> - <Route component={NotFoundPage} /> - </Switch> + <> + <OfflineBanner /> + <Switch> + <Route path="/"> + <ProtectedRoute> + <HomePage /> + </ProtectedRoute> + </Route> + <Route path="/decks/:deckId"> + <ProtectedRoute> + <DeckDetailPage /> + </ProtectedRoute> + </Route> + <Route path="/decks/:deckId/study"> + <ProtectedRoute> + <StudyPage /> + </ProtectedRoute> + </Route> + <Route path="/login" component={LoginPage} /> + <Route component={NotFoundPage} /> + </Switch> + </> ); } |