diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx
index ccf7dea5c..28fa7bf64 100644
--- a/src/components/AppShelf/AppShelf.tsx
+++ b/src/components/AppShelf/AppShelf.tsx
@@ -1,15 +1,6 @@
import React, { useState } from 'react';
import { motion } from 'framer-motion';
-import {
- Text,
- AspectRatio,
- Card,
- Image,
- useMantineTheme,
- Center,
- Grid,
- createStyles,
-} from '@mantine/core';
+import { Text, AspectRatio, Card, Image, Center, Grid, createStyles } from '@mantine/core';
import { useConfig } from '../../tools/state';
import { serviceItem } from '../../tools/types';
import AppShelfMenu from './AppShelfMenu';
diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx
index 2f821a4ef..cbd30c987 100644
--- a/src/components/Settings/SettingsMenu.tsx
+++ b/src/components/Settings/SettingsMenu.tsx
@@ -90,22 +90,6 @@ function SettingsMenu(props: any) {
/>
)}
-
-
- setConfig({
- ...config,
- settings: {
- ...config.settings,
- searchBar: e.currentTarget.checked,
- },
- })
- }
- checked={config.settings.searchBar}
- label="Enable search bar"
- />
-
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index f319c4c0e..28ed95f46 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import { createStyles, Header as Head, Group, Box } from '@mantine/core';
import { Logo } from './Logo';
-import SearchBar from '../SearchBar/SearchBar';
+import SearchBar from '../modules/search/SearchModule';
import { AddItemShelfButton } from '../AppShelf/AddAppShelfItem';
import { SettingsMenuButton } from '../Settings/SettingsMenu';
diff --git a/src/components/modules/index.ts b/src/components/modules/index.ts
index b8817cb83..a3dce87be 100644
--- a/src/components/modules/index.ts
+++ b/src/components/modules/index.ts
@@ -1,2 +1,3 @@
export * from './date';
export * from './calendar';
+export * from './search';
diff --git a/src/components/SearchBar/SearchBar.story.tsx b/src/components/modules/search/SearchModule.story.tsx
similarity index 78%
rename from src/components/SearchBar/SearchBar.story.tsx
rename to src/components/modules/search/SearchModule.story.tsx
index 3e19c4e2d..cbd7b64c2 100644
--- a/src/components/SearchBar/SearchBar.story.tsx
+++ b/src/components/modules/search/SearchModule.story.tsx
@@ -1,4 +1,4 @@
-import SearchBar from './SearchBar';
+import SearchBar from './SearchModule';
export default {
title: 'Search bar',
diff --git a/src/components/SearchBar/SearchBar.tsx b/src/components/modules/search/SearchModule.tsx
similarity index 86%
rename from src/components/SearchBar/SearchBar.tsx
rename to src/components/modules/search/SearchModule.tsx
index 7018dc18f..03c230d0c 100644
--- a/src/components/SearchBar/SearchBar.tsx
+++ b/src/components/modules/search/SearchModule.tsx
@@ -1,8 +1,9 @@
-import { TextInput, Kbd, createStyles, useMantineTheme, Text, Popover } from '@mantine/core';
+import { TextInput, Kbd, createStyles, Text, Popover } from '@mantine/core';
import { useForm, useHotkeys } from '@mantine/hooks';
import { useRef, useState } from 'react';
import { Search, BrandYoutube, Download } from 'tabler-icons-react';
-import { useConfig } from '../../tools/state';
+import { useConfig } from '../../../tools/state';
+import { IModule } from '../modules';
const useStyles = createStyles((theme) => ({
hide: {
@@ -14,6 +15,13 @@ const useStyles = createStyles((theme) => ({
},
}));
+export const SearchModule: IModule = {
+ title: 'Search Bar',
+ description: 'Show the current time and date in a card',
+ icon: Search,
+ component: SearchBar,
+};
+
export default function SearchBar(props: any) {
const { config, setConfig } = useConfig();
const [opened, setOpened] = useState(false);
@@ -23,7 +31,6 @@ export default function SearchBar(props: any) {
useHotkeys([['ctrl+K', () => textInput.current && textInput.current.focus()]]);
const { classes, cx } = useStyles();
- const theme = useMantineTheme();
const rightSection = (
Ctrl
@@ -38,7 +45,8 @@ export default function SearchBar(props: any) {
},
});
- if (config.settings.searchBar === false) {
+ // If enabled modules doesn't contain the module, return null
+ if (!config.settings.enabledModules.includes(SearchModule.title)) {
return null;
}
diff --git a/src/components/modules/search/index.ts b/src/components/modules/search/index.ts
new file mode 100644
index 000000000..eda41643a
--- /dev/null
+++ b/src/components/modules/search/index.ts
@@ -0,0 +1 @@
+export { SearchModule } from './SearchModule';