Add header quick links with CRUD management and icon enhancements

- Add LinkConfig model and links field to settings
- Add CRUD API endpoints for links (list/create/update/delete)
- Add Links management tab in WebUI with add/edit/delete dialogs
- Add live icon preview in Link and Script dialog forms
- Show MDI icons inline in Quick Actions cards, Scripts table, Links table
- Add broadcast_links_changed WebSocket event for live updates
- Add EN/RU translations for all links management strings

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-02-27 14:42:18 +03:00
parent 6f6a4e4aec
commit 99dbbb1019
11 changed files with 886 additions and 5 deletions

View File

@@ -205,6 +205,66 @@ h1 {
fill: currentColor;
}
/* Header Quick Links */
.header-links {
display: flex;
align-items: center;
gap: 0.125rem;
}
.header-link {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--text-primary);
opacity: 0.7;
transition: opacity 0.2s;
text-decoration: none;
}
.header-link:hover {
opacity: 1;
}
.header-link svg {
width: 16px;
height: 16px;
}
/* Icon Input with Preview */
.icon-input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
}
.icon-input-wrapper input {
flex: 1;
}
.icon-preview {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
min-width: 36px;
border-radius: 6px;
background: var(--bg-tertiary);
color: var(--text-primary);
}
.icon-preview svg {
width: 20px;
height: 20px;
}
.icon-preview:empty {
display: none;
}
/* Accent Color Picker */
.accent-picker {
position: relative;
@@ -872,6 +932,38 @@ button:disabled {
pointer-events: none;
}
.script-btn .script-icon {
color: var(--accent);
line-height: 0;
}
.script-btn .script-icon svg {
width: 24px;
height: 24px;
}
.script-btn:hover:not(:disabled) .script-icon {
color: #fff;
}
/* Inline icon in table name cells */
.name-with-icon {
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
.table-icon {
display: inline-flex;
color: var(--text-secondary);
line-height: 0;
}
.table-icon svg {
width: 16px;
height: 16px;
}
/* Script Management Styles */
.script-management {
background: var(--bg-secondary);