💄 Rework the bookmark widget

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -13,6 +13,7 @@ import {
   TextInput,
   Title,
   createStyles,
+  useMantineTheme,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import {
@@ -39,6 +40,7 @@ interface BookmarkItem {
   href: string;
   iconUrl: string;
   openNewTab: boolean;
+  hideLink: boolean;
 }
 
 const definition = defineWidget({
@@ -58,6 +60,7 @@ const definition = defineWidget({
           href: 'https://homarr.dev',
           iconUrl: '/imgs/logo/logo.png',
           openNewTab: false,
+          hideLink: false,
         };
       },
       itemComponent({ data, onChange, delete: deleteData }) {
@@ -130,6 +133,11 @@ const definition = defineWidget({
                 label="Open in new tab"
                 checked={form.values.openNewTab}
               />
+              <Switch
+                {...form.getInputProps('hideLink')}
+                label="Hide link"
+                checked={form.values.hideLink}
+              />
               <Button
                 onClick={() => deleteData()}
                 leftIcon={<IconTrash size="1rem" />}
@@ -186,6 +194,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
   const { t } = useTranslation('modules/bookmark');
   const { classes } = useStyles();
   const { enabled: isEditModeEnabled } = useEditModeStore();
+  const { fn, colors, colorScheme } = useMantineTheme();
 
   if (widget.properties.items.length === 0) {
     return (
@@ -206,7 +215,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
   switch (widget.properties.layout) {
     case 'autoGrid':
       return (
-        <Box className={classes.grid} display="grid" mr={isEditModeEnabled ? 'xl' : undefined}>
+        <Box className={classes.grid} mr={isEditModeEnabled ? 'xl' : undefined} h="100%">
           {widget.properties.items.map((item: BookmarkItem, index) => (
             <Card
               className={classes.autoGridItem}
@@ -216,6 +225,10 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
               href={item.href}
               target={item.openNewTab ? '_blank' : undefined}
               withBorder
+              sx={{
+                backgroundColor: colorScheme === 'dark' ? colors.dark[5].concat('80') : colors.blue[0].concat('80'),
+                '&:hover': { backgroundColor: fn.primaryColor().concat('80'),}, //'40' = 25% opacity
+              }}
             >
               <BookmarkItemContent item={item} />
             </Card>
@@ -226,26 +239,44 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
     case 'vertical':
       return (
         <ScrollArea
-          offsetScrollbars
-          type="always"
+          scrollbarSize={8}
+          type="auto"
           h="100%"
           mr={isEditModeEnabled ? 'xl' : undefined}
+          styles={{
+            viewport:{
+              //mantine being mantine again... this might break
+              '& div[style="min-width: 100%; display: table;"]':{
+                height:'100%',
+              },
+            },
+          }}
         >
           <Flex
             style={{ flexDirection: widget.properties.layout === 'vertical' ? 'column' : 'row' }}
-            gap="md"
+            gap="0"
+            h="100%"
           >
             {widget.properties.items.map((item: BookmarkItem, index) => (
               <Card
                 key={index}
-                w={widget.properties.layout === 'vertical' ? '100%' : undefined}
-                px="xl"
+                px="md"
+                py="0"
                 component="a"
                 href={item.href}
                 target={item.openNewTab ? '_blank' : undefined}
-                withBorder
+                sx={{
+                  border:'0.1rem solid transparent',
+                  borderRadius:'0',
+                  borderBottomColor:(widget.properties.layout === 'vertical' && index < widget.properties.items.length - 1) ? '#343740' : 'transparent',
+                  borderRightColor:(widget.properties.layout === 'horizontal' && index < widget.properties.items.length - 1) ? '#343740' : 'transparent',
+                  backgroundColor: 'transparent',
+                  '&:hover': { backgroundColor: fn.primaryColor().concat('40'),}, //'40' = 25% opacity
+                  flex:'1 1 auto'
+                }}
+                display="flex"
               >
-                <BookmarkItemContent item={item} />
+                <BookmarkItemContent item={item}/>
               </Card>
             ))}
           </Flex>
@@ -256,22 +287,28 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
   }
 }
 
-const BookmarkItemContent = ({ item }: { item: BookmarkItem }) => (
-  <Group>
-    <Image src={item.iconUrl} width={30} height={30} fit="contain" withPlaceholder />
+const BookmarkItemContent = ({ item }: { item: BookmarkItem }) => {
+  const { colorScheme } = useMantineTheme();
+  return (
+  <Group spacing="0rem 1rem">
+    <Image src={item.iconUrl} width={47} height={47} fit="contain" withPlaceholder />
     <Stack spacing={0}>
-      <Text>{item.name}</Text>
-      <Text color="dimmed" size="sm">
+      <Text size="md">{item.name}</Text>
+      <Text
+        color={colorScheme === 'dark' ? "gray.6" : "gray.7"}
+        size="sm"
+        hidden={item.hideLink}
+      >
         {new URL(item.href).hostname}
       </Text>
     </Stack>
   </Group>
-);
+)};
 
 const useStyles = createStyles(() => ({
   grid: {
     display: 'grid',
-    gap: 20,
+    gap: 10,
     gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))',
   },
   autoGridItem: {