feat(frontend): russian and english interface with a language choice in settings, soon stubs removed

frontend/src/lib/components/ui/RadioList.svelte

@@ -0,0 +1,90 @@
+<script generics="T extends string" lang="ts">
+  import { ripple } from "#lib/actions/ripple.js";
+
+  interface Option {
+    label: string;
+    value: T;
+  }
+
+  interface Props {
+    onselect: (value: T) => void;
+    options: Option[];
+    selected: T;
+  }
+
+  let { options, selected, onselect }: Props = $props();
+  const name = $props.id();
+</script>
+
+<div class="radio-list">
+  {#each options as option (option.value)}
+    <label class="radio-row" use:ripple>
+      <input
+        checked={selected === option.value}
+        class="input"
+        {name}
+        onchange={() => onselect(option.value)}
+        type="radio"
+        value={option.value}
+      >
+      <span class="dot" class:on={selected === option.value}></span>
+      <span class="label">{option.label}</span>
+    </label>
+  {/each}
+</div>
+
+<style lang="scss">
+  .radio-row {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+
+    width: 100%;
+    min-height: 3.25rem;
+    padding: 0 1.25rem;
+    border: 0;
+
+    font-size: 1rem;
+    text-align: start;
+    color: var(--color-text);
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--color-chat-hover);
+    }
+
+    &:has(.input:focus-visible) {
+      background-color: var(--color-chat-hover);
+    }
+  }
+
+  .input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .dot {
+    flex-shrink: 0;
+
+    width: 1.25rem;
+    height: 1.25rem;
+    border: 2px solid var(--color-borders);
+    border-radius: 50%;
+
+    transition: border-color 0.15s ease;
+
+    &.on {
+      border-width: 0.4375rem;
+      border-color: var(--color-primary);
+    }
+  }
+
+  .label {
+    flex: 1;
+  }
+</style>