From 9a02248df10006ecd8c0abe59bf3672cacfc9554 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <harshmahajan2345@gmail.com>
Date: Fri, 27 Mar 2026 11:34:29 +0530
Subject: [PATCH] fix: upload inv ux and pagination

---
 src/lib/components/cardGrid.svelte            | 30 +++++++++++--
 .../variables/importVariablesModal.svelte     | 44 ++++++++++++-------
 .../settings/updateInstallations.svelte       | 17 ++++++-
 .../uploadVariablesModal.svelte               | 40 +++++++++++++----
 4 files changed, 101 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index d378a9c66..c45d112fe 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -8,8 +8,8 @@
 
 <Card.Base>
     <Layout.Stack gap="xl" justifyContent="space-around">
-        <Layout.GridFraction gap="xxxl" rowGap="xl" start={1} end={2}>
-            <Layout.Stack gap="xxs">
+        <div class="card-grid-content">
+            <Layout.Stack gap="xxs" class="card-grid-main">
                 <Typography.Title size="s" truncate><slot name="title" /></Typography.Title>
                 {#if $$slots.default}
                     <Typography.Text>
@@ -17,12 +17,12 @@
                     </Typography.Text>
                 {/if}
             </Layout.Stack>
-            <div style:overflow={overflow ? 'visible' : 'hidden'}>
+            <div class="card-grid-aside" style:overflow={overflow ? 'visible' : 'hidden'}>
                 <Layout.Stack {gap}>
                     <slot name="aside" />
                 </Layout.Stack>
             </div>
-        </Layout.GridFraction>
+        </div>
         {#if $$slots.actions && !hideFooter}
             <span
                 style="margin-left: calc(-1* var(--space-9));margin-right: calc(-1* var(--space-9));width:auto;">
@@ -34,3 +34,25 @@
         {/if}
     </Layout.Stack>
 </Card.Base>
+
+<style>
+    .card-grid-content {
+        display: grid;
+        gap: var(--space-10);
+        align-items: start;
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .card-grid-main,
+    .card-grid-aside {
+        min-width: 0;
+    }
+
+    @media (min-width: 769px) {
+        .card-grid-content {
+            column-gap: var(--space-13);
+            row-gap: var(--space-10);
+            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+        }
+    }
+</style>
diff --git a/src/lib/components/variables/importVariablesModal.svelte b/src/lib/components/variables/importVariablesModal.svelte
index db776b05d..9368d4d4f 100644
--- a/src/lib/components/variables/importVariablesModal.svelte
+++ b/src/lib/components/variables/importVariablesModal.svelte
@@ -6,6 +6,7 @@
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Layout, Selector, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte';
     import { parse } from '$lib/helpers/envfile';
+    import { removeFile } from '$lib/helpers/files';
 
     export let show = false;
     export let variables: Partial<Models.Variable>[];
@@ -13,6 +14,15 @@
     let files: FileList;
     let error: string;
     let secret = false;
+    $: filesList = files?.length
+        ? Array.from(files).map((file) => ({
+              ...file,
+              name: file.name,
+              size: file.size,
+              extension: file.type,
+              removable: true
+          }))
+        : [];
 
     async function handleSubmit() {
         try {
@@ -52,28 +62,32 @@
         <Layout.Stack>
             <Upload.Dropzone bind:files>
                 <Layout.Stack alignItems="center" gap="s">
-                    <Layout.Stack
-                        alignItems="center"
-                        justifyContent="center"
-                        direction="row"
-                        gap="s">
-                        <Typography.Text variant="l-500">
+                    <Layout.Stack alignItems="center" justifyContent="center" inline>
+                        <Typography.Text variant="l-500" align="center" inline>
                             Drag and drop files here or click to upload
-                        </Typography.Text>
-                        <Tooltip>
-                            <Layout.Stack alignItems="center" justifyContent="center" inline>
-                                <Icon icon={IconInfo} size="s" />
+                            <Layout.Stack
+                                style="display: inline-flex; vertical-align: middle;"
+                                inline
+                                alignItems="center"
+                                justifyContent="center">
+                                <Tooltip>
+                                    <Icon icon={IconInfo} size="s" />
+                                    <svelte:fragment slot="tooltip"
+                                        >Only .env files allowed</svelte:fragment>
+                                </Tooltip>
                             </Layout.Stack>
-                            <svelte:fragment slot="tooltip">
-                                Only .env files allowed
-                            </svelte:fragment>
-                        </Tooltip>
+                        </Typography.Text>
                     </Layout.Stack>
-                    <Typography.Caption variant="400">
+                    <Typography.Caption variant="400" align="center">
                         Up to 100 variables allowed
                     </Typography.Caption>
                 </Layout.Stack>
             </Upload.Dropzone>
+            {#if files?.length}
+                <Upload.List
+                    bind:files={filesList}
+                    on:remove={(e) => (files = removeFile(e.detail, files))} />
+            {/if}
             {#if variables?.length > 0}
                 <Alert.Inline status="info" dismissible>
                     This action can create and update variables but can not delete them.
diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
index 8cb2cb9f8..5d61cf6a4 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte
@@ -84,7 +84,7 @@
     <svelte:fragment slot="aside">
         {#if total > 0}
             <Layout.Stack gap="l">
-                <Layout.Stack direction="row" justifyContent="flex-end">
+                <div class="installations-action-row">
                     <FormButton
                         secondary
                         href={configureGitHub()}
@@ -94,7 +94,7 @@
                         <Icon icon={IconPlus} slot="start" size="s" />
                         Add installation
                     </FormButton>
-                </Layout.Stack>
+                </div>
 
                 <Table.Root
                     let:root
@@ -233,3 +233,16 @@
         </Card.Base>
     </svelte:fragment>
 </CardGrid>
+
+<style>
+    .installations-action-row {
+        display: flex;
+        justify-content: flex-start;
+    }
+
+    @media (min-width: 769px) {
+        .installations-action-row {
+            justify-content: flex-end;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte
index 93ef85bb9..5cf19fe9d 100644
--- a/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte
@@ -15,6 +15,7 @@
         Upload
     } from '@appwrite.io/pink-svelte';
     import { parse } from '$lib/helpers/envfile';
+    import { removeFile } from '$lib/helpers/files';
 
     export let show = false;
     export let variableList: Models.VariableList;
@@ -33,6 +34,15 @@
     let files: FileList;
     let secret = false;
     let error: string;
+    $: filesList = files?.length
+        ? Array.from(files).map((file) => ({
+              ...file,
+              name: file.name,
+              size: file.size,
+              extension: file.type,
+              removable: true
+          }))
+        : [];
 
     async function handleSubmit() {
         try {
@@ -87,21 +97,33 @@
     <Upload.Dropzone bind:files>
         <Layout.Stack alignItems="center" gap="s">
             <Layout.Stack alignItems="center" gap="s">
-                <Layout.Stack alignItems="center" justifyContent="center" direction="row" gap="s">
-                    <Typography.Text variant="l-500">
+                <Layout.Stack alignItems="center" justifyContent="center" inline>
+                    <Typography.Text variant="l-500" align="center" inline>
                         Drag and drop files here or click to upload
-                    </Typography.Text>
-                    <Tooltip>
-                        <Layout.Stack alignItems="center" justifyContent="center" inline>
-                            <Icon icon={IconInfo} size="s" />
+                        <Layout.Stack
+                            style="display: inline-flex; vertical-align: middle;"
+                            inline
+                            alignItems="center"
+                            justifyContent="center">
+                            <Tooltip>
+                                <Icon icon={IconInfo} size="s" />
+                                <svelte:fragment slot="tooltip"
+                                    >Only .env files allowed</svelte:fragment>
+                            </Tooltip>
                         </Layout.Stack>
-                        <svelte:fragment slot="tooltip">Only .env files allowed</svelte:fragment>
-                    </Tooltip>
+                    </Typography.Text>
                 </Layout.Stack>
-                <Typography.Caption variant="400">Up to 100 variables allowed</Typography.Caption>
+                <Typography.Caption variant="400" align="center">
+                    Up to 100 variables allowed
+                </Typography.Caption>
             </Layout.Stack>
         </Layout.Stack>
     </Upload.Dropzone>
+    {#if files?.length}
+        <Upload.List
+            bind:files={filesList}
+            on:remove={(e) => (files = removeFile(e.detail, files))} />
+    {/if}
 
     {#if variableList.total > 0}
         <Alert.Inline>