Updates to styles; misc bugfixes

src/components/Applications/AppItem.tsx

@@ -0,0 +1,125 @@
+import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core';
+import { useElementSize } from '@mantine/hooks';
+import { useCommonHooks } from 'hooks';
+import { useState } from 'react';
+import * as fa6 from 'react-icons/fa6';
+import { FiAlertCircle } from 'react-icons/fi';
+import * as si from 'react-icons/si';
+import * as vsc from 'react-icons/vsc';
+import { actionIconClasses, boxClasses, textClasses } from 'styles';
+
+export function AppItem({
+	url,
+	icon,
+	name,
+	enabled,
+	scale,
+	linksActive,
+}: {
+	url: string;
+	icon: string;
+	name: string;
+	enabled: number | null;
+	scale: number;
+	linksActive: boolean;
+}) {
+	const { ref, width, height } = useElementSize();
+	const allIcons: any = { ...fa6, ...vsc, ...si };
+	const Icon = allIcons[icon];
+	const { isMobile } = useCommonHooks();
+	const [textDecoration, setTextDecoration] = useState<string>('none');
+	const [hover, setHover] = useState<boolean>(false);
+	const validUrl =
+		url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`;
+	return (
+		<Box
+			component='a'
+			href={linksActive ? validUrl : undefined}
+			onMouseOver={() => {
+				setTextDecoration('underline');
+				setHover(true);
+			}}
+			onMouseOut={() => {
+				setTextDecoration('none');
+				setHover(false);
+			}}
+			className={boxClasses.appItemBox}
+			h={scale * 64}
+			ref={ref}
+			style={{
+				justifyContent: width / height < 2 ? 'center' : undefined,
+			}}
+		>
+			{enabled === 0 && (
+				<Tooltip
+					c={'var(--mantine-color-primary-0)'}
+					bg={'var(--mantine-color-background-0)'}
+					label='This app is disabled.'
+				>
+					<ActionIcon
+						className={actionIconClasses.settingsTooltip}
+						classNames={actionIconClasses}
+						pos={'absolute'}
+						right={0}
+						size={'xl'}
+						variant='subtle'
+						style={{ zIndex: 1 }}
+					>
+						<FiAlertCircle color='red' />
+					</ActionIcon>
+				</Tooltip>
+			)}
+			{hover && (
+				<svg
+					style={{ position: 'absolute', borderRadius: '6px' }}
+					height='100%'
+					width='100%'
+					xmlns='http://www.w3.org/2000/svg'
+				>
+					<rect
+						rx={(scale * 64) / 8}
+						ry={(scale * 64) / 8}
+						height='100%'
+						width='100%'
+						strokeLinejoin='round'
+					/>
+				</svg>
+			)}
+			<Stack
+				// align={isMobile ? 'center' : undefined}
+				justify={isMobile ? 'center' : undefined}
+				style={{
+					marginRight: scale * 16,
+					marginLeft: scale * 16,
+					paddingTop: isMobile ? scale : scale * 16,
+				}}
+			>
+				{Icon && <Icon style={{ height: scale * 32, width: scale * 32 }} />}
+			</Stack>
+			{width / height > 2 && (
+				<Stack
+					justify='center'
+					style={{
+						overflow: 'hidden',
+						whiteSpace: 'nowrap',
+						gap: 0,
+					}}
+				>
+					<Text fz={scale * 11} className={textClasses.appName} classNames={textClasses}>
+						{name}
+					</Text>
+					<Text
+						fz={scale * 11}
+						className={textClasses.appUrl}
+						classNames={textClasses}
+						style={{
+							textDecoration: textDecoration,
+						}}
+					>
+						{url}
+					</Text>
+				</Stack>
+			)}
+		</Box>
+	);
+}

src/components/index.ts

@@ -1,3 +1,4 @@
+export { AppItem } from './Applications/AppItem';
 export { HelpModal } from './HelpModal/HelpModal';
 export { Loading } from './Loading';
 export { MainLayout } from './MainLayout';