App and sorting updates

src/pages/settings/components/Applications/AppSettingsItem.tsx

@@ -1,74 +1,91 @@
 import { Icon } from '@iconify/react';
-import { Box, Stack, Text } from '@mantine/core';
+import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
 import { useCommonHooks } from 'hooks';
 import { useState } from 'react';
-import { boxClasses, textClasses } from 'styles';
+import { FiAlertCircle } from 'react-icons/fi';
+import { actionIconClasses, boxClasses, textClasses } from 'styles';
 
-function AppSettingsItem({ url, icon, name }: any) {
+function AppSettingsItem({ url, icon, name, enabled }: any) {
 	const [textDecoration, setTextDecoration] = useState<string>('none');
 	const [hover, setHover] = useState<boolean>(false);
-	const { isMobile } = useCommonHooks();
+	const { isMobile, theme } = useCommonHooks();
 	return (
-		<Box
-			component='a'
-			onMouseOver={() => {
-				setTextDecoration('underline');
-				setHover(true);
-			}}
-			onMouseOut={() => {
-				setTextDecoration('none');
-				setHover(false);
-			}}
-			className={boxClasses.appItemBox}
-		>
-			{hover && (
-				<svg
-					style={{ position: 'absolute', borderRadius: '6px' }}
-					height='100%'
-					width='100%'
-					xmlns='http://www.w3.org/2000/svg'
-				>
-					<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
-				</svg>
+		<>
+			{enabled === 0 && (
+				<Tooltip label={<Text c={theme.primaryColor}>This app is disabled</Text>}>
+					<ActionIcon
+						className={actionIconClasses.settingsTooltip}
+						classNames={actionIconClasses}
+						pos={'absolute'}
+						size={'xl'}
+						variant='subtle'
+						style={{ zIndex: 1 }}
+					>
+						<FiAlertCircle color='red' />
+					</ActionIcon>
+				</Tooltip>
 			)}
-			<Stack
-				align={isMobile ? 'center' : undefined}
-				justify={isMobile ? 'center' : undefined}
-				style={{
-					height: '128px',
-					width: isMobile ? '100%' : undefined,
-					marginRight: isMobile ? '0' : '1em',
-					marginLeft: isMobile ? '0' : '2em',
-					paddingTop: isMobile ? '0' : '32px',
+			<Box
+				component='a'
+				onMouseOver={() => {
+					setTextDecoration('underline');
+					setHover(true);
 				}}
-			>
-				<Icon icon={`mdi:${icon}`} height={64} width={64} />
-			</Stack>
-			<Stack
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					justifyContent: 'center',
-					flex: 1,
-					overflow: 'hidden',
-					gap: 0,
+				onMouseOut={() => {
+					setTextDecoration('none');
+					setHover(false);
 				}}
+				className={boxClasses.appItemBox}
 			>
-				<Text fz={22} className={textClasses.appName} classNames={textClasses}>
-					{name}
-				</Text>
-				<Text
-					fz={16}
-					className={textClasses.appUrl}
-					classNames={textClasses}
+				{hover && (
+					<svg
+						style={{ position: 'absolute', borderRadius: '6px' }}
+						height='100%'
+						width='100%'
+						xmlns='http://www.w3.org/2000/svg'
+					>
+						<rect rx='16' ry='16' height='100%' width='100%' strokeLinejoin='round' />
+					</svg>
+				)}
+				<Stack
+					align={isMobile ? 'center' : undefined}
+					justify={isMobile ? 'center' : undefined}
 					style={{
-						textDecoration: textDecoration,
+						height: '128px',
+						width: isMobile ? '100%' : undefined,
+						marginRight: isMobile ? '0' : '1em',
+						marginLeft: isMobile ? '0' : '2em',
+						paddingTop: isMobile ? '0' : '32px',
 					}}
 				>
-					{url}
-				</Text>
-			</Stack>
-		</Box>
+					<Icon icon={`mdi:${icon}`} height={64} width={64} />
+				</Stack>
+				<Stack
+					style={{
+						display: 'flex',
+						flexDirection: 'column',
+						justifyContent: 'center',
+						flex: 1,
+						overflow: 'hidden',
+						gap: 0,
+					}}
+				>
+					<Text fz={22} className={textClasses.appName} classNames={textClasses}>
+						{name}
+					</Text>
+					<Text
+						fz={16}
+						className={textClasses.appUrl}
+						classNames={textClasses}
+						style={{
+							textDecoration: textDecoration,
+						}}
+					>
+						{url}
+					</Text>
+				</Stack>
+			</Box>
+		</>
 	);
 }