Update AppShelf

components/AppShelf/AddAppShelfItem.tsx

@@ -0,0 +1,127 @@
+import {
+  useMantineTheme,
+  Modal,
+  Paper,
+  Center,
+  Group,
+  TextInput,
+  Image,
+  Button,
+  Select,
+  AspectRatio,
+  Box,
+  Text,
+  Grid,
+} from '@mantine/core';
+import { useForm } from '@mantine/hooks';
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+import { Apps } from 'tabler-icons-react';
+import { ServiceTypes } from './AppShelf.d';
+
+export default function AddItemShelfItem(props: any) {
+  const { additem: addItem } = props;
+  const [opened, setOpened] = useState(false);
+  const theme = useMantineTheme();
+  const form = useForm({
+    initialValues: {
+      type: 'Other',
+      name: '',
+      icon: '',
+      url: '',
+    },
+
+    validationRules: {},
+  });
+  return (
+    <>
+      <Modal size={'xl'} opened={opened} onClose={() => setOpened(false)} title="Add a service">
+        <Paper radius="md" p="xl" withBorder {...props}>
+          <Center>
+            <Image
+              height={120}
+              width={120}
+              src={form.values.icon}
+              alt="Placeholder"
+              withPlaceholder
+            />
+          </Center>
+          <form
+            onSubmit={form.onSubmit(() => {
+              addItem(form.values);
+              setOpened(false);
+            })}
+          >
+            <Group direction="column" grow>
+              <TextInput
+                required
+                label="Service name"
+                placeholder="Plex"
+                value={form.values.name}
+                onChange={(event) => form.setFieldValue('name', event.currentTarget.value)}
+                error={form.errors.name && 'Invalid name'}
+              />
+
+              <TextInput
+                required
+                label="Icon url"
+                placeholder="https://i.gifer.com/ANPC.gif"
+                value={form.values.icon}
+                onChange={(event) => {
+                  form.setFieldValue('icon', event.currentTarget.value);
+                }}
+                error={form.errors.icon && 'Icon url is invalid'}
+              />
+              <TextInput
+                required
+                label="Service url"
+                placeholder="http://localhost:8989"
+                value={form.values.url}
+                onChange={(event) => form.setFieldValue('url', event.currentTarget.value)}
+                error={form.errors.icon && 'Icon url is invalid'}
+              />
+              <Select
+                label="Select the type of service (used for API calls)"
+                defaultValue={'Other'}
+                placeholder="Pick one"
+                value={form.values.type}
+                required
+                searchable
+                onChange={(value) => form.setFieldValue('type', value ?? 'Other')}
+                data={ServiceTypes}
+              />
+            </Group>
+
+            <Group grow position="center" mt="xl">
+              <Button type="submit">Add service</Button>
+            </Group>
+          </form>
+        </Paper>
+      </Modal>
+      <Grid.Col span={4} lg={2} sm={3}>
+        <AspectRatio ratio={4 / 3}>
+          <Box
+            sx={{
+              backgroundColor:
+                theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
+              textAlign: 'center',
+              padding: theme.spacing.xl,
+              borderRadius: theme.radius.md,
+              '&:hover': {
+                backgroundColor:
+                  theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+              },
+            }}
+          >
+            <Group direction="column" position="center">
+              <motion.div whileHover={{ scale: 1.2 }}>
+                <Apps style={{ cursor: 'pointer' }} onClick={() => setOpened(true)} size={60} />
+              </motion.div>
+              <Text>Add Service</Text>
+            </Group>
+          </Box>
+        </AspectRatio>
+      </Grid.Col>
+    </>
+  );
+}

components/AppShelf/AppShelf.d.ts

@@ -0,0 +1,15 @@
+export const ServiceTypes = [
+  'Other',
+  'Sonarr',
+  'Radarr',
+  'Lidarr',
+  'Plex',
+  'Emby',
+]
+
+export interface serviceItem {
+  name: string;
+  type: ServiceTypes;
+  url: string;
+  icon: string;
+}

components/AppShelf/AppShelf.tsx

@@ -1,32 +1,49 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
-import {
+import { Grid, Group, Text, Image, Anchor, Box, AspectRatio, createStyles } from '@mantine/core';
-  ActionIcon,
+import { serviceItem } from './AppShelf.d';
-  createStyles,
+import AppShelfMenu from './AppShelfMenu';
-  Grid,
+import AddItemShelfItem from './AddAppShelfItem';
-  Group,
+
-  Text,
+const useStyles = createStyles((theme) => ({
-  Title,
+  main: {
-  Paper,
+    backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-  Tooltip,
+    textAlign: 'center',
-  Image,
+    padding: theme.spacing.xl,
-  ThemeIcon,
+    borderRadius: theme.radius.md,
-  useMantineTheme,
+
-  Anchor,
+    '&:hover': {
-  Box,
+      backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-  Menu,
+    },
-  AspectRatio,
+  },
-} from '@mantine/core';
+}));
-import { ArrowBack, Trash } from 'tabler-icons-react';
 
 const AppShelf = () => {
-  const Services = loadServices();
+  const [services, setServices] = useState<serviceItem[]>([]);
+  const { classes } = useStyles();
   const [hovering, setHovering] = useState('none');
-  const theme = useMantineTheme();
+
+  useEffect(() => {
+    const localServices: serviceItem[] = JSON.parse(localStorage.getItem('services') || '[]');
+    if (localServices) {
+      setServices(localServices);
+    }
+  }, []);
+
+  function addItem(item: serviceItem) {
+    setServices([...services, item]);
+    localStorage.setItem('services', JSON.stringify([...services, item]));
+  }
+
+  function removeItem(item: serviceItem) {
+    setServices(services.filter((s) => s.url !== item.url));
+    localStorage.setItem('services', JSON.stringify(services.filter((s) => s.url !== item.url)));
+  }
+
   return (
     <Grid m={'xl'} gutter={'xl'}>
-      {Services.map((service, i) => (
+      {services.map((service, i) => (
-        <Grid.Col span={4} lg={2} sm={3} key={i}>
+        <Grid.Col lg={2} sm={3} key={i}>
           <motion.div
             onHoverStart={(e) => {
               setHovering(service.name);
@@ -36,34 +53,14 @@ const AppShelf = () => {
             }}
           >
             <AspectRatio ratio={4 / 3}>
-              <Box
+              <Box className={classes.main}>
-                sx={(theme) => ({
+                <motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
-                  backgroundColor:
+                  <AppShelfMenu removeitem={removeItem} name={service.name} />
-                    theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
-                  textAlign: 'center',
-                  padding: theme.spacing.xl,
-                  borderRadius: theme.radius.md,
-
-                  '&:hover': {
-                    backgroundColor:
-                      theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-                  },
-                })}
-              >
-                <motion.div animate={{opacity: hovering == service.name ? 1 : 0}}>
-                  <Menu sx={{ position: 'absolute', top: 3, right: 3 }}>
-                    <Menu.Label>Settings</Menu.Label>
-
-                    <Menu.Label>Danger zone</Menu.Label>
-                    <Menu.Item color="red" icon={<Trash size={14} />}>
-                      Delete
-                    </Menu.Item>
-                  </Menu>
                 </motion.div>
-                <Group position="center">
+                <Group direction="column" position="center">
                   <Anchor href={service.url} target="_blank">
                     <motion.div whileHover={{ scale: 1.2 }}>
-                      <Image height={60} src={service.icon} alt={service.name} />
+                      <Image style={{ maxWidth: 60 }} src={service.icon} alt={service.name} />
                     </motion.div>
                   </Anchor>
                   <Text>{service.name}</Text>
@@ -73,62 +70,75 @@ const AppShelf = () => {
           </motion.div>
         </Grid.Col>
       ))}
+      <AddItemShelfItem additem={addItem} />
     </Grid>
   );
 };
 
 export default AppShelf;
-function loadServices() {
+
+const MockServices = [
+  {
+    name: 'Radarr',
+    type: 'Radarr',
+    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
+    url: 'http://server:7878/',
+  },
+  {
+    name: 'Sonarr',
+    type: 'Sonarr',
+    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+    url: 'http://server:8989/',
+  },
+  {
+    name: 'Sonarr',
+    type: 'Sonarr',
+    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+    url: 'http://server:8989/',
+  },
+  {
+    name: 'Sonarr',
+    type: 'Sonarr',
+    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+    url: 'http://server:8989/',
+  },
+  {
+    name: 'Sonarr',
+    type: 'Sonarr',
+    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+    url: 'http://server:8989/',
+  },
+  {
+    name: 'Sonarr',
+    type: 'Sonarr',
+    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+    url: 'http://server:8989/',
+  },
+  {
+    name: 'Sonarr',
+    type: 'Sonarr',
+    icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
+    url: 'http://server:8989/',
+  },
+];
+
+function saveLocal(arg0: any) {
+  // localStorage.setItem('services', JSON.stringify(arg0));
+  console.log(`saving ${arg0}`);
+}
+
+function loadLocal(arg0: string) {
+  const local = localStorage.getItem(arg0);
+  if (local) {
+    return JSON.parse(local);
+  }
   return [
+    ...MockServices,
     {
       name: 'Radarr',
+      type: 'Radarr',
       icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Radarr/icon.png',
       url: 'http://server:7878/',
     },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
-    {
-      name: 'Sonarr',
-      icon: 'https://cdn.jsdelivr.net/gh/IceWhaleTech/CasaOS-AppStore@main/Apps/Sonarr/icon.png',
-      url: 'http://server:8989/',
-    },
   ];
 }

components/AppShelf/AppShelfMenu.tsx

@@ -0,0 +1,34 @@
+import { Menu, Text } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { Check, Trash } from 'tabler-icons-react';
+
+export default function AppShelfMenu(props: any) {
+  const { name, removeitem: removeItem } = props;
+  return (
+    <Menu sx={{ position: 'absolute', top: 3, right: 3 }}>
+      <Menu.Label>Settings</Menu.Label>
+
+      <Menu.Label>Danger zone</Menu.Label>
+      <Menu.Item
+        color="red"
+        onClick={(e: any) => {
+          removeItem(name);
+          showNotification({
+            autoClose: 5000,
+            title: (
+              <Text>
+                Service <b>{name}</b> removed successfully
+              </Text>
+            ),
+            color: 'green',
+            icon: <Check />,
+            message: undefined,
+          });
+        }}
+        icon={<Trash size={14} />}
+      >
+        Delete
+      </Menu.Item>
+    </Menu>
+  );
+}