✨ Make the search bar a module

Resolves #118

src/components/AppShelf/AppShelf.tsx

@@ -1,15 +1,6 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import {
+import { Text, AspectRatio, Card, Image, Center, Grid, createStyles } from '@mantine/core';
-  Text,
-  AspectRatio,
-  Card,
-  Image,
-  useMantineTheme,
-  Center,
-  Grid,
-  createStyles,
-} from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';

src/components/Settings/SettingsMenu.tsx

@@ -90,22 +90,6 @@ function SettingsMenu(props: any) {
           />
         )}
       </Group>
-      <Group direction="column">
-        <Switch
-          size="md"
-          onChange={(e) =>
-            setConfig({
-              ...config,
-              settings: {
-                ...config.settings,
-                searchBar: e.currentTarget.checked,
-              },
-            })
-          }
-          checked={config.settings.searchBar}
-          label="Enable search bar"
-        />
-      </Group>
       <ModuleEnabler />
       <ColorSchemeSwitch />
       <ConfigChanger />

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';
 

src/components/modules/index.ts

@@ -1,2 +1,3 @@
 export * from './date';
 export * from './calendar';
+export * from './search';

src/components/modules/search/SearchModule.story.tsx

@@ -1,4 +1,4 @@
-import SearchBar from './SearchBar';
+import SearchBar from './SearchModule';
 
 export default {
   title: 'Search bar',

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 = (
     <div className={classes.hide}>
       <Kbd>Ctrl</Kbd>
@@ -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;
   }
 

src/components/modules/search/index.ts

@@ -0,0 +1 @@
+export { SearchModule } from './SearchModule';