Fixes

src/pages/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Group, ScrollArea, Stack, Tabs, Text } from '@mantine/core';
+import { ActionIcon, Divider, Group, ScrollArea, Stack, Tabs, Text } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { FaPaintBrush, FaRegListAlt } from 'react-icons/fa';
 import {
@@ -66,6 +66,24 @@ export function Settings() {
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='personalization'>
 						{isMobile ? <FiUser /> : 'Personal Info'}
 					</Tabs.Tab>
+					{!isMobile && (
+						<Group w={'100%'} gap={0} justify='center'>
+							<Divider
+								label='Homepage Items'
+								w={'90%'}
+								h={3}
+								mb={'1rem'}
+								color={'var(--mantine-color-primary-0)'}
+								variant='dashed'
+								labelPosition='center'
+								styles={{
+									label: {
+										color: 'var(--mantine-color-accent-0)',
+									},
+								}}
+							/>
+						</Group>
+					)}
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='messages'>
 						{isMobile ? <FiMail /> : 'Messages'}
 					</Tabs.Tab>
@@ -75,18 +93,72 @@ export function Settings() {
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='bookmarks'>
 						{isMobile ? <FiBookmark /> : 'Bookmarks'}
 					</Tabs.Tab>
+					{!isMobile && (
+						<Group w={'100%'} gap={0} justify='center'>
+							<Divider
+								label='Theming'
+								w={'90%'}
+								h={3}
+								mb={'1rem'}
+								color={'var(--mantine-color-primary-0)'}
+								variant='dashed'
+								labelPosition='center'
+								styles={{
+									label: {
+										color: 'var(--mantine-color-accent-0)',
+									},
+								}}
+							/>
+						</Group>
+					)}
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
 						{isMobile ? <FaPaintBrush /> : 'Themes'}
 					</Tabs.Tab>
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themePlaylists'>
 						{isMobile ? <FaRegListAlt /> : 'Theme Playlists'}
 					</Tabs.Tab>
+					{!isMobile && (
+						<Group w={'100%'} gap={0} justify='center'>
+							<Divider
+								label='Search'
+								w={'90%'}
+								h={3}
+								mb={'1rem'}
+								color={'var(--mantine-color-primary-0)'}
+								variant='dashed'
+								labelPosition='center'
+								styles={{
+									label: {
+										color: 'var(--mantine-color-accent-0)',
+									},
+								}}
+							/>
+						</Group>
+					)}
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
 						{isMobile ? <FiSearch /> : 'Search Providers'}
 					</Tabs.Tab>
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='history'>
 						{isMobile ? <FiSearch /> : 'Search History'}
 					</Tabs.Tab>
+					{!isMobile && (
+						<Group w={'100%'} gap={0} justify='center'>
+							<Divider
+								label='Extras'
+								w={'90%'}
+								h={3}
+								mb={'1rem'}
+								color={'var(--mantine-color-primary-0)'}
+								variant='dashed'
+								labelPosition='center'
+								styles={{
+									label: {
+										color: 'var(--mantine-color-accent-0)',
+									},
+								}}
+							/>
+						</Group>
+					)}
 					<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='wolClients'>
 						{isMobile ? <FiMonitor /> : 'WoL Clients'}
 					</Tabs.Tab>

src/pages/settings/components/Search/SearchHistory.tsx

@@ -91,28 +91,40 @@ const SearchHistory = () => {
 				mb={isMobile ? '6rem' : '1rem'}
 				align='center'
 			>
-				<Stack
+				<Stack h={'calc(100vh - 14rem)'} w={'100%'} p={'1rem'} pt={0} mt={'1rem'} gap={0}>
-					h={'calc(100vh - 15rem)'}
+					<Stack style={{ overflow: 'scroll', whiteSpace: 'none' }}>
-					w={'100%'}
+						<DataTable
-					p={'1rem'}
+							data={searchHistory}
-					pt={0}
+							columns={SearchHistoryColumns(
-					mt={'1rem'}
+								setSearchHistoryItem,
-					style={{ overflow: 'scroll', whiteSpace: 'none' }}
+								openModal,
-				>
+								filtersEnabled,
-					<DataTable
+								setFiltersEnabled,
-						data={searchHistory}
+							)}
-						columns={SearchHistoryColumns(
+							sorting={sorting}
-							setSearchHistoryItem,
+							setSorting={setSorting}
-							openModal,
+							filtersEnabled={filtersEnabled}
-							filtersEnabled,
+							globalFilter={globalFilter}
-							setFiltersEnabled,
+							setGlobalFilter={setGlobalFilter}
-						)}
+						/>
-						sorting={sorting}
+					</Stack>
-						setSorting={setSorting}
+					<Group
-						filtersEnabled={filtersEnabled}
+						w={'100%'}
-						globalFilter={globalFilter}
+						style={{
-						setGlobalFilter={setGlobalFilter}
+							backgroundColor: 'var(--mantine-color-primary-0)',
-					/>
+						}}
+						align='center'
+						justify='center'
+					>
+						<Text
+							style={{
+								color: 'var(--mantine-color-background-0)',
+								fontWeight: 'bold',
+							}}
+						>
+							Results: {searchHistory.length}
+						</Text>
+					</Group>
 				</Stack>
 			</Stack>
 		</Stack>