From a68b8027b17a9d0db95ed62470b0d0c61ebcfd34 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 27 May 2025 18:44:01 +0200
Subject: [PATCH] Improve command center search and layout styling

Replace HTML autofocus attribute with custom Svelte action to avoid
a11y warnings. Fix option layout direction from column to row and
update search input padding/margin values.
---
 src/lib/commandCenter/panels/template.svelte | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/lib/commandCenter/panels/template.svelte b/src/lib/commandCenter/panels/template.svelte
index 78dc3fe74..4065c0421 100644
--- a/src/lib/commandCenter/panels/template.svelte
+++ b/src/lib/commandCenter/panels/template.svelte
@@ -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;
             }