Skip to content

fix(mobile): polish the redesign on phone-width screens - #76

Merged
keyldev merged 1 commit into
mainfrom
fix/mobile-redesign-polish
Sep 27, 2026
Merged

keyldev merged 1 commit into
mainfrom
fix/mobile-redesign-polish

Conversation

@keyldev

@keyldev keyldev commented Sep 27, 2026 •

Copy link
Copy Markdown
Collaborator
  • Cameras: compact header (actions beside the title, full-width search, stretched group filter); fixes the clipped search box
  • Sheets: pad the bottom by the safe area plus a small gap so actions clear the gesture bar
  • Recordings: phone calendar is a full-width card with a week strip that expands to the month
  • Player: clock row, centred transport and one row of equal pills (sound, speed menu, clip)

Summary

Related

Type

  • Bug fix
  • Feature
  • Refactor / cleanup
  • Docs / CI
  • Other:

Checklist

  • Builds with 0 warnings (TreatWarningsAsErrors=true).
  • Tests pass (dotnet test); new Core logic has unit tests.
  • No layering violation — App references Core only (Infrastructure / Video / Devices wired via DI in a head).
  • Scope stays within one phase (didn't pull work from a later phase's "Не входит").
  • README / docs updated if public commands, options, or setup changed.

Platforms tested

  • Windows
  • Linux
  • macOS
  • Android
  • iOS
  • CI build only

Screenshots / notes

- Cameras: compact header (actions beside the title, full-width search, stretched group filter); fixes the clipped search box
- Sheets: pad the bottom by the safe area plus a small gap so actions clear the gesture bar
- Recordings: phone calendar is a full-width card with a week strip that expands to the month
- Player: clock row, centred transport and one row of equal pills (sound, speed menu, clip)
@keyldev
keyldev merged commit b85e506 into main Sep 27, 2026
5 checks passed
@qodo-free-for-open-source-projects

Copy link
Copy Markdown

PR Summary by Qodo

Polish camera, recordings, player, and sheet layouts on phones

🐞 Bug fix ✨ Enhancement 🕐 20-40 Minutes

Grey Divider

AI Description

• Reflow camera actions and filters to prevent clipped search on phone-width screens.
• Add safe-area clearance to sheets and a collapsible week calendar to recordings.
• Reorganize player controls into a clock row, centered transport, and compact tools.
Diagram

graph TD
  Viewport["Phone width"] --> Adaptive["Adaptive breakpoints"] --> Cameras["Camera header"]
  Adaptive --> Recordings["Recordings page"] --> Calendar["Calendar card"] --> CalendarVM["Calendar state"]
  Adaptive --> Player["Player controls"]
  Viewport --> Sheets["Overlay sheets"]
Loading
High-Level Assessment

Keep the existing width-based styling and shared calendar view model. Separate phone-specific controls would add synchronization and maintenance overhead without a clear benefit for these layout changes.

Files changed (9) +571 / -178

Enhancement (7) +432 / -96
Localizer.csLocalize compact camera and calendar labels +4/-0

Localize compact camera and calendar labels

• Adds English and Russian strings for the shorter Add button and the calendar’s whole-month control.

src/OpenIPC.Viewer.App/Services/Localizer.cs

ArchiveCalendarViewModel.csTrack the compact calendar’s visible week and expansion state +55/-1

Track the compact calendar’s visible week and expansion state

• Exposes a seven-day strip chosen from the selected, current, or latest recording week, plus expansion and selected-date properties. Selecting a day collapses the month view.

src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs

ArchiveCalendarView.axamlAdd a full-width, expandable phone calendar +212/-84

Add a full-width, expandable phone calendar

• Keeps the wide month column and adds a compact card that switches between a week strip and the full month. Both layouts share a day-cell template.

src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml

ArchiveCalendarView.axaml.csExpose compact mode to calendar styles +20/-0

Expose compact mode to calendar styles

• Adds an IsCompact styled property and corresponding pseudo-class so the host page can select the phone calendar layout.

src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml.cs

RecordingPlayerPage.axamlReorganize phone playback and clip controls +111/-6

Reorganize phone playback and clip controls

• Adds a clock row, centers transport, and replaces the narrow desktop tool cluster with sound, speed, and clip pills. Moves clip actions beneath the bounds when compact.

src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml

RecordingPlayerPage.axaml.csOpen playback rates from the phone speed pill +20/-0

Open playback rates from the phone speed pill

• Builds a radio-style flyout from existing rate options and connects each choice to the player’s rate command.

src/OpenIPC.Viewer.App/Views/Pages/RecordingPlayerPage.axaml.cs

RecordingsPage.axamlDock the compact calendar above recordings +10/-5

Dock the compact calendar above recordings

• Selects the compact calendar layout below the existing recordings breakpoint and adjusts its margin when it moves above the list.

src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml

Bug fix (2) +139 / -82
OverlayDialogPresenter.csClear the gesture area beneath mobile sheets +12/-8

Clear the gesture area beneath mobile sheets

• Pads sheet bottoms by the reported safe-area inset plus a small gap. Retains top-inset handling for full-screen overlays.

src/OpenIPC.Viewer.App/Services/OverlayDialogPresenter.cs

CameraLibraryPage.axamlReflow the camera header without clipping search +127/-74

Reflow the camera header without clipping search

• Places actions beside the title on narrow screens, gives search its own full-width row, and stretches the group filter. Adds a separate header breakpoint and shorter compact action labels.

src/OpenIPC.Viewer.App/Views/Pages/CameraLibraryPage.axaml

@qodo-free-for-open-source-projects

Copy link
Copy Markdown

Code Review by Qodo

🐞 Bugs (2) 📘 Rule violations (0) 📜 Skill insights (0)

Grey Divider


Remediation recommended

1. The expanded calendar can hide recordings 🐞 Bug ≡ Correctness
Description
The compact calendar renders all 42 day cells when IsExpanded is true, but its host docks it above
a recordings grid with no page-level scrolling. On short phone screens, the month grid consumes the
space needed by the list and pager; only the list itself has a scroll viewer, so scrolling cannot
recover the displaced content.
Code

src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml[R236-237]

+        <ItemsControl ItemsSource="{Binding Days}" ItemTemplate="{StaticResource DayCell}"
+                      IsVisible="{Binding IsExpanded}">
Evidence
The new expanded view displays the full month with seven columns of at least 34-pixel cells. The
compact host docks that calendar above the list, while the page host has no outer scroll viewer and
the only recording-page scroll viewer surrounds the list.

src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml[85-91]
src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml[228-243]
src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml[92-100]
src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml[138-141]
src/OpenIPC.Viewer.App/Views/MainView.axaml[105-114]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Expanding the compact month calendar can consume the recordings list's available height on short phones, with no page-level scrolling to reach displaced content.

## Fix Focus Areas
- src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml[228-243]
- src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml[92-100]

## Recommended Fix
Constrain the expanded compact calendar to a height that preserves usable space for the recordings grid, and make the expanded days scroll within that constraint. Verify that the list and pager remain reachable on short phone-height viewports.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


2. Clearing a day leaves the week strip stale 🐞 Bug ≡ Correctness
Description
SelectDay clears SelectedDate in its same-day toggle-off branch but returns before setting
IsExpanded = false or calling UpdateWeek(). Tapping the selected day clears the recording filter
while the collapsed strip retains the old week, and doing so while expanded leaves the month open.
Code

src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs[R282-283]

+        IsExpanded = false;
+        UpdateWeek();
Evidence
The same-day branch clears the selected date and raises the null-selection event before returning;
only the other selection path reaches the new collapse and UpdateWeek() calls. UpdateWeek()
repopulates WeekDays, which the compact view renders when IsExpanded is false, so bypassing
those calls leaves the visible calendar state unchanged.

src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs[217-244]
src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs[267-293]
src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml[228-243]
src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs[270-284]
src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml[228-235]
src/OpenIPC.Viewer.App/ViewModels/RecordingsPageViewModel.cs[106-119]

Agent prompt
The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Toggling off an already-selected day clears the recording filter but bypasses the compact calendar state updates, leaving the old week visible or the month expanded.

## Fix Focus Areas
- src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs[267-285]

## Recommended Fix
In the same-day toggle-off branch, after clearing `SelectedDate` and cell selection and before raising `DaySelected(null)` and returning, set `IsExpanded = false` and call `UpdateWeek()`. This aligns date clearing with the existing `ShowAll()` behavior and rebuilds the collapsed week strip.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools


Grey Divider

Context sources
Review mode: 🧠 Deep: This is a substantial mobile UI behavior change spanning nine files, multiple independent layouts, view-model logic, safe-area handling, responsive styling, and player interactions, creating many plausible subtle defects across code paths.

Grey Divider

Tip of the day
💡 Did you know, you can describe a rule in plain language on the Rules page and Qodo drafts it for you

More tips ↗ | Customize Qodo ↗ | Qodo docs ↗

Grey Divider

Qodo Logo

Comment on lines +236 to +237
<ItemsControl ItemsSource="{Binding Days}" ItemTemplate="{StaticResource DayCell}"
IsVisible="{Binding IsExpanded}">

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

1. The expanded calendar can hide recordings 🐞 Bug ≡ Correctness

The compact calendar renders all 42 day cells when IsExpanded is true, but its host docks it above
a recordings grid with no page-level scrolling. On short phone screens, the month grid consumes the
space needed by the list and pager; only the list itself has a scroll viewer, so scrolling cannot
recover the displaced content.
Agent Prompt
## Issue description
Expanding the compact month calendar can consume the recordings list's available height on short phones, with no page-level scrolling to reach displaced content.

## Fix Focus Areas
- src/OpenIPC.Viewer.App/Views/Pages/ArchiveCalendarView.axaml[228-243]
- src/OpenIPC.Viewer.App/Views/Pages/RecordingsPage.axaml[92-100]

## Recommended Fix
Constrain the expanded compact calendar to a height that preserves usable space for the recordings grid, and make the expanded days scroll within that constraint. Verify that the list and pager remain reachable on short phone-height viewports.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

Comment on lines +282 to +283
IsExpanded = false;
UpdateWeek();

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remediation recommended

2. Clearing a day leaves the week strip stale 🐞 Bug ≡ Correctness

SelectDay clears SelectedDate in its same-day toggle-off branch but returns before setting
IsExpanded = false or calling UpdateWeek(). Tapping the selected day clears the recording filter
while the collapsed strip retains the old week, and doing so while expanded leaves the month open.
Agent Prompt
## Issue description
Toggling off an already-selected day clears the recording filter but bypasses the compact calendar state updates, leaving the old week visible or the month expanded.

## Fix Focus Areas
- src/OpenIPC.Viewer.App/ViewModels/ArchiveCalendarViewModel.cs[267-285]

## Recommended Fix
In the same-day toggle-off branch, after clearing `SelectedDate` and cell selection and before raising `DaySelected(null)` and returning, set `IsExpanded = false` and call `UpdateWeek()`. This aligns date clearing with the existing `ShowAll()` behavior and rebuilds the collapsed week strip.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

@keyldev
keyldev deleted the fix/mobile-redesign-polish branch September 27, 2026 23:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant