fix(frontend): policy card keeps its wells in the light theme, folder rules show their content, opened rule scrolls into view, rule removal asks first

frontend/src/lib/components/disk/TrashPanel.svelte

@@ -498,6 +498,16 @@
       outline: 2px solid var(--color-primary);
       outline-offset: 1px;
     }
+
+    @media (hover: hover) {
+      &:hover {
+        background-color: var(--color-chat-hover);
+      }
+    }
+
+    @media (pointer: coarse) {
+      min-height: 2.75rem;
+    }
   }
 
   .list {

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

@@ -66,6 +66,7 @@
   let confirming = $state(false);
   let moving = $state(false);
   let moved = $state<TrashOutcome | null>(null);
+  let removing = $state(false);
 
   const isChat = $derived(scopeType === "chat");
   const isFolder = $derived(scopeType === "folder");
@@ -143,6 +144,7 @@
     try {
       await deletePolicy(rule.id);
       rule = null;
+      removing = false;
       onchange?.();
     } catch {
       problem = "Не удалось удалить правило";
@@ -344,9 +346,39 @@
     {/if}
 
     {#if rule && (isChat || isFolder)}
-      <button class="remove" disabled={saving} onclick={remove} type="button">
-        Удалить правило
-      </button>
+      {#if removing}
+        <div class="removal">
+          <span>Удалить правило?</span>
+          <Button
+            onclick={() => {
+              removing = false;
+            }}
+            smaller
+            variant="text"
+          >
+            Отмена
+          </Button>
+          <Button
+            disabled={saving}
+            onclick={remove}
+            pill
+            smaller
+            variant="danger"
+          >
+            Удалить
+          </Button>
+        </div>
+      {:else}
+        <button
+          class="remove"
+          onclick={() => {
+            removing = true;
+          }}
+          type="button"
+        >
+          Удалить правило
+        </button>
+      {/if}
     {/if}
   {/if}
 </div>
@@ -404,7 +436,7 @@
 
     &.on {
       color: var(--color-text);
-      background-color: var(--color-chat-hover);
+      background-color: var(--color-background);
     }
 
     &:focus-visible {
@@ -413,7 +445,7 @@
     }
 
     @media (pointer: coarse) {
-      height: 2.5rem;
+      height: 2.75rem;
     }
   }
 
@@ -517,7 +549,9 @@
     gap: 0.5rem;
     align-items: center;
 
-    margin: 0.5rem 0.75rem 0.25rem;
+    flex-wrap: wrap;
+
+    margin: 0.5rem 1rem 0.25rem;
     padding: 0.625rem 0.5rem 0.625rem 0.875rem;
     border-radius: 0.75rem;
 
@@ -531,7 +565,7 @@
 
   .files-text {
     display: flex;
-    flex: 1;
+    flex: 1 1 10rem;
     flex-direction: column;
     gap: 0.125rem;
 
@@ -557,6 +591,21 @@
     margin-top: 0.375rem;
   }
 
+  .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;
 
@@ -573,6 +622,10 @@
 
     background: none;
 
+    @media (pointer: coarse) {
+      min-height: 2.75rem;
+    }
+
     &:focus-visible {
       outline: 2px solid var(--color-error);
       outline-offset: -2px;

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

@@ -5,12 +5,7 @@
     getPolicyOverview,
     listFolders,
   } from "#lib/api/endpoints.js";
-  import type {
-    CaptureToggles,
-    Folder,
-    PolicyRule,
-    PolicyScopeType,
-  } from "#lib/api/types.js";
+  import type { Folder, PolicyRule, PolicyScopeType } from "#lib/api/types.js";
   import PolicyCard from "#lib/components/policy/PolicyCard.svelte";
   import Avatar from "#lib/components/ui/Avatar.svelte";
   import Button from "#lib/components/ui/Button.svelte";
@@ -18,6 +13,7 @@
   import Spinner from "#lib/components/ui/Spinner.svelte";
   import {
     type Chip,
+    contentChips,
     DEFAULT_LABELS,
     diffChips,
     sameToggles,
@@ -60,7 +56,6 @@
       rules.find((rule) => rule.scope_type === scope)
     ).filter((rule): rule is PolicyRule => rule !== undefined)
   );
-  const defaultBases = $derived<CaptureToggles[]>(defaults);
   const folderRules = $derived(
     rules
       .filter((rule) => rule.scope_type === "folder")
@@ -106,9 +101,31 @@
   }
 
   function chips(rule: PolicyRule): Chip[] {
-    return diffChips(rule, rule.parent ? [rule.parent.toggles] : defaultBases);
+    return rule.parent
+      ? diffChips(rule, rule.parent.toggles)
+      : contentChips(rule);
   }
 
+  function reveal(node: HTMLElement) {
+    requestAnimationFrame(() => {
+      node.parentElement?.scrollIntoView({ block: "nearest" });
+    });
+  }
+
+  function draftBefore(rule: PolicyRule): boolean {
+    if (draft?.scopeType !== "folder") {
+      return false;
+    }
+    const slot = folderOrder(draft.scopeId);
+    const next = folderRules.find((item) => folderOrder(item.scope_id) > slot);
+    return next?.id === rule.id;
+  }
+
+  const draftLast = $derived(
+    draft?.scopeType === "folder" &&
+      !folderRules.some((rule) => draftBefore(rule))
+  );
+
   async function reload() {
     try {
       [rules, folders] = await Promise.all([
@@ -212,7 +229,7 @@
           {:else}
             <span class="chips">
               {#each chips(rule) as chip (chip.sign + chip.label)}
-                <span class="chip {chip.sign}">
+                <span class="chip {chip.sign}" title={chip.hint}>
                   {chip.sign === "plus" ? "+" : "−"}
                   {chip.label}
                 </span>
@@ -220,9 +237,7 @@
             </span>
           {/if}
         </span>
-        {#if !extra}
-          <Icon name={open ? "up" : "down"} size="1.125rem" />
-        {/if}
+        <Icon name={open ? "up" : "down"} size="1.125rem" />
       </button>
       {#if extra}
         <Button onclick={() => drop(rule)} smaller variant="text">
@@ -231,7 +246,7 @@
       {/if}
     </div>
     {#if open}
-      <div class="editor">
+      <div class="editor" {@attach reveal}>
         <PolicyCard
           onchange={reload}
           parent={rule.parent}
@@ -250,12 +265,20 @@
   <div class="rule open">
     <div class="line">
       <div class="main static">
-        <span class="glyph">
-          <Icon
-            name={item.scopeType === "folder" ? "folder" : "user"}
-            size="1.5rem"
+        {#if item.scopeType === "chat"}
+          <Avatar
+            avatar={{
+              id: item.scopeId,
+              kind: item.scopeId > 0 ? "peer" : "chat",
+            }}
+            colorKey={item.scopeId}
+            hasAvatar={chats.byId(item.scopeId)?.has_avatar ?? false}
+            name={item.title}
+            size={2.25}
           />
-        </span>
+        {:else}
+          <span class="glyph"><Icon name="folder" size="1.5rem" /></span>
+        {/if}
         <span class="text">
           <span class="name">{item.title}</span>
           <span class="sub">Новое правило</span>
@@ -271,7 +294,7 @@
         Отмена
       </Button>
     </div>
-    <div class="editor">
+    <div class="editor" {@attach reveal}>
       <PolicyCard
         onchange={reload}
         scopeId={item.scopeId}
@@ -304,14 +327,17 @@
     <section>
       <div class="section-title">
         <h3>Папки</h3>
-        <span>что меняют · побеждает первая подходящая</span>
+        <span>Что сохраняют. Из подходящих папок побеждает первая.</span>
       </div>
-      {#if draft?.scopeType === "folder"}
-        {@render pending(draft)}
-      {/if}
       {#each folderRules as rule (rule.id)}
+        {#if draft && draftBefore(rule)}
+          {@render pending(draft)}
+        {/if}
         {@render row(rule, false)}
       {/each}
+      {#if draft && draftLast}
+        {@render pending(draft)}
+      {/if}
       {#if freeFolders.length > 0}
         <button
           aria-expanded={picking === "folder"}
@@ -341,7 +367,7 @@
     <section>
       <div class="section-title">
         <h3>Чаты</h3>
-        <span>что меняют · важнее папок</span>
+        <span>Что меняют против папки или умолчания. Важнее папок.</span>
       </div>
       {#if draft?.scopeType === "chat"}
         {@render pending(draft)}
@@ -381,6 +407,8 @@
             >
               {chat.title ?? `Чат ${chat.chat_id}`}
             </button>
+          {:else}
+            <p class="nothing">Ничего не найдено.</p>
           {/each}
         </div>
       {/if}
@@ -418,13 +446,13 @@
 
   .section-title {
     display: flex;
-    gap: 0.75rem;
-    align-items: baseline;
-    justify-content: space-between;
+    flex-direction: column;
+    gap: 0.125rem;
 
     padding: 0.875rem 1rem 0.375rem;
 
     font-size: 0.8125rem;
+    line-height: 1.35;
     color: var(--color-text-secondary);
 
     h3 {
@@ -433,17 +461,14 @@
       font-weight: var(--font-weight-medium);
       color: var(--color-primary);
     }
-
-    span {
-      overflow: hidden;
-      text-align: end;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
   }
 
   .rule.open {
-    background-color: var(--color-chat-hover);
+    border-bottom: 1px solid var(--color-borders);
+
+    .line {
+      background-color: var(--color-chat-hover);
+    }
   }
 
   .line {
@@ -483,6 +508,12 @@
       outline: 2px solid var(--color-primary);
       outline-offset: -2px;
     }
+
+    @media (hover: hover) {
+      &:not(.static):hover {
+        background-color: var(--color-chat-hover);
+      }
+    }
   }
 
   .glyph {
@@ -631,5 +662,16 @@
         background-color: var(--color-chat-hover);
       }
     }
+
+    @media (pointer: coarse) {
+      min-height: 2.75rem;
+    }
+  }
+
+  .nothing {
+    margin: 0;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
   }
 </style>