Use ID instead of only names

src/components/AppShelf/AddAppShelfItem.tsx

@@ -15,6 +15,7 @@ import {
   Title,
 } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { time } from 'console';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
@@ -126,6 +127,7 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
 
   const form = useForm({
     initialValues: {
+      id: props.id ?? Date.now(),
       type: props.type ?? 'Other',
       name: props.name ?? '',
       icon: props.icon ?? '',
@@ -166,11 +168,13 @@ export function AddAppShelfItemForm(props: { setOpened: (b: boolean) => void } &
       <form
         onSubmit={form.onSubmit(() => {
           // If service already exists, update it.
-          if (config.services && config.services.find((s) => s.name === form.values.name)) {
+          if (config.services && config.services.find((s) => s.id === form.values.id)) {
+            console.log('found service with the same id (modify)');
             setConfig({
               ...config,
+              // replace the found item by matching ID
               services: config.services.map((s) => {
-                if (s.name === form.values.name) {
+                if (s.id === form.values.id) {
                   return {
                     ...form.values,
                   };

src/components/AppShelf/AppShelf.tsx

@@ -22,8 +22,8 @@ const AppShelf = (props: any) => {
   return (
     <Grid gutter="xl" align="center">
       {config.services.map((service) => (
-        <Grid.Col key={service.name} span={6} xl={2} xs={4} sm={3} md={3}>
-          <AppShelfItem key={service.name} service={service} />
+        <Grid.Col key={service.id} span={6} xl={2} xs={4} sm={3} md={3}>
+          <AppShelfItem key={service.id} service={service} />
         </Grid.Col>
       ))}
     </Grid>

src/components/AppShelf/AppShelfMenu.tsx

@@ -22,6 +22,7 @@ export default function AppShelfMenu(props: any) {
         <AddAppShelfItemForm
           setOpened={setOpened}
           name={service.name}
+          id={service.id}
           type={service.type}
           url={service.url}
           icon={service.icon}
@@ -54,7 +55,7 @@ export default function AppShelfMenu(props: any) {
           onClick={(e: any) => {
             setConfig({
               ...config,
-              services: config.services.filter((s) => s.name !== service.name),
+              services: config.services.filter((s) => s.id !== service.id),
             });
             showNotification({
               autoClose: 5000,

src/tools/types.ts

@@ -29,7 +29,7 @@ export type ServiceType =
   | 'Emby';
 
 export interface serviceItem {
-  [x: string]: any;
+  id: number;
   name: string;
   type: string;
   url: string;