✨ Added an app opacity slider

Added a slider to change individual app opacity on the AppShelf

src/components/AppShelf/AppShelfItem.tsx

@@ -6,6 +6,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { serviceItem } from '../../tools/types';
 import PingComponent from '../modules/ping/PingModule';
 import AppShelfMenu from './AppShelfMenu';
+import { useConfig } from '../../tools/state';
 
 const useStyles = createStyles((theme) => ({
   item: {
@@ -25,8 +26,10 @@ export function SortableAppShelfItem(props: any) {
   const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
     id: props.id,
   });
+  const { config } = useConfig();
 
   const style = {
+    opacity: `${config.settings.appOpacity || 100}%`,
     transform: CSS.Transform.toString(transform),
     transition,
   };

src/components/Settings/CommonSettings.tsx

@@ -9,6 +9,7 @@ import SaveConfigComponent from '../Config/SaveConfig';
 import ModuleEnabler from './ModuleEnabler';
 import { ColorSelector } from './ColorSelector';
 import { ShadeSelector } from './ShadeSelector';
+import { OpacitySelector } from './OpacitySelector';
 
 export default function CommonSettings(args: any) {
   const { config, setConfig } = useConfig();
@@ -74,6 +75,7 @@ export default function CommonSettings(args: any) {
       <ColorSelector type="primary" />
       <ColorSelector type="secondary" />
       <ShadeSelector />
+      <OpacitySelector />
       <ConfigChanger />
       <SaveConfigComponent />
       <Text

src/components/Settings/OpacitySelector.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Group, Text, Slider } from '@mantine/core';
+import { useConfig } from '../../tools/state';
+
+export function OpacitySelector() {
+  const { config, setConfig } = useConfig();
+
+  const MARKS = [
+    { value: 10, label: '10' },
+    { value: 20, label: '20' },
+    { value: 30, label: '30' },
+    { value: 40, label: '40' },
+    { value: 50, label: '50' },
+    { value: 60, label: '60' },
+    { value: 70, label: '70' },
+    { value: 80, label: '80' },
+    { value: 90, label: '90' },
+    { value: 100, label: '100' },
+  ];
+
+  const setConfigOpacity = (opacity: number) => {
+    setConfig({
+      ...config,
+      settings: {
+        ...config.settings,
+        appOpacity: opacity,
+      },
+    });
+  };
+
+  return (
+    <Group direction="column" spacing="xs" grow>
+      <Text>App Opacity</Text>
+      <Slider
+        defaultValue={config.settings.appOpacity || 100}
+        step={10}
+        min={10}
+        marks={MARKS}
+        styles={{ markLabel: { fontSize: 'xx-small' } }}
+        onChange={(value) => setConfigOpacity(value)}
+      />
+    </Group>
+  );
+}

src/tools/types.ts

@@ -1,5 +1,5 @@
-import { OptionValues } from '../components/modules/modules';
 import { MantineTheme } from '@mantine/core';
+import { OptionValues } from '../components/modules/modules';
 
 export interface Settings {
   searchUrl: string;
@@ -10,6 +10,7 @@ export interface Settings {
   secondaryColor?: MantineTheme['primaryColor'];
   primaryShade?: MantineTheme['primaryShade'];
   background?: string;
+  appOpacity?: number;
 }
 
 export interface Config {