Improve drag/swipe handling and Features page UX
- SwipeTabs: Delay pointer capture until drag starts for better tap detection - Features: Only allow drag via handle dots, not entire card - Features: Smart hasOrderChanges - hide buttons when order returns to initial - Features: Don't apply dragging style until movement exceeds threshold - ThemeSettings: Add role="button" for accessibility on all option cards - Sidebar: Light theme active menu item styling improvements - Layout: Tab bar translucency and blur effects 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -95,8 +95,9 @@ export function SwipeTabs<T extends string | number>({
|
||||
const shouldIgnoreSwipe = useCallback((target: EventTarget | null) => {
|
||||
const element = resolveSwipeTarget(target);
|
||||
if (!element) return false;
|
||||
// Don't ignore role="button" - we handle tap vs swipe via delayed pointer capture
|
||||
if (element.closest(
|
||||
'[data-swipe-ignore="true"], button, a, input, select, textarea, [role="button"], [role="link"], [role="switch"], [contenteditable="true"]'
|
||||
'[data-swipe-ignore="true"], button, a, input, select, textarea, [role="link"], [role="switch"], [contenteditable="true"]'
|
||||
)) {
|
||||
return true;
|
||||
}
|
||||
@@ -287,6 +288,14 @@ export function SwipeTabs<T extends string | number>({
|
||||
state.isDragging = true;
|
||||
isDraggingRef.current = true;
|
||||
setDraggingClass(true);
|
||||
// Capture pointer now that drag has started
|
||||
if (state.pointerId !== null && containerRef.current?.setPointerCapture) {
|
||||
try {
|
||||
containerRef.current.setPointerCapture(state.pointerId);
|
||||
} catch {
|
||||
// Ignore capture failures
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (!state.isDragging) return;
|
||||
@@ -371,13 +380,8 @@ export function SwipeTabs<T extends string | number>({
|
||||
if (event.pointerType === 'mouse' && event.button !== 0) return;
|
||||
if (dragRef.current.isActive) return;
|
||||
startDrag(event.clientX, event.clientY, event.pointerId, null);
|
||||
if (containerRef.current?.setPointerCapture) {
|
||||
try {
|
||||
containerRef.current.setPointerCapture(event.pointerId);
|
||||
} catch {
|
||||
// Ignore pointer capture failures.
|
||||
}
|
||||
}
|
||||
// Don't capture pointer immediately - let taps work normally
|
||||
// Capture will happen in updateDrag when drag actually starts
|
||||
};
|
||||
|
||||
const handlePointerMove = (event: PointerEvent<HTMLDivElement>) => {
|
||||
|
||||
@@ -88,6 +88,17 @@ export default function Features() {
|
||||
return positions;
|
||||
}, [moduleStates]);
|
||||
|
||||
const hasChangesFromInitial = useCallback((nextOrder: string[], nextPositions: Record<string, 'top' | 'bottom'>) => {
|
||||
const initialOrder = initialOrderRef.current;
|
||||
const initialPositions = initialPositionsRef.current;
|
||||
if (nextOrder.length !== initialOrder.length) return true;
|
||||
if (nextOrder.some((id, index) => id !== initialOrder[index])) return true;
|
||||
for (const id of nextOrder) {
|
||||
if ((nextPositions[id] || 'top') !== (initialPositions[id] || 'top')) return true;
|
||||
}
|
||||
return false;
|
||||
}, []);
|
||||
|
||||
const beginOrderEdit = useCallback(() => {
|
||||
if (!isUserEditing.current) {
|
||||
const snapshotOrder = localOrder.length ? [...localOrder] : buildFullOrder(moduleOrder);
|
||||
@@ -294,9 +305,15 @@ export default function Features() {
|
||||
localPositionsRef.current = nextPositions;
|
||||
setLocalPositions(nextPositions);
|
||||
setLocalOrder(nextOrder);
|
||||
setHasOrderChanges(true);
|
||||
// Only show buttons if different from initial saved state
|
||||
const hasChanges = hasChangesFromInitial(nextOrder, nextPositions);
|
||||
setHasOrderChanges(hasChanges);
|
||||
// Reset editing state when order returns to initial
|
||||
if (!hasChanges) {
|
||||
isUserEditing.current = false;
|
||||
}
|
||||
}
|
||||
}, [buildFullOrder, buildPositionsFromStates, getInsertIndex, getSectionForY, moduleOrder]);
|
||||
}, [buildFullOrder, buildPositionsFromStates, getInsertIndex, getSectionForY, hasChangesFromInitial, moduleOrder]);
|
||||
|
||||
const handleOrderPointerMove = useCallback((event: React.PointerEvent<HTMLDivElement>) => {
|
||||
const dragState = dragPointerRef.current;
|
||||
@@ -363,7 +380,7 @@ export default function Features() {
|
||||
const handleOrderPointerDown = useCallback((event: React.PointerEvent<HTMLDivElement>, moduleId: string) => {
|
||||
if (event.pointerType === 'mouse' && event.button !== 0) return;
|
||||
beginOrderEdit();
|
||||
setDraggedItem(moduleId);
|
||||
// Don't set draggedItem here - only set it when drag actually starts (in handleOrderPointerMove)
|
||||
dragPointerRef.current.pointerId = event.pointerId;
|
||||
dragPointerRef.current.touchId = null;
|
||||
dragPointerRef.current.activeId = moduleId;
|
||||
@@ -432,7 +449,7 @@ export default function Features() {
|
||||
const handleOrderTouchStart = useCallback((event: React.TouchEvent<HTMLDivElement>, moduleId: string) => {
|
||||
if (event.changedTouches.length === 0) return;
|
||||
beginOrderEdit();
|
||||
setDraggedItem(moduleId);
|
||||
// Don't set draggedItem here - only set it when drag actually starts (in handleGlobalTouchMove)
|
||||
const touch = event.changedTouches[0];
|
||||
dragPointerRef.current.pointerId = null;
|
||||
dragPointerRef.current.touchId = touch.identifier;
|
||||
@@ -565,7 +582,6 @@ export default function Features() {
|
||||
</div>
|
||||
<div
|
||||
className="order-cards"
|
||||
data-swipe-ignore="true"
|
||||
ref={topOrderRef}
|
||||
>
|
||||
{topOrderModules.map((moduleId) => {
|
||||
@@ -576,11 +592,6 @@ export default function Features() {
|
||||
key={moduleId}
|
||||
className={`order-card ${draggedItem === moduleId ? 'dragging' : ''}`}
|
||||
data-module-id={moduleId}
|
||||
onPointerDown={supportsPointerEvents ? (e) => handleOrderPointerDown(e, moduleId) : undefined}
|
||||
onPointerMove={supportsPointerEvents ? handleOrderPointerMove : undefined}
|
||||
onPointerUp={supportsPointerEvents ? handleOrderPointerUp : undefined}
|
||||
onPointerCancel={supportsPointerEvents ? handleOrderPointerCancel : undefined}
|
||||
onTouchStart={!supportsPointerEvents ? (e) => handleOrderTouchStart(e, moduleId) : undefined}
|
||||
>
|
||||
<div className="order-card-preview">
|
||||
<span className="material-symbols-outlined">{moduleInfo.icon}</span>
|
||||
@@ -588,7 +599,15 @@ export default function Features() {
|
||||
<div className="order-card-info">
|
||||
<span className="order-card-name">{moduleName}</span>
|
||||
</div>
|
||||
<div className="order-card-handle">
|
||||
<div
|
||||
className="order-card-handle"
|
||||
data-swipe-ignore="true"
|
||||
onPointerDown={supportsPointerEvents ? (e) => handleOrderPointerDown(e, moduleId) : undefined}
|
||||
onPointerMove={supportsPointerEvents ? handleOrderPointerMove : undefined}
|
||||
onPointerUp={supportsPointerEvents ? handleOrderPointerUp : undefined}
|
||||
onPointerCancel={supportsPointerEvents ? handleOrderPointerCancel : undefined}
|
||||
onTouchStart={!supportsPointerEvents ? (e) => handleOrderTouchStart(e, moduleId) : undefined}
|
||||
>
|
||||
<span className="material-symbols-outlined">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -606,7 +625,6 @@ export default function Features() {
|
||||
</div>
|
||||
<div
|
||||
className="order-cards"
|
||||
data-swipe-ignore="true"
|
||||
ref={bottomOrderRef}
|
||||
>
|
||||
{bottomOrderModules.map((moduleId) => {
|
||||
@@ -617,11 +635,6 @@ export default function Features() {
|
||||
key={moduleId}
|
||||
className={`order-card ${draggedItem === moduleId ? 'dragging' : ''}`}
|
||||
data-module-id={moduleId}
|
||||
onPointerDown={supportsPointerEvents ? (e) => handleOrderPointerDown(e, moduleId) : undefined}
|
||||
onPointerMove={supportsPointerEvents ? handleOrderPointerMove : undefined}
|
||||
onPointerUp={supportsPointerEvents ? handleOrderPointerUp : undefined}
|
||||
onPointerCancel={supportsPointerEvents ? handleOrderPointerCancel : undefined}
|
||||
onTouchStart={!supportsPointerEvents ? (e) => handleOrderTouchStart(e, moduleId) : undefined}
|
||||
>
|
||||
<div className="order-card-preview">
|
||||
<span className="material-symbols-outlined">{moduleInfo.icon}</span>
|
||||
@@ -629,7 +642,15 @@ export default function Features() {
|
||||
<div className="order-card-info">
|
||||
<span className="order-card-name">{moduleName}</span>
|
||||
</div>
|
||||
<div className="order-card-handle">
|
||||
<div
|
||||
className="order-card-handle"
|
||||
data-swipe-ignore="true"
|
||||
onPointerDown={supportsPointerEvents ? (e) => handleOrderPointerDown(e, moduleId) : undefined}
|
||||
onPointerMove={supportsPointerEvents ? handleOrderPointerMove : undefined}
|
||||
onPointerUp={supportsPointerEvents ? handleOrderPointerUp : undefined}
|
||||
onPointerCancel={supportsPointerEvents ? handleOrderPointerCancel : undefined}
|
||||
onTouchStart={!supportsPointerEvents ? (e) => handleOrderTouchStart(e, moduleId) : undefined}
|
||||
>
|
||||
<span className="material-symbols-outlined">drag_indicator</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -291,8 +291,16 @@ export default function ThemeSettings() {
|
||||
{colors.map((color) => (
|
||||
<div
|
||||
key={color.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`color-card ${accentColor === color.id ? 'active' : ''}`}
|
||||
onClick={() => handleAccentColorChange(color.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleAccentColorChange(color.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="color-swatch-large" style={{ backgroundColor: color.value }}>
|
||||
{accentColor === color.id && (
|
||||
@@ -318,8 +326,16 @@ export default function ThemeSettings() {
|
||||
return (
|
||||
<div
|
||||
key={palette.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`palette-card ${colorPalette === palette.id ? 'active' : ''}`}
|
||||
onClick={() => handleColorPaletteChange(palette.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleColorPaletteChange(palette.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="palette-preview">
|
||||
<div className="palette-swatch-row">
|
||||
@@ -363,8 +379,16 @@ export default function ThemeSettings() {
|
||||
{radii.map((radius) => (
|
||||
<div
|
||||
key={radius.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`option-card ${borderRadius === radius.id ? 'active' : ''}`}
|
||||
onClick={() => handleBorderRadiusChange(radius.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleBorderRadiusChange(radius.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="option-preview">
|
||||
<div
|
||||
@@ -389,8 +413,16 @@ export default function ThemeSettings() {
|
||||
{sidebarStyles.map((style) => (
|
||||
<div
|
||||
key={style.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`option-card ${sidebarStyle === style.id ? 'active' : ''}`}
|
||||
onClick={() => handleSidebarStyleChange(style.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleSidebarStyleChange(style.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="option-preview">
|
||||
<div className={`sidebar-preview sidebar-preview-${style.id}`}>
|
||||
@@ -415,8 +447,16 @@ export default function ThemeSettings() {
|
||||
{sidebarModes.map((mode) => (
|
||||
<div
|
||||
key={mode.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`option-card ${sidebarMode === mode.id ? 'active' : ''}`}
|
||||
onClick={() => setSidebarMode(mode.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setSidebarMode(mode.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="option-preview">
|
||||
<div className={`sidebar-mode-preview sidebar-mode-${mode.id}`}>
|
||||
@@ -441,8 +481,16 @@ export default function ThemeSettings() {
|
||||
{densities.map((d) => (
|
||||
<div
|
||||
key={d.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`option-card ${density === d.id ? 'active' : ''}`}
|
||||
onClick={() => handleDensityChange(d.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleDensityChange(d.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="option-preview">
|
||||
<div className={`density-preview density-preview-${d.id}`}>
|
||||
@@ -468,8 +516,16 @@ export default function ThemeSettings() {
|
||||
{fonts.map((f) => (
|
||||
<div
|
||||
key={f.id}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
className={`option-card ${fontFamily === f.id ? 'active' : ''}`}
|
||||
onClick={() => handleFontFamilyChange(f.id)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
handleFontFamilyChange(f.id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div className="option-preview">
|
||||
<div className="font-preview" style={{ fontFamily: f.fontStyle }}>
|
||||
|
||||
@@ -2350,22 +2350,9 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
/* Admin Tab Tooltip - Mobile Only */
|
||||
/* Admin Tab Tooltip - Disabled on mobile */
|
||||
.admin-tab-tooltip {
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: calc(var(--tabs-height, 56px) + 8px);
|
||||
transform: translateX(-50%);
|
||||
background: var(--color-bg-elevated);
|
||||
color: var(--color-text-primary);
|
||||
padding: 6px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8rem;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
||||
border: 1px solid var(--color-border);
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -100,6 +100,14 @@ label,
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
|
||||
@supports (color: color-mix(in srgb, black, transparent)) {
|
||||
.page-tabs-slider,
|
||||
.admin-tabs-slider {
|
||||
background: color-mix(in srgb, var(--color-bg-elevated) 75%, transparent);
|
||||
backdrop-filter: blur(20px) saturate(1.15);
|
||||
}
|
||||
}
|
||||
|
||||
.page-tabs-slider::-webkit-scrollbar,
|
||||
.admin-tabs-slider::-webkit-scrollbar {
|
||||
display: none;
|
||||
@@ -791,7 +799,8 @@ label,
|
||||
@supports (color: color-mix(in srgb, black, white)) {
|
||||
[data-theme='dark'] .page-tabs-slider,
|
||||
[data-theme='dark'] .admin-tabs-slider {
|
||||
background: color-mix(in srgb, var(--color-bg-sidebar) 95%, transparent);
|
||||
background: color-mix(in srgb, var(--color-bg-sidebar) 72%, transparent);
|
||||
backdrop-filter: blur(24px) saturate(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -27,14 +27,14 @@
|
||||
|
||||
@supports (color: color-mix(in srgb, black, transparent)) {
|
||||
.sidebar {
|
||||
background: color-mix(in srgb, var(--color-bg-sidebar) 88%, transparent);
|
||||
background: color-mix(in srgb, var(--color-bg-sidebar) 72%, transparent);
|
||||
}
|
||||
|
||||
/* Avoid backdrop-filter on collapsed sidebar: it can break fixed-position dropdowns */
|
||||
/* Avoid backdrop-filter on collapsed sidebar: it breaks fixed-position dropdowns */
|
||||
.sidebar:not(.collapsed),
|
||||
.sidebar.dynamic.collapsed.expanded-force,
|
||||
.sidebar.open {
|
||||
backdrop-filter: blur(18px) saturate(1.15);
|
||||
backdrop-filter: blur(24px) saturate(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -666,10 +666,6 @@ button.nav-item {
|
||||
border-radius: var(--radius-lg);
|
||||
/* Rounded on mobile */
|
||||
margin: 0;
|
||||
background: var(--color-bg-sidebar);
|
||||
/* Use theme color */
|
||||
backdrop-filter: blur(12px);
|
||||
/* Blur effect */
|
||||
border: 1px solid var(--color-sidebar-border);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
@@ -1027,7 +1023,7 @@ button.nav-item {
|
||||
border-radius: var(--radius-md);
|
||||
transition: all 0.2s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border: 1px solid transparent;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
@@ -1059,10 +1055,17 @@ button.nav-item {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* Light theme: make active menu item more visible */
|
||||
[data-theme='light'] .user-menu-item.active {
|
||||
background: rgba(var(--color-accent-rgb), 0.15);
|
||||
border: 1px solid rgba(var(--color-accent-rgb), 0.25);
|
||||
}
|
||||
|
||||
/* Auto accent override for active menu item */
|
||||
[data-accent='auto'] .user-menu-item.active {
|
||||
background: #f3f4f6;
|
||||
color: #111827;
|
||||
border: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
[data-accent='auto'] .user-menu-item.active .material-symbols-outlined {
|
||||
|
||||
Reference in New Issue
Block a user