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

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

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { ripple } from "$lib/actions/ripple";
+  import Icon from "$lib/components/ui/Icon.svelte";
+
+  interface Props {
+    icon: string;
+    label: string;
+    onclick?: () => void;
+    soon?: boolean;
+    value?: string;
+  }
+
+  let { icon, label, value, soon = false, onclick }: Props = $props();
+</script>
+
+<button
+  type="button"
+  class="settings-item"
+  class:soon
+  use:ripple
+  disabled={soon}
+  {onclick}
+>
+  <Icon name={icon} size="1.5rem" class="leading" />
+  <span class="label">{label}</span>
+  {#if soon}
+    <span class="soon-tag">скоро</span>
+  {:else if value}
+    <span class="value">{value}</span>
+  {/if}
+  {#if onclick && !soon}
+    <Icon name="arrow-right" size="1rem" class="chevron" />
+  {/if}
+</button>
+
+<style lang="scss">
+  .settings-item {
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+
+    width: 100%;
+    min-height: 3.5rem;
+    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:not(:disabled) {
+      background-color: var(--color-chat-hover);
+    }
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  :global(.settings-item .leading) {
+    flex-shrink: 0;
+    color: var(--color-icon-secondary);
+  }
+
+  .label {
+    overflow: hidden;
+    flex: 1;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .value {
+    color: var(--color-text-secondary);
+  }
+
+  .soon-tag {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+  }
+
+  :global(.settings-item .chevron) {
+    flex-shrink: 0;
+    color: var(--color-icon-secondary);
+  }
+</style>