✨ Bookmarks - Open in new Tab (#983)

src/widgets/bookmark/BookmarkWidgetTile.tsx

@@ -12,6 +12,7 @@ import {
   TextInput,
   Title,
   createStyles,
+  Switch,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import {
@@ -36,6 +37,7 @@ interface BookmarkItem {
   name: string;
   href: string;
   iconUrl: string;
+  openNewTab: boolean;
 }
 
 const definition = defineWidget({
@@ -54,6 +56,7 @@ const definition = defineWidget({
           name: 'Homarr Documentation',
           href: 'https://homarr.dev',
           iconUrl: '/imgs/logo/logo.png',
+          openNewTab: false,
         };
       },
       itemComponent({ data, onChange, delete: deleteData }) {
@@ -96,7 +99,7 @@ const definition = defineWidget({
             return;
           }
 
-          onChange(form.values);
+          onChange({ ...form.values, openNewTab: form.values.openNewTab });
         }, [form.values]);
 
         return (
@@ -121,6 +124,11 @@ const definition = defineWidget({
                   form.setFieldValue('iconUrl', value ?? '');
                 }}
               />
+              <Switch
+                {...form.getInputProps('openNewTab')}
+                label="Open in new tab"
+                checked={form.values.openNewTab}
+              />
               <Button
                 onClick={() => deleteData()}
                 leftIcon={<IconTrash size="1rem" />}
@@ -205,6 +213,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
               px="xl"
               component="a"
               href={item.href}
+              target={item.openNewTab ? '_blank' : undefined}
               withBorder
             >
               <BookmarkItemContent item={item} />
@@ -232,6 +241,7 @@ function BookmarkWidgetTile({ widget }: BookmarkWidgetTileProps) {
                 px="xl"
                 component="a"
                 href={item.href}
+                target={item.openNewTab ? '_blank' : undefined}
                 withBorder
               >
                 <BookmarkItemContent item={item} />