Re-add naming scheme frontend code and add autoscroll

frontend/src/components/manage/MultiPanelEditModal.svelte

@@ -69,7 +69,7 @@
     .modal-wrapper {
         display: flex;
         width: 75%;
-        margin: 10% auto auto auto;
+        margin: 2% auto auto auto;
     }
 
     @media only screen and (max-width: 1280px) {

frontend/src/components/manage/PanelCreationForm.svelte

@@ -45,6 +45,28 @@
                         <option value={form.form_id}>{form.title}</option>
                     {/each}
                 </Dropdown>
+
+                <div>
+                    <label for="naming-scheme-wrapper" class="form-label">Naming Scheme</label>
+                    <div class="row" id="naming-scheme-wrapper">
+                        <div>
+                            <label class="form-label">Use Server Default</label>
+                            <Toggle hideLabel
+                                    toggledColor="#66bb6a"
+                                    untoggledColor="#ccc"
+                                    bind:toggled={data.use_server_default_naming_scheme} />
+                        </div>
+                    </div>
+                </div>
+
+                {#if !data.use_server_default_naming_scheme}
+                    <Input col4
+                           label="Naming Scheme"
+                           bind:value={data.naming_scheme}
+                           placeholder="ticket-%id%"
+                           tooltipText="Click here for the full placeholder list"
+                           tooltipLink="https://docs.ticketsbot.net" />
+                {/if}
             </div>
         </div>
     </Collapsible>

frontend/src/components/manage/PanelEditModal.svelte

@@ -1,4 +1,4 @@
-<div class="modal" transition:fade>
+<div class="modal" transition:fade bind:this={modal}>
   <div class="modal-wrapper">
     <Card footer="{true}" footerRight="{true}" fill="{false}">
       <span slot="title">Edit Panel</span>
@@ -29,6 +29,8 @@
     import Card from "../Card.svelte";
     import Button from "../Button.svelte";
 
+    export let modal;
+
     export let guildId;
     export let panel = {};
     export let channels = [];
@@ -74,7 +76,7 @@
     .modal-wrapper {
         display: flex;
         width: 75%;
-        margin: 10% auto auto auto;
+        margin: 2% auto auto auto;
         padding-bottom: 5%;
     }
 

frontend/src/views/Panels.svelte

@@ -1,5 +1,5 @@
 {#if editModal}
-  <PanelEditModal {guildId} {channels} {roles} {emojis} {teams} {forms} bind:panel={editData}
+  <PanelEditModal bind:modal={editModalElement} {guildId} {channels} {roles} {emojis} {teams} {forms} bind:panel={editData}
                     on:close={() => editModal = false} on:confirm={submitEdit}/>
 {/if}
 
@@ -149,6 +149,7 @@
     import MultiPanelCreationForm from '../components/manage/MultiPanelCreationForm.svelte';
     import MultiPanelEditModal from "../components/manage/MultiPanelEditModal.svelte";
     import ConfirmationModal from "../components/ConfirmationModal.svelte";
+    import {afterUpdate} from "svelte";
 
     export let currentRoute;
     export let params = {};
@@ -176,14 +177,20 @@
     let multiPanelCreateData;
     let multiPanelEditData;
 
+    let editModalElement;
+
     function openEditModal(panelId) {
         editData = panels.find((p) => p.panel_id === panelId);
         editModal = true;
+
+        window.scrollTo({ top: 0, behavior: 'smooth' });
     }
 
     function openMultiEditModal(id) {
         multiPanelEditData = multiPanels.find((mp) => mp.id === id);
         multiEditModal = true;
+
+        window.scrollTo({ top: 0, behavior: 'smooth' });
     }
 
     async function resendPanel(panelId) {