feat: web UI chat render, panels, presence + analytics

frontend/src/lib/components/policy/CaptureToggleList.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import type { CaptureToggles } from "$lib/api/types";
+
+  interface Props {
+    disabled?: boolean;
+    onchange: (key: keyof CaptureToggles, value: boolean) => void;
+    toggles: CaptureToggles;
+  }
+
+  let { toggles, disabled = false, onchange }: Props = $props();
+
+  const rows: { key: keyof CaptureToggles; label: string }[] = [
+    { key: "messages", label: "Сообщения" },
+    { key: "media", label: "Медиа" },
+    { key: "self_destruct_media", label: "Самоуничтожающиеся" },
+    { key: "stt", label: "Расшифровка голоса" },
+    { key: "reactions", label: "Реакции" },
+    { key: "track_edits_deletes", label: "Правки и удаления" },
+    { key: "profile_history", label: "История профиля" },
+    { key: "stories", label: "Сторис" },
+    { key: "presence", label: "Presence" },
+    { key: "backfill", label: "Бэкфилл" },
+  ];
+</script>
+
+<div class="toggles">
+  {#each rows as row (row.key)}
+    <button
+      type="button"
+      class="toggle-row"
+      role="switch"
+      aria-checked={toggles[row.key]}
+      {disabled}
+      onclick={() => onchange(row.key, !toggles[row.key])}
+    >
+      <span class="label">{row.label}</span>
+      <span class="switch" class:on={toggles[row.key]}>
+        <span class="knob"></span>
+      </span>
+    </button>
+  {/each}
+</div>
+
+<style lang="scss">
+  .toggle-row {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+
+    width: 100%;
+    padding: 0.5rem 1rem;
+    border: 0;
+
+    font-size: 0.9375rem;
+    text-align: start;
+    color: var(--color-text);
+    background-color: transparent;
+    transition: background-color 0.15s ease;
+
+    &:hover:not(:disabled) {
+      background-color: var(--color-chat-hover);
+    }
+
+    &:disabled {
+      cursor: default;
+      opacity: 0.5;
+    }
+  }
+
+  .label {
+    flex: 1;
+  }
+
+  .switch {
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+
+    width: 2.25rem;
+    height: 1.375rem;
+    padding: 0.125rem;
+    border-radius: 0.6875rem;
+
+    background-color: var(--color-borders);
+    transition: background-color 0.15s ease;
+
+    &.on {
+      background-color: var(--color-primary);
+    }
+  }
+
+  .knob {
+    width: 1.125rem;
+    height: 1.125rem;
+    border-radius: 50%;
+
+    background-color: var(--color-white);
+    transition: transform 0.15s ease;
+
+    .on & {
+      transform: translateX(0.875rem);
+    }
+  }
+</style>