add: suggestions on mobile.

Author: ItzNotABug

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/editor/view.svelte

@@ -1336,8 +1336,13 @@
 
     <div bind:this={editorContainer} class="cm-editor-wrapper" class:loading></div>
 
-    {#if showSuggestions && hasStartedEditing}
-        <Suggestions show={showSuggestions} />
+    {#if ($isSmallViewport && showSuggestions) || (showSuggestions && hasStartedEditing)}
+        <Suggestions
+            show={showSuggestions}
+            onMobileClick={() => {
+                showSuggestions = false;
+                applySuggestedAttributes();
+            }} />
     {/if}
 </div>
 

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/(components)/sonners/suggestions.svelte

@@ -1,34 +1,45 @@
 <script lang="ts">
-    import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Badge, FloatingActionBar, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
 
     let {
-        show = true
+        show = true,
+        onMobileClick
     }: {
         show?: boolean;
+        onMobileClick: () => Promise<void> | void;
     } = $props();
 </script>
 
-{#if show && !$isSmallViewport}
-    <div class="suggestions-wrapper">
-        <div class="popover-content">
-            <Layout.Stack inline gap="xs" direction="row" alignItems="center">
-                <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
-                    Press
-                </Typography.Caption>
+{#if show}
+    {#if $isSmallViewport}
+        <button type="button" class="floating-action-bar" onclick={onMobileClick}>
+            <FloatingActionBar>
+                <svelte:fragment slot="start">
+                    <Typography.Text variant="m-500">Tap to apply suggestions</Typography.Text>
+                </svelte:fragment>
+            </FloatingActionBar>
+        </button>
+    {:else}
+        <div class="suggestions-wrapper">
+            <div class="popover-content">
+                <Layout.Stack inline gap="xs" direction="row" alignContent="center">
+                    <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
+                        Press
+                    </Typography.Caption>
 
-                <Layout.Stack direction="row" inline gap="xxxs" style="height: fit-content">
-                    <Badge content="⌘" variant="secondary" size="xs" />
+                    <Layout.Stack direction="row" inline gap="xxxs" style="height: fit-content">
+                        <Badge content="⌘" variant="secondary" size="xs" />
+                        <Badge content="A" variant="secondary" size="xs" />
+                    </Layout.Stack>
 
-                    <Badge content="A" variant="secondary" size="xs" />
+                    <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
+                        for suggestions
+                    </Typography.Caption>
                 </Layout.Stack>
-
-                <Typography.Caption variant="400" color="--fgcolor-neutral-secondary">
-                    for suggestions
-                </Typography.Caption>
-            </Layout.Stack>
+            </div>
         </div>
-    </div>
+    {/if}
 {/if}
 
 <style lang="scss">
@@ -38,11 +49,6 @@
         position: absolute;
         pointer-events: none;
         transform: translateX(40%);
-
-        @media (max-width: 768px) {
-            top: auto;
-            bottom: var(--space-12);
-        }
     }
 
     .popover-content {
@@ -60,4 +66,22 @@
             0 1px 3px 0 rgba(0, 0, 0, 0.03),
             0 4px 4px 0 rgba(0, 0, 0, 0.04);
     }
+
+    .floating-action-bar {
+        left: 50%;
+        bottom: 5%;
+        width: 100%;
+        max-width: 320px;
+        position: fixed;
+        transform: translateX(-50%);
+
+        & > :global:first-child {
+            display: unset; /* stack with flex-start in FAB */
+
+            & > :global:first-child {
+                width: 100%;
+                justify-content: center;
+            }
+        }
+    }
 </style>