Remove all unused dependencies and items

components/AppShelf/AddAppShelfItem.tsx

@@ -1,7 +1,6 @@
 import {
   useMantineTheme,
   Modal,
-  Paper,
   Center,
   Group,
   TextInput,
@@ -9,9 +8,7 @@ import {
   Button,
   Select,
   AspectRatio,
-  Box,
   Text,
-  Grid,
   Card,
 } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
@@ -19,10 +16,10 @@ import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
-import { ServiceType, ServiceTypeList } from '../../tools/types';
+import { ServiceTypeList } from '../../tools/types';
 
 export default function AddItemShelfItem(props: any) {
-  const { config, addService } = useConfig();
+  const { addService } = useConfig();
   const [opened, setOpened] = useState(false);
   const theme = useMantineTheme();
   const form = useForm({
@@ -123,7 +120,6 @@ export default function AddItemShelfItem(props: any) {
       >
         <Card
           style={{
-
             backgroundColor:
               theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
             width: 200,

components/AppShelf/AppShelf.story.tsx

@@ -15,4 +15,4 @@ export default {
 };
 
 export const Default = (args: any) => <AppShelf {...args} />;
-export const One = (args: any) => <AppShelfItem {...args} />;
+export const One = (args: any) => <AppShelfItem {...args} />;

components/AppShelf/AppShelf.tsx

@@ -1,30 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import {
-  Grid,
-  Group,
   Text,
-  Anchor,
-  Box,
   AspectRatio,
   createStyles,
   Center,
-  Container,
   SimpleGrid,
-  Space,
   Card,
   useMantineTheme,
   Image,
-  Badge,
 } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
-import { AlertCircle, Cross, X } from 'tabler-icons-react';
 import AppShelfMenu from './AppShelfMenu';
 import AddItemShelfItem from './AddAppShelfItem';
 import { useConfig } from '../../tools/state';
 import { pingQbittorrent } from '../../tools/api';
-import { Config, serviceItem } from '../../tools/types';
-import { SettingsMenuButton } from '../Settings/SettingsMenu';
+import { serviceItem } from '../../tools/types';
 
 const useStyles = createStyles((theme) => ({
   main: {
@@ -82,7 +72,7 @@ export function AppShelfItem(props: any) {
         style={{
           boxShadow: hovering ? '0px 0px 3px rgba(0, 0, 0, 0.5)' : '0px 0px 1px rgba(0, 0, 0, 0.5)',
         }}
-        radius={'md'}
+        radius="md"
       >
         <motion.div
           animate={{
@@ -93,7 +83,7 @@ export function AppShelfItem(props: any) {
         </motion.div>
         <Card.Section>
           <Center>
-            <Text mt={'sm'} weight={500}>
+            <Text mt="sm" weight={500}>
               {service.name}
             </Text>
           </Center>

components/AppShelf/AppShelfMenu.tsx

@@ -5,11 +5,13 @@ import { Check, Edit, Trash } from 'tabler-icons-react';
 export default function AppShelfMenu(props: any) {
   const { name, removeitem: removeItem } = props;
   return (
-    <Menu style={{
-      position: 'absolute',
-      top: 10,
-      right: 10,
-    }}>
+    <Menu
+      style={{
+        position: 'absolute',
+        top: 10,
+        right: 10,
+      }}
+    >
       <Menu.Label>Settings</Menu.Label>
       <Menu.Item
         color="primary"

components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Box, useMantineColorScheme } from '@mantine/core';
+import { Box, useMantineColorScheme } from '@mantine/core';
 import { Sun, MoonStars } from 'tabler-icons-react';
 import { motion } from 'framer-motion';
 

components/Config/LoadConfig.tsx

@@ -1,11 +1,11 @@
-import { Group, Text, useMantineTheme, MantineTheme, Notification } from '@mantine/core';
+import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
 import { Upload, Photo, X, Icon as TablerIcon, Check } from 'tabler-icons-react';
-import { Dropzone, DropzoneStatus, FullScreenDropzone, IMAGE_MIME_TYPE } from '@mantine/dropzone';
+import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';
 import { useRouter } from 'next/router';
 import { useConfig } from '../../tools/state';
-import { Config, serviceItem } from '../../tools/types';
+import { Config } from '../../tools/types';
 
 function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
   return status.accepted

components/Config/SaveConfig.tsx

@@ -1,6 +1,5 @@
-import { Anchor, Button, ThemeIcon, Tooltip } from '@mantine/core';
+import { Button } from '@mantine/core';
 import fileDownload from 'js-file-download';
-import { Dropzone, DropzoneStatus, IMAGE_MIME_TYPE } from '@mantine/dropzone';
 import { Download } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 

components/SearchBar/SearchBar.tsx

@@ -1,27 +1,8 @@
-import {
-  Input,
-  TextInput,
-  Text,
-  ActionIcon,
-  useMantineTheme,
-  Center,
-  Popover,
-  Box,
-} from '@mantine/core';
+import { TextInput, Text, Popover, Box } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
-import { showNotification } from '@mantine/notifications';
-import { useState, useEffect } from 'react';
-import {
-  Search,
-  ArrowRight,
-  ArrowLeft,
-  BrandYoutube,
-  Download,
-  InfoCircle,
-  FileX,
-} from 'tabler-icons-react';
+import { useState } from 'react';
+import { Search, BrandYoutube, Download } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
-import { Settings } from '../../tools/types';
 
 export default function SearchBar(props: any) {
   const { config, setConfig } = useConfig();
@@ -35,7 +16,7 @@ export default function SearchBar(props: any) {
     },
   });
 
-  if (config.settings.searchBar == false) {
+  if (config.settings.searchBar === false) {
     return null;
   }
 

components/Settings/SettingsMenu.tsx

@@ -1,8 +1,6 @@
 import { ActionIcon, Group, Modal, Switch, Title, Text, Tooltip, TextInput } from '@mantine/core';
-import { showNotification } from '@mantine/notifications';
-import { motion } from 'framer-motion';
-import { CSSProperties, useEffect, useState } from 'react';
-import { Mail, Settings as SettingsIcon, X } from 'tabler-icons-react';
+import { useState } from 'react';
+import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 import SaveConfigComponent from '../Config/SaveConfig';
 

components/calendar/CalendarComponent.tsx

@@ -1,15 +1,5 @@
-import {
-  Group,
-  Indicator,
-  Popover,
-  Box,
-  Container,
-  Text,
-  Avatar,
-  ActionIcon,
-  Center,
-} from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { Indicator, Popover, Box, Center } from '@mantine/core';
+import { useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import dayjs from 'dayjs';
 import MediaDisplay from './MediaDisplay';
@@ -100,8 +90,9 @@ function DayComponent(props: any) {
               onClose={() => setOpened(false)}
               opened={opened}
               target={day}
-              children={<MediaDisplay media={medias[match]} />}
-            />
+            >
+              <MediaDisplay media={medias[match]} />
+            </Popover>
           </Indicator>
         </Center>
       </Box>

components/calendar/MediaDisplay.tsx

@@ -1,4 +1,4 @@
-import { Stack, Paper, Image, Group, Title, Badge, Text } from '@mantine/core';
+import { Stack, Image, Group, Title, Badge, Text } from '@mantine/core';
 
 export interface IMedia {
   id: string;

components/layout/Footer.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { createStyles, Anchor, Text, Group, ActionIcon } from '@mantine/core';
-import { BrandGithub, Phone, BrandGmail } from 'tabler-icons-react';
-import { posix } from 'path';
+import { BrandGithub } from 'tabler-icons-react';
 
 const useStyles = createStyles((theme) => ({
   footer: {

components/layout/Header.tsx

@@ -5,9 +5,6 @@ import {
   Container,
   Group,
   Burger,
-  Paper,
-  Transition,
-  Aside,
   Drawer,
   Center,
 } from '@mantine/core';
@@ -15,7 +12,6 @@ import { useBooleanToggle } from '@mantine/hooks';
 import { NextLink } from '@mantine/next';
 import { Logo } from './Logo';
 import { ColorSchemeToggle } from '../ColorSchemeToggle/ColorSchemeToggle';
-import SaveConfigComponent from '../Config/SaveConfig';
 import { SettingsMenuButton } from '../Settings/SettingsMenu';
 import CalendarComponent from '../calendar/CalendarComponent';
 

components/layout/Layout.tsx

@@ -17,7 +17,7 @@ export default function Layout({ children, style }: any) {
     <AppShell
       aside={
         <Aside
-          height={'auto'}
+          height="auto"
           hiddenBreakpoint="md"
           hidden
           width={{

pages/index.tsx

@@ -1,6 +1,5 @@
-import { Group, Notification } from '@mantine/core';
+import { Group } from '@mantine/core';
 import AppShelf from '../components/AppShelf/AppShelf';
-import CalendarComponent from '../components/calendar/CalendarComponent';
 import LoadConfigComponent from '../components/Config/LoadConfig';
 import SearchBar from '../components/SearchBar/SearchBar';
 
@@ -8,7 +7,7 @@ export default function HomePage() {
   return (
     <>
       <SearchBar />
-      <Group align={'start'} position="apart" noWrap>
+      <Group align="start" position="apart" noWrap>
         <AppShelf />
       </Group>
       <LoadConfigComponent />