feat(api,userbot,frontend): rename session device from the web ui

frontend/src/lib/components/settings/MyAccount.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Dialog } from "bits-ui";
   import { ripple } from "$lib/actions/ripple";
+  import { ApiError } from "$lib/api/client";
   import AddAccountDialog from "$lib/components/settings/AddAccountDialog.svelte";
   import SettingsItem from "$lib/components/settings/SettingsItem.svelte";
   import Avatar from "$lib/components/ui/Avatar.svelte";
@@ -17,10 +18,42 @@
     )
   );
 
+  const DEVICE_LIMIT = 32;
+  const DEFAULT_DEVICE = "Beavergram";
+
   let adding = $state(false);
   let confirming = $state(false);
+  let renaming = $state(false);
+  let deviceName = $state("");
   let busy = $state(false);
 
+  const deviceLabel = $derived(current?.device_model ?? DEFAULT_DEVICE);
+
+  function openRename() {
+    deviceName = deviceLabel;
+    renaming = true;
+  }
+
+  async function rename(event: SubmitEvent) {
+    event.preventDefault();
+    const value = deviceName.trim();
+    if (!(current && value) || busy) {
+      return;
+    }
+    busy = true;
+    try {
+      await accounts.renameDevice(current.account_id, value);
+      renaming = false;
+      toasts.success("Имя устройства обновлено");
+    } catch (error) {
+      toasts.error(
+        error instanceof ApiError ? error.detail : "Не удалось переименовать"
+      );
+    } finally {
+      busy = false;
+    }
+  }
+
   async function logout() {
     if (!current || busy) {
       return;
@@ -81,6 +114,14 @@
   {/if}
 
   <div class="actions">
+    {#if current?.is_active}
+      <SettingsItem
+        icon="active-sessions"
+        label="Имя устройства"
+        value={deviceLabel}
+        onclick={openRename}
+      />
+    {/if}
     <SettingsItem
       icon="add-user"
       label="Добавить аккаунт"
@@ -102,6 +143,50 @@
 
 <AddAccountDialog bind:open={adding} />
 
+<Dialog.Root bind:open={renaming}>
+  <Dialog.Portal>
+    <Dialog.Overlay class="dialog-overlay" />
+    <Dialog.Content class="dialog-content">
+      <header class="dialog-head">
+        <Dialog.Title class="dialog-title">Имя устройства</Dialog.Title>
+        <Dialog.Close class="dialog-close" aria-label="Закрыть">
+          <Icon name="close" size="1.25rem" />
+        </Dialog.Close>
+      </header>
+      <form onsubmit={rename}>
+        <div class="dialog-body">
+          <p class="confirm-text">
+            Так сессия называется в списке устройств Telegram. Чтобы имя
+            применилось, соединение переподключится — сбор сообщений прервётся
+            на пару секунд.
+          </p>
+          <div class="input-group">
+            <input
+              id="device-name"
+              class="form-control"
+              type="text"
+              maxlength={DEVICE_LIMIT}
+              placeholder={DEFAULT_DEVICE}
+              bind:value={deviceName}
+            >
+            <label for="device-name">Название</label>
+          </div>
+        </div>
+        <div class="dialog-actions">
+          <Button
+            type="submit"
+            pill
+            loading={busy}
+            disabled={busy || deviceName.trim().length === 0}
+          >
+            Сохранить
+          </Button>
+        </div>
+      </form>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>
+
 <Dialog.Root bind:open={confirming}>
   <Dialog.Portal>
     <Dialog.Overlay class="dialog-overlay" />