From 01ed60e2d5d7a130f69dfbf6dadfc153dbfecba2 Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sat, 18 Apr 2026 01:16:18 +0200
Subject: [PATCH] refactor(vacay,journey): drop redundant buttons from the new
 toolbar

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.
---
 client/src/pages/JourneyPage.tsx | 31 -------------------------------
 client/src/pages/VacayPage.tsx   | 24 ++++--------------------
 2 files changed, 4 insertions(+), 51 deletions(-)

diff --git a/client/src/pages/JourneyPage.tsx b/client/src/pages/JourneyPage.tsx
index c0638322..31da4b9a 100644
--- a/client/src/pages/JourneyPage.tsx
+++ b/client/src/pages/JourneyPage.tsx
@@ -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={{
diff --git a/client/src/pages/VacayPage.tsx b/client/src/pages/VacayPage.tsx
index fec226c4..d0d50689 100644
--- a/client/src/pages/VacayPage.tsx
+++ b/client/src/pages/VacayPage.tsx
@@ -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={{