From 1677fe254b0ded9536425befdbdcc4da9ef24887 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sat, 28 Mar 2026 08:41:30 +0100
Subject: [PATCH] move theme button and search bar

---
 .../src/lib/components/AlgoliaDocSearch.svelte    |  6 ++++++
 website/src/lib/components/Footer.svelte          |  6 +++++-
 website/src/lib/components/LanguageSelect.svelte  |  8 +-------
 website/src/lib/components/ModeSwitch.svelte      |  2 +-
 website/src/lib/components/Nav.svelte             | 15 +++++++--------
 .../src/routes/[[language]]/help/+layout.svelte   |  8 +++++---
 6 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/website/src/lib/components/AlgoliaDocSearch.svelte b/website/src/lib/components/AlgoliaDocSearch.svelte
index 2b4ebd96d..03bc01fc3 100644
--- a/website/src/lib/components/AlgoliaDocSearch.svelte
+++ b/website/src/lib/components/AlgoliaDocSearch.svelte
@@ -64,3 +64,9 @@
 </svelte:head>
 
 <div id="docsearch" class={props.class ?? ''}></div>
+
+<style>
+    #docsearch :global(button) {
+        margin-left: 0px;
+    }
+</style>
diff --git a/website/src/lib/components/Footer.svelte b/website/src/lib/components/Footer.svelte
index ae7dc6649..2ecbf8c53 100644
--- a/website/src/lib/components/Footer.svelte
+++ b/website/src/lib/components/Footer.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Button } from '$lib/components/ui/button';
     import LanguageSelect from '$lib/components/LanguageSelect.svelte';
+    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
     import Logo from '$lib/components/Logo.svelte';
     import { AtSign, BookOpenText, Heart, House, Map } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
@@ -20,7 +21,10 @@
                 >
                     MIT © 2026 gpx.studio
                 </Button>
-                <LanguageSelect class="w-40 mt-3" />
+                <div class="mt-3 flex flex-row gap-1.5">
+                    <LanguageSelect />
+                    <ModeSwitch />
+                </div>
             </div>
             <div class="grow max-w-2xl flex flex-row flex-wrap justify-between gap-x-10 gap-y-6">
                 <div class="flex flex-col items-start gap-1">
diff --git a/website/src/lib/components/LanguageSelect.svelte b/website/src/lib/components/LanguageSelect.svelte
index 2cfa8d66e..0303b6fed 100644
--- a/website/src/lib/components/LanguageSelect.svelte
+++ b/website/src/lib/components/LanguageSelect.svelte
@@ -5,16 +5,10 @@
     import { getURLForLanguage } from '$lib/utils';
     import { Languages } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
-
-    let {
-        class: className = '',
-    }: {
-        class?: string;
-    } = $props();
 </script>
 
 <Select.Root type="single" value={i18n.lang}>
-    <Select.Trigger class="min-w-[180px] {className}" aria-label={i18n._('menu.language')}>
+    <Select.Trigger class="w-[180px] px-2" aria-label={i18n._('menu.language')}>
         <Languages size="16" />
         <span class="mr-auto">
             {languages[i18n.lang]}
diff --git a/website/src/lib/components/ModeSwitch.svelte b/website/src/lib/components/ModeSwitch.svelte
index b2ffd222c..731477390 100644
--- a/website/src/lib/components/ModeSwitch.svelte
+++ b/website/src/lib/components/ModeSwitch.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <Button
-    variant="ghost"
+    variant="outline"
     size="icon"
     class={className}
     onclick={() => {
diff --git a/website/src/lib/components/Nav.svelte b/website/src/lib/components/Nav.svelte
index a8ce92f2c..9d2ebc529 100644
--- a/website/src/lib/components/Nav.svelte
+++ b/website/src/lib/components/Nav.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
     import Logo from '$lib/components/Logo.svelte';
     import { Button } from '$lib/components/ui/button';
-    import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
-    import ModeSwitch from '$lib/components/ModeSwitch.svelte';
     import { BookOpenText, House, Map } from '@lucide/svelte';
     import { i18n } from '$lib/i18n.svelte';
     import { getURLForLanguage } from '$lib/utils';
@@ -10,13 +8,16 @@
 
 <nav class="w-full sticky top-0 bg-background z-50">
     <div class="mx-6 py-2 flex flex-row items-center border-b gap-4 sm:gap-8">
-        <a href={getURLForLanguage(i18n.lang, '/')} class="shrink-0 translate-y-0.5">
-            <Logo class="h-8 sm:hidden" iconOnly={true} width="26" />
-            <Logo class="h-8 hidden sm:block" width="153" />
+        <a
+            href={getURLForLanguage(i18n.lang, '/')}
+            class="shrink-0 translate-y-0.5 justify-self-start"
+        >
+            <Logo class="h-8 xs:hidden" iconOnly={true} width="26" />
+            <Logo class="h-8 hidden xs:block" width="153" />
         </a>
         <Button
             variant="link"
-            class="text-base px-0 has-[>svg]:px-0"
+            class="text-base px-0 has-[>svg]:px-0 ml-auto"
             href={getURLForLanguage(i18n.lang, '/')}
         >
             <House size="18" />
@@ -39,7 +40,5 @@
             <BookOpenText size="18" />
             {i18n._('menu.help')}
         </Button>
-        <AlgoliaDocSearch class="ml-auto" />
-        <ModeSwitch class="hidden xs:inline-flex" />
     </div>
 </nav>
diff --git a/website/src/routes/[[language]]/help/+layout.svelte b/website/src/routes/[[language]]/help/+layout.svelte
index 7259e211d..40e2f7a07 100644
--- a/website/src/routes/[[language]]/help/+layout.svelte
+++ b/website/src/routes/[[language]]/help/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/components/ui/button';
+    import AlgoliaDocSearch from '$lib/components/AlgoliaDocSearch.svelte';
     import { getURLForLanguage } from '$lib/utils';
     import { i18n } from '$lib/i18n.svelte';
     import { page } from '$app/state';
@@ -18,9 +19,10 @@
 </script>
 
 <div class="grow px-12 pt-6 pb-12 flex flex-row gap-24">
-    <div
-        class="hidden md:flex flex-col gap-2 w-40 sticky mt-[27px] top-[108px] self-start shrink-0"
-    >
+    <div class="hidden md:flex flex-col gap-2 w-40 sticky top-[108px] self-start shrink-0">
+        <div class="mb-2">
+            <AlgoliaDocSearch />
+        </div>
         {#each Object.keys(guides) as guide}
             <Button
                 variant="link"