Repository navigation
feat(web): add mobile sidebar swipe actions #9153
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Closed
Pearcekieser
wants to merge
7
commits into
pingdotgg:main
from
Pearcekieser:feat/mobile-sidebar-swipe-actions
+691
−214
Closed
Changes from 3 commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
9f33a30
feat(web): add mobile sidebar swipe actions
Pearcekieser 1ff9807
fix(web): isolate sidebar swipe gestures
Pearcekieser 453ea94
fix(web): align sidebar swipe surfaces
Pearcekieser f55b7e9
fix(web): preserve sidebar row hover surfaces
Pearcekieser bf09922
fix(web): keep sidebar swipe ownership scoped
Pearcekieser 11f16a5
docs(web): clarify conditional swipe actions
Pearcekieser 0d21380
fix(web): honor sidebar motion preferences
Pearcekieser File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { describe, expect, it } from "vite-plus/test"; | ||
|
|
||
| import { | ||
| clampSidebarSwipeOffset, | ||
| resolveSidebarSwipeIntent, | ||
| shouldOpenSidebarSwipe, | ||
| } from "./Sidebar.swipe"; | ||
|
|
||
| describe("resolveSidebarSwipeIntent", () => { | ||
| it("waits for enough movement before claiming a gesture", () => { | ||
| expect(resolveSidebarSwipeIntent(-7, 0)).toBe("pending"); | ||
| expect(resolveSidebarSwipeIntent(3, 7)).toBe("pending"); | ||
| }); | ||
|
|
||
| it("claims only clearly horizontal movement", () => { | ||
| expect(resolveSidebarSwipeIntent(-30, 8)).toBe("horizontal"); | ||
| expect(resolveSidebarSwipeIntent(-20, 18)).toBe("vertical"); | ||
| }); | ||
|
|
||
| it("keeps vertical scroll gestures vertical", () => { | ||
| expect(resolveSidebarSwipeIntent(2, 20)).toBe("vertical"); | ||
| expect(resolveSidebarSwipeIntent(-8, 30)).toBe("vertical"); | ||
| }); | ||
| }); | ||
|
|
||
| describe("clampSidebarSwipeOffset", () => { | ||
| it("reveals left-side movement without changing row geometry", () => { | ||
| expect(clampSidebarSwipeOffset({ originOffset: 0, deltaX: -60, revealWidth: 216 })).toBe(-60); | ||
| }); | ||
|
|
||
| it("does not drag beyond the tray or past the closed position", () => { | ||
| expect(clampSidebarSwipeOffset({ originOffset: 0, deltaX: -300, revealWidth: 216 })).toBe(-216); | ||
| expect(clampSidebarSwipeOffset({ originOffset: -216, deltaX: 300, revealWidth: 216 })).toBe(0); | ||
| }); | ||
| }); | ||
|
|
||
| describe("shouldOpenSidebarSwipe", () => { | ||
| it("opens after a deliberate reveal and otherwise settles closed", () => { | ||
| expect(shouldOpenSidebarSwipe({ offset: -76, revealWidth: 216 })).toBe(true); | ||
| expect(shouldOpenSidebarSwipe({ offset: -75, revealWidth: 216 })).toBe(false); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| export const SIDEBAR_SWIPE_ACTION_WIDTH = 72; | ||
|
|
||
| const SWIPE_INTENT_DISTANCE = 8; | ||
| const HORIZONTAL_INTENT_RATIO = 1.25; | ||
|
|
||
| export type SidebarSwipeIntent = "pending" | "horizontal" | "vertical"; | ||
|
|
||
| /** | ||
| * Bias ambiguous gestures toward vertical scrolling. A row only takes over | ||
| * once the finger has moved clearly farther sideways than up or down. | ||
| */ | ||
| export function resolveSidebarSwipeIntent(deltaX: number, deltaY: number): SidebarSwipeIntent { | ||
| const horizontalDistance = Math.abs(deltaX); | ||
| const verticalDistance = Math.abs(deltaY); | ||
| if (Math.max(horizontalDistance, verticalDistance) < SWIPE_INTENT_DISTANCE) return "pending"; | ||
| return horizontalDistance > verticalDistance * HORIZONTAL_INTENT_RATIO | ||
| ? "horizontal" | ||
| : "vertical"; | ||
| } | ||
|
|
||
| export function clampSidebarSwipeOffset(input: { | ||
| originOffset: number; | ||
| deltaX: number; | ||
| revealWidth: number; | ||
| }): number { | ||
| const { originOffset, deltaX, revealWidth } = input; | ||
| return Math.min(0, Math.max(-revealWidth, originOffset + deltaX)); | ||
| } | ||
|
|
||
| /** A short deliberate pull opens the tray; a mostly closed row stays closed. */ | ||
| export function shouldOpenSidebarSwipe(input: { offset: number; revealWidth: number }): boolean { | ||
| return input.offset <= -input.revealWidth * 0.35; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| import { cn } from "~/lib/utils"; | ||
| import type { SnoozePreset } from "./Sidebar.snooze"; | ||
| import { PopoverPopup } from "./ui/popover"; | ||
|
|
||
| export function SidebarSnoozePresetList(props: { | ||
| presets: ReadonlyArray<SnoozePreset>; | ||
| rowSize?: "compact" | "touch"; | ||
| onSelect: (preset: SnoozePreset) => void; | ||
| }) { | ||
| return ( | ||
| <PopoverPopup side="bottom" align="end" className="w-56" viewportClassName="p-1"> | ||
| {props.presets.map((preset) => ( | ||
| <button | ||
| key={preset.id} | ||
| type="button" | ||
| onClick={(event) => { | ||
| event.stopPropagation(); | ||
| props.onSelect(preset); | ||
| }} | ||
| className={cn( | ||
| "flex w-full cursor-pointer items-center gap-2 rounded-md px-2 text-left text-xs text-foreground/90 hover:bg-accent hover:text-foreground", | ||
| props.rowSize === "touch" ? "py-2" : "py-1.5", | ||
| )} | ||
| > | ||
| <span className="flex-1">{preset.label}</span> | ||
| <span className="font-mono text-[10px] text-muted-foreground/60 tabular-nums"> | ||
| {preset.whenLabel} | ||
| </span> | ||
| </button> | ||
| ))} | ||
| </PopoverPopup> | ||
| ); | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.