Skip to content

Mobile-first responsive layout with bottom nav and drawer patterns#59

Merged
stylessh merged 1 commit intomainfrom
stylessh/mobile-bottom-bar
Apr 11, 2026
Merged

Mobile-first responsive layout with bottom nav and drawer patterns#59
stylessh merged 1 commit intomainfrom
stylessh/mobile-bottom-bar

Conversation

@stylessh
Copy link
Copy Markdown
Owner

Summary

  • Adds a native-style mobile bottom navigation bar (Overview, Pulls, Issues, Reviews, avatar) and hides desktop-only topbar controls on small screens
  • Detail tabs get mobile-friendly inline close buttons, PR/issue titles wrap instead of truncating, and page padding is tightened
  • Introduces Vaul drawer component — Dialog automatically renders as a swipe-to-dismiss bottom drawer below 768px
  • Review page: file sidebar opens as a bottom drawer, submit-review popover becomes a drawer, unified diff is forced on mobile
  • PR detail stats bar wraps naturally, timeline guide line is hidden, and preview button is desktop-only

Test plan

  • Verify bottom nav shows on mobile, hides on desktop
  • Test drawer behavior for dialogs, file tree, and submit review on mobile
  • Confirm desktop layout is unchanged
  • Check PR detail, pulls, issues, and reviews pages at various breakpoints

…patterns

- Add mobile bottom navigation bar with icon-only nav items and avatar
- Hide desktop-only controls (avatar menu, more button, nav items) on mobile
- Make detail tabs mobile-friendly: inline close button, hidden divider
- Wrap PR/issue titles on mobile instead of truncating
- Reduce page padding on mobile across pulls, issues, reviews, and detail pages
- Hide preview button and timeline guide line on mobile
- Make PR stats bar wrap naturally on small screens
- Add Vaul drawer component for native-feeling mobile interactions
- Convert Dialog to render as bottom drawer on mobile (<768px)
- Convert review page: file sidebar as drawer, submit review as drawer
- Force unified diff style on mobile by hiding split/unified toggle
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
diffkit 31c7fa2 Commit Preview URL

Branch Preview URL
Apr 11 2026, 01:44 AM

@stylessh stylessh merged commit a8c999a into main Apr 11, 2026
4 checks passed
@stylessh stylessh deleted the stylessh/mobile-bottom-bar branch April 11, 2026 01:45
stylessh added a commit that referenced this pull request Apr 11, 2026
* Misc UI improvements across dashboard (#55)

- Simplify OG titles to use PR title only (drop "PR #xxx" prefix)
- Extract dynamic tabs into dedicated DashboardTabs component with useScrollShadows hook
- Auto-scroll active tab into view on navigation and keyboard shortcuts
- Prefetch labels/reviewers/teams data on popover trigger hover
- Use icon-to-spinner swap pattern for all action CTAs (merge, update branch, save, submit review)
- Hide description dropdown when no actions are available

* Fix login redirect callback (#56)

* Improve activity feed with timeline events, OAuth auth, and paginated loading (#57)

- Add full timeline event rendering (labels, assignments, reviews, cross-references, state changes, milestones, draft state, renames) interleaved chronologically with comments and commits
- Switch user auth from GitHub App to classic OAuth App for proper scope support, enabling cross-reference visibility across public repos
- Paginate both comments and timeline events on demand instead of loading everything upfront
- Add windowed timeline rendering with progressive load-more for large activity feeds
- Create shared LabelPill component with size variants for consistent label rendering
- Handle GitHub App installation detection gracefully with OAuth tokens

* Misc UI improvements: merged banner, login page, markdown (#58)

* Misc UI changes: merged banner, login cleanup, markdown swap

- Add merged branch banner with delete branch CTA on PR detail page
- Add deleteBranch server function for GitHub API
- Simplify login page: remove features card, use product screenshot
- Switch markdown renderer from react-markdown to @m2d/react-markdown
- Fix participant avatars wrapping in detail sidebar
- Export Delete01Icon from icons package

* Format review-file-diff-block with consistent indentation

* Revert markdown renderer to react-markdown to fix CF build

The @m2d/react-markdown swap caused pnpm to resolve
@tanstack/react-start-rsc@0.0.1 which has a broken import
of @tanstack/start-plugin-core/utils, failing the CF Workers build.

* Switch markdown renderer to @m2d/react-markdown

Replaces react-markdown with @m2d/react-markdown for client-side
memoization. The previous lockfile resolution issue that pulled in
a broken @tanstack/react-start-rsc@0.0.1 is avoided by re-resolving
from a clean base.

* Add mobile-first responsive layout with native bottom nav and drawer patterns (#59)

- Add mobile bottom navigation bar with icon-only nav items and avatar
- Hide desktop-only controls (avatar menu, more button, nav items) on mobile
- Make detail tabs mobile-friendly: inline close button, hidden divider
- Wrap PR/issue titles on mobile instead of truncating
- Reduce page padding on mobile across pulls, issues, reviews, and detail pages
- Hide preview button and timeline guide line on mobile
- Make PR stats bar wrap naturally on small screens
- Add Vaul drawer component for native-feeling mobile interactions
- Convert Dialog to render as bottom drawer on mobile (<768px)
- Convert review page: file sidebar as drawer, submit review as drawer
- Force unified diff style on mobile by hiding split/unified toggle

* Implement hybrid GitHub App access (#60)

* Implement hybrid GitHub App access

* Normalize GitHub App private keys

* Use user auth for pull request bypass

* Check GitHub bypass rules for merges

* Add API-backed command palette search
stylessh added a commit that referenced this pull request Apr 11, 2026
* Misc UI improvements across dashboard (#55)

- Simplify OG titles to use PR title only (drop "PR #xxx" prefix)
- Extract dynamic tabs into dedicated DashboardTabs component with useScrollShadows hook
- Auto-scroll active tab into view on navigation and keyboard shortcuts
- Prefetch labels/reviewers/teams data on popover trigger hover
- Use icon-to-spinner swap pattern for all action CTAs (merge, update branch, save, submit review)
- Hide description dropdown when no actions are available

* Fix login redirect callback (#56)

* Improve activity feed with timeline events, OAuth auth, and paginated loading (#57)

- Add full timeline event rendering (labels, assignments, reviews, cross-references, state changes, milestones, draft state, renames) interleaved chronologically with comments and commits
- Switch user auth from GitHub App to classic OAuth App for proper scope support, enabling cross-reference visibility across public repos
- Paginate both comments and timeline events on demand instead of loading everything upfront
- Add windowed timeline rendering with progressive load-more for large activity feeds
- Create shared LabelPill component with size variants for consistent label rendering
- Handle GitHub App installation detection gracefully with OAuth tokens

* Misc UI improvements: merged banner, login page, markdown (#58)

* Misc UI changes: merged banner, login cleanup, markdown swap

- Add merged branch banner with delete branch CTA on PR detail page
- Add deleteBranch server function for GitHub API
- Simplify login page: remove features card, use product screenshot
- Switch markdown renderer from react-markdown to @m2d/react-markdown
- Fix participant avatars wrapping in detail sidebar
- Export Delete01Icon from icons package

* Format review-file-diff-block with consistent indentation

* Revert markdown renderer to react-markdown to fix CF build

The @m2d/react-markdown swap caused pnpm to resolve
@tanstack/react-start-rsc@0.0.1 which has a broken import
of @tanstack/start-plugin-core/utils, failing the CF Workers build.

* Switch markdown renderer to @m2d/react-markdown

Replaces react-markdown with @m2d/react-markdown for client-side
memoization. The previous lockfile resolution issue that pulled in
a broken @tanstack/react-start-rsc@0.0.1 is avoided by re-resolving
from a clean base.

* Add mobile-first responsive layout with native bottom nav and drawer patterns (#59)

- Add mobile bottom navigation bar with icon-only nav items and avatar
- Hide desktop-only controls (avatar menu, more button, nav items) on mobile
- Make detail tabs mobile-friendly: inline close button, hidden divider
- Wrap PR/issue titles on mobile instead of truncating
- Reduce page padding on mobile across pulls, issues, reviews, and detail pages
- Hide preview button and timeline guide line on mobile
- Make PR stats bar wrap naturally on small screens
- Add Vaul drawer component for native-feeling mobile interactions
- Convert Dialog to render as bottom drawer on mobile (<768px)
- Convert review page: file sidebar as drawer, submit review as drawer
- Force unified diff style on mobile by hiding split/unified toggle

* Implement hybrid GitHub App access (#60)

* Implement hybrid GitHub App access

* Normalize GitHub App private keys

* Use user auth for pull request bypass

* Check GitHub bypass rules for merges

* Fix merged PRs showing red closed icon in search-based views (#61)

The GitHub Search API returns merged_at inside pull_request sub-object,
not at the top level. Extract it before passing to mapPullSummary.

* Add search, sort, and filter system for pulls, issues, and reviews pages

Implement a reusable FilterBar component with instant text search, sort dropdown,
and Linear-style two-level filter pills (field picker → value picker) for
Repository, Author, and Status fields. Filter state persists via cookies
read server-side to avoid SSR flash.
stylessh added a commit that referenced this pull request Apr 18, 2026
* Misc UI improvements across dashboard (#55)

- Simplify OG titles to use PR title only (drop "PR #xxx" prefix)
- Extract dynamic tabs into dedicated DashboardTabs component with useScrollShadows hook
- Auto-scroll active tab into view on navigation and keyboard shortcuts
- Prefetch labels/reviewers/teams data on popover trigger hover
- Use icon-to-spinner swap pattern for all action CTAs (merge, update branch, save, submit review)
- Hide description dropdown when no actions are available

* Fix login redirect callback (#56)

* Improve activity feed with timeline events, OAuth auth, and paginated loading (#57)

- Add full timeline event rendering (labels, assignments, reviews, cross-references, state changes, milestones, draft state, renames) interleaved chronologically with comments and commits
- Switch user auth from GitHub App to classic OAuth App for proper scope support, enabling cross-reference visibility across public repos
- Paginate both comments and timeline events on demand instead of loading everything upfront
- Add windowed timeline rendering with progressive load-more for large activity feeds
- Create shared LabelPill component with size variants for consistent label rendering
- Handle GitHub App installation detection gracefully with OAuth tokens

* Misc UI improvements: merged banner, login page, markdown (#58)

* Misc UI changes: merged banner, login cleanup, markdown swap

- Add merged branch banner with delete branch CTA on PR detail page
- Add deleteBranch server function for GitHub API
- Simplify login page: remove features card, use product screenshot
- Switch markdown renderer from react-markdown to @m2d/react-markdown
- Fix participant avatars wrapping in detail sidebar
- Export Delete01Icon from icons package

* Format review-file-diff-block with consistent indentation

* Revert markdown renderer to react-markdown to fix CF build

The @m2d/react-markdown swap caused pnpm to resolve
@tanstack/react-start-rsc@0.0.1 which has a broken import
of @tanstack/start-plugin-core/utils, failing the CF Workers build.

* Switch markdown renderer to @m2d/react-markdown

Replaces react-markdown with @m2d/react-markdown for client-side
memoization. The previous lockfile resolution issue that pulled in
a broken @tanstack/react-start-rsc@0.0.1 is avoided by re-resolving
from a clean base.

* Add mobile-first responsive layout with native bottom nav and drawer patterns (#59)

- Add mobile bottom navigation bar with icon-only nav items and avatar
- Hide desktop-only controls (avatar menu, more button, nav items) on mobile
- Make detail tabs mobile-friendly: inline close button, hidden divider
- Wrap PR/issue titles on mobile instead of truncating
- Reduce page padding on mobile across pulls, issues, reviews, and detail pages
- Hide preview button and timeline guide line on mobile
- Make PR stats bar wrap naturally on small screens
- Add Vaul drawer component for native-feeling mobile interactions
- Convert Dialog to render as bottom drawer on mobile (<768px)
- Convert review page: file sidebar as drawer, submit review as drawer
- Force unified diff style on mobile by hiding split/unified toggle

* Implement hybrid GitHub App access (#60)

* Implement hybrid GitHub App access

* Normalize GitHub App private keys

* Use user auth for pull request bypass

* Check GitHub bypass rules for merges

* Add API-backed command palette search
stylessh added a commit that referenced this pull request Apr 18, 2026
* Misc UI improvements across dashboard (#55)

- Simplify OG titles to use PR title only (drop "PR #xxx" prefix)
- Extract dynamic tabs into dedicated DashboardTabs component with useScrollShadows hook
- Auto-scroll active tab into view on navigation and keyboard shortcuts
- Prefetch labels/reviewers/teams data on popover trigger hover
- Use icon-to-spinner swap pattern for all action CTAs (merge, update branch, save, submit review)
- Hide description dropdown when no actions are available

* Fix login redirect callback (#56)

* Improve activity feed with timeline events, OAuth auth, and paginated loading (#57)

- Add full timeline event rendering (labels, assignments, reviews, cross-references, state changes, milestones, draft state, renames) interleaved chronologically with comments and commits
- Switch user auth from GitHub App to classic OAuth App for proper scope support, enabling cross-reference visibility across public repos
- Paginate both comments and timeline events on demand instead of loading everything upfront
- Add windowed timeline rendering with progressive load-more for large activity feeds
- Create shared LabelPill component with size variants for consistent label rendering
- Handle GitHub App installation detection gracefully with OAuth tokens

* Misc UI improvements: merged banner, login page, markdown (#58)

* Misc UI changes: merged banner, login cleanup, markdown swap

- Add merged branch banner with delete branch CTA on PR detail page
- Add deleteBranch server function for GitHub API
- Simplify login page: remove features card, use product screenshot
- Switch markdown renderer from react-markdown to @m2d/react-markdown
- Fix participant avatars wrapping in detail sidebar
- Export Delete01Icon from icons package

* Format review-file-diff-block with consistent indentation

* Revert markdown renderer to react-markdown to fix CF build

The @m2d/react-markdown swap caused pnpm to resolve
@tanstack/react-start-rsc@0.0.1 which has a broken import
of @tanstack/start-plugin-core/utils, failing the CF Workers build.

* Switch markdown renderer to @m2d/react-markdown

Replaces react-markdown with @m2d/react-markdown for client-side
memoization. The previous lockfile resolution issue that pulled in
a broken @tanstack/react-start-rsc@0.0.1 is avoided by re-resolving
from a clean base.

* Add mobile-first responsive layout with native bottom nav and drawer patterns (#59)

- Add mobile bottom navigation bar with icon-only nav items and avatar
- Hide desktop-only controls (avatar menu, more button, nav items) on mobile
- Make detail tabs mobile-friendly: inline close button, hidden divider
- Wrap PR/issue titles on mobile instead of truncating
- Reduce page padding on mobile across pulls, issues, reviews, and detail pages
- Hide preview button and timeline guide line on mobile
- Make PR stats bar wrap naturally on small screens
- Add Vaul drawer component for native-feeling mobile interactions
- Convert Dialog to render as bottom drawer on mobile (<768px)
- Convert review page: file sidebar as drawer, submit review as drawer
- Force unified diff style on mobile by hiding split/unified toggle

* Implement hybrid GitHub App access (#60)

* Implement hybrid GitHub App access

* Normalize GitHub App private keys

* Use user auth for pull request bypass

* Check GitHub bypass rules for merges

* Fix merged PRs showing red closed icon in search-based views (#61)

The GitHub Search API returns merged_at inside pull_request sub-object,
not at the top level. Extract it before passing to mapPullSummary.

* Add search, sort, and filter system for pulls, issues, and reviews pages

Implement a reusable FilterBar component with instant text search, sort dropdown,
and Linear-style two-level filter pills (field picker → value picker) for
Repository, Author, and Status fields. Filter state persists via cookies
read server-side to avoid SSR flash.
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