Skip to content

feat(appshots): redesign App Shots tab as a batch flow with per-shot copy edits#17

Open
hanrw wants to merge 27 commits intoblitzdotdev:masterfrom
hanrw:screenshots
Open

feat(appshots): redesign App Shots tab as a batch flow with per-shot copy edits#17
hanrw wants to merge 27 commits intoblitzdotdev:masterfrom
hanrw:screenshots

Conversation

@hanrw
Copy link
Copy Markdown

@hanrw hanrw commented Apr 17, 2026

Summary

Redesigns the App Shots tab from a single-shot editor into a batch-first workspace that matches the customer ask: "press a button, capture a few screens, get 8 polished template sets."

Journey

  • Hero on first visit — big CTA in an empty project; auto-skipped once sets exist.
  • Workspace — three-column persistent layout: Captures · Sets · Inspector. Capture/Record/Upload on the left; 8 template cards in the center; default headline/subtitle/frame on the right.
  • Parallel fan-out — 8 templates × N captures via AppShotsGenerator with a 4-way concurrency cap (ASC plugin can't handle ~48 parallel apply calls).
  • Persistent sets grid — returning visits land on the 8-set grid, rehydrated from disk.
  • Detail sheet — click a set to see every shot full-size in a horizontal scroll. Each shot has inline Headline / Subtitle / Tagline / App name fields; hit Return to re-render just that shot.
  • Upload to ASC — prominent primary in the detail sheet (wiring TBD).

Rich domain

  • GeneratedScreenshot owns its copy (effectiveHeadline, effectiveSubtitle, effectiveTagline, effectiveAppName), sourceScreenshot, and canRender — so edits + retries work without a live CapturedShot (which isn't persisted).
  • PersistedSets v4 carries all four text slots + source path per shot. Older format files are ignored → user re-onboards.
  • AppShotsFlowManager (state machine) + service layer (Generator, Store, Capture, DeviceFrameCompositor, Copywriter) + 4 view files.

Quality of life

  • Checkbox per capture + auto-exclude near-blank screens (downsampled luminance heuristic).
  • Device-frame compositing restored (insets.json + bundled iPhone 16/17 frames).
  • Retry button + applyShotChanges unifies "retry failed" and "apply edited copy."
  • Two-surface color token system (canvas + cardSurface) — consistent in light & dark mode.

Files

src/models/AppShotsDomain.swift                   value types + domain behavior
src/services/appshots/
  AppShotsCapture.swift                           snap + FlowRecorder
  AppShotsCopywriter.swift                        per-category subtitle bank
  AppShotsGenerator.swift                         throttled template fan-out
  AppShotsStore.swift                             persistence (v4)
  DeviceFrameCompositor.swift                     bezel overlay
src/managers/app/AppShotsFlowManager.swift        @Observable state machine
src/views/build/AppShotsView.swift                thin tab entry (hero vs workspace)
src/views/build/appshots/
  AppShotsAtoms.swift                             tokens, SetCard, ShotCopyEditor, Sheet
  AppShotsHeroView.swift
  AppShotsWorkspaceView.swift                     toolbar + captures/sets/inspector panels

Test plan

  • First-visit: App Shots tab shows hero with "Get started" CTA
  • Capture 3+ screens → default headline in Inspector → "Generate 8 sets" renders 8 templates in parallel
  • Near-blank capture gets auto-excluded with a warning icon; checkbox toggles inclusion
  • Reopen app: lands on the 8-set grid (not hero)
  • Click a set → detail sheet shows all N shots in a horizontal scroll with editable headline/subtitle/tagline/app name
  • Edit a headline → Return → just that shot re-renders with new copy, others untouched
  • Failed shot shows the orange "Render failed" tile; retry icon re-runs that single render
  • Reset button clears captures + sets + persisted file → back to hero
  • Light-mode and dark-mode both render cleanly

hanrw added 27 commits April 10, 2026 13:51
- Implement ASCAppShotsManager for interfacing with `asc app-shots` CLI
- Add AppShotsView for screenshot selection, template/theme picking, and generation
- Extend AppState and AppTabView with new appShots tab and UI integration
- Replace templates list with interactive HTML gallery in WKWebView
- Streamline source panel with improved layout and controls
- Add result view with toolbar and file reveal action
- Fetch templates and previews via new JSON parsing method
- Introduce ASCManager APIs for template preview HTML and HTML rendering
- Refactor state management to show gallery or result based on generation status
- Load device frame insets and assets from bundled resources
- Composite bezel onto screenshots with screen clipping and corner radius
- Add UI toggle and picker for framing options in AppShotsView
- Update preview image dynamically based on selected device frame
- show progress and error states with dismiss button
- use appResources bundle for frame asset loading
- extend asc CLI timeout to 300 seconds
- improve ASCAppShotsManager output path parsing with JSON extraction and path resolution
- Introduce RightPanelMode enum to manage panel states
- Implement preview view showing source screenshot with overlay during generation or error
- Update result view to display generated screenshot with toolbar and file info
- Enhance state handling for seamless transitions between modes
- Add detailed logging for image loading
- Display last generated image as background if available
- Preserve generated image while generating new shots to improve UX
- Introduce AppShotsOnboardingView for guiding first-time users
- Add offline copywriter for subtitle variations per template category
- Integrate onboarding display logic in AppShotsView with selection handling
- Support capturing, recording, batch generation, and picking sets through onboarding UI
- Implement sidebar, controls, and main views for empty, capturing, results, and detail states
- Include AI-generated screenshot templates and chat refinement interface
- Add prototype state switcher and styling for app-shot workflow simulation
- Revamp layout with 3-column grid: captures, sets, inspector
- Replace sidebar content and structure for better project navigation
- Introduce new hero stage with clear onboarding tiles
- Add interactive controls: toggles, buttons, and progress indicators
- Update template sets UI with loading spinners and actions
- Implement state switcher for workspace with smooth transitions
- Refactor styles for cleaner, modern, and accessible appearance
- Implement AppShotsFlowManager for capture, recording, and set generation
- Add AppShotsWorkspaceView with persistent 3-column layout: captures, sets, inspector
- Introduce AppShotsHeroView as entrypoint for onboarding and initial state
- Create DeviceFrameCompositor for device frame compositing of screenshots
- Provide AppShotsCopywriter for per-category subtitle variation
- Integrate persistence via AppShotsStore for storing generated sets
- Replace legacy AppShotsView with new managed flow and adaptive UI
- Include JSON frame insets and device frame assets for bezel rendering
- Introduce light workspace color palette and updated styles
- Revamp captures list with toggle and warning for blank captures
- Redesign sets grid with interactive cards, status indicators, and failure handling
- Add detail sheet overlay for individual set insights and actions
- Update state switcher and simulate generate function timing
- Improve accessibility and UI consistency with shadows and typography
- Replace grid layout with vertical list of flex rows
- Update shot thumbnails to inline scroll strip with status states
- Simplify set card markup and enhance hover styles and animations
- replace list layout with responsive grid of large set cards
- add visible thumbnail limit with "+N" overflow badge
- update shot styling with overlay headers and refined mini-phone details
- improve loading, failed, and status visual cues and interactions
- Add included and warning flags to CapturedShot model
- Implement heuristic to identify nearly blank screenshots
- Auto-exclude blank captures from generation and show warnings
- Enable manual inclusion toggling in capture list UI with badges
- Update generation logic to use only included captures
- Refine AppShotsSetCard UI for enhanced thumbnail display and status indicators
- replace placeholder tile with a corner chip indicating overflow count
- update styles for chip visibility and appearance on light theme
- adjust rendering logic to embed chip in last shot when overflow exists
- Add accent-tinted icon tile and step guide to empty state
- Improve button behavior and hints in generate footer
- Implement preview skeleton with phone mockup during generation
- Redesign failed overlay with palette-based hatch pattern
- Enhance overflow tile styling matching card palette
- Add dynamic headline color based on palette luminance
- Reduce widths of CapturesPanel and InspectorPanel for better layout
- Decrease liveGrid column minimum and spacing for improved grid fit
- Add cardSurface color token and apply it to panels with updated shadow and background styling
- Introduce two-surface system: canvas and cardSurface
- Alias panelBackground to canvasBackground for back-compat
- Adjust subtleStroke opacity from 0.12 to 0.10
- Add detailed comments explaining roles of each token
- Enable per-capture headline editing with default fallback
- Update capture row UI for headline input and styling
- Redesign AppShotsSetDetailSheet with horizontal scrolling preview
- Add upload and folder actions, improved layout and visuals
- Simplify thumbnail view with dynamic "more" badge and remove preview skeleton
- Extend CapturedShot with headline and subtitle properties
- Implement effective copy fallback logic in AppShotsFlowManager
- Throttle concurrent AppShotsGenerator tasks to reduce plugin errors
- Add retry support for individual failed screenshots
- Update UI to reflect live capture copy and enable retry functionality
- Update sheet backdrop with blur and fade animation
- Enhance sheet container with warm colors, shadows, and pop animation
- Add palette strip and floating close button to header
- Revamp header layout: category label, large title, meta info with quote
- Replace grid with horizontal scroller for shots preview
- Redesign shot cards
…ditor

- Replace backdrop with adaptive paper background for light/dark modes
- Add palette strip banner and floating close button in header
- Update shot cards with improved styling and separate label row
- Introduce ShotCopyEditor for inline headline/subtitle editing and regen
- Refine layout spacing, fonts, and button controls for clarity and consistency
- Remove floating close button in header, relocate close action to footer
- Compact header spacing and adjust typography for better visual hierarchy
- Update card aspect
- Persist per-shot copy and sourceScreenshot for stable edits
- Add domain logic to resolve effective headline and subtitle with fallbacks
- Support updating shot copy in AppShotsFlowManager with safe persistence
- Refactor UI to edit and apply shot-level headline/subtitle with live re-render
- Back-compat retry method now reuses applyShotChanges for consistency
- Move title and meta info into left section for clarity
- Replace uppercase category with styled text
- Add new close button with consistent styling
- Adjust button sizes and positioning for better UX
- Extend captured shot and generation request models with tagline and appName
- Update copy resolution logic to include new fields with proper fallback
- Persist and restore tagline and appName in store
- Add UI bindings and update shot editing to support tagline and appName
- Adjust layout to accommodate new fields in shot detail editor
The detail sheet now shows headline/subtitle/tagline/app name per shot,
which pushed the editor below the scroll area and clipped fields like
"App name". Bumping the per-shot vertical reservation keeps every field
visible at the sheet's minimum height.
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