Conversation
- Replace Vite favicon with custom logo.png - Display logo image next to title in the app header - Add centered logo at the top of README.md Co-Authored-By: Claude Opus 4.6 <[email protected]>
- Stack logo and title vertically on mobile, horizontal on sm+ - Larger logo on mobile (w-20), smaller text (text-3xl) - Center-align on mobile, left-align on desktop Co-Authored-By: Claude Opus 4.6 <[email protected]>
- Show logo as standalone centered image preserving aspect ratio - Remove redundant h1 title (already in logo image) - Fix squished logo caused by forced square dimensions Co-Authored-By: Claude Opus 4.6 <[email protected]>
Update from web_rosbag_analyzer to rosbag-analyzer-web to match the renamed repository. Co-Authored-By: Claude Opus 4.6 <[email protected]>
The logo image contains the title text visually, but a hidden h1 is needed for screen readers and e2e test compatibility. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Co-Authored-By: Claude Opus 4.6 <[email protected]>
- Redesign with custom color palette (brand/surface), Outfit + IBM Plex Mono fonts, grid background, animations, and improved dark mode - Add i18n with JA/EN toggle, auto-detection from browser locale, and localStorage persistence - Pin Playwright locale to en-US for consistent e2e tests Co-Authored-By: Claude Opus 4.6 <[email protected]>
Drop external Outfit and IBM Plex Mono font loading from Google Fonts for faster page loads and improved privacy. Co-Authored-By: Claude Opus 4.6 <[email protected]>
Tiryoh
changed the title
Add an ESLint config for the merged TypeScript workspace and replace sqlite-related any usage so the branch stays build, test, and lint ready after merging origin/main.
There was a problem hiding this comment.
Pull request overview
This PR refreshes the React/Tailwind UI, introduces JA/EN i18n with a persisted language toggle, and updates upload/diagnostics interactions and Playwright selectors to match the new UI.
Changes:
- Add a lightweight i18n hook (
useI18n) with EN/JA dictionaries and wire translated strings through the UI. - Redesign
App.tsxlayout/styles (header, upload area, tabs, filters, tables, empty states) and update theme tokens via Tailwind + CSS. - Stabilize Playwright E2E by pinning locale and updating selectors/assertions to match the redesigned UI.
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tailwind.config.js | Adds brand/surface color scales, font stacks, and enables dark mode via media. |
| src/types.ts | Updates severity/diagnostic color class mappings to use new theme tokens + dark variants. |
| src/rosbagUtils.ts | Adds more explicit TypeScript payload/result types and improves topic listing when none found. |
| src/index.css | Reworks base styles and adds grid background + small UI animations. |
| src/i18n.ts | Introduces EN/JA dictionaries and useI18n() hook (lang detection + formatting). |
| src/App.tsx | Major UI redesign; adds language toggle, new upload UI, refreshed filters/tables/exports, better diagnostics expand controls. |
| playwright.config.ts | Pins Playwright locale to en-US for stable i18n-dependent tests. |
| index.html | Switches favicon to /logo.png. |
| e2e/app.spec.ts | Updates selectors/assertions for the redesigned UI and adds a couple of new checks. |
| README.md | Adds centered logo at top of README. |
| CLAUDE.md | Adds repo guidance/documentation for Claude Code. |
| .eslintrc.cjs | Adds ESLint configuration aligned to TS + react-hooks + react-refresh. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -26,8 +26,13 @@ test.describe('Initial page', () => { | |||
| await expect(page.getByText('ROSbag Analyzer')).toBeVisible(); | |||
There was a problem hiding this comment.
This assertion expects the “ROSbag Analyzer” text to be visible, but in the updated UI the only occurrence is the sr-only heading (not visually visible). This test will likely fail; assert the page title (toHaveTitle) or assert the visible logo/image (or use getByRole('heading', ...) with includeHidden: true if you want to keep the sr-only heading check).
Suggested change
| await expect(page.getByText('ROSbag Analyzer')).toBeVisible(); | |
| await expect(page).toHaveTitle(/ROSbag Analyzer/); |
Owner
Author
There was a problem hiding this comment.
The test passes as-is. Tailwind's sr-only does not use display: none — it renders a 1x1px element that remains in the DOM, so Playwright's toBeVisible() succeeds. No change needed.
- Wrap localStorage access in try/catch for sandboxed environments - Fix onDrop handler to preventDefault and process dropped files Co-Authored-By: Claude Opus 4.6 <[email protected]>
Tiryoh
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
What Changed
src/App.tsxaround the new visual system, including the upload area, tabs, filters, stats, export actions, empty states, and mobile-friendly table controlssrc/i18n.tsand wired translated strings throughout the UIsrc/index.css,tailwind.config.js, andsrc/types.tsto support the new theme tokens and component stylinge2e/app.spec.ts/logo.pngfrompublic/logo.png, whileREADME.mdcontinues to referencepublic/logo.pngorigin/maininto this branch to prepare for review/mergeVerification
npm run buildnpm run lintnpm run testnpm run test:e2e