feat(dashboard): focus on modal when open

dashboard/src/lib/group/Privacy.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, tick } from "svelte";
     import { ModalBody, ModalHeader, Col, Row, Input, Label, ModalFooter, Button, Spinner, Alert } from "sveltestrap";
 
     import { Group } from '../../api/types';
@@ -53,6 +53,11 @@
             loading = false;
         }
     }
+
+    async function focus(el) {
+        await tick();
+        el.focus();
+    }
 </script>
 
 
@@ -60,10 +65,10 @@
     <Alert color="danger">{err}</Alert>
     {/if}
     <Label><b>Set all to:</b></Label>
-    <Input type="select" bind:value={allPrivacy}>
+    <select class="form-select" bind:value={allPrivacy} use:focus>
         <option>public</option>
         <option>private</option>
-    </Input>
+    </select>
     <hr />
     <Row>
         <Col xs={12} lg={6} class="mb-3">

dashboard/src/lib/member/Privacy.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, tick } from "svelte";
     import { Col, Row, Input, Label, Button, Alert, Spinner } from "sveltestrap";
 
     import { Member } from '../../api/types';
@@ -54,6 +54,12 @@
             loading = false;
         }
     }
+
+    async function focus(el) {
+        await tick();
+        el.focus();
+    }
+
 </script>
 
 
@@ -61,10 +67,10 @@
     <Alert color="danger">{err}</Alert>
     {/if}
     <Label><b>Set all to:</b></Label>
-    <Input type="select" bind:value={allPrivacy}>
+    <select class="form-select" bind:value={allPrivacy} use:focus>
         <option>public</option>
         <option>private</option>
-    </Input>
+    </select>
     <hr />
     <Row>
         <Col xs={12} lg={6} class="mb-3">

dashboard/src/lib/member/ProxyTags.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { createEventDispatcher } from "svelte";
+    import { createEventDispatcher, tick } from "svelte";
     import { Col, Row, Input, Label, Button, Alert, Spinner, InputGroup } from "sveltestrap";
 
     import { Member } from '../../api/types';
@@ -43,6 +43,13 @@
             loading = false;
         }
     }
+
+    async function focus(el, first) {
+        if (first) {
+        await tick();
+        el.focus();
+        }
+    }
 </script>
 
 {#if err}
@@ -52,7 +59,7 @@
     {#each input as proxyTag, index (index)}
     <Col xs={12} lg={6} class="mb-2">
         <InputGroup>
-            <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.prefix} />
+            <textarea class="form-control" style="resize: none; height: 1em" bind:value={proxyTag.prefix} use:focus={index === 0 ? true : false}/>
             <Input disabled value="text"/>
             <Input style="resize: none; height: 1em" type="textarea" bind:value={proxyTag.suffix}/>
         </InputGroup>