refactor: project architecture refactor, container splitting

frontend/src/webapp/screens/SettingsScreen.svelte

@@ -0,0 +1,182 @@
+<script>
+  import {
+    ArrowRight,
+    CheckCircle2,
+    FileText,
+    Mail,
+    Send,
+    Shield,
+    UserRound,
+  } from "$components/ui/icons.js";
+
+  import Button from "$components/ui/button.svelte";
+  import Card from "$components/ui/card.svelte";
+  import { LanguageSelect } from "$components/patterns/webapp/index.js";
+
+  export let currentLang = "ru";
+  export let currentLanguageOption = null;
+  export let emailLinkStatus = "";
+  export let isAdmin = false;
+  export let languageBusy = false;
+  export let languageClickGuard = false;
+  export let languageClickGuardArmed = false;
+  export let languageMenuOpen = false;
+  export let languageOptions = [];
+  export let linkEmailBusy = false;
+  export let linkTelegramBusy = false;
+  export let privacyPolicyUrl = "";
+  export let profileAvatarUrl = "";
+  export let profileEmail = "";
+  export let profileTelegramId = "";
+  export let supportUrl = "";
+  export let telegramProfileName = "";
+  export let user = {};
+  export let userAgreementUrl = "";
+  export let userLanguage = "";
+
+  export let linkTelegramAccount = () => {};
+  export let logout = () => {};
+  export let openAdminPanel = () => {};
+  export let openExternalLink = () => {};
+  export let openLinkEmailDialog = () => {};
+  export let setLanguageMenuOpen = () => {};
+  export let t = (key) => key;
+  export let updateAccountLanguage = () => {};
+</script>
+
+<main class="content with-nav">
+  <Card class="settings-profile">
+    <div class="settings-avatar">
+      {#if profileAvatarUrl}
+        <img
+          src={profileAvatarUrl}
+          alt={t("wa_settings_avatar_alt")}
+          loading="lazy"
+          referrerpolicy="no-referrer"
+        />
+      {:else}
+        <UserRound size={30} />
+      {/if}
+    </div>
+    <div class="settings-profile-meta">
+      <strong>{telegramProfileName}</strong>
+      <small>{profileEmail}</small>
+      <small>{profileTelegramId}</small>
+    </div>
+  </Card>
+  {#if isAdmin}
+    <div class="settings-admin-block">
+      <div class="settings-divider" aria-hidden="true"></div>
+      <button class="settings-row settings-row-admin" type="button" onclick={openAdminPanel}>
+        <Shield size={21} />
+        <span>
+          <strong>{t("wa_settings_admin_panel", {}, "Админ-панель")}</strong>
+          <small>{t("wa_settings_admin_panel_hint", {}, "Управление приложением")}</small>
+        </span>
+        <ArrowRight size={17} />
+      </button>
+    </div>
+  {/if}
+  <div class="settings-links-block">
+    <div class="settings-divider" aria-hidden="true"></div>
+    {#if user?.telegram_linked}
+      <div class="settings-row settings-row-linked">
+        <CheckCircle2 size={21} />
+        <span>
+          <strong>{t("wa_settings_telegram_linked_title")}</strong>
+          <small>{profileTelegramId}</small>
+        </span>
+      </div>
+    {:else}
+      <Button
+        variant="telegram"
+        class="wide settings-telegram-link-btn attention-wrap"
+        onclick={linkTelegramAccount}
+        disabled={linkTelegramBusy}
+      >
+        <span class="attention-dot" aria-hidden="true"></span>
+        <Send size={18} />
+        {t("wa_settings_link_telegram_action")}
+      </Button>
+    {/if}
+    {#if user?.email}
+      <div class="settings-row settings-row-linked">
+        <CheckCircle2 size={21} />
+        <span>
+          <strong>{t("wa_settings_email_linked_title")}</strong>
+          <small>{user?.email}</small>
+        </span>
+      </div>
+    {:else}
+      <button
+        class="settings-row attention-wrap"
+        type="button"
+        onclick={openLinkEmailDialog}
+        disabled={linkEmailBusy}
+      >
+        <span class="attention-dot" aria-hidden="true"></span>
+        <Mail size={21} />
+        <span>
+          <strong>{t("wa_settings_link_email_action")}</strong>
+          <small>{emailLinkStatus}</small>
+        </span>
+        <ArrowRight size={17} />
+      </button>
+    {/if}
+    <div class="settings-divider" aria-hidden="true"></div>
+  </div>
+  <div class="settings-list" class:settings-list--language-open={languageMenuOpen}>
+    <LanguageSelect
+      bind:open={languageMenuOpen}
+      value={currentLang}
+      currentOption={currentLanguageOption}
+      {userLanguage}
+      options={languageOptions}
+      disabled={languageBusy}
+      clickGuard={languageClickGuard}
+      clickGuardArmed={languageClickGuardArmed}
+      closeLabel={t("wa_close")}
+      label={t("wa_settings_language")}
+      onOpenChange={setLanguageMenuOpen}
+      onValueChange={updateAccountLanguage}
+    />
+    {#if supportUrl}
+      <button
+        class="settings-row settings-row-support"
+        type="button"
+        onclick={() => openExternalLink(supportUrl)}
+      >
+        <Send size={21} />
+        <span><strong>{t("menu_support_button")}</strong></span>
+        <ArrowRight size={17} />
+      </button>
+    {/if}
+    {#if userAgreementUrl}
+      <button
+        class="settings-row settings-row-policy"
+        type="button"
+        onclick={() => openExternalLink(userAgreementUrl)}
+      >
+        <FileText size={21} />
+        <span><strong>{t("wa_settings_user_agreement")}</strong></span>
+        <ArrowRight size={17} />
+      </button>
+    {/if}
+    {#if privacyPolicyUrl}
+      <button
+        class="settings-row settings-row-policy"
+        type="button"
+        onclick={() => openExternalLink(privacyPolicyUrl)}
+      >
+        <Shield size={21} />
+        <span><strong>{t("wa_settings_privacy_policy")}</strong></span>
+        <ArrowRight size={17} />
+      </button>
+    {/if}
+    <button class="settings-row settings-row-logout" type="button" onclick={logout}>
+      <UserRound size={21} />
+      <span><strong>{t("wa_logout")}</strong><small>{t("wa_end_session")}</small></span>
+      <ArrowRight size={17} />
+    </button>
+  </div>
+</main>