Merge branch 'main' into '1.8.x'.

Author: ItzNotABug

docker/nginx.conf

@@ -4,7 +4,6 @@ server {
 
     gzip_static on;
 
-    # Set root for all locations
     root /usr/share/nginx/html;
 
     # Security headers for all locations
@@ -22,10 +21,20 @@ server {
         add_header Cache-Control "public";
     }
 
+    # Cache, but revalidate, for images, css, fonts, and icons folders
+    location ~* ^/console/(images|css|fonts|icons)/ {
+        expires 1d;
+        add_header Cache-Control "public, must-revalidate";
+    }
+
     # All other /console requests (no cache)
     location /console {
         index index.html index.html;
         try_files $uri /console/index.html;
+
+        expires 0;
+        add_header Cache-Control "no-cache, no-store";
+        add_header Pragma "no-cache";
     }
 
     location / {

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@063404f",
+        "@appwrite.io/pink-svelte": "https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@d74b893",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
@@ -65,6 +65,7 @@
         "@typescript-eslint/eslint-plugin": "^8.28.0",
         "@typescript-eslint/parser": "^8.28.0",
         "@vitest/ui": "^3.0.9",
+        "color": "^5.0.0",
         "eslint": "^9.23.0",
         "eslint-config-prettier": "^10.1.0",
         "eslint-plugin-svelte": "^3.3.3",

pnpm-lock.yaml

@@ -11,6 +11,7 @@
     import { IconArrowSmRight } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Keyboard, Layout } from '@appwrite.io/pink-svelte';
     import { Submit, trackEvent } from '$lib/actions/analytics';
+    import type { Action } from 'svelte/action';
 
     /* eslint no-undef: "off" */
     type Option = $$Generic<Omit<Command, 'group'> & { group?: string }>;
@@ -247,6 +248,10 @@
 
         return isGroup(nextItem) || !nextItem?.nested;
     };
+
+    const autofocus: Action<HTMLInputElement> = (node) => {
+        if (node) node.focus();
+    };
 </script>
 
 <svelte:window on:keydown={handleKeyDown} />
@@ -271,8 +276,11 @@
 
         <slot name="search">
             <div class="u-flex default-search u-width-full-line">
-                <!--  svelte-ignore a11y-autofocus -->
-                <input type="text" placeholder={searchPlaceholder} autofocus bind:value={search} />
+                <input
+                    type="text"
+                    placeholder={searchPlaceholder}
+                    use:autofocus
+                    bind:value={search} />
             </div>
         </slot>
     </div>
@@ -305,7 +313,7 @@
                                 on:mouseleave={getOptionBlurHandler()}
                                 on:focus={getOptionFocusHandler(item)}>
                                 <slot name="option" option={castOption(item)}>
-                                    <Layout.Stack direction="column" gap="s">
+                                    <Layout.Stack direction="row" gap="s" alignItems="center">
                                         {#if item.icon}
                                             <Icon
                                                 icon={item.icon}
@@ -448,8 +456,9 @@
 
         .default-search {
             input {
-                margin: -1rem;
-                padding: 1rem;
+                width: 100%;
+                margin: 0rem;
+                padding: 0rem;
                 border: none;
                 background-color: transparent;
             }

src/lib/commandCenter/panels/template.svelte

@@ -7,6 +7,8 @@
     import { organization } from '$lib/stores/organization';
     import { activeHeaderAlert } from '$routes/(console)/store';
     import GradientBanner from '../gradientBanner.svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     let show = true;
 
@@ -23,8 +25,13 @@
 
 {#if show && $organization?.$id && $organization?.billingPlan === BillingPlan.FREE && !page.url.pathname.includes('/console/account')}
     <GradientBanner on:close={handleClose}>
-        <div class="u-flex u-gap-24 u-main-center u-cross-center u-flex-vertical-mobile">
-            <span class="body-text-1">Get $50 Cloud credits for Appwrite Pro.</span>
+        <Layout.Stack
+            gap="m"
+            alignItems="center"
+            alignContent="center"
+            direction={$isSmallViewport ? 'column' : 'row'}>
+            <Typography.Text>Get $50 Cloud credits for Appwrite Pro.</Typography.Text>
+
             <Button
                 secondary
                 fullWidthMobile
@@ -39,6 +46,6 @@
                 }}>
                 Claim credits
             </Button>
-        </div>
+        </Layout.Stack>
     </GradientBanner>
 {/if}