Studio: more work on studio

src/UI/InputElement/ValidatedInput.svelte

@@ -79,7 +79,7 @@
 
     onDestroy(_value.addCallbackAndRun((_) => setValues()))
     onDestroy(value.addCallbackAndRunD(fromUpstream => {
-        if(_value.data !== fromUpstream){
+        if(_value.data !== fromUpstream && fromUpstream !== ""){
             _value.setData(fromUpstream)
         }
     }))

src/UI/InputElement/Validators.ts

@@ -25,6 +25,7 @@ import TranslationValidator from "./Validators/TranslationValidator"
 import FediverseValidator from "./Validators/FediverseValidator"
 import IconValidator from "./Validators/IconValidator"
 import TagValidator from "./Validators/TagValidator"
+import IdValidator from "./Validators/IdValidator"
 
 export type ValidatorType = (typeof Validators.availableTypes)[number]
 
@@ -54,6 +55,7 @@ export default class Validators {
         "fediverse",
         "tag",
         "fediverse",
+        "id",
     ] as const
 
     public static readonly AllValidators: ReadonlyArray<Validator> = [
@@ -80,6 +82,7 @@ export default class Validators {
         new TranslationValidator(),
         new IconValidator(),
         new FediverseValidator(),
+        new IdValidator(),
     ]
 
     private static _byType = Validators._byTypeConstructor()

src/UI/InputElement/Validators/IconValidator.ts

@@ -11,7 +11,12 @@ export default class IconValidator extends Validator {
         super("icon", "Makes sure that a valid .svg-path is added")
     }
 
+    reformat(s: string, _?: () => string): string {
+        return s.trim()
+    }
+
     getFeedback(s: string, getCountry, sloppy?: boolean): Translation | undefined {
+        s = this.reformat(s)
         if (!s.startsWith("http")) {
             if (!IconValidator.allLicenses.has(s)) {
                 const close = sloppy

src/UI/InputElement/Validators/IdValidator.ts

@@ -0,0 +1,29 @@
+import { Translation } from "../../i18n/Translation"
+import { Validator } from "../Validator"
+import Translations from "../../i18n/Translations"
+
+export default class IdValidator extends Validator {
+    constructor() {
+        super(
+            "id",
+            "Checks for valid identifiers for layers, will automatically replace spaces and uppercase"
+        )
+    }
+    isValid(key: string, getCountry?: () => string): boolean {
+        return this.getFeedback(key, getCountry) === undefined
+    }
+
+    reformat(s: string, _?: () => string): string {
+        return s.replaceAll(" ", "_").toLowerCase()
+    }
+
+    getFeedback(s: string, _?: () => string): Translation | undefined {
+        if (s.length < 3) {
+            return Translations.t.validation.id.shouldBeLonger
+        }
+        if (!s.match(/^[a-zA-Z0-9_ ]+$/)) {
+            return Translations.t.validation.id.invalidCharacter
+        }
+        return undefined
+    }
+}