immich-app/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-01 11:20:12 +03:00
Code Issues 783 Packages Projects Releases 12 Wiki Activity

[PR #25887] Add sticky date headers to the web version #18388

New Issue
Open
opened 2026-02-05 16:37:28 +03:00 by OVERLORD · 0 comments
OVERLORD commented 2026-02-05 16:37:28 +03:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/immich-app/immich/pull/25887
Author: @didekoning
Created: 2/4/2026
Status: 🔄 Open

Base: main ← Head: feature/sticky_headers

📝 Commits (10+)

  • f119cee Working example
  • 3ab8572 Revert some changes
  • 1574532 Revert some changes
  • 3d1c4d9 Fix an issue with small days
  • 180f931 Merge branch 'immich-app:main' into feature/sticky_headers
  • b5cc8d0 Improve the padding
  • 02fc2ad Fix the padding issue for the day titles
  • 2ee48e8 Merge branch 'feature/sticky_headers' of github.com:didekoning/immich into feature/sticky_headers
  • 2120164 Merge branch 'main' into feature/sticky_headers
  • 7425ff4 Merge branch 'immich-app:main' into feature/sticky_headers

📊 Changes

2 files changed (+16 additions, -7 deletions)

View changed files

📝 web/src/lib/components/timeline/Month.svelte (+14 -5)
📝 web/src/lib/components/timeline/Timeline.svelte (+2 -2)

📄 Description

Description

I’ve made the day headers sticky, as requested in https://github.com/immich-app/immich/discussions/1667. This makes it much easier to keep track of the date photos were taken while scrolling through large timelines.

This implementation replaces the transform-based positioning used for the Month sections with top and left positioning, since position: sticky does not work correctly when an element is inside a transformed parent container. This change may have a small performance impact, but because the original transform positioning was not actively animated (except during resize), the impact should be minimal.

To help mitigate any performance concerns, I also improved the month title checkbox animation by switching it from animating width to animating transform, which is generally more performant.

This makes it easier to see what date photos were taken when you are halfway through scrolling a large section of the timeline.

Fixes # https://github.com/immich-app/immich/discussions/1667

How Has This Been Tested?

  • I've tested this on multiple screen sizes in Google Chrome and Firefox.

Screenshots (if appropriate)

https://github.com/user-attachments/assets/64cceca5-9be5-4551-ad6b-9be1c074bd1b

Checklist:

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation if applicable
  • I have no unrelated changes in the PR.
  • I have confirmed that any new dependencies are strictly necessary.
  • I have written tests for new code (if applicable)
  • I have followed naming conventions/patterns in the surrounding code
  • All code in src/services/ uses repositories implementations for database calls, filesystem operations, etc.
  • All code in src/repositories/ is pretty basic/simple and does not have any immich specific logic (that belongs in src/services/)

Please describe to which degree, if any, an LLM was used in creating this pull request.

An LLM was used for code explaination and to help find the correct Tailwind classes.
...

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/immich-app/immich/pull/25887 **Author:** [@didekoning](https://github.com/didekoning) **Created:** 2/4/2026 **Status:** 🔄 Open **Base:** `main` ← **Head:** `feature/sticky_headers` --- ### 📝 Commits (10+) - [`f119cee`](https://github.com/immich-app/immich/commit/f119ceee68e108a6e2835fdce5709537da424861) Working example - [`3ab8572`](https://github.com/immich-app/immich/commit/3ab8572ee96c409f2e4eb4ca09cc5e88d2f703c3) Revert some changes - [`1574532`](https://github.com/immich-app/immich/commit/157453224494c72d5905cee0e949b141850b4718) Revert some changes - [`3d1c4d9`](https://github.com/immich-app/immich/commit/3d1c4d95696bb35632be6ab662ff6beb28970f62) Fix an issue with small days - [`180f931`](https://github.com/immich-app/immich/commit/180f931c7c0d4de4857f20ff2d8b15d0da400efc) Merge branch 'immich-app:main' into feature/sticky_headers - [`b5cc8d0`](https://github.com/immich-app/immich/commit/b5cc8d0787e2525c6c251dd0478bee95d920d4a2) Improve the padding - [`02fc2ad`](https://github.com/immich-app/immich/commit/02fc2add7a8158210bfd63eebae04911f5195949) Fix the padding issue for the day titles - [`2ee48e8`](https://github.com/immich-app/immich/commit/2ee48e86c30e441767829622bbf25edd0dbaba3d) Merge branch 'feature/sticky_headers' of github.com:didekoning/immich into feature/sticky_headers - [`2120164`](https://github.com/immich-app/immich/commit/21201642ddedb1d37092cfab2e5a6d0cb9625dbe) Merge branch 'main' into feature/sticky_headers - [`7425ff4`](https://github.com/immich-app/immich/commit/7425ff4da92df0690458491b4450330c57f45887) Merge branch 'immich-app:main' into feature/sticky_headers ### 📊 Changes **2 files changed** (+16 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `web/src/lib/components/timeline/Month.svelte` (+14 -5) 📝 `web/src/lib/components/timeline/Timeline.svelte` (+2 -2) </details> ### 📄 Description ## Description <!--- Describe your changes in detail --> I’ve made the day headers sticky, as requested in https://github.com/immich-app/immich/discussions/1667. This makes it much easier to keep track of the date photos were taken while scrolling through large timelines. This implementation replaces the transform-based positioning used for the Month sections with top and left positioning, since position: sticky does not work correctly when an element is inside a transformed parent container. This change may have a small performance impact, but because the original transform positioning was not actively animated (except during resize), the impact should be minimal. To help mitigate any performance concerns, I also improved the month title checkbox animation by switching it from animating width to animating transform, which is generally more performant. <!--- Why is this change required? What problem does it solve? --> This makes it easier to see what date photos were taken when you are halfway through scrolling a large section of the timeline. <!--- If it fixes an open issue, please link to the issue here. --> Fixes # https://github.com/immich-app/immich/discussions/1667 ## How Has This Been Tested? <!-- Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration --> - [x] I've tested this on multiple screen sizes in Google Chrome and Firefox. <details><summary><h2>Screenshots (if appropriate)</h2></summary> <!-- Images go below this line. --> https://github.com/user-attachments/assets/64cceca5-9be5-4551-ad6b-9be1c074bd1b </details> ## Checklist: - [x] I have performed a self-review of my own code - [ ] I have made corresponding changes to the documentation if applicable - [x] I have no unrelated changes in the PR. - [x] I have confirmed that any new dependencies are strictly necessary. - [ ] I have written tests for new code (if applicable) - [x] I have followed naming conventions/patterns in the surrounding code - [x] All code in `src/services/` uses repositories implementations for database calls, filesystem operations, etc. - [x] All code in `src/repositories/` is pretty basic/simple and does not have any immich specific logic (that belongs in `src/services/`) ## Please describe to which degree, if any, an LLM was used in creating this pull request. An LLM was used for code explaination and to help find the correct Tailwind classes. ... --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
OVERLORD added the pull-request label 2026-02-05 16:37:28 +03:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
accessibility
changelog:enhancement
changelog:security
changelog:skip
changelog:translation
cli
date-time
dependencies
documentation
external-library
format
good first issue
mobile-beta
mobile-beta
mobile-beta
needs-answer
nice to have
pull-request
Mirrored from GitHub Pull Request
 sharing
tech-debt
📱mobile
🖥️web
🗄️server
🧠machine-learning
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
OVERLORD
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: immich-app/immich#18388
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?