Touch-up language-picker in side-bar (#1882)

Author: myieye

frontend/viewer/src/lib/i18n/LocalizationPicker.svelte

@@ -5,6 +5,15 @@
   import {Icon} from '$lib/components/ui/icon';
   import {IsMobile} from '$lib/hooks/is-mobile.svelte';
   import {setLanguage} from '$lib/i18n';
+  import {SidebarMenuButton} from '$lib/components/ui/sidebar';
+
+  type Props = {
+    inSidebar?: boolean;
+  };
+
+  let {
+    inSidebar
+  }: Props = $props();
 
   const languages: Record<string, string> = {
     'en': 'English',
@@ -15,18 +24,28 @@
   };
   const currentLanguage = $derived(languages[$locale] ?? 'Unknown: ' + $locale);
 </script>
+
 <DropdownMenu.Root>
   <DropdownMenu.Trigger>
     {#snippet child({props})}
-      <Button {...props} icon="i-mdi-translate" size={IsMobile.value ? 'icon' : undefined} variant="ghost">
-        {#if !IsMobile.value}
-          {currentLanguage}
+      {#if inSidebar}
+        <SidebarMenuButton {...props}>
+          <Icon icon="i-mdi-translate" />
+          <span>{currentLanguage}</span>
+          <span class="grow"></span>
           <Icon icon="i-mdi-menu-down"/>
-        {/if}
-      </Button>
+        </SidebarMenuButton>
+      {:else}
+        <Button {...props} icon="i-mdi-translate" size={IsMobile.value ? 'icon' : undefined} variant="ghost">
+          {#if !IsMobile.value}
+            {currentLanguage}
+            <Icon icon="i-mdi-menu-down"/>
+          {/if}
+        </Button>
+      {/if}
     {/snippet}
   </DropdownMenu.Trigger>
-  <DropdownMenu.Content>
+  <DropdownMenu.Content align="end">
     <DropdownMenu.RadioGroup bind:value={() => $locale, l => setLanguage(l)}>
       {#each Object.entries(languages) as [lang, label] (lang)}
         <DropdownMenu.RadioItem class="cursor-pointer" value={lang}>{label}</DropdownMenu.RadioItem>

frontend/viewer/src/project/ProjectSidebar.svelte

@@ -182,7 +182,7 @@
           </Sidebar.MenuButton>
         </Sidebar.MenuItem>
         <Sidebar.MenuItem>
-          <LocalizationPicker/>
+          <LocalizationPicker inSidebar />
         </Sidebar.MenuItem>
       </Sidebar.Menu>
     </Sidebar.Group>