diff --git a/src/components/AppShelf/AppShelf.tsx b/src/components/AppShelf/AppShelf.tsx index b32454c47..05c0d1ada 100644 --- a/src/components/AppShelf/AppShelf.tsx +++ b/src/components/AppShelf/AppShelf.tsx @@ -106,7 +106,14 @@ const AppShelf = (props: any) => { {filtered.map((service) => ( - + ))} diff --git a/src/components/Settings/AdvancedSettings.tsx b/src/components/Settings/AdvancedSettings.tsx index b00a11933..ad4517457 100644 --- a/src/components/Settings/AdvancedSettings.tsx +++ b/src/components/Settings/AdvancedSettings.tsx @@ -3,6 +3,7 @@ import { useForm } from '@mantine/form'; import { useConfig } from '../../tools/state'; import { ColorSelector } from './ColorSelector'; import { OpacitySelector } from './OpacitySelector'; +import { AppCardWidthSelector } from './AppCardWidthSelector'; import { ShadeSelector } from './ShadeSelector'; export default function TitleChanger() { @@ -58,6 +59,7 @@ export default function TitleChanger() { + ); } diff --git a/src/components/Settings/AppCardWidthSelector.tsx b/src/components/Settings/AppCardWidthSelector.tsx new file mode 100644 index 000000000..945778e67 --- /dev/null +++ b/src/components/Settings/AppCardWidthSelector.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { Group, Text, Slider } from '@mantine/core'; +import { useConfig } from '../../tools/state'; + +export function AppCardWidthSelector() { + const { config, setConfig } = useConfig(); + + const setappCardWidth = (appCardWidth: number) => { + setConfig({ + ...config, + settings: { + ...config.settings, + appCardWidth, + }, + }); + }; + + return ( + + App Width + setappCardWidth(value)} + /> + + ); +} diff --git a/src/tools/types.ts b/src/tools/types.ts index 1b3953a1f..6ed888930 100644 --- a/src/tools/types.ts +++ b/src/tools/types.ts @@ -12,6 +12,7 @@ export interface Settings { background?: string; appOpacity?: number; widgetPosition?: string; + appCardWidth?: number; } export interface Config {