Add tooltip hints to form fields, fix navigation overlap bug
Some checks failed
Validate / Hassfest (push) Has been cancelled

- Create Hint component with fixed-position floating tooltip
- Add hints to tracking configs (periodic/scheduled/memory modes,
  favorites, times, album mode, rating), template configs (section
  legends), targets (AI captions, media settings, config selectors),
  and trackers (scan interval)
- Add 21 hint i18n keys in EN and RU
- Fix transition:slide → in:slide on all pages to prevent content
  overlap when navigating away mid-animation
- Merge Asset Display into Event Tracking fieldset; use consistent
  "Max Assets" label with hint in each section

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-03-19 18:43:30 +03:00
parent 381de98c40
commit bc8fda5984
8 changed files with 126 additions and 39 deletions

View File

@@ -0,0 +1,44 @@
<script lang="ts">
let { text = '' } = $props<{ text: string }>();
let visible = $state(false);
let tooltipStyle = $state('');
let btnEl: HTMLButtonElement;
function show() {
if (!btnEl) return;
visible = true;
const rect = btnEl.getBoundingClientRect();
const tooltipWidth = 272;
let left = rect.left + rect.width / 2 - tooltipWidth / 2;
if (left < 8) left = 8;
if (left + tooltipWidth > window.innerWidth - 8) left = window.innerWidth - tooltipWidth - 8;
tooltipStyle = `position:fixed; z-index:99999; bottom:${window.innerHeight - rect.top + 8}px; left:${left}px; width:${tooltipWidth}px;`;
}
function hide() {
visible = false;
}
</script>
<button type="button" bind:this={btnEl}
class="inline-flex items-center justify-center w-3.5 h-3.5 rounded-full text-[9px] font-bold leading-none
border border-[var(--color-border)] bg-[var(--color-muted)] text-[var(--color-muted-foreground)]
hover:bg-[var(--color-border)] hover:text-[var(--color-foreground)]
transition-colors cursor-help align-middle ml-2 flex-shrink-0"
onmouseenter={show}
onmouseleave={hide}
onfocus={show}
onblur={hide}
aria-label={text}
tabindex="0"
>?</button>
{#if visible}
<div role="tooltip" style={tooltipStyle}
class="px-3 py-2.5 rounded-lg text-xs
bg-[var(--color-card)] text-[var(--color-foreground)]
border border-[var(--color-border)]
shadow-xl whitespace-normal leading-relaxed pointer-events-none">
{text}
</div>
{/if}

View File

@@ -267,6 +267,29 @@
"preview": "Preview",
"confirmDelete": "Delete this template config?"
},
"hints": {
"periodicSummary": "Sends a scheduled summary of all tracked albums at specified times. Great for daily/weekly digests.",
"scheduledAssets": "Sends random or selected photos from tracked albums on a schedule. Like a daily photo pick.",
"memoryMode": "\"On This Day\" — sends photos taken on this date in previous years. Nostalgic flashbacks.",
"favoritesOnly": "Only include assets marked as favorites in Immich.",
"maxAssets": "Maximum number of asset details to include in a single notification message.",
"periodicStartDate": "The reference date for calculating periodic intervals. Summaries are sent every N days from this date.",
"times": "Time(s) of day to send notifications, in HH:MM format. Use commas for multiple times: 09:00,18:00",
"albumMode": "Per album: separate notification per album. Combined: one notification with all albums. Random: pick one album randomly.",
"minRating": "Only include assets with at least this star rating (0 = no filter).",
"eventMessages": "Templates for real-time event notifications. Use {variables} for dynamic content.",
"assetFormatting": "How individual assets are formatted within notification messages.",
"dateLocation": "Date and location formatting in notifications. Uses strftime syntax for dates.",
"scheduledMessages": "Templates for periodic summaries, scheduled photo picks, and On This Day memories.",
"aiCaptions": "Use Claude AI to generate a natural-language caption for notifications instead of the template.",
"maxMedia": "Maximum number of photos/videos to attach per notification (0 = text only).",
"groupSize": "Telegram media groups can contain 2-10 items. Larger batches are split into chunks.",
"chunkDelay": "Delay in milliseconds between sending media chunks. Prevents Telegram rate limiting.",
"maxAssetSize": "Skip assets larger than this size in MB. Telegram limits files to 50 MB.",
"trackingConfig": "Controls which events trigger notifications and how assets are filtered.",
"templateConfig": "Controls the message format. Uses default templates if not set.",
"scanInterval": "How often to poll the Immich server for changes, in seconds. Lower = faster detection but more API calls."
},
"common": {
"loading": "Loading...",
"save": "Save",

View File

@@ -267,6 +267,29 @@
"preview": "Предпросмотр",
"confirmDelete": "Удалить эту конфигурацию шаблона?"
},
"hints": {
"periodicSummary": "Отправляет плановую сводку по всем отслеживаемым альбомам в указанное время. Подходит для ежедневных/еженедельных дайджестов.",
"scheduledAssets": "Отправляет случайные или выбранные фото из альбомов по расписанию. Как ежедневная подборка фото.",
"memoryMode": "\"В этот день\" — отправляет фото, сделанные в этот день в прошлые годы. Ностальгические воспоминания.",
"favoritesOnly": "Включать только ассеты, отмеченные как избранные в Immich.",
"maxAssets": "Максимальное количество ассетов в одном уведомлении.",
"periodicStartDate": "Опорная дата для расчёта интервалов. Сводки отправляются каждые N дней от этой даты.",
"times": "Время отправки уведомлений в формате ЧЧ:ММ. Для нескольких значений через запятую: 09:00,18:00",
"albumMode": "По альбому: отдельное уведомление для каждого. Объединённый: одно уведомление со всеми. Случайный: выбирается один альбом.",
"minRating": "Включать только ассеты с рейтингом не ниже указанного (0 = без фильтра).",
"eventMessages": "Шаблоны уведомлений о событиях в реальном времени. Используйте {переменные} для динамического контента.",
"assetFormatting": "Форматирование отдельных ассетов в сообщениях уведомлений.",
"dateLocation": "Форматирование даты и местоположения. Использует синтаксис strftime для дат.",
"scheduledMessages": "Шаблоны для периодических сводок, подборок фото и воспоминаний «В этот день».",
"aiCaptions": "Использовать Claude AI для генерации описания уведомления вместо шаблона.",
"maxMedia": "Максимальное количество фото/видео в одном уведомлении (0 = только текст).",
"groupSize": "Медиагруппы Telegram содержат 2-10 элементов. Большие пакеты разбиваются на части.",
"chunkDelay": "Задержка в миллисекундах между отправкой порций медиа. Предотвращает ограничение Telegram.",
"maxAssetSize": "Пропускать файлы больше указанного размера в МБ. Лимит Telegram — 50 МБ.",
"trackingConfig": "Управляет тем, какие события вызывают уведомления и как фильтруются ассеты.",
"templateConfig": "Управляет форматом сообщений. Используются шаблоны по умолчанию, если не задано.",
"scanInterval": "Как часто опрашивать сервер Immich на предмет изменений (в секундах). Меньше = быстрее обнаружение, но больше запросов к API."
},
"common": {
"loading": "Загрузка...",
"save": "Сохранить",