ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: replace native select elements with custom Select component for improved styling and functionality in replays and settings pages

Browse Source
This commit is contained in:
Usman Baig
2026-01-19 14:28:26 +01:00
parent a649c850ca
commit 7c99602629
3 changed files with 111 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
app/sites/[id]/replays/page.tsx
View File

@@ -7,6 +7,7 @@ import { listReplays, formatDuration, type ReplayListItem, type ReplayFilters }
import { toast } from 'sonner'
import { LockClosedIcon } from '@radix-ui/react-icons'
import LoadingOverlay from '@/components/LoadingOverlay'
import Select from '@/components/ui/Select'
function formatDate(dateString: string) {
const date = new Date(dateString)
@@ -128,28 +129,28 @@ export default function ReplaysPage() {
{/* Filters */}
<div className="mb-6 flex gap-4 flex-wrap">
<select
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
value={filters.device_type || ''}
onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))}
>
<option value="">All Devices</option>
<option value="desktop">Desktop</option>
<option value="mobile">Mobile</option>
<option value="tablet">Tablet</option>
</select>
<Select
value={filters.device_type ?? ''}
onChange={(v) => setFilters((prev) => ({ ...prev, device_type: v || undefined, offset: 0 }))}
options={[
{ value: '', label: 'All Devices' },
{ value: 'desktop', label: 'Desktop' },
{ value: 'mobile', label: 'Mobile' },
{ value: 'tablet', label: 'Tablet' },
]}
/>
<select
className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
value={filters.min_duration || ''}
onChange={(e) => setFilters(prev => ({ ...prev, min_duration: e.target.value ? parseInt(e.target.value) : undefined, offset: 0 }))}
>
<option value="">Any Duration</option>
<option value="5000">5s+</option>
<option value="30000">30s+</option>
<option value="60000">1m+</option>
<option value="300000">5m+</option>
</select>
<Select
value={filters.min_duration ? String(filters.min_duration) : ''}
onChange={(v) => setFilters((prev) => ({ ...prev, min_duration: v ? parseInt(v, 10) : undefined, offset: 0 }))}
options={[
{ value: '', label: 'Any Duration' },
{ value: '5000', label: '5s+' },
{ value: '30000', label: '30s+' },
{ value: '60000', label: '1m+' },
{ value: '300000', label: '5m+' },
]}
/>
</div>
{/* Replays List */}

90
app/sites/[id]/settings/page.tsx
View File

@@ -8,6 +8,7 @@ import { toast } from 'sonner'
import LoadingOverlay from '@/components/LoadingOverlay'
import VerificationModal from '@/components/sites/VerificationModal'
import PasswordInput from '@/components/PasswordInput'
import Select from '@/components/ui/Select'
import { APP_URL, API_URL } from '@/lib/api/client'
import { motion, AnimatePresence } from 'framer-motion'
import {
@@ -305,26 +306,15 @@ export default function SiteSettingsPage() {
<label htmlFor="timezone" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
Timezone
</label>
<div className="relative">
<select
id="timezone"
value={formData.timezone}
onChange={(e) => setFormData({ ...formData, timezone: e.target.value })}
className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-neutral-50/50 dark:bg-neutral-900/50 focus:bg-white dark:focus:bg-neutral-900
focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white appearance-none"
>
{TIMEZONES.map((tz) => (
<option key={tz} value={tz}>
{tz}
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
<svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
<Select
id="timezone"
value={formData.timezone}
onChange={(v) => setFormData({ ...formData, timezone: v })}
options={TIMEZONES.map((tz) => ({ value: tz, label: tz }))}
variant="input"
fullWidth
align="left"
/>
</div>
<div className="space-y-1.5">
@@ -649,22 +639,18 @@ export default function SiteSettingsPage() {
Control location tracking granularity
</p>
</div>
<div className="relative">
<select
value={formData.collect_geo_data}
onChange={(e) => setFormData({ ...formData, collect_geo_data: e.target.value as GeoDataLevel })}
className="px-4 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white text-sm font-medium appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange"
>
<option value="full">Full (country, region, city)</option>
<option value="country">Country only</option>
<option value="none">None</option>
</select>
<div className="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
<Select
value={formData.collect_geo_data}
onChange={(v) => setFormData({ ...formData, collect_geo_data: v as GeoDataLevel })}
options={[
{ value: 'full', label: 'Full (country, region, city)' },
{ value: 'country', label: 'Country only' },
{ value: 'none', label: 'None' },
]}
variant="input"
align="right"
className="min-w-[200px]"
/>
</div>
</div>
@@ -850,24 +836,20 @@ export default function SiteSettingsPage() {
How long to keep recordings
</p>
</div>
<div className="relative">
<select
value={formData.replay_retention_days}
onChange={(e) => setFormData({ ...formData, replay_retention_days: parseInt(e.target.value) })}
className="px-4 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white text-sm font-medium appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange"
>
<option value={7}>7 days</option>
<option value={14}>14 days</option>
<option value={30}>30 days</option>
<option value={60}>60 days</option>
<option value={90}>90 days</option>
</select>
<div className="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
</svg>
</div>
</div>
<Select
value={String(formData.replay_retention_days)}
onChange={(v) => setFormData({ ...formData, replay_retention_days: parseInt(v, 10) })}
options={[
{ value: '7', label: '7 days' },
{ value: '14', label: '14 days' },
{ value: '30', label: '30 days' },
{ value: '60', label: '60 days' },
{ value: '90', label: '90 days' },
]}
variant="input"
align="right"
className="min-w-[120px]"
/>
</div>
</div>

60
components/ui/Select.tsx
View File

@@ -12,9 +12,29 @@ interface SelectProps {
onChange: (value: string) => void
options: Option[]
className?: string
/** Form-field style (input-like). Default: toolbar style (btn-secondary). */
variant?: 'default' | 'input'
/** Shown when value is empty or does not match any option. */
placeholder?: string
/** Full-width trigger and panel. Use in form layouts. */
fullWidth?: boolean
/** Id for the trigger (e.g. for label htmlFor). */
id?: string
/** Alignment of the dropdown panel. */
align?: 'left' | 'right'
}
export default function Select({ value, onChange, options, className = '' }: SelectProps) {
export default function Select({
value,
onChange,
options,
className = '',
variant = 'default',
placeholder,
fullWidth = false,
id,
align = 'right',
}: SelectProps) {
const [isOpen, setIsOpen] = useState(false)
const ref = useRef<HTMLDivElement>(null)
@@ -28,18 +48,35 @@ export default function Select({ value, onChange, options, className = '' }: Sel
return () => document.removeEventListener('mousedown', handleClickOutside)
}, [])
const selectedOption = options.find(o => o.value === value) || options.find(o => o.value === 'custom')
const selectedOption = options.find((o) => o.value === value)
const displayLabel = selectedOption?.label ?? placeholder ?? value ?? ''
const triggerBase =
variant === 'input'
? 'px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-neutral-50/50 dark:bg-neutral-900/50 text-neutral-900 dark:text-white text-left text-sm ' +
'focus:outline-none focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 transition-all duration-200 ' +
(isOpen ? 'ring-4 ring-brand-orange/10 border-brand-orange' : '')
: 'btn-secondary min-w-[140px]'
const triggerLayout = fullWidth ? 'w-full ' : ''
const alignClass = align === 'left' ? 'left-0' : 'right-0'
const panelMinW = fullWidth ? 'w-full' : 'min-w-[140px] w-full'
return (
<div className={`relative ${className}`} ref={ref}>
<div className={`relative ${fullWidth ? 'w-full' : ''} ${className}`} ref={ref}>
<button
type="button"
id={id}
onClick={() => setIsOpen(!isOpen)}
className="btn-secondary min-w-[140px] flex items-center justify-between gap-2"
className={`${triggerLayout}${triggerBase} flex items-center justify-between gap-2`}
aria-haspopup="listbox"
aria-expanded={isOpen}
>
<span>{selectedOption?.label || value}</span>
<span className={!selectedOption && placeholder ? 'text-neutral-500 dark:text-neutral-400' : ''}>
{displayLabel}
</span>
<svg
className={`w-4 h-4 text-neutral-500 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
className={`w-4 h-4 text-neutral-500 flex-shrink-0 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -49,15 +86,20 @@ export default function Select({ value, onChange, options, className = '' }: Sel
</button>
{isOpen && (
<div className="absolute right-0 mt-2 w-full min-w-[140px] bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-lg z-50 overflow-hidden py-1">
<div
className={`absolute ${alignClass} mt-2 ${panelMinW} bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-lg z-50 overflow-hidden py-1 max-h-60 overflow-y-auto`}
role="listbox"
>
{options.map((option) => (
<button
key={option.value}
role="option"
aria-selected={value === option.value}
onClick={() => {
onChange(option.value)
setIsOpen(false)
}}
className={`w-full text-left px-4 py-2.5 text-sm transition-colors flex items-center justify-between
className={`w-full text-left px-4 py-2.5 text-sm transition-colors duration-200 flex items-center justify-between
${value === option.value
? 'bg-neutral-50 dark:bg-neutral-800 text-brand-orange font-medium'
: 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
@@ -66,7 +108,7 @@ export default function Select({ value, onChange, options, className = '' }: Sel
>
{option.label}
{value === option.value && (
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
)}