💄 Added titles to widget and improved division

public/locales/en/modules/bookmark.json

@@ -4,6 +4,12 @@
     "description": "Displays a static list of strings or links",
     "settings": {
       "title": "Bookmark settings",
+      "name": {
+        "label": "Widget Title",
+        "placeholder": {
+          "label" : "Leave empty to keep the title hidden"
+        }
+      },
       "items": {
         "label": "Items"
       },

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -7,6 +7,7 @@ import {
   Group,
   Image,
   ScrollArea,
+  Divider,
   Stack,
   Switch,
   Text,
@@ -14,6 +15,7 @@ import {
   Title,
   createStyles,
   useMantineTheme,
+  InputProps,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import {
@@ -28,6 +30,7 @@ import { useTranslation } from 'next-i18next';
 import { useEffect } from 'react';
 import { v4 } from 'uuid';
 import { z } from 'zod';
+import React from 'react';
 
 import { useEditModeStore } from '../../components/Dashboard/Views/useEditModeStore';
 import { IconSelector } from '../../components/IconSelector/IconSelector';
@@ -47,6 +50,10 @@ const definition = defineWidget({
   id: 'bookmark',
   icon: IconBookmark,
   options: {
+    name: {
+      type: 'text',
+      defaultValue: '',
+    },
     items: {
       type: 'draggable-editable-list',
       defaultValue: [],
@@ -215,75 +222,92 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
   switch (widget.properties.layout) {
     case 'autoGrid':
       return (
-        <Box className={classes.grid} mr={isEditModeEnabled ? 'xl' : undefined} h="100%">
-          {widget.properties.items.map((item: BookmarkItem, index) => (
-            <Card
-              className={classes.autoGridItem}
-              key={index}
-              px="xl"
-              radius="md"
-              component="a"
-              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
-                flex:'1 1 auto',
-              }}
-              display="flex"
-            >
-              <BookmarkItemContent item={item} />
-            </Card>
-          ))}
-        </Box>
-      );
-    case 'horizontal':
-    case 'vertical':
-      return (
-        <ScrollArea
-          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="0"
+        <Stack h="100%" spacing={0}>
+          <Title size="h4" px="0.25rem">{widget.properties.name}</Title>
+          <Box
+            className={classes.grid}
+            mr={isEditModeEnabled && widget.properties.name === "" ? 'xl' : undefined}
             h="100%"
           >
             {widget.properties.items.map((item: BookmarkItem, index) => (
               <Card
+                className={classes.autoGridItem}
                 key={index}
-                px="md"
-                py="0"
+                px="xl"
+                radius="md"
                 component="a"
                 href={item.href}
                 target={item.openNewTab ? '_blank' : undefined}
+                withBorder
+                bg={colorScheme === 'dark' ? colors.dark[5].concat('80') : colors.blue[0].concat('80')}
                 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'
+                  '&:hover': { backgroundColor: fn.primaryColor().concat('40'), }, //'40' = 25% opacity
+                  flex:'1 1 auto',
                 }}
                 display="flex"
               >
-                <BookmarkItemContent item={item}/>
+                <BookmarkItemContent item={item} />
               </Card>
             ))}
-          </Flex>
-        </ScrollArea>
+          </Box>
+        </Stack>
+      );
+    case 'horizontal':
+    case 'vertical':
+      return (
+        <Stack h="100%" spacing={0}>
+          <Title size="h4" px="0.25rem">
+            {widget.properties.name}
+          </Title>
+          <ScrollArea
+            scrollbarSize={8}
+            type="auto"
+            h="100%"
+            offsetScrollbars
+            mr={isEditModeEnabled && widget.properties.name === ""? 'xl' : undefined}
+            styles={{
+              viewport:{
+                //mantine being mantine again... this might break. Needed for taking 100% of widget space
+                '& div[style="min-width: 100%; display: table;"]':{
+                  height:'100%',
+                },
+              },
+            }}
+          >
+            <Flex
+              direction={ widget.properties.layout === 'vertical' ? 'column' : 'row' }
+              gap="0"
+              h="100%"
+            >
+              {widget.properties.items.map((item: BookmarkItem, index) => (
+                <>
+                  <Divider
+                    m="1px"
+                    orientation={ widget.properties.layout !== 'vertical' ? 'vertical' : 'horizontal' } //Mantine doesn't let me refactor this, I tried
+                    hidden={!(index > 0)}
+                  />
+                  <Card
+                    key={index}
+                    px="md"
+                    py="1px"
+                    component="a"
+                    href={item.href}
+                    target={item.openNewTab ? '_blank' : undefined}
+                    radius="md"
+                    bg="transparent"
+                    sx={{
+                      '&:hover': { backgroundColor: fn.primaryColor().concat('40'),}, //'40' = 25% opacity
+                      flex:'1 1 auto'
+                    }}
+                    display="flex"
+                  >
+                    <BookmarkItemContent item={item}/>
+                  </Card>
+                </>
+              ))}
+            </Flex>
+          </ScrollArea>
+        </Stack>
       );
     default:
       return null;