465 lines
9.5 KiB
Svelte
465 lines
9.5 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from "svelte";
|
|
import {
|
|
createPolicy,
|
|
deletePolicy,
|
|
getPolicyScope,
|
|
updatePolicy,
|
|
} from "#lib/api/endpoints.js";
|
|
import type {
|
|
CaptureToggles,
|
|
PolicyParent,
|
|
PolicyRecord,
|
|
PolicyScopeType,
|
|
ScopeTarget,
|
|
} from "#lib/api/types.js";
|
|
import ScopeFiles from "#lib/components/disk/ScopeFiles.svelte";
|
|
import Button from "#lib/components/ui/Button.svelte";
|
|
import Icon from "#lib/components/ui/Icon.svelte";
|
|
import Spinner from "#lib/components/ui/Spinner.svelte";
|
|
import {
|
|
parentLabel,
|
|
pickToggles,
|
|
preset,
|
|
sameToggles,
|
|
summary,
|
|
TOGGLE_KEYS,
|
|
type ToggleKey,
|
|
toggleLabel,
|
|
} from "#lib/format/policy.js";
|
|
import { locale, t } from "#lib/i18n/locale.svelte.js";
|
|
import type { MessageKey } from "#lib/i18n/messages.js";
|
|
|
|
interface Props {
|
|
onchange?: () => void;
|
|
parent?: PolicyParent | null;
|
|
rule?: PolicyRecord | null;
|
|
scopeId: number | null;
|
|
scopeType: PolicyScopeType;
|
|
}
|
|
|
|
let {
|
|
scopeType,
|
|
scopeId,
|
|
rule: initialRule,
|
|
parent: initialParent,
|
|
onchange,
|
|
}: Props = $props();
|
|
|
|
const PRESETS: { label: MessageKey; toggles: CaptureToggles }[] = [
|
|
{ label: "policy.summary.all", toggles: preset("all") },
|
|
{ label: "policy.summary.messagesOnly", toggles: preset(["messages"]) },
|
|
{ label: "policy.summary.none", toggles: preset([]) },
|
|
];
|
|
|
|
let rule = $state<PolicyRecord | null>(null);
|
|
let parent = $state<PolicyParent | null>(null);
|
|
let loading = $state(false);
|
|
let saving = $state(false);
|
|
let problem = $state<MessageKey | null>(null);
|
|
let removing = $state(false);
|
|
|
|
const isChat = $derived(scopeType === "chat");
|
|
const isFolder = $derived(scopeType === "folder");
|
|
const target = $derived<ScopeTarget | null>(scopeTarget());
|
|
const shown = $derived<CaptureToggles | null>(
|
|
rule ?? parent?.toggles ?? null
|
|
);
|
|
const hint = $derived(inheritance());
|
|
|
|
function scopeTarget(): ScopeTarget | null {
|
|
if (scopeId === null) {
|
|
return null;
|
|
}
|
|
if (scopeType === "chat") {
|
|
return { chatId: scopeId };
|
|
}
|
|
return scopeType === "folder" ? { folderId: scopeId } : null;
|
|
}
|
|
|
|
function inheritance(): string {
|
|
if (isChat && parent) {
|
|
const from = parentLabel(parent.scope_type, parent.title);
|
|
return rule
|
|
? t("policy.hint.chatRule", {
|
|
from,
|
|
summary: summary(parent.toggles).toLocaleLowerCase(locale.tag),
|
|
})
|
|
: t("policy.hint.chatInherit", { from });
|
|
}
|
|
if (isFolder) {
|
|
return rule ? t("policy.hint.folderRule") : t("policy.hint.folderNone");
|
|
}
|
|
return "";
|
|
}
|
|
|
|
function differs(key: ToggleKey): boolean {
|
|
return (
|
|
rule !== null && parent !== null && rule[key] !== parent.toggles[key]
|
|
);
|
|
}
|
|
|
|
async function save(next: CaptureToggles) {
|
|
if (saving) {
|
|
return;
|
|
}
|
|
saving = true;
|
|
problem = null;
|
|
try {
|
|
rule = rule
|
|
? await updatePolicy(rule.id, next)
|
|
: await createPolicy({
|
|
...next,
|
|
scope_id: scopeId,
|
|
scope_type: scopeType,
|
|
});
|
|
onchange?.();
|
|
} catch {
|
|
problem = "policy.rule.saveFailed";
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
function flip(key: ToggleKey) {
|
|
if (shown !== null) {
|
|
save({ ...pickToggles(shown), [key]: !shown[key] });
|
|
}
|
|
}
|
|
|
|
async function remove() {
|
|
if (rule === null || saving) {
|
|
return;
|
|
}
|
|
saving = true;
|
|
problem = null;
|
|
try {
|
|
await deletePolicy(rule.id);
|
|
rule = null;
|
|
removing = false;
|
|
onchange?.();
|
|
} catch {
|
|
problem = "policy.rule.deleteFailed";
|
|
} finally {
|
|
saving = false;
|
|
}
|
|
}
|
|
|
|
onMount(async () => {
|
|
rule = initialRule ?? null;
|
|
parent = initialParent ?? null;
|
|
if (target === null) {
|
|
return;
|
|
}
|
|
if (initialRule === undefined) {
|
|
loading = true;
|
|
try {
|
|
({ rule, parent } = await getPolicyScope(target));
|
|
} catch {
|
|
problem = "policy.rule.loadFailed";
|
|
} finally {
|
|
loading = false;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="card">
|
|
{#if loading}
|
|
<div class="center"><Spinner /></div>
|
|
{:else}
|
|
{#if hint}
|
|
<p class="hint">{hint}</p>
|
|
{/if}
|
|
|
|
<div class="presets">
|
|
{#each PRESETS as item (item.label)}
|
|
<button
|
|
aria-pressed={shown !== null && sameToggles(shown, item.toggles)}
|
|
class="preset"
|
|
disabled={saving}
|
|
onclick={() => save(item.toggles)}
|
|
type="button"
|
|
class:on={shown !== null && sameToggles(shown, item.toggles)}
|
|
>
|
|
{t(item.label)}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
|
|
{#if shown}
|
|
<div class="toggles">
|
|
{#each TOGGLE_KEYS as key (key)}
|
|
<button
|
|
aria-checked={shown[key]}
|
|
class="toggle"
|
|
disabled={saving}
|
|
onclick={() => flip(key)}
|
|
role="switch"
|
|
type="button"
|
|
class:changed={differs(key)}
|
|
>
|
|
<span class="label">{toggleLabel(key)}</span>
|
|
<span class="switch" class:on={shown[key]}>
|
|
<span class="knob"></span>
|
|
</span>
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
|
|
{#if problem}
|
|
<p class="problem">{t(problem)}</p>
|
|
{/if}
|
|
|
|
{#if target}
|
|
<ScopeFiles {target} />
|
|
{/if}
|
|
|
|
{#if rule && (isChat || isFolder)}
|
|
{#if removing}
|
|
<div class="removal">
|
|
<span>{t("policy.rule.removeConfirm")}</span>
|
|
<Button
|
|
onclick={() => {
|
|
removing = false;
|
|
}}
|
|
smaller
|
|
variant="text"
|
|
>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
<Button
|
|
disabled={saving}
|
|
onclick={remove}
|
|
pill
|
|
smaller
|
|
variant="danger"
|
|
>
|
|
{t("common.delete")}
|
|
</Button>
|
|
</div>
|
|
{:else}
|
|
<button
|
|
class="remove"
|
|
onclick={() => {
|
|
removing = true;
|
|
}}
|
|
type="button"
|
|
>
|
|
{t("policy.rule.remove")}
|
|
</button>
|
|
{/if}
|
|
{/if}
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.card {
|
|
padding: 0.25rem 0 0.5rem;
|
|
}
|
|
|
|
.center {
|
|
display: flex;
|
|
justify-content: center;
|
|
padding: 1.5rem 0;
|
|
}
|
|
|
|
.hint {
|
|
margin: 0;
|
|
padding: 0.5rem 1rem 0.25rem;
|
|
|
|
font-size: 0.8125rem;
|
|
line-height: 1.4;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.presets {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
|
|
margin: 0.5rem 1rem 0.25rem;
|
|
padding: 0.125rem;
|
|
border-radius: 0.625rem;
|
|
|
|
background-color: var(--color-background-secondary);
|
|
}
|
|
|
|
.preset {
|
|
cursor: pointer;
|
|
|
|
flex: 1;
|
|
|
|
height: 2rem;
|
|
border: 0;
|
|
border-radius: 0.5rem;
|
|
|
|
font: inherit;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-text-secondary);
|
|
white-space: nowrap;
|
|
|
|
background: none;
|
|
|
|
transition:
|
|
background-color 0.15s ease-out,
|
|
color 0.15s ease-out;
|
|
|
|
&.on {
|
|
color: var(--color-text);
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
@media (pointer: coarse) {
|
|
height: 2.75rem;
|
|
}
|
|
}
|
|
|
|
.toggles {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0 0.5rem;
|
|
padding: 0.25rem 0.5rem;
|
|
}
|
|
|
|
.toggle {
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
align-items: center;
|
|
|
|
min-width: 0;
|
|
height: 2.75rem;
|
|
padding: 0 0.5rem;
|
|
border: 0;
|
|
border-radius: 0.625rem;
|
|
|
|
font: inherit;
|
|
font-size: 0.875rem;
|
|
color: var(--color-text);
|
|
text-align: start;
|
|
|
|
background: none;
|
|
|
|
&.changed .label {
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: default;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-primary);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:not(:disabled):hover {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
.label {
|
|
overflow: hidden;
|
|
flex: 1;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.switch {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
|
|
width: 2.25rem;
|
|
height: 1.375rem;
|
|
padding: 0.125rem;
|
|
border-radius: 0.6875rem;
|
|
|
|
background-color: var(--color-borders-input);
|
|
|
|
transition: background-color 0.15s ease-out;
|
|
|
|
&.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-out;
|
|
|
|
.on & {
|
|
transform: translateX(0.875rem);
|
|
}
|
|
}
|
|
|
|
.problem {
|
|
margin: 0;
|
|
padding: 0.25rem 1rem;
|
|
font-size: 0.8125rem;
|
|
color: var(--color-error);
|
|
}
|
|
|
|
.removal {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
align-items: center;
|
|
|
|
margin: 0.25rem 0.5rem 0;
|
|
padding-left: 0.5rem;
|
|
|
|
font-size: 0.875rem;
|
|
|
|
span {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.remove {
|
|
cursor: pointer;
|
|
|
|
display: block;
|
|
|
|
margin: 0.25rem 0.5rem 0;
|
|
padding: 0.5rem;
|
|
border: 0;
|
|
border-radius: 0.5rem;
|
|
|
|
font: inherit;
|
|
font-size: 0.875rem;
|
|
color: var(--color-error);
|
|
|
|
background: none;
|
|
|
|
@media (pointer: coarse) {
|
|
min-height: 2.75rem;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 2px solid var(--color-error);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
&:hover {
|
|
background-color: var(--color-chat-hover);
|
|
}
|
|
}
|
|
}
|
|
</style>
|