refactor: project architecture refactor, container splitting

2026-05-17 00:01:28 +03:00
parent e0b5218037
commit 30fb774d93
367 changed files with 2609 additions and 864 deletions
@@ -0,0 +1,71 @@
+<script>
+  import { Check, ChevronsUpDown, Globe2 } from "$components/ui/icons.js";
+  import { Select } from "$components/ui/primitives.js";
+
+  export let open = false;
+  export let value = "ru";
+  export let currentOption = null;
+  export let userLanguage = "";
+  export let options = [];
+  export let disabled = false;
+  export let clickGuard = false;
+  export let clickGuardArmed = false;
+  export let closeLabel = "Close";
+  export let label = "Language";
+  export let onOpenChange = () => {};
+  export let onValueChange = () => {};
+
+  function closeFromGuard(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (clickGuardArmed) onOpenChange(false);
+  }
+</script>
+
+{#if open || clickGuard}
+  <button
+    class="language-select-guard"
+    class:language-select-guard--armed={clickGuardArmed}
+    type="button"
+    aria-label={closeLabel}
+    onpointerdown={closeFromGuard}
+    onclick={closeFromGuard}
+  ></button>
+{/if}
+
+<div class="settings-row settings-row-language">
+  <Globe2 size={21} />
+  <Select.Root
+    type="single"
+    bind:open
+    {value}
+    items={options}
+    {disabled}
+    {onOpenChange}
+    {onValueChange}
+  >
+    <Select.Trigger class="language-select-trigger" aria-label={label}>
+      <span class="language-select-copy">
+        <strong>{label}</strong>
+        <small class="language-select-current">
+          <span class="emoji-flag" aria-hidden="true">{currentOption?.flag || "🏳️"}</span>
+          {currentOption?.label || userLanguage}
+        </small>
+      </span>
+      <ChevronsUpDown size={16} />
+    </Select.Trigger>
+    <Select.Content class="language-select-content" side="bottom" align="end" sideOffset={6}>
+      <Select.Viewport class="language-select-viewport">
+        {#each options as option (option.value)}
+          <Select.Item value={option.value} label={option.label} class="language-select-item">
+            <span class="language-select-item-main">
+              <span class="emoji-flag" aria-hidden="true">{option.flag}</span>
+              <span>{option.label}</span>
+            </span>
+            <Check size={15} class="language-select-item-check" />
+          </Select.Item>
+        {/each}
+      </Select.Viewport>
+    </Select.Content>
+  </Select.Root>
+</div>