Samuel Newman
d13df6c7e6
* 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>
Bluesky Social App
Welcome friends! This is the codebase for the Bluesky Social app.
Get the app itself:
- Web: bsky.app
- iOS: App Store
- Android: Play Store
Development Resources
This is a React Native application, written in the TypeScript programming language. It builds on the atproto TypeScript packages (like @atproto/api), which are also open source, but in a different git repository.
There is a small amount of Go language source code (in ./bskyweb/), for a web service that returns the React Native Web application.
The Build Instructions are a good place to get started with the app itself.
The Authenticated Transfer Protocol ("AT Protocol" or "atproto") is a decentralized social media protocol. You don't need to understand AT Protocol to work with this application, but it can help. Learn more at:
- Overview and Guides
- GitHub Discussions 👈 Great place to ask questions
- Protocol Specifications
- Blogpost on self-authenticating data structures
The Bluesky Social application encompasses a set of schemas and APIs built in the overall AT Protocol framework. The namespace for these "Lexicons" is app.bsky.*.
Contributions
Note
While we do accept contributions, we prioritize high quality issues and pull requests. Adhering to the below guidelines will ensure a more timely review.
Rules:
- We may not respond to your issue or PR.
- We may close an issue or PR without much feedback.
- We may lock discussions or contributions if our attention is getting DDOSed.
- We're not going to provide support for build issues.
Guidelines:
- Check for existing issues before filing a new one please.
- Open an issue and give some time for discussion before submitting a PR.
- Stay away from PRs like...
- Changing "Post" to "Skeet."
- Refactoring the codebase, e.g., to replace React Query with Redux Toolkit or something.
- Adding entirely new features without prior discussion.
Remember, we serve a wide community of users. Our day-to-day involves us constantly asking "which top priority is our top priority." If you submit well-written PRs that solve problems concisely, that's an awesome contribution. Otherwise, as much as we'd love to accept your ideas and contributions, we really don't have the bandwidth. That's what forking is for!
Forking guidelines
You have our blessing 🪄✨ to fork this application! However, it's very important to be clear to users when you're giving them a fork.
Please be sure to:
- Change all branding in the repository and UI to clearly differentiate from Bluesky.
- Change any support links (feedback, email, terms of service, etc) to your own systems.
- Replace any analytics or error-collection systems with your own so we don't get super confused.
Security disclosures
If you discover any security issues, please send an email to security@bsky.app. The email is automatically CC'd to the entire team and we'll respond promptly.
Are you a developer interested in building on atproto?
Bluesky is an open social network built on the AT Protocol, a flexible technology that will never lock developers out of the ecosystems that they help build. With atproto, third-party integration can be as seamless as first-party through custom feeds, federated services, clients, and more.
License (MIT)
See ./LICENSE for the full license.
Bluesky Social PBC has committed to a software patent non-aggression pledge. For details see the original announcement.
P.S.
We ❤️ you and all of the ways you support us. Thank you for making Bluesky a great place!