refactor(ui): update shared components and add ControlGroup, SidebarContainer

src/shared/ui/Logo/Logo.svelte

@@ -4,42 +4,23 @@
 -->
 <script lang="ts">
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import { Badge } from '$shared/ui';
 
 interface Props {
+    /**
+     * CSS classes
+     */
     class?: string;
 }
 
 const { class: className }: Props = $props();
 
-const baseClasses = 'barlow font-thin text-5xl sm:text-6xl md:text-7xl lg:text-8xl';
-
 const title = 'GLYPHDIFF';
 </script>
 
-<!-- Firefox version (hidden in Chrome/Safari) -->
-<h2
-    class={cn(
-        baseClasses,
-        'text-justify [text-align-last:justify] [text-justify:inter-character]',
-        // Hide in non-Firefox
-        'hidden [@supports(text-justify:inter-character)]:block',
-        className,
-    )}
->
-    {title}
-</h2>
-
-<!-- Chrome/Safari version (hidden in Firefox) -->
-<h2
-    class={cn(
-        'flex justify-between w-full',
-        baseClasses,
-        // Hide in Firefox
-        '[@supports(text-justify:inter-character)]:hidden',
-        className,
-    )}
->
-    {#each title.split('') as letter}
-        <span>{letter}</span>
-    {/each}
-</h2>
+<div class={cn('flex items-center gap-2 md:gap-3 select-none', className)}>
+    <h1 class="font-logo font-extrabold text-base md:text-xl tracking-tight text-swiss-black dark:text-neutral-200">
+        {title}
+    </h1>
+    <Badge variant="accent" size="xs">BETA</Badge>
+</div>