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,14 +91,8 @@ 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%'}
-					p={'1rem'}
-					pt={0}
-					mt={'1rem'}
-					style={{ overflow: 'scroll', whiteSpace: 'none' }}
-				>
 						<DataTable
 							data={searchHistory}
 							columns={SearchHistoryColumns(
@@ -114,6 +108,24 @@ const SearchHistory = () => {
 							setGlobalFilter={setGlobalFilter}
 						/>
 					</Stack>
+					<Group
+						w={'100%'}
+						style={{
+							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>
 	);