Initial

resources/app/templates/sidebar/apps/font-config.html

@@ -0,0 +1,71 @@
+<form>
+    <!-- Font Preview -->
+    <div style="font-family: '{{family}}'; font-weight: {{selected.weight}}; font-style: {{selected.style}};"
+         class="font-preview">
+        <p contenteditable="true" data-edit="preview">{{{font.preview}}}</p>
+    </div>
+
+    {{#if fonts}}
+    <hr>
+    {{/if}}
+
+    <!-- Custom Fonts -->
+    {{#each fonts}}
+    <div class="control custom-font {{#if selected}}selected{{/if}}" data-family="{{family}}" data-index="{{index}}"
+         data-action="select">
+        <span>{{{font}}}</span>
+        <a class="control" data-action="delete" title="{{localize "FONTS.RemoveFont"}}">
+            <i class="fa-solid fa-xmark"></i>
+        </a>
+    </div>
+    {{/each}}
+
+    <hr>
+
+    <!-- Add a Font -->
+    <div class="form-group">
+        <label>{{localize "FONTS.Type"}}</label>
+        <div class="form-fields">
+            <label class="checkbox">
+                <input type="radio" name="type" value="file" checked>
+                {{localize "FONTS.TypeFile"}}
+            </label>
+            <label class="checkbox">
+                <input type="radio" name="type" value="system">
+                {{localize "FONTS.TypeSystem"}}
+            </label>
+        </div>
+        <p class="hint">{{localize "FONTS.TypeHint"}}</p>
+    </div>
+    <div class="form-group">
+        <label>{{localize "FONTS.Family"}}</label>
+        <div class="form-fields">
+            <input type="text" name="family" value="{{font.family}}">
+        </div>
+    </div>
+    <div class="form-group">
+        <label>{{localize "FONTS.Weight"}}</label>
+        <div class="form-fields">
+            <select name="weight" data-dtype="Number">
+                {{selectOptions weights selected=font.weight valueAttr="value" labelAttr="label"}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group">
+        <label>{{localize "FONTS.Style"}}</label>
+        <div class="form-fields">
+            <select name="style">
+                {{selectOptions styles selected=font.style}}
+            </select>
+        </div>
+    </div>
+    <div class="form-group picker">
+        <label>{{localize "FONTS.File"}}</label>
+        <div class="form-fields">
+            <file-picker name="src" type="font" value="{{font.src}}"></file-picker>
+        </div>
+    </div>
+    <button type="button" name="add-font" class="control" data-action="add">
+        <i class="fa-solid fa-plus"></i> {{localize "FONTS.AddFont"}}
+    </button>
+</form>