4 files changed, 168 insertions, 87 deletions

diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 44411cdad..211214d93 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -2143,263 +2143,302 @@
         }
       },
       {
-        "defaultMessage": "!!!Available services",
+        "defaultMessage": "!!!Open user.css",
         "end": {
           "column": 3,
           "line": 39
         },
         "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.openUserCss",
+        "start": {
+          "column": 15,
+          "line": 36
+        }
+      },
+      {
+        "defaultMessage": "!!!Open user.js",
+        "end": {
+          "column": 3,
+          "line": 43
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.openUserJs",
+        "start": {
+          "column": 14,
+          "line": 40
+        }
+      },
+      {
+        "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
+        "end": {
+          "column": 3,
+          "line": 47
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
+        "id": "settings.service.form.recipeFileInfo",
+        "start": {
+          "column": 18,
+          "line": 44
+        }
+      },
+      {
+        "defaultMessage": "!!!Available services",
+        "end": {
+          "column": 3,
+          "line": 51
+        },
+        "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.availableServices",
         "start": {
           "column": 21,
-          "line": 36
+          "line": 48
         }
       },
       {
         "defaultMessage": "!!!Your services",
         "end": {
           "column": 3,
-          "line": 43
+          "line": 55
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.yourServices",
         "start": {
           "column": 16,
-          "line": 40
+          "line": 52
         }
       },
       {
         "defaultMessage": "!!!Add {name}",
         "end": {
           "column": 3,
-          "line": 47
+          "line": 59
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.addServiceHeadline",
         "start": {
           "column": 22,
-          "line": 44
+          "line": 56
         }
       },
       {
         "defaultMessage": "!!!Edit {name}",
         "end": {
           "column": 3,
-          "line": 51
+          "line": 63
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.editServiceHeadline",
         "start": {
           "column": 23,
-          "line": 48
+          "line": 60
         }
       },
       {
         "defaultMessage": "!!!Hosted",
         "end": {
           "column": 3,
-          "line": 55
+          "line": 67
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabHosted",
         "start": {
           "column": 13,
-          "line": 52
+          "line": 64
         }
       },
       {
         "defaultMessage": "!!!Self hosted ⭐️",
         "end": {
           "column": 3,
-          "line": 59
+          "line": 71
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.tabOnPremise",
         "start": {
           "column": 16,
-          "line": 56
+          "line": 68
         }
       },
       {
         "defaultMessage": "!!!Use the hosted {name} service.",
         "end": {
           "column": 3,
-          "line": 63
+          "line": 75
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.useHostedService",
         "start": {
           "column": 20,
-          "line": 60
+          "line": 72
         }
       },
       {
         "defaultMessage": "!!!Could not validate custom {name} server.",
         "end": {
           "column": 3,
-          "line": 67
+          "line": 79
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlValidationError",
         "start": {
           "column": 28,
-          "line": 64
+          "line": 76
         }
       },
       {
         "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
         "end": {
           "column": 3,
-          "line": 71
+          "line": 83
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlPremiumInfo",
         "start": {
           "column": 24,
-          "line": 68
+          "line": 80
         }
       },
       {
         "defaultMessage": "!!!Upgrade your account",
         "end": {
           "column": 3,
-          "line": 75
+          "line": 87
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.customUrlUpgradeAccount",
         "start": {
           "column": 27,
-          "line": 72
+          "line": 84
         }
       },
       {
         "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
         "end": {
           "column": 3,
-          "line": 79
+          "line": 91
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.indirectMessageInfo",
         "start": {
           "column": 23,
-          "line": 76
+          "line": 88
         }
       },
       {
         "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
         "end": {
           "column": 3,
-          "line": 83
+          "line": 95
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.isMutedInfo",
         "start": {
           "column": 15,
-          "line": 80
+          "line": 92
         }
       },
       {
         "defaultMessage": "!!!Notifications",
         "end": {
           "column": 3,
-          "line": 87
+          "line": 99
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineNotifications",
         "start": {
           "column": 25,
-          "line": 84
+          "line": 96
         }
       },
       {
         "defaultMessage": "!!!Unread message badges",
         "end": {
           "column": 3,
-          "line": 91
+          "line": 103
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineBadges",
         "start": {
           "column": 18,
-          "line": 88
+          "line": 100
         }
       },
       {
         "defaultMessage": "!!!General",
         "end": {
           "column": 3,
-          "line": 95
+          "line": 107
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.headlineGeneral",
         "start": {
           "column": 19,
-          "line": 92
+          "line": 104
         }
       },
       {
         "defaultMessage": "!!!Delete",
         "end": {
           "column": 3,
-          "line": 99
+          "line": 111
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconDelete",
         "start": {
           "column": 14,
-          "line": 96
+          "line": 108
         }
       },
       {
         "defaultMessage": "!!!Drop your image, or click here",
         "end": {
           "column": 3,
-          "line": 103
+          "line": 115
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.iconUpload",
         "start": {
           "column": 14,
-          "line": 100
+          "line": 112
         }
       },
       {
         "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
         "end": {
           "column": 3,
-          "line": 107
+          "line": 119
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.headline",
         "start": {
           "column": 17,
-          "line": 104
+          "line": 116
         }
       },
       {
         "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
         "end": {
           "column": 3,
-          "line": 111
+          "line": 123
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.restartInfo",
         "start": {
           "column": 20,
-          "line": 108
+          "line": 120
         }
       },
       {
         "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
         "end": {
           "column": 3,
-          "line": 115
+          "line": 127
         },
         "file": "src/components/settings/services/EditServiceForm.js",
         "id": "settings.service.form.proxy.info",
         "start": {
           "column": 13,
-          "line": 112
+          "line": 124
         }
       }
     ],
@@ -4175,15 +4214,15 @@
         }
       },
       {
-        "defaultMessage": "!!!Always show service navigation bar",
+        "defaultMessage": "!!!Navigation bar behaviour",
         "end": {
           "column": 3,
           "line": 62
         },
         "file": "src/containers/settings/EditSettingsScreen.js",
-        "id": "settings.app.form.showServiceNavigationBar",
+        "id": "settings.app.form.navigationBarBehaviour",
         "start": {
-          "column": 28,
+          "column": 26,
           "line": 59
         }
       },
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 97be15fed..36494724b 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -284,6 +284,7 @@
   "settings.app.form.language": "Language",
   "settings.app.form.lockPassword": "Password",
   "settings.app.form.minimizeToSystemTray": "Minimize Ferdi to system tray",
+  "settings.app.form.navigationBarBehaviour": "Navigation bar behaviour",
   "settings.app.form.noUpdates": "Disable updates",
   "settings.app.form.privateNotifications": "Don't show message content in notifications",
   "settings.app.form.runInBackground": "Keep Ferdi in background when closing the window",
@@ -295,7 +296,6 @@
   "settings.app.form.serviceRibbonWidth": "Sidebar width",
   "settings.app.form.showDisabledServices": "Display disabled services tabs",
   "settings.app.form.showMessagesBadgesWhenMuted": "Show unread message badge when notifications are disabled",
-  "settings.app.form.showServiceNavigationBar": "Always show service navigation bar",
   "settings.app.form.startMinimized": "Start minimized in tray",
   "settings.app.form.todoServer": "Todo Server",
   "settings.app.form.universalDarkMode": "Enable universal Dark Mode",
@@ -374,6 +374,8 @@
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
   "settings.service.form.name": "Name",
   "settings.service.form.openDarkmodeCss": "Open darkmode.css",
+  "settings.service.form.openUserCss": "Open user.css",
+  "settings.service.form.openUserJs": "Open user.js",
   "settings.service.form.proxy.headline": "HTTP/HTTPS Proxy Settings",
   "settings.service.form.proxy.host": "Proxy Host/IP",
   "settings.service.form.proxy.info": "Proxy settings will not synced with the Ferdi servers.",
@@ -382,6 +384,7 @@
   "settings.service.form.proxy.port": "Port",
   "settings.service.form.proxy.restartInfo": "Please restart Ferdi after changing proxy Settings.",
   "settings.service.form.proxy.user": "User (optional)",
+  "settings.service.form.recipeFileInfo": "Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
   "settings.service.form.saveButton": "Save service",
   "settings.service.form.tabHosted": "Hosted",
   "settings.service.form.tabOnPremise": "Self hosted ⭐️",
diff --git a/src/i18n/messages/src/components/settings/services/EditServiceForm.json b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
index f4692ed29..df64c8a5f 100644
--- a/src/i18n/messages/src/components/settings/services/EditServiceForm.json
+++ b/src/i18n/messages/src/components/settings/services/EditServiceForm.json
@@ -39,15 +39,54 @@
     }
   },
   {
+    "id": "settings.service.form.openUserCss",
+    "defaultMessage": "!!!Open user.css",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 36,
+      "column": 15
+    },
+    "end": {
+      "line": 39,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.service.form.openUserJs",
+    "defaultMessage": "!!!Open user.js",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 40,
+      "column": 14
+    },
+    "end": {
+      "line": 43,
+      "column": 3
+    }
+  },
+  {
+    "id": "settings.service.form.recipeFileInfo",
+    "defaultMessage": "!!!Your user files will be inserted into the webpage so you can customize services in any way you like. User files are only stored locally and are not transferred to other computers using the same account.",
+    "file": "src/components/settings/services/EditServiceForm.js",
+    "start": {
+      "line": 44,
+      "column": 18
+    },
+    "end": {
+      "line": 47,
+      "column": 3
+    }
+  },
+  {
     "id": "settings.service.form.availableServices",
     "defaultMessage": "!!!Available services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 36,
+      "line": 48,
       "column": 21
     },
     "end": {
-      "line": 39,
+      "line": 51,
       "column": 3
     }
   },
@@ -56,11 +95,11 @@
     "defaultMessage": "!!!Your services",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 40,
+      "line": 52,
       "column": 16
     },
     "end": {
-      "line": 43,
+      "line": 55,
       "column": 3
     }
   },
@@ -69,11 +108,11 @@
     "defaultMessage": "!!!Add {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 44,
+      "line": 56,
       "column": 22
     },
     "end": {
-      "line": 47,
+      "line": 59,
       "column": 3
     }
   },
@@ -82,11 +121,11 @@
     "defaultMessage": "!!!Edit {name}",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 48,
+      "line": 60,
       "column": 23
     },
     "end": {
-      "line": 51,
+      "line": 63,
       "column": 3
     }
   },
@@ -95,11 +134,11 @@
     "defaultMessage": "!!!Hosted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 52,
+      "line": 64,
       "column": 13
     },
     "end": {
-      "line": 55,
+      "line": 67,
       "column": 3
     }
   },
@@ -108,11 +147,11 @@
     "defaultMessage": "!!!Self hosted ⭐️",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 56,
+      "line": 68,
       "column": 16
     },
     "end": {
-      "line": 59,
+      "line": 71,
       "column": 3
     }
   },
@@ -121,11 +160,11 @@
     "defaultMessage": "!!!Use the hosted {name} service.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 60,
+      "line": 72,
       "column": 20
     },
     "end": {
-      "line": 63,
+      "line": 75,
       "column": 3
     }
   },
@@ -134,11 +173,11 @@
     "defaultMessage": "!!!Could not validate custom {name} server.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 64,
+      "line": 76,
       "column": 28
     },
     "end": {
-      "line": 67,
+      "line": 79,
       "column": 3
     }
   },
@@ -147,11 +186,11 @@
     "defaultMessage": "!!!To add self hosted services, you need a Ferdi Premium Supporter Account.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 68,
+      "line": 80,
       "column": 24
     },
     "end": {
-      "line": 71,
+      "line": 83,
       "column": 3
     }
   },
@@ -160,11 +199,11 @@
     "defaultMessage": "!!!Upgrade your account",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 72,
+      "line": 84,
       "column": 27
     },
     "end": {
-      "line": 75,
+      "line": 87,
       "column": 3
     }
   },
@@ -173,11 +212,11 @@
     "defaultMessage": "!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 76,
+      "line": 88,
       "column": 23
     },
     "end": {
-      "line": 79,
+      "line": 91,
       "column": 3
     }
   },
@@ -186,11 +225,11 @@
     "defaultMessage": "!!!When disabled, all notification sounds and audio playback are muted",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 80,
+      "line": 92,
       "column": 15
     },
     "end": {
-      "line": 83,
+      "line": 95,
       "column": 3
     }
   },
@@ -199,11 +238,11 @@
     "defaultMessage": "!!!Notifications",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 84,
+      "line": 96,
       "column": 25
     },
     "end": {
-      "line": 87,
+      "line": 99,
       "column": 3
     }
   },
@@ -212,11 +251,11 @@
     "defaultMessage": "!!!Unread message badges",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 88,
+      "line": 100,
       "column": 18
     },
     "end": {
-      "line": 91,
+      "line": 103,
       "column": 3
     }
   },
@@ -225,11 +264,11 @@
     "defaultMessage": "!!!General",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 92,
+      "line": 104,
       "column": 19
     },
     "end": {
-      "line": 95,
+      "line": 107,
       "column": 3
     }
   },
@@ -238,11 +277,11 @@
     "defaultMessage": "!!!Delete",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 96,
+      "line": 108,
       "column": 14
     },
     "end": {
-      "line": 99,
+      "line": 111,
       "column": 3
     }
   },
@@ -251,11 +290,11 @@
     "defaultMessage": "!!!Drop your image, or click here",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 100,
+      "line": 112,
       "column": 14
     },
     "end": {
-      "line": 103,
+      "line": 115,
       "column": 3
     }
   },
@@ -264,11 +303,11 @@
     "defaultMessage": "!!!HTTP/HTTPS Proxy Settings",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 104,
+      "line": 116,
       "column": 17
     },
     "end": {
-      "line": 107,
+      "line": 119,
       "column": 3
     }
   },
@@ -277,11 +316,11 @@
     "defaultMessage": "!!!Please restart Ferdi after changing proxy Settings.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 108,
+      "line": 120,
       "column": 20
     },
     "end": {
-      "line": 111,
+      "line": 123,
       "column": 3
     }
   },
@@ -290,11 +329,11 @@
     "defaultMessage": "!!!Proxy settings will not be synchronized with the Ferdi servers.",
     "file": "src/components/settings/services/EditServiceForm.js",
     "start": {
-      "line": 112,
+      "line": 124,
       "column": 13
     },
     "end": {
-      "line": 115,
+      "line": 127,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
index 98abb0f2b..fdf49bbb6 100644
--- a/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
+++ b/src/i18n/messages/src/containers/settings/EditSettingsScreen.json
@@ -91,12 +91,12 @@
     }
   },
   {
-    "id": "settings.app.form.showServiceNavigationBar",
-    "defaultMessage": "!!!Always show service navigation bar",
+    "id": "settings.app.form.navigationBarBehaviour",
+    "defaultMessage": "!!!Navigation bar behaviour",
     "file": "src/containers/settings/EditSettingsScreen.js",
     "start": {
       "line": 59,
-      "column": 28
+      "column": 26
     },
     "end": {
       "line": 62,