web/dialogs: add picker dialog & clean up small dialog

web/src/components/dialog/DialogHolder.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-    import SmallDialog from "$components/dialog/SmallDialog.svelte";
     import dialogs from "$lib/dialogs";
 
+    import SmallDialog from "$components/dialog/SmallDialog.svelte";
+    import PickerDialog from "$components/dialog/PickerDialog.svelte";
+
     $: backdropVisible = $dialogs.length > 0;
 </script>
 
@@ -18,11 +20,56 @@
                 buttons={dialog.buttons}
             />
         {/if}
+
+        {#if dialog.type === "picker"}
+            <PickerDialog
+                id={dialog.id}
+                items={dialog.items}
+                buttons={dialog.buttons}
+            />
+        {/if}
     {/each}
     <div id="dialog-backdrop" class:visible={backdropVisible}></div>
 </div>
 
 <style>
+    :global(dialog) {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: none;
+
+        max-height: 100%;
+        max-width: 100%;
+        height: 100%;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        border: none;
+        pointer-events: all;
+
+        inset-inline-start: unset;
+        inset-inline-end: unset;
+
+        overflow: hidden;
+    }
+
+    :global(dialog:modal) {
+        inset-block-start: 0;
+        inset-block-end: 0;
+    }
+
+    :global(dialog:modal::backdrop) {
+        display: none;
+    }
+
+    @media screen and (max-width: 535px) {
+        :global(dialog) {
+            justify-content: end;
+        }
+    }
+
     #dialog-holder {
         position: absolute;
         padding-top: env(safe-area-inset-bottom);
@@ -60,4 +107,62 @@
         backdrop-filter: none !important;
         -webkit-backdrop-filter: none !important;
     }
+
+    :global(.open .dialog-body) {
+        animation: modal-in 0.35s;
+    }
+
+    :global(.closing .dialog-body) {
+        animation: modal-out 0.15s;
+        opacity: 0;
+    }
+
+    @media screen and (max-width: 535px) {
+        :global(.open .dialog-body) {
+            animation: modal-in-mobile 0.4s;
+        }
+    }
+
+    @keyframes modal-in {
+        from {
+            transform: scale(0.8);
+            opacity: 0;
+        }
+        30% {
+            opacity: 1;
+        }
+        50% {
+            transform: scale(1.005);
+        }
+        100% {
+            transform: scale(1);
+        }
+    }
+
+    @keyframes modal-out {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+            transform: scale(0.9);
+            visibility: hidden;
+        }
+    }
+
+    @keyframes modal-in-mobile {
+        from {
+            transform: translateY(200px);
+            opacity: 0;
+        }
+        30% {
+            opacity: 1;
+        }
+        50% {
+            transform: translateY(-5px);
+        }
+        100% {
+            transform: translateY(0px);
+        }
+    }
 </style>