feat/mobile-ui #3

Merged

mkrieger merged 8 commits from feat/mobile-ui into main 2026-10-23 13:44:52 +00:00

Conversation 0 Commits 8 Files changed 23 +521 -149

mkrieger commented 2026-10-23 13:36:27 +00:00

Owner

• Copy link
• Copy Markdown

Description

Makes the device list usable on phones and tablets. Below 1280 px every row becomes a card, the filter panel opens as a drawer from the bottom on screens narrower than 1024 px, and a sort field replaces the column headers. The status tabs now have the same width. Release 1.0.32.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Code refactoring
• Performance improvement
• Test update

Changes Made

• Compact list as cards below xl: device name as bold title, entity ID below it, other values as small badges; empty values and labels are left out
• Full table with all columns from xl (1280 px) instead of lg, so the sync switch and the edit button stay visible on tablets in portrait
• Filter panel as a bottom drawer below lg with a backdrop and a "Show n devices" button; it starts closed on small screens unless a choice is stored
• "Sort by" field with a direction button above the list on narrow screens (new texts in English and German)
• Status tabs ("All", "Synced", "Unsynced") with equal width that wrap on narrow screens
• New Playwright projects for a phone (Pixel 7) and a tablet in portrait, with tests for the layout, the drawer, the tabs and the sort field
• Documentation (DOCS.md, DOCS.de.md), README (both languages) and changelog updated, version bumped to 1.0.32

Related Issues

Closes #

Testing

• Tests pass locally
• Added new tests for new functionality
• Updated existing tests
• Manual testing performed

Unit tests run with 100 % coverage (statements, branches, functions, lines). E2E tests pass on the desktop, phone and tablet projects. Checked manually on a narrow browser window and on an iPad in portrait.

Checklist

• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published

Screenshots (if applicable)

Additional Notes

After the merge, tag v1.0.32 on main.

## Description Makes the device list usable on phones and tablets. Below 1280 px every row becomes a card, the filter panel opens as a drawer from the bottom on screens narrower than 1024 px, and a sort field replaces the column headers. The status tabs now have the same width. Release 1.0.32. ## Type of Change - [ ] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) - [x] Documentation update - [ ] Code refactoring - [ ] Performance improvement - [x] Test update ## Changes Made - Compact list as cards below `xl`: device name as bold title, entity ID below it, other values as small badges; empty values and labels are left out - Full table with all columns from `xl` (1280 px) instead of `lg`, so the sync switch and the edit button stay visible on tablets in portrait - Filter panel as a bottom drawer below `lg` with a backdrop and a "Show n devices" button; it starts closed on small screens unless a choice is stored - "Sort by" field with a direction button above the list on narrow screens (new texts in English and German) - Status tabs ("All", "Synced", "Unsynced") with equal width that wrap on narrow screens - New Playwright projects for a phone (Pixel 7) and a tablet in portrait, with tests for the layout, the drawer, the tabs and the sort field - Documentation (`DOCS.md`, `DOCS.de.md`), README (both languages) and changelog updated, version bumped to 1.0.32 ## Related Issues Closes # ## Testing - [x] Tests pass locally - [x] Added new tests for new functionality - [x] Updated existing tests - [x] Manual testing performed Unit tests run with 100 % coverage (statements, branches, functions, lines). E2E tests pass on the desktop, phone and tablet projects. Checked manually on a narrow browser window and on an iPad in portrait. ## Checklist - [x] My code follows the project's style guidelines - [x] I have performed a self-review of my code - [ ] I have commented my code, particularly in hard-to-understand areas - [x] I have made corresponding changes to the documentation - [x] My changes generate no new warnings or errors - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] Any dependent changes have been merged and published ## Screenshots (if applicable) <!-- Attach: phone list with cards, filter drawer, iPad in portrait --> ## Additional Notes After the merge, tag `v1.0.32` on `main`.

mkrieger added 8 commits 2026-10-23 13:36:34 +00:00

feat(ui): improve the layout on small screens ... 3b610522e6

- Stack the header, move the selection mode next to the filter button
  and let the tabs wrap
- Let the list use the full width and wrap long entity IDs, drop the
  inner scrolling area in the paged list
- Show the filter panel as a bottom sheet on small screens and keep it
  closed until the user opens it
- Stack the pagination in the footer

test: exclude the Next.js build output from vitest ... 98b581d7f5

- Next compiled the test files next to the API routes into .next,
  vitest picked the copies up and reported empty suites
- Move the API route tests to src/__tests__/pages/api so Next no
  longer treats them as routes

test: cover the filter drawer and the small screen default ... 4f7dcb8593

- Test closing the filter panel with the backdrop and the results button
- Test that the filter panel starts closed on small screens only when
  nothing is stored
- Drop the unreachable server-side check from isSmallScreen

feat(ui): make the device list usable on phones and tablets ... 8aecb813cf

- Show the filter panel as a bottom sheet below lg, closed by default
- Equal-width status tabs that wrap on narrow screens
- Collapse the table columns until xl so the sync switch stays visible

feat(ui): add a sort field for the compact table ... 86969979a9

- Show a sort field and a direction button above the list below xl,
  where the column headers no longer carry sort buttons
- Add the sort texts in English and German
- Test changing the field and reversing the direction both ways

feat(ui): show the compact device list as cards ... 0925d60894

Device name as bold title, entity ID small below it, other values as small badges.
Empty values and labels are left out in the compact view, and the full-width table minimum starts at xl.

test(e2e): add mobile and tablet projects 5117e5f38c

docs: describe the compact layout and release 1.0.32 2c49b8ec37

mkrieger merged commit 7076557fa5 into main 2026-10-23 13:44:52 +00:00

mkrieger deleted branch feat/mobile-ui 2026-10-23 13:44:54 +00:00

mkrieger referenced this pull request from a commit 2026-10-23 13:44:54 +00:00

Merge pull request 'feat/mobile-ui' (#3) from feat/mobile-ui into main

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels

No items

No labels

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

mkrieger/alexa_share!3

No description provided.