Add tooltip hints to form fields, fix navigation overlap bug
Some checks failed
Validate / Hassfest (push) Has been cancelled
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:
44
frontend/src/lib/components/Hint.svelte
Normal file
44
frontend/src/lib/components/Hint.svelte
Normal 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}
|
||||
@@ -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",
|
||||
|
||||
@@ -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": "Сохранить",
|
||||
|
||||
Reference in New Issue
Block a user