* set presentation field in record
* refer to it as a gif in the composer
* video player gif presentation style
* tweak badge
* only do the "manual loop" when absolutely necessary
* mute gifs
* reuse gif controls component for tenor gifs
* update media previews in notifications
* edit comment
* remove outdated prop
* delete media from existsCache when deleting
* revoke media URLs
* skip revoking objecturls until the composer is completely closed
* [Drafts] Metrics (#9794)
* metrics for drafts
* Nit: format
* nit: use new util for clarity
* nit: use new util for clarity
---------
Co-authored-by: Eric Bailey <git@esb.lol>
---------
Co-authored-by: Eric Bailey <git@esb.lol>
* Add drafts functionality to composer
- Add local storage layer for drafts (filesystem on native, IndexedDB on web)
- Add "Drafts" button to composer top bar showing badge with draft count
- Modify discard prompt to offer "Save Draft" option
- Add `restore_from_draft` action to composer reducer
- Support saving/restoring: text, facets, images, labels, threadgate, quote/link embeds
- Add placeholder hooks for future server API integration
- Add unit tests for draft serialization
Note: Video/GIF restoration marked as TODO for future implementation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix drafts button: always visible, adjacent to post button
- Make drafts button always visible (not just when drafts exist)
- Move button to be adjacent to the publish button
- If composer is empty: opens drafts list directly
- If composer has content: shows prompt to save/discard before viewing drafts
- Add badge showing draft count when drafts exist
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Update drafts button: text-only, ghost/primary style
- Show "Drafts" or "Drafts (N)" as text, no icon
- Use ghost variant with primary color
- Match Cancel button styling
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Remove draft count from button, just show "Drafts"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Increase drafts button horizontal padding and gap
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Use InnerFlatList and Dialog.Header for drafts dialog
- Switch from ScrollableInner to InnerFlatList
- Add Dialog.Header with back button in left slot
- Use sticky header
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Track draft ID in composer state machine
Adds draftId to ComposerState so that editing an existing draft and
saving it again updates the draft rather than creating a new one.
- Add draftId?: string to ComposerState type
- Set draftId when restoring from draft via restore_from_draft action
- Pass existingDraftId to save functions from composerState.draftId
- Add PageX icon for empty drafts state
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Add clear action to discard composer content
When pressing the Drafts button with content in the composer, the user
can choose to discard. This now properly clears the composer by
dispatching a 'clear' action that resets to an empty state.
- Add 'clear' action type to ComposerAction
- Implement clear case in composerReducer (resets to single empty post)
- Add handleClearComposer callback in Composer.tsx
- Pass onDiscard prop through ComposerTopBar to DraftsButton
- Call onDiscard before opening drafts dialog on discard
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Track dirty state to skip discard prompt for unchanged drafts
When a draft is loaded and the user hasn't made any changes, closing
the composer should not show the discard prompt since nothing would
be lost.
- Add isDirty field to ComposerState
- Set isDirty: true on all content-modifying actions
- Set isDirty: false on restore_from_draft, clear, and initial state
- Update onPressCancel to only show prompt if no draft or isDirty
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Redesign drafts list to show full thread preview
- Display all posts in a draft thread, not just the first
- First post uses larger avatar (42px), subsequent posts nested with
smaller avatar (32px) and thread connector line
- Show author avatar, display name, handle, and relative timestamp
- Add overflow menu button (placeholder) on first post
- Display full text instead of truncated preview
- Add media preview component for images, GIFs, and videos
- Card layout with rounded corners and proper spacing
- Add gap separators between draft cards in list
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix draft item styling based on feedback
- Add border and shadow to draft cards
- Remove trash button, move delete to overflow menu prompt
- Remove size differences for thread posts (same avatar/text size)
- Add spacing between header and first draft item
- Change prompt wording to "Discard draft"
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Use real image embed components for draft preview
Replace custom image preview with AutoSizedImage for single images
and ImageLayoutGrid for multiple images. This gives drafts the same
polished image display as regular posts.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Improve drafts dialog platform handling
- Render header outside FlatList on native, inside on web
- Use web() helper for conditional web-only props
- Replace ItemSeparatorComponent with mt_lg margin on items
- Add minHeight on web for better dialog sizing
- Simplify header structure
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Mark composer as clean after saving draft
Add mark_saved action that resets isDirty to false and updates the
draftId. This is dispatched after successfully saving a draft, allowing
the user to close the composer without a discard prompt since their
changes have been saved.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Apply dirty tracking to Drafts button prompt
Only show the save/discard prompt when pressing the Drafts button if
the composer has unsaved changes (isDirty). If the content is unchanged
from a loaded draft or was just saved, go directly to the drafts list.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix re-saving drafts with existing media
When re-saving a draft, the code was trying to copy media files that
were already in drafts storage to new locations, causing copy errors.
Changes:
- Add extractLocalIdFromPath() to detect if a path is already in drafts
- Track loadedMediaMap in ComposerState for identifying reusable media
- Only delete old media that wasn't reused during re-save
- Pass loadedMediaMap when saving to enable media reuse detection
- Disable pointer events on draft media preview
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* add vertical option to prompt, change copy
* fix import
* fix import
* Migrate drafts from local storage to server API
Replace local-only draft storage with the new `app.bsky.draft.*` server API:
- getDrafts, createDraft, updateDraft, deleteDraft endpoints
Key changes:
- Add api.ts with type converters (ComposerState <-> server Draft)
- Update hooks.ts to use server API instead of local storage
- Simplify storage.ts/storage.web.ts for local media caching only
- Media stored locally via localRef pattern (filepath in server draft)
- GIFs stored as external embeds with Tenor URL + dimensions
- Hide drafts button when replying (reply drafts not supported)
- Show "different device" note when media is missing locally
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* attempt to fix blob mangement
* Migrate storage.ts from expo-file-system/legacy to expo-file-system
Use the new object-based expo-file-system API (SDK 54+) with Directory
and File classes instead of the legacy function-based API. The new API
provides synchronous operations for file/directory existence checks,
creation, copying, deletion, and listing.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* feat: add drafts-specific logger
Add a Drafts context to the logger system for better log categorization
and debugging of draft-related operations.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* refactor: use drafts-specific logger in hooks and storage
Switch from the generic logger to the new drafts-specific logger
for better log categorization.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: ensure media cache is populated before checking exists
On iOS (and web), the media cache wasn't populated before the drafts
query ran, causing drafts with local media to incorrectly show as
"missing media" on app restart. The issue would resolve itself after
closing and reopening the composer because by then the cache was ready.
This fix adds ensureMediaCachePopulated() and awaits it in useDrafts
before checking which media exists locally.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: complete Gif object reconstruction for draft rehydration
Fix "Cannot read property 'url' of undefined" error when rehydrating
drafts with GIFs. The Gif object was missing required properties like
url, content_description, and media_formats.preview that are needed
by useResolveGifQuery and other components.
Also preserve alt text through serialization by storing it in URL
query params alongside dimensions.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: load draft preview images and get dimensions
Fix draft preview images not showing on web and add proper aspect
ratio support:
1. Try to load all images regardless of the exists cache flag, which
may be stale due to async cache population timing
2. Use Image.loadAsync() from expo-image to get image dimensions
3. Pass dimensions to viewImages for proper aspect ratio in previews
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: update save prompt copy when editing existing draft
When editing an existing draft (vs creating a new one), use "Save
changes" instead of "Save draft" in the save/discard prompts. This
provides clearer context to the user about what action they're taking.
Add isEditingDraft prop to DraftsButton and ComposerTopBar, and
update both prompts (in DraftsButton and Composer) with conditional
copy based on whether we're editing an existing draft.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* style: add bottom padding to drafts list
Add pb_xl padding to the drafts list content container for better
visual spacing at the bottom of the list.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* refactor: use typed error check for draft limit
Replace manual error object inspection with the proper
AppBskyDraftCreateDraft.DraftLimitReachedError type check for
cleaner and more reliable error handling.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* make storage functions async to match web
* log unknown errors
* delete left-over file
* move state to colo with composer
* fix: handle invalid GIF dimensions gracefully
Fix NaN aspectRatio when rehydrating GIFs from drafts by:
1. Adding validation in parseTenorGif to reject invalid dimensions
(NaN, zero, or negative values)
2. Adding defensive checks in GifEmbed to fallback to 1:1 aspect
ratio if dimensions are invalid
3. Adding defensive checks in composer ExternalEmbedGif to fallback
to 16:9 if gif.media_formats.gif.dims is missing or invalid
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix: prevent double query string in GIF draft hydration
When loading a GIF from a draft, the URL was being corrupted with
double query strings like:
`?ww=498&hh=498?hh=498&ww=498`
This happened because:
1. serializeGif() adds ?ww=X&hh=Y&alt=Z to the Tenor URL
2. parseGifFromUrl() returned the full URL including our params
3. resolveGif() in resolve.ts then appends MORE params via string
concatenation, creating a second ?
Fix: Strip our custom params (ww, hh, alt) from the URL in
parseGifFromUrl() before returning it, so the reconstructed GIF
has a clean base URL.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix draft button behaviour when publishing, tweak buttons
* ensure media unavaiable message is contrasty enough
* infinite query, rename file to queries
* simplify threadgate/postgate handling
* refactor: pass full draft data instead of re-fetching
The useLoadDraft and useDeleteDraftMutation hooks were fetching drafts
via getDrafts() to look up a draft by ID. This was problematic because
getDrafts is paginated, so drafts not on the first page wouldn't be
found.
Changes:
- Add full Draft object to DraftSummary type
- useLoadDraft now takes Draft directly (only loads local media)
- useDeleteDraftMutation now takes {draftId, draft} to avoid re-fetch
- Update DraftItem and DraftsListDialog to pass full draft data
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* fix type errors
* docs: add notes on platform files and paginated APIs
- Platform-specific files (.web.ts, .native.ts) are resolved by the
bundler automatically - just import normally, don't use require()
- Paginated APIs should use useInfiniteQuery, not useQuery
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* More CLAUDE.md updates
* Delete PLAN.md
* Use minimal media mode for draft display - REVERT IF NEEDED
* Enable pagination
* Add comment about headers
* remove extraneous comments
* Prevent runaway pagination
* fix detection rebase change
* use border_transparent
* Replace idb with idb-keyval for draft media storage
Simplifies web IndexedDB storage by using idb-keyval instead of the
full idb library. This reduces bundle size and aligns with the pattern
used in src/storage/archive/db/index.web.ts.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* Fix native draft media filename encoding
The previous approach replaced both / and : with _, but the reverse
transformation couldn't distinguish between them. This caused cache
misses for paths containing both characters.
Use encodeURIComponent/decodeURIComponent for a proper reversible
encoding.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* convert useLoadDraft() hook to regular async function
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
* update atproto api
* clean up orphaned media
* restore videos
* save/restore captions
* restore postgates
* Copy updates from Darrin
* Ope fix missed vertical props
* get image aspect ratio when restoring
* get videos working on native
* get video restoration working on native
* sanitize handles properly in draftitem
* fix yarn.lock
* Swap console logs
---------
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Eric Bailey <git@esb.lol>
* Integrate Sonner for toasts
* Fix animation on iOS
* Refactor API
* Update e2e file
* [APP-1318] Post composer: combine image & video buttons (#8710)
* add: select media btn
* udpate: compose post with combined image and video support
* add: video combine button with edge cases
* add select media btn
* test: select media btn
* add: media button update
* remove unused files and update toast on android
* update: make strings shorter
* add: ValidatedVideoAsset type
* update link comments and add toast support for native and web
* rebase latest toast and update toast structure
* remove unused prop
* fix types
* undo changes to yarn.lock
* remove: support for mkv files
* update: eslint and prettier
(cherry picked from commit f69779ee130f07e1c49219b53117e3bdd1a9f81b)
* Add missing props to launchImageLibraryAsync
(cherry picked from commit 2e80ae561fd66850f787cac0aae0fa5a6980f8f5)
* Rough out new approach
(cherry picked from commit 9add225160e7e407befc73e9cdd9743a30cdf1cd)
* Comments and cleanup
(cherry picked from commit e69bd186e7335372f440c446ae6643ed0fb15db9)
* Handle native case
(cherry picked from commit 74e38acdfd9181d0557426691fcbcbf0800481ca)
* Refactor
(cherry picked from commit 68aea496db8df54dba5f58da267ad962c28ef995)
* Rename
(cherry picked from commit 8609e59ad14219e7378ee6cb9514d633ce7efc27)
* Cleanup, comments
(cherry picked from commit 6c9c98648e37257285a9c8caeb1eadcc56c81402)
* Rename
(cherry picked from commit 66e3db539d5baa41436c9e49af06e87a78e9e7e1)
* Handle selectionLimit on Android
(cherry picked from commit 251f06dd5e65a7083b810bad3d81114b2fe9ab39)
* create composer images in parallel
(cherry picked from commit 70ea79d9d76d99e9c99a7d2296caed84c718650e)
* Update toast API usage
(cherry picked from commit e370018b8ed8cdfd7675c9634058c72cb59d39de)
* Ensure once one type of media is selected, you can only select more of that type
(cherry picked from commit 1a9e6e0cdb5234667f08e3dd9107ae598941fc23)
* Remove TODO and debug code
* Add more descriptive a11y label to button
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Add back post success toast
* Include mimeType in toast error
* Remove unneeded toast
* Clarify hint
* Typo
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* allow gifs on native, just treat as images
* disable haptic toast
* allow gifs on native, treat as videos
* only do keyboard dismiss on native
* tweak pasting logic
* hide web scrubber in certain situations
* Update MaxImages translation
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* Add plural formatting to a11y hint translation
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
* fix suggestion
* Protect against no valid assets selected
* Handle conversion of too-big assets on web
* Reorder
* Bump expo-image-picker to include bug/perf improvements
See https://github.com/expo/expo/blob/main/packages/expo-image-picker/CHANGELOG.md#1700--2025-08-13
* Handle edge case validations
* Ok actually bump expo-image-picker
* Comment
* HEIC support Android
* Fix handling for new picker version, improve size validation
* Remove getVideoMetadata handling, no longer needed
* Handle web video duration
* Update src/view/com/composer/SelectMediaButton.tsx
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
---------
Co-authored-by: Anastasiya Uraleva <anastasiyauraleva@gmail.com>
Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>
Co-authored-by: Samuel Newman <mozzius@protonmail.com>
* radix select component on web
* native implementation (wip)
* fix sheet height/padding
* tone down web styles
* react 19 cleanup
* replace primary language select
* change style on native
* get auto placeholder working
* more style tweaks
* replace app language dropdown
* replace rnpickerselect with native select
* rm react-native-picker-select dependency
* rm placeholder, since a value is always selected
* docblock for renderItem
* add more docblocks
* add style prop to item
* pass selectedValue through renderItem
* fix context
* Style overflow buttons
---------
Co-authored-by: Eric Bailey <git@esb.lol>
* update eslint config with jsx runtime
* leverage jsx transform to remove unnecessary react imports and update eslint config
* run yarn lint --fix to remove eslint disables related to react/prop-types that is now disabled
* Basic adding of posts
* Switch active post on focus
* Conditionally show plus button
* Insert posts midthread
* Track active/inactive post
* Delete posts in a thread
* Focus after deletion
* Tweak empty post detection
* Mix height for active only
* Move toolbar with post on web
* Fix footer positioning
* Post All button
* Fix reply to positioning
* Improve memoization
* Improve memoization for clearVideo
* Remove unnecessary argument
* Add some manual memoization to fix re-renders
* Scroll to bottom on add new
* Fix opacity on Android
* Add backdrop
* Fix videos
* Check alt for video too
* Clear pending publish on error
* Fork alt message by type
* Separate placeholder for next posts
* Limit hitslop to avoid clashes
* Remove unused video field
* Stop exposing video dispatch
* Move cancellation out of the reducer
* Make useUploadStatusQuery controlled by jobId
* Rename SetStatus to SetProcessing
This action only has one callsite and it's always passing "processing".
* Move jobId into video reducer state
* Make cancellation scoped
* Inline useCompressVideoMutation
* Move processVideo down the file
* Extract getErrorMessage
* useServiceAuthToken -> getServiceAuthToken
* useVideoAgent -> createVideoAgent
* useVideoUploadLimits -> getVideoUploadLimits
* useUploadVideoMutation -> uploadVideo
* Use async/await in processVideo
* Inline onVideoCompressed into processVideo
* Use async/await for uploadVideo
* Factor out error messages
* Guard dispatch with signal
This lets us remove the scattered signal checks around dispatch.
* Move job polling out of RQ
* Handle poll failures
* Remove unnecessary guards
* Slightly more accurate condition
* Move initVideoUri handling out of the hook
* Remove dead argument
It wasn't being used before either.
* Remove unused detailed status
This isn't being used because we're only respecting that state variable when isProcessing=true, but isProcessing is always false during video upload.
If we want to re-add this later, it should really just be derived from the reducer state.
* Harden the video reducer
* Tie all spawned work to a signal
* Preserve asset/media for nicer error state
* Rename actions to match states
* Inline useUploadVideo
This abstraction is getting in the way of some future work.
* Move MIME check to the only place that handles it
* DRY up video service auth code
* throw error if over upload limits
* use token
* xmark on toast
* errors with nice translatable error messages
* Update src/state/queries/video/video.ts
---------
Co-authored-by: Hailey <me@haileyok.com>
Samuel Newman