grain.social
Grain#
The next version of Grain, a photo sharing app built on the AT Protocol.
Development#
npm install
npm run dev
Build#
npm run build
npm run preview
WIP PWA for Grain
next.grain.social
JavaScript
96.6%
Shell
2.6%
CSS
0.5%
HTML
0.3%
Other
0.1%
code
Clone this repository
https://tangled.org/grain.social/grain-pwa
git@tangled.org:grain.social/grain-pwa
For self-hosted knots, clone URLs may differ based on your setup.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Fixed header/bottom nav with scrollable outlet between them
- Flex layout through outlet → pages → feed-layout → pull-to-refresh
- Router saves/restores scroll position on outlet instead of window
- Pull-to-refresh fills available space for empty area triggering
- Update all pages for flex compatibility (align-self: center)
- Remove redundant 100vh/100dvh in favor of 100%
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Position comment sheet above bottom nav
- Find scroll container lazily on first touch instead of connectedCallback
- Simplify scroll container detection to just check overflow-y
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Find scrollable parent instead of using window.scrollY, which is
always 0 now that outlet is the scroll container. Prevents accidental
refresh triggers when scrolling up mid-content.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Change header from sticky to fixed positioning
- Make outlet the scroll container between header and bottom nav
- Remove redundant padding from feed-layout
- Scrollbar now starts below header for PWA feel
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
README.md