Skip to content

Add ellipsis truncation to saved export thumbnail row#40

Open
LukeNeedham wants to merge 8 commits into
mainfrom
claude/top-todo-rkuqx8
Open

Add ellipsis truncation to saved export thumbnail row#40
LukeNeedham wants to merge 8 commits into
mainfrom
claude/top-todo-rkuqx8

Conversation

@LukeNeedham

Copy link
Copy Markdown
Owner

Summary

  • When there are too many thumbnails to fit in a saved export item card, the row now shows the first N thumbnails, an ellipsis ("…") in the middle, then the last N thumbnails — with equal counts on each side
  • Thumbnails fill the full width of the item card using weighted layout with ContentScale.Crop
  • Replaced LazyRow with a measured BoxWithConstraints layout that calculates how many thumbnails fit based on a minimum thumbnail width (40dp)

Original TODO

in saved export item, in the thumbnails list, if there are too many thumbnails to show them all then show the first thumbnails, then an ellipsis in the middle, then the last thumbnails. fill the full width of the item card. make sure we show an equal number of first and last thumbnails

Test plan

  • Open the export hub with saved exports that have many day videos (thumbnails)
  • Verify that when all thumbnails fit, they display across the full card width without ellipsis
  • Verify that when there are too many thumbnails, the first N and last N are shown with "…" in the middle
  • Verify equal count of first and last thumbnails on each side of the ellipsis
  • Verify thumbnails fill the full width of the card
  • Test with varying screen widths (portrait/landscape) to confirm responsive behavior

🤖 Generated with Claude Code

https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8


Generated by Claude Code

claude added 2 commits June 24, 2026 11:04
When there are too many thumbnails to fit in a saved export item card,
show the first N thumbnails, an ellipsis, then the last N thumbnails
with equal counts on each side. Thumbnails fill the full card width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
Thumbnails are always 40dp wide. When all fit, they align naturally
without stretching to fill the card width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
@github-actions

github-actions Bot commented Jun 24, 2026

Copy link
Copy Markdown

App apk at:
https://github.com/LukeNeedham/VideoDiary/releases/download/claude-top-todo-rkuqx8-116-1/app-debug.apk

  • Triggered by: PR Commit 075edc029fe3fd470c4b367e28d3e8712735e7f0
  • Built at: 02/07/2026 19:49:34

claude added 3 commits June 24, 2026 11:39
When thumbnails overflow, the row fills the card width with thumbnails
flush to both edges. The ellipsis uses weight(1f) to absorb extra space
in the middle.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
New column on SavedExportEntity with defaultValue=0 so no migration is
needed (fallbackToDestructiveMigration handles existing installs).
Query now sorts by timestampCreated DESC.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
No existing installs, so no migration handling needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
import com.lukeneedham.videodiary.ui.theme.Typography
import java.io.File

private val ThumbnailHeight = 60.dp

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

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

Should be deleted, thumbnail height is entirely driven by the intrinsic height of the thumbnail, only width is fixed

for (file in firstThumbnails) {
ThumbnailImage(file = file)
}
Text(

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

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

Use an ellipsis image here with fixed width, and reuse that fixed width in the calculations for whether to show ellipsis

}
} else {
val maxWithEllipsis = maxThumbnailCountWithEllipsis(maxWidth)
val sideCount = maxWithEllipsis / 2

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

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

Ok slight change in logic, if maxwithellipsis is odd then show the extra one in the first items. So if we have space for 5 thumbnails, show 3 first items, then ellipsis, then 2 last items

claude added 3 commits June 24, 2026 11:53
- Remove ThumbnailHeight; thumbnail height is driven by intrinsic image
  height, only width is fixed at 40dp
- Replace Text ellipsis with Image using new ellipsis vector drawable
- When odd number of thumbnails fit, extra one goes to the first items

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
ContentScale.Crop requires both dimensions constrained. Since thumbnail
height is intrinsic, use FillWidth which only needs the width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
One dimension is always fixed; the other is known from the aspect ratio,
so ContentScale is never needed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qzxef2rAmtdRCKNa3khDs8
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.

2 participants