diff --git a/src/components/Elements/MainModal/backend/Tabs.jsx b/src/components/Elements/MainModal/backend/Tabs.jsx index 0e25623f..4f1d2333 100644 --- a/src/components/Elements/MainModal/backend/Tabs.jsx +++ b/src/components/Elements/MainModal/backend/Tabs.jsx @@ -6,6 +6,7 @@ import ReminderInfo from '../components/ReminderInfo'; import SidebarToggle from '../components/SidebarToggle'; import ErrorBoundary from '../../../../features/misc/modals/ErrorBoundary'; import { TAB_TYPES } from '../constants/tabConfig'; +import { SearchInput } from 'components/Form/Settings'; const Tabs = ({ children, @@ -41,8 +42,9 @@ const Tabs = ({ const [currentName, setCurrentName] = useState(initial.name); const [showReminder, setShowReminder] = useState(localStorage.getItem('showReminder') === 'true'); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState( - localStorage.getItem('sidebarCollapsed') === 'true' + localStorage.getItem('sidebarCollapsed') === 'true', ); + const [searchQuery, setSearchQuery] = useState(''); const contentRef = useRef(null); const handleTabClick = (tab, name) => { @@ -127,6 +129,12 @@ const Tabs = ({ // Show sidebar for Settings and Discover tabs const showSidebar = activeTab === TAB_TYPES.SETTINGS || activeTab === TAB_TYPES.DISCOVER; + // Filter tabs based on search query + const filteredChildren = children.filter((tab) => { + if (!searchQuery.trim()) return true; + return tab.props.label.toLowerCase().includes(searchQuery.toLowerCase()); + }); + // Keyboard shortcut for sidebar toggle (Ctrl/Cmd + B) useEffect(() => { const handleKeyPress = (e) => { @@ -147,9 +155,17 @@ const Tabs = ({ {showSidebar ? (
+ {!isSidebarCollapsed && activeTab === TAB_TYPES.SETTINGS && ( + setSearchQuery(e.target.value)} + placeholder={t('widgets.search')} + fullWidth + /> + )}
- {children.map((tab, index) => ( + {filteredChildren.map((tab, index) => ( ))} + {searchQuery.trim() && filteredChildren.length === 0 && ( +
{t('widgets.weather.not_found')}
+ )} {!isSidebarCollapsed && ( )} diff --git a/src/components/Elements/MainModal/components/SidebarToggle.jsx b/src/components/Elements/MainModal/components/SidebarToggle.jsx index fa7a8342..7dd5a202 100644 --- a/src/components/Elements/MainModal/components/SidebarToggle.jsx +++ b/src/components/Elements/MainModal/components/SidebarToggle.jsx @@ -1,4 +1,4 @@ -import { FiSidebar } from "react-icons/fi"; +import { FiSidebar } from 'react-icons/fi'; import { Tooltip } from 'components/Elements'; import { useT } from 'contexts/TranslationContext'; diff --git a/src/components/Elements/MainModal/scss/modules/_sidebar.scss b/src/components/Elements/MainModal/scss/modules/_sidebar.scss index 5142adb5..c1f79d34 100644 --- a/src/components/Elements/MainModal/scss/modules/_sidebar.scss +++ b/src/components/Elements/MainModal/scss/modules/_sidebar.scss @@ -14,13 +14,34 @@ flex-shrink: 0; transition: min-width 0.4s cubic-bezier(0.4, 0, 0.2, 1); - // Container for toggle button positioning + // Container for search bar and toggle button .sidebarHeader { display: flex; - justify-content: flex-end; - margin-bottom: 0.5rem; - height: 32px; + justify-content: space-between; align-items: center; + gap: 0.5rem; + margin-bottom: 0.5rem; + + .search-input-container { + flex: 1; + width: auto; + + .search-input-field { + height: 38px; + font-size: 14px; + padding: 0 14px 0 42px; + border-radius: 10px; + + &::placeholder { + opacity: 0.6; + } + } + + .search-input-icon { + left: 16px; + font-size: 18px; + } + } } svg { @@ -52,7 +73,9 @@ gap: 12px; margin: 0.15rem 0.25rem; padding: 0.65rem 0.75rem; - transition: background 0.2s ease, transform 0.1s ease; + transition: + background 0.2s ease, + transform 0.1s ease; outline: none; border: none; background: none; @@ -88,6 +111,14 @@ } } + .sidebarEmptyState { + padding: 2rem 1rem; + text-align: center; + font-size: 14px; + color: t($color); + opacity: 0.6; + } + .tab-list-active { background: t($modal-sidebarActive); position: relative;