107 lines
2.4 KiB
Svelte
107 lines
2.4 KiB
Svelte
<script lang="ts">
|
|
import type { CaptureToggles } from "#lib/api/types.js";
|
|
|
|
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
|
|
aria-checked={toggles[row.key]}
|
|
class="toggle-row"
|
|
{disabled}
|
|
onclick={() => onchange(row.key, !toggles[row.key])}
|
|
role="switch"
|
|
type="button"
|
|
>
|
|
<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>
|