add settings saved notification

src/translations/en.js

@@ -70,6 +70,7 @@ module.exports = {
 
   // Settings Page
   settings_title: "Settings",
+  settings_saved_notification: "Saved",
 
   // General Settings
   settings_general_title: "General",

src/ui/pages/Settings/GeneralSettings.tsx

@@ -4,6 +4,7 @@ import { InputWithTitle } from "../../elements/InputWithTitle";
 import i18next from "i18next";
 
 // @ts-ignore
+import { settingsSavedNotification } from "./Settings";
 import translations from "../../../translations/index.mjs";
 
 const Themes = [
@@ -29,6 +30,7 @@ export class GeneralSettings extends Component<DefaultPageProps> {
             onChange={() => {
               const newTheme = this.themeSelectRef.current.value;
               this.props.settings.theme = newTheme;
+              settingsSavedNotification();
             }}
           >
             {Themes.map((theme) => {
@@ -51,6 +53,7 @@ export class GeneralSettings extends Component<DefaultPageProps> {
             onChange={() => {
               // TODO: check for api health to see if is valid api url.
               this.props.settings.apiURL = this.vaultURLInputRef.current.value;
+              settingsSavedNotification();
             }}
           />
         </InputWithTitle>
@@ -66,6 +69,7 @@ export class GeneralSettings extends Component<DefaultPageProps> {
               const t = await i18next.changeLanguage(language);
               this.props.settings.pageDirection = t("language_direction");
               window.location.reload();
+              settingsSavedNotification();
             }}
           >
             {Object.getOwnPropertyNames(translations).map((languageID) => (
@@ -83,6 +87,7 @@ export class GeneralSettings extends Component<DefaultPageProps> {
             onChange={() => {
               this.props.settings.pageDirection = this.pageDirectionRef.current.value;
               document.documentElement.dir = this.props.settings.pageDirection;
+              settingsSavedNotification();
             }}
           >
             {[

src/ui/pages/Settings/KeyValueEditorSettings.tsx

@@ -2,6 +2,7 @@ import { Component, createRef } from "preact";
 import { DefaultPageProps } from "../../../types/DefaultPageProps";
 import { InputWithTitle } from "../../elements/InputWithTitle";
 import { SupportedEditorLanguages } from "../Secrets/KeyValue/KeyValueEdit";
+import { settingsSavedNotification } from "./Settings";
 import i18next from "i18next";
 
 export class KeyValueEditorSettings extends Component<DefaultPageProps> {
@@ -19,6 +20,7 @@ export class KeyValueEditorSettings extends Component<DefaultPageProps> {
             class="uk-select uk-form-width-medium"
             onChange={() => {
               this.props.settings.kvEditorDefaultLanguage = this.syntaxSelectRef.current.value;
+              settingsSavedNotification();
             }}
           >
             {SupportedEditorLanguages.map((lang) => {
@@ -42,6 +44,7 @@ export class KeyValueEditorSettings extends Component<DefaultPageProps> {
               const value = this.indentInputRef.current.value;
               const indent = parseInt(value);
               this.props.settings.kvEditorIndent = indent;
+              settingsSavedNotification();
             }}
           />
         </InputWithTitle>

src/ui/pages/Settings/Settings.tsx

@@ -4,8 +4,16 @@ import { GeneralSettings } from "./GeneralSettings";
 import { Grid, GridSizes } from "../../elements/Grid";
 import { KeyValueEditorSettings } from "./KeyValueEditorSettings";
 import { PageTitle } from "../../elements/PageTitle";
+import UIkit from "uikit";
 import i18next from "i18next";
 
+export function settingsSavedNotification() {
+  UIkit.notification(i18next.t("settings_saved_notification"), {
+    status: "success",
+    timeout: 1000,
+  });
+}
+
 export class Settings extends Component<DefaultPageProps> {
   render() {
     return (