🎨 Rename "services" to "apps" in entire project

src/components/Dashboard/Tiles/Apps/AppIcon.tsx

@@ -3,4 +3,4 @@ interface ServiceIconProps {
   service: string;
 }
 
-export const ServiceIcon = ({ size }: ServiceIconProps) => null;
+export const AppIcon = ({ size }: ServiceIconProps) => null;

src/components/Dashboard/Tiles/Apps/AppMenu.tsx

@@ -1,19 +1,19 @@
 import { openContextModalGeneric } from '../../../../tools/mantineModalManagerExtensions';
-import { ServiceType } from '../../../../types/service';
+import { AppType } from '../../../../types/app';
 import { GenericTileMenu } from '../GenericTileMenu';
 
 interface TileMenuProps {
-  service: ServiceType;
+  app: AppType;
 }
 
-export const ServiceMenu = ({ service }: TileMenuProps) => {
+export const AppMenu = ({ app }: TileMenuProps) => {
   const handleClickEdit = () => {
-    openContextModalGeneric<{ service: ServiceType; allowServiceNamePropagation: boolean }>({
-      modal: 'editService',
+    openContextModalGeneric<{ app: AppType; allowAppNamePropagation: boolean }>({
+      modal: 'editApp',
       size: 'xl',
       innerProps: {
-        service,
-        allowServiceNamePropagation: false,
+        app,
+        allowAppNamePropagation: false,
       },
       styles: {
         root: {
@@ -25,9 +25,9 @@ export const ServiceMenu = ({ service }: TileMenuProps) => {
 
   const handleClickChangePosition = () => {
     openContextModalGeneric({
-      modal: 'changeServicePositionModal',
+      modal: 'changeAppPositionModal',
       innerProps: {
-        service,
+        app,
       },
       styles: {
         root: {

src/components/Dashboard/Tiles/Apps/AppPing.tsx

@@ -3,23 +3,23 @@ import { useQuery } from '@tanstack/react-query';
 import { motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
 import { useConfigContext } from '../../../../config/provider';
-import { ServiceType } from '../../../../types/service';
+import { AppType } from '../../../../types/app';
 
-interface ServicePingProps {
-  service: ServiceType;
+interface AppPingProps {
+  app: AppType;
 }
 
-export const ServicePing = ({ service }: ServicePingProps) => {
+export const AppPing = ({ app }: AppPingProps) => {
   const { t } = useTranslation('modules/ping');
   const { config } = useConfigContext();
   const active =
-    (config?.settings.customization.layout.enabledPing && service.network.enabledStatusChecker) ??
+    (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
     false;
   const { data, isLoading } = useQuery({
-    queryKey: [`ping/${service.id}`],
+    queryKey: [`ping/${app.id}`],
     queryFn: async () => {
-      const response = await fetch(`/api/modules/ping?url=${encodeURI(service.url)}`);
-      const isOk = service.network.okStatus.includes(response.status);
+      const response = await fetch(`/api/modules/ping?url=${encodeURI(app.url)}`);
+      const isOk = app.network.okStatus.includes(response.status);
       return {
         status: response.status,
         state: isOk ? 'online' : 'down',

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -1,19 +1,19 @@
 import { Card, Center, Text, UnstyledButton } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { createStyles } from '@mantine/styles';
-import { ServiceType } from '../../../../types/service';
+import { AppType } from '../../../../types/app';
 import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
 import { HomarrCardWrapper } from '../HomarrCardWrapper';
 import { BaseTileProps } from '../type';
-import { ServiceMenu } from './ServiceMenu';
-import { ServicePing } from './ServicePing';
+import { AppMenu } from './AppMenu';
+import { AppPing } from './AppPing';
 
-interface ServiceTileProps extends BaseTileProps {
-  service: ServiceType;
+interface AppTileProps extends BaseTileProps {
+  app: AppType;
 }
 
-export const ServiceTile = ({ className, service }: ServiceTileProps) => {
+export const AppTile = ({ className, app }: AppTileProps) => {
   const isEditMode = useEditModeStore((x) => x.enabled);
 
   const { cx, classes } = useStyles();
@@ -24,25 +24,25 @@ export const ServiceTile = ({ className, service }: ServiceTileProps) => {
 
   const inner = (
     <>
-      <Text align="center" weight={500} size="md" className={classes.serviceName}>
-        {service.name}
+      <Text align="center" weight={500} size="md" className={classes.appName}>
+        {app.name}
       </Text>
       <Center style={{ height: '75%', flex: 1 }}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img className={classes.image} src={service.appearance.iconUrl} alt="" />
+        <img className={classes.image} src={app.appearance.iconUrl} alt="" />
       </Center>
     </>
   );
 
   return (
     <HomarrCardWrapper className={className}>
-      {/* TODO: add service menu */}
+      {/* TODO: add app menu */}
 
       <div style={{ position: 'absolute', top: 10, right: 10 }}>
-        <ServiceMenu service={service} />
+        <AppMenu app={app} />
       </div>
 
-      {!service.url || isEditMode ? (
+      {!app.url || isEditMode ? (
         <UnstyledButton
           className={classes.button}
           style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
@@ -53,14 +53,14 @@ export const ServiceTile = ({ className, service }: ServiceTileProps) => {
         <UnstyledButton
           style={{ pointerEvents: isEditMode ? 'none' : 'auto' }}
           component={NextLink}
-          href={service.url}
-          target={service.behaviour.isOpeningNewTab ? '_blank' : '_self'}
+          href={app.url}
+          target={app.behaviour.isOpeningNewTab ? '_blank' : '_self'}
           className={cx(classes.button, classes.link)}
         >
           {inner}
         </UnstyledButton>
       )}
-      <ServicePing service={service} />
+      <AppPing app={app} />
     </HomarrCardWrapper>
   );
 };
@@ -72,8 +72,8 @@ const useStyles = createStyles((theme, _params, getRef) => ({
     maxWidth: '80%',
     transition: 'transform 100ms ease-in-out',
   },
-  serviceName: {
-    ref: getRef('serviceName'),
+  appName: {
+    ref: getRef('appName'),
   },
   button: {
     height: '100%',
@@ -87,8 +87,8 @@ const useStyles = createStyles((theme, _params, getRef) => ({
     [`&:hover .${getRef('image')}`]: {
       // TODO: add styles for image when hovering card
     },
-    [`&:hover .${getRef('serviceName')}`]: {
-      // TODO: add styles for service name when hovering card
+    [`&:hover .${getRef('appName')}`]: {
+      // TODO: add styles for app name when hovering card
     },
   },
 }));

src/components/Dashboard/Tiles/TileWrapper.tsx

@@ -2,7 +2,7 @@ import { ReactNode, RefObject } from 'react';
 
 interface GridstackTileWrapperProps {
   id: string;
-  type: 'service' | 'module';
+  type: 'app' | 'module';
   x?: number;
   y?: number;
   width?: number;

src/components/Dashboard/Tiles/tilesDefinitions.tsx

@@ -5,11 +5,11 @@ import { DashDotTile } from '../../../widgets/dashDot/DashDotTile';
 import { UseNetTile } from '../../../widgets/useNet/UseNetTile';
 import { WeatherTile } from '../../../widgets/weather/WeatherTile';
 import { EmptyTile } from './EmptyTile';
-import { ServiceTile } from './Service/ServiceTile';
+import { AppTile } from './Apps/AppTile';
 
-// TODO: just remove and use service (later app) directly. For widgets the the definition should contain min/max width/height
+// TODO: just remove and use app (later app) directly. For widgets the the definition should contain min/max width/height
 type TileDefinitionProps = {
-  [key in keyof IntegrationsType | 'service']: {
+  [key in keyof IntegrationsType | 'app']: {
     minWidth?: number;
     minHeight?: number;
     maxWidth?: number;
@@ -20,8 +20,8 @@ type TileDefinitionProps = {
 
 // TODO: change components for other modules
 export const Tiles: TileDefinitionProps = {
-  service: {
-    component: ServiceTile,
+  app: {
+    component: AppTile,
     minWidth: 2,
     maxWidth: 12,
     minHeight: 2,