TheFantasticLoki/open-grind
Watch
1
0
Fork
You've already forked open-grind
 1
forked from open-grind/open-grind
Code Pull requests Activity

WIP: Album Viewer Redesign #3

Closed
TheFantasticLoki wants to merge 1 commit from albumMessage-refactor into main
pull from: albumMessage-refactor
merge into: TheFantasticLoki:main
Conversation 0 Commits 1 Files changed 13 +1929 -187
TheFantasticLoki commented 2026-07-06 15:12:29 +02:00
Owner
Copy link

Summary

I didn't like the current implementation of the album viewer as it was lacking a lot of information and styling, so I decided to vibe code something better as a good starting point design wise for a better viewer.

Tasks

  • Refactor album content counter.
  • Add interactive footer.
  • Show Album Owner Name and Picture
  • Show Album Name else show owner distance
  • Make profile name and picture link to owners profile
  • Add intuitive action wheel for reply, tap, and report actions for album content
  • Wire up Reply Action
  • Add reply message composer
  • Wire up Tap Action
  • Add Album Content Report popup form with proper api backing.

image
image

# Summary I didn't like the current implementation of the album viewer as it was lacking a lot of information and styling, so I decided to vibe code something better as a good starting point design wise for a better viewer. ## Tasks - [x] Refactor album content counter. - [x] Add interactive footer. - [x] Show Album Owner Name and Picture - [x] Show Album Name else show owner distance - [x] Make profile name and picture link to owners profile - [x] Add intuitive action wheel for reply, tap, and report actions for album content - [ ] Wire up Reply Action - [ ] Add reply message composer - [ ] Wire up Tap Action - [ ] Add Album Content Report popup form with proper api backing. ![image](/attachments/daffd0e4-8571-46e1-90dc-91b8f74a608d) ![image](/attachments/3f4740c9-4fe4-4eef-96ad-a4a3e1314dde)
image.png
1.8 MiB
image.png
1.8 MiB 
Slight redesign, better logic.
Transitions not working rn probably due to some parent div using display none to hide elements instead of using opacity, visibility and pointer-events to hide elements which avoids breaking animations like transitions.
Add ignore rules for Cursor IDE, GitHub Copilot, Claude Desktop, MCP servers,
Serena, Codeium, Tabnine, OpenAI, Anthropic, ChatGPT, and generic AI tool
caches/logs to prevent AI-generated and temporary files from being tracked
in version control.
TheFantasticLoki force-pushed albumMessage-refactor from 13168106cb to 0bc727e73e 2026-07-07 14:16:40 +02:00 Compare 
Introduce a generic, configurable radial action wheel component (`radial-action-wheel.ts`) that renders a pie-slice wheel of options around a central toggle button. It supports drag-to-select, auto-close on miss, and framework-agnostic mounting.

Update `AlbumMessage.svelte` to use the new wheel:
- Change `conversationId` type from `number` to `string`.
- Replace the unimplemented reply action with a toast placeholder.
- Use CSS custom properties (`--wheel-size`, `--wheel-radius`) for scalable wheel styling.
Reduces AlbumMessage.svelt length by a fair amount.
Add sendAlbumContentReaction and sendAlbumContentReply helpers in
src/lib/api/album-content.ts that route through ConversationState.send
for optimistic insertion and server reconciliation.

Wire these into AlbumMessage.svelte so users can react to or reply to
individual album slides from the lightbox. Update MessagesList.svelte
to support the adjusted message rendering flow.
The album message action wheel slices previously had no border or background,
making it hard to see against the background. This adds a
subtle translucent border and background to improve visibility
and match the surrounding UI elements.
Remove border and background from the overlay button to make it
transparent. Adjust the action bar to align items flex-end with
fit-content height for proper layout. Increase action button
dimensions from 32px to 40px to enhance tap targets and consistency with message composer.
TheFantasticLoki force-pushed albumMessage-refactor from c228495b68 to d0ddc8702e 2026-07-08 01:37:13 +02:00 Compare
TheFantasticLoki force-pushed albumMessage-refactor from d0ddc8702e to a10ab6fcfd 2026-07-08 01:59:14 +02:00 Compare
TheFantasticLoki closed this pull request 2026-07-08 02:01:10 +02:00

Pull request closed

Please reopen this pull request to perform a merge.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Assignees
Clear assignees
No assignees
1 participant
Notifications
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
TheFantasticLoki/open-grind!3
No description provided.