k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-06-19 13:21:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(vacay,journey): drop redundant buttons from the new toolbar

Browse Source 
Vacay: remove the filter-sidebar toggle from the desktop bar and shift
the breakpoint so the pre-existing mobile/tablet header (which still
has the toggle) handles everything below the lg threshold where the
sidebar is always visible anyway.

Journey: drop the desktop search toggle and inline search input from
the bar. Mobile search UI is untouched.
This commit is contained in:
Maurice
2026-04-18 01:16:18 +02:00
parent 8042db8d7a
commit 01ed60e2d5
2 changed files with 4 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/pages/JourneyPage.tsx
-31
View File
@@ -168,37 +168,6 @@ export default function JourneyPage() {
</span>
<div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
{searchOpen && (
<input
value={searchQuery}
onChange={e => setSearchQuery(e.target.value)}
onKeyDown={e => { if (e.key === 'Escape') { setSearchQuery(''); setSearchOpen(false) } }}
placeholder={t('journey.search.placeholder')}
autoFocus
className="w-52 px-3 py-2 rounded-[10px] text-[13px] bg-white dark:bg-zinc-800 text-zinc-900 dark:text-white focus:outline-none"
style={{ border: '1px solid var(--border-primary)' }}
/>
)}
<button
onClick={() => {
setSearchOpen(s => !s)
if (searchOpen) setSearchQuery('')
}}
title={t('journey.search.placeholder')}
style={{
appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
padding: '7px 11px', borderRadius: 99,
background: searchOpen ? 'var(--bg-card)' : 'transparent',
color: searchOpen ? 'var(--text-primary)' : 'var(--text-muted)',
boxShadow: searchOpen ? '0 1px 2px rgba(0,0,0,0.06)' : 'none',
transition: 'all 0.15s ease',
}}
onMouseEnter={e => { if (!searchOpen) { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.color = 'var(--text-primary)' } }}
onMouseLeave={e => { if (!searchOpen) { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)' } }}
>
{searchOpen ? <X size={15} /> : <Search size={15} />}
</button>
<button
onClick={() => openCreateModal()}
style={{
client/src/pages/VacayPage.tsx
+4 -20
View File
@@ -138,8 +138,8 @@ export default function VacayPage(): React.ReactElement {
<div style={{ paddingTop: 'var(--nav-h)' }}>
<div className="max-w-[1800px] mx-auto px-3 sm:px-4 py-4 sm:py-6">
{/* Mobile header */}
<div className="md:hidden flex items-center justify-between mb-4">
{/* Mobile + tablet header (filter toggle lives here) */}
<div className="lg:hidden flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'var(--bg-secondary)' }}>
<CalendarDays size={18} style={{ color: 'var(--text-primary)' }} />
@@ -164,8 +164,8 @@ export default function VacayPage(): React.ReactElement {
</div>
</div>
{/* Desktop header — unified toolbar */}
<div className="hidden md:block" style={{ marginBottom: 20 }}>
{/* Desktop header — unified toolbar (sidebar is always visible at this width) */}
<div className="hidden lg:block" style={{ marginBottom: 20 }}>
<div style={{
background: 'var(--bg-tertiary)', borderRadius: 18,
border: '1px solid var(--border-primary)',
@@ -181,22 +181,6 @@ export default function VacayPage(): React.ReactElement {
{t('vacay.subtitle')}
</span>
<div style={{ display: 'inline-flex', gap: 6, alignItems: 'center', marginLeft: 'auto', flexShrink: 0 }}>
<button
onClick={() => setShowMobileSidebar(true)}
className="lg:hidden"
title={t('vacay.filters') || 'Filters'}
style={{
appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
padding: '7px 11px', borderRadius: 99,
background: 'transparent', color: 'var(--text-muted)',
transition: 'all 0.15s ease',
}}
onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-card)'; e.currentTarget.style.color = 'var(--text-primary)' }}
onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-muted)' }}
>
<SlidersHorizontal size={15} />
</button>
<button
onClick={() => setShowSettings(true)}
style={{