Skip to content

feat(ui): add motion and transitions across the shell and apps - #531

Merged
veryCrunchy merged 9 commits into
mainfrom
feat/app-motion-and-transitions
Oct 30, 2026
Merged

veryCrunchy merged 9 commits into
mainfrom
feat/app-motion-and-transitions

Conversation

@veryCrunchy

Copy link
Copy Markdown
Member

What changes for people

Navigation, selection, and content changes now move in a way that follows what the person did, instead of snapping. This is the first slice of motion work; app-specific and dynamic UI motion will continue as those surfaces are worked on.

  • Shell: the desktop sidebar highlight glides between destinations and to each app's accent. Photos, Talk, Calendar, Deck, Folder sync, and the Apps catalog have their own accent, checked for WCAG AA contrast in light and dark themes. The sidebar animates when it collapses or expands, and destinations ease in.
  • Pages: opening a folder, file info, a chat, a note, or an editor slides in from the end, and going back slides in from the start. Desktop detail panes for Files, Calendar, Folder sync, and Deck slide in. On phones, Deck cards and Folder sync details open in a bottom sheet over the list.
  • Photos: the media viewer opens over the timeline, album, or folder instead of replacing it. The tapped thumbnail zooms into the photo, and closing zooms it back into its tile, so the screen below keeps its place and scroll position.
  • Shared text: titles carry between screens: Talk rooms, file names, note titles, Deck cards, calendar events, Settings sections, News articles, and dynamic app records. This includes details that load before showing their title and records opened into their own lists.
  • Lists and states: list items fade in and glide into place. Loading shows placeholders shaped like the coming content, and empty, error, and refresh states ease in.
  • Controls: app sidebars (the Photos library, Files places, Folder sync sections, dynamic app sections) glide their highlight. Tabs slide toward the side picked. Chips, toggled icons, selected rows, and disclosures animate.
  • Dynamic apps: each location keeps its own scroll position, and Back returns to the parent's position. Write actions are held while the app's contract is re-checked, instead of flickering.
  • News: the reader slides in over the list on one pane and fades between articles on two panes.

Android follows the system "Remove animations" setting, which turns this motion off. Desktop has no reduced-motion source yet and keeps full motion.

Validation

  • :ui:desktopTest: 4195 tests passed, 70 skipped, 0 failed.
  • :androidApp:testDebugUnitTest passed, and :androidApp:assembleDebug built.
  • bash tools/check-kotlin-architecture.sh passed. File-size baselines were only lowered: NextcloudNativeApp.kt, FileOfflineCenterScreen.kt, NextcloudMediaViewer.kt, and others that shrank.
  • bash tools/capture-marketing-screenshots.sh regenerated the captures; all 242 were verified fresh against current inputs.
  • bash tools/check-repository.sh passed.
  • The Windows desktop build was launched from source for hands-on review during development. Android was covered by unit tests and the APK build only; it has not been checked on a device or emulator in this branch.

New deterministic tests cover these behaviors:

  • the gliding selection highlight, and its reduced-motion placement;
  • shared-element flights, including loading details and scrolled-away rows that must not fly;
  • direction-aware tabs;
  • the media viewer overlay: the timeline stays composed, takes no input, and close waits for the zoom;
  • zoom geometry;
  • dynamic record and header key selection;
  • the contract write gate;
  • per-location scroll restoration.

Risks and limitations

  • Media viewer overlay: the media viewer is now an overlay, so the screen it came from stays composed and keeps running beneath it. The overlay registers its own Back handler and blocks pointer input to the screen below. Keyboard Tab traversal can still reach that screen.
  • Mail threads: a mail thread that opens a specific message may not carry its subject across.
  • Table grid: desktop table grid rows have no separate title to carry into the detail.
  • Shared elements: they only fly within about 0.7 s of a navigation. Elements removed by a navigation wait up to 2 s for their counterpart. Reduced motion disables them.
  • News: News has no UI tests yet. It uses the shared entrance, item motion, and title components covered elsewhere.

Follow-up

Motion for remaining app-specific and dynamic UI surfaces will be added as those surfaces are worked on.

Give navigation, selection, and content changes motion that follows
what the person did, built on shared tokens that respect the Android
"Remove animations" setting.

- Shell: a gliding sidebar highlight, per-app accents, collapse
  animation, and an entrance for each destination.
- Pages: routes slide with their direction; desktop detail panes slide
  in; phone Deck cards and sync details open in bottom sheets.
- Lists: items fade in and glide into place; loading uses shaped
  placeholders; status states and notices ease in.
- Shared elements: titles carry between lists and details in Talk,
  Files, Notes, Deck, Calendar, Settings, News, and dynamic apps,
  including details that load first and records opened into children.
- Photos: the viewer opens over the screen it came from and zooms out
  of the tapped thumbnail, keeping the timeline's place.
- App sidebars, tabs, toggles, chips, and selected rows animate.
- Dynamic apps keep scroll position per location and hold writes while
  their contract is re-checked.
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 12:45 Destroyed
@obiente-cloud

obiente-cloud Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Obiente preview

NC Native · b70203f5526a · Removed

View preview status

View in Obiente

Obiente updates this comment as the preview changes.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 29, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-29T17:56:13.064456Z 368676f New commits
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 12:45 Destroyed
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 12:54 Destroyed

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d551403bf3

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

The screen under the media viewer stays composed so it keeps its place. Tab could still move focus into it and Enter could act on controls the person cannot see. The covered screen is now a focus group that cancels entry while the viewer is open.
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 13:18 Destroyed
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 13:26 Destroyed
Signed-off-by: veryCrunchy <me@verycrunchy.dev>
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 16:03 Destroyed
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 16:10 Destroyed
# Conflicts:
#	tools/kotlin-file-size-baseline.txt
#	ui/src/commonMain/kotlin/dev/obiente/nextcloudnative/app/NextcloudNativeApp.kt
#	website/public/screenshots/capture-manifest.json
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 17:53 Destroyed
@obiente-cloud
obiente-cloud Bot temporarily deployed to Obiente Preview / PR #531 / NC Native October 29, 2026 17:59 Destroyed
@veryCrunchy
veryCrunchy merged commit 44035db into main Oct 30, 2026
6 checks passed

This branch was successfully deployed

No deployments
Obiente Preview / PR #531 / NC Native — b70203f5 Deployed Oct 29, 2026 by obiente-cloud[bot]
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