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;