From 5f847027758aa2487a4ad1f21520a0b13d08d43e Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 13 Mar 2026 15:52:39 +0200 Subject: [PATCH 1/3] Redesign automations empty state with visual flow diagram Replace old example cards with a trigger-to-action flow: WHEN trigger pills with "or" separators, bolt connector, THEN badge at branch intersection, and branching dashed lines to action toggles. Co-Authored-By: Claude Opus 4.6 --- .../db-table-actions.component.css | 236 +++++++++++++++--- .../db-table-actions.component.html | 110 ++++---- 2 files changed, 262 insertions(+), 84 deletions(-) diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css index cd5227562..1c03166b8 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css @@ -308,79 +308,243 @@ display: flex; flex-direction: column; align-items: center; - gap: 32px; - margin: 32px auto 0; - width: clamp(300px, 80vw, 1020px); + gap: 16px; + margin: 40px auto 0; + max-width: 900px; } -.actions-hint { +.empty-state__header { display: flex; flex-direction: column; align-items: center; - margin-top: 40px !important; + text-align: center; + margin-bottom: 8px; } -.actions-hint__title { - display: inline-block; - font-size: 1.25em; - margin-bottom: 4px; +.empty-state__icon-box { + width: 40px; + height: 40px; + border-radius: 10px; + background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%); + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 16px; } -.actions-hint__text { - color: rgba(0, 0, 0, 0.64); +.empty-state__icon { + color: var(--color-accentedPalette-500); + font-size: 22px; + width: 22px; + height: 22px; +} + +.empty-state__title { + font-size: 20px; + font-weight: 600; + margin: 0 0 6px; + line-height: 1.3; +} + +.empty-state__subtitle { + font-size: 14px; + font-weight: 300; + color: rgba(0, 0, 0, 0.56); + margin: 0 0 20px !important; + line-height: 1.5; } @media (prefers-color-scheme: dark) { - .actions-hint__text { - color: rgba(255, 255, 255, 0.64); + .empty-state__subtitle { + color: rgba(255, 255, 255, 0.56); } } -.rules-examples { - display: grid; - grid-template-columns: repeat(3, minmax(300px, 1fr)); - grid-gap: 20px; +.empty-state__cta { + display: flex; + align-items: center; + gap: 16px; +} + +.empty-state__docs-link { + display: inline-flex; + align-items: center; + gap: 3px; + font-size: 13px; + color: var(--color-accentedPalette-500); + text-decoration: none; +} + +.empty-state__docs-link:hover { + text-decoration: underline; +} + +.empty-state__docs-icon { + font-size: 15px; + width: 15px; + height: 15px; +} + +/* ── Example flow ── */ + +.example-flow { + display: flex; + flex-direction: column; + align-items: center; width: 100%; + max-width: 640px; } -.rule-example { +.example-flow__card { display: flex; flex-direction: column; - align-items: flex-start; - gap: 16px; - border: 1px solid rgba(0, 0, 0, 0.12); - border-radius: 4px; - padding: 16px; + gap: 10px; + padding: 14px 18px; + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 8px; + width: 100%; + box-sizing: border-box; } @media (prefers-color-scheme: dark) { - .rule-example { - border-color: rgba(255, 255, 255, 0.12); - background-color: var(--surface-dark-color); + .example-flow__card { + border-color: rgba(255, 255, 255, 0.08); + background: rgba(255, 255, 255, 0.02); } } -.rule-example__row { +.example-flow__card-label { + font-size: 13px; + font-weight: 500; + color: rgba(0, 0, 0, 0.5); display: flex; align-items: center; - gap: 24px; } -.rule-example__value { +@media (prefers-color-scheme: dark) { + .example-flow__card-label { + color: rgba(255, 255, 255, 0.5); + } +} + +.example-flow__card-label .step-label__badge { + font-size: 0.8em; + padding: 1px 5px; +} + +.example-flow__card-items { display: flex; align-items: center; - background-color: rgba(0, 0, 0, 0.04); - color: rgba(0, 0, 0, 0.64); - padding: 8px 16px; + gap: 8px; + flex-wrap: nowrap; +} + +.example-flow__arrow { + display: flex; + flex-direction: column; + align-items: center; + height: 40px; + gap: 2px; +} + +.example-flow__arrow::before, +.example-flow__arrow::after { + content: ''; + flex: 1; + border-left: 1px dashed var(--color-accentedPalette-300); +} + +.example-flow__arrow-icon { + font-size: 14px; + width: 14px; + height: 14px; + color: var(--color-accentedPalette-400); + font-variation-settings: 'FILL' 1; +} + +.example-flow__arrow .step-label__badge { + font-size: 0.8em; + padding: 1px 5px; +} + +/* ── Branches ── */ + +.example-flow__branches { + display: flex; + justify-content: center; + gap: 16px; + position: relative; +} + +.example-flow__then-badge { + position: absolute; + top: 0; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; +} + +.example-flow__branches::before { + content: ''; + position: absolute; + top: 0; + left: calc((100% - 32px) / 6); + right: calc((100% - 32px) / 6); + border-top: 1px dashed var(--color-accentedPalette-300); +} + +.example-flow__branch { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; +} + +.example-flow__branch-line { + width: 1px; + height: 28px; + border-left: 1px dashed var(--color-accentedPalette-300); + margin-bottom: 4px; +} + +/* ── Example demo elements ── */ + +.trigger-pill--demo { + pointer-events: none; + cursor: default; +} + +.example-toggle { + pointer-events: none; +} + +.example-toggle ::ng-deep .mat-button-toggle-button { + background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%); + color: var(--color-accentedPalette-500); + border-color: color-mix(in srgb, var(--color-accentedPalette-500), transparent 70%); } @media (prefers-color-scheme: dark) { - .rule-example__value { - background-color: rgba(255, 255, 255, 0.08); - color: rgba(255, 255, 255, 0.64); + .example-toggle ::ng-deep .mat-button-toggle-button { + background: color-mix(in srgb, var(--color-accentedPalette-300), transparent 90%); + color: var(--color-accentedPalette-200); + border-color: color-mix(in srgb, var(--color-accentedPalette-300), transparent 60%); } } +.example-toggle ::ng-deep .mat-button-toggle-label-content { + display: flex; + align-items: center; + gap: 4px; +} + +.example-toggle mat-icon { + font-size: 18px; + width: 18px; + height: 18px; +} + + /* ── Creation flow ── */ .creation-flow { @@ -677,7 +841,7 @@ .trigger-pill--custom.trigger-pill--active { border-color: #c084fc; - background: #150820; + background: color-mix(in srgb, #c084fc, transparent 90%); box-shadow: 0 0 0 1px rgba(192, 132, 252, 0.25), 0 0 12px rgba(192, 132, 252, 0.08); } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html index 0334530b5..42dc44be4 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html @@ -212,60 +212,74 @@

Automations

-

- Configure custom triggers and actions for database records - React to standard operations like create, update, delete, or define your own. -

- -
-
-
- Trigger - Add row - Update row -
-
- Action - send email notification -
-
- to - admin@example.com, user@example.com -
+
+
+ bolt +
+

Automate your database workflows

+

Set up triggers and actions to react to data changes automatically.

+
+ + + Docs open_in_new +
+
-
-
- Trigger - Delete row -
-
- Action - send Slack notification -
-
- to - https://hooks.slack.com/services/... +
+
+ WHEN Trigger +
+ + add_circle_outline + Add row + + or + + edit + Update row + + or + + delete_outline + Delete row + + or + + download + Custom +
- -
-
- Trigger - block Block user +
+ bolt +
+
+ THEN +
+
+ + email Email +
-
- Action - send webhook +
+
+ + webhook Webhook +
-
- to - https://example.com/webhook +
+
+ + tag Slack +
From 259563a7a1f2e52571a4e3c513c31fc1c4fe7dcc Mon Sep 17 00:00:00 2001 From: Karina Kharchenko Date: Fri, 13 Mar 2026 16:31:29 +0200 Subject: [PATCH 2/3] Refine empty state: card-based flow with trigger grid and action cards Replace pill-based triggers with 2x2 grid of icon+title+description cards. Actions shown as centered icon-box cards. Add WHEN/ACTION badges with section labels, connector with THEN pill. Improve light/dark theme contrast. Rename sidebar empty text. Co-Authored-By: Claude Opus 4.6 --- .../db-table-actions.component.css | 283 ++++++++++++------ .../db-table-actions.component.html | 115 ++++--- 2 files changed, 271 insertions(+), 127 deletions(-) diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css index 1c03166b8..22ccdb8dc 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.css @@ -342,7 +342,7 @@ .empty-state__title { font-size: 20px; font-weight: 600; - margin: 0 0 6px; + margin: 0 0 2px; line-height: 1.3; } @@ -350,7 +350,7 @@ font-size: 14px; font-weight: 300; color: rgba(0, 0, 0, 0.56); - margin: 0 0 20px !important; + margin: 0 !important; line-height: 1.5; } @@ -364,6 +364,7 @@ display: flex; align-items: center; gap: 16px; + margin-top: 16px; } .empty-state__docs-link { @@ -392,156 +393,270 @@ flex-direction: column; align-items: center; width: 100%; - max-width: 640px; + max-width: 520px; } .example-flow__card { display: flex; flex-direction: column; - gap: 10px; - padding: 14px 18px; - border: 1px solid rgba(0, 0, 0, 0.08); - border-radius: 8px; + gap: 0; + padding: 24px; + border: 1px solid #cbd5e1; + border-radius: 20px; width: 100%; box-sizing: border-box; + opacity: 0.85; + pointer-events: none; + background: #f1f5f9; } @media (prefers-color-scheme: dark) { .example-flow__card { - border-color: rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.02); + border-color: #2a2f3f; + background: #1a1d27; } } -.example-flow__card-label { - font-size: 13px; - font-weight: 500; - color: rgba(0, 0, 0, 0.5); +/* ── Badges ── */ + +.example-flow__section-label { display: flex; align-items: center; + gap: 8px; + margin-bottom: 12px; +} + +.example-flow__section-text { + font-size: 13px; + font-weight: 500; + color: #475569; } @media (prefers-color-scheme: dark) { - .example-flow__card-label { - color: rgba(255, 255, 255, 0.5); + .example-flow__section-text { + color: #94a3b8; } } -.example-flow__card-label .step-label__badge { - font-size: 0.8em; - padding: 1px 5px; +.example-flow__badge { + display: inline-flex; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.05em; + padding: 3px 10px; + border-radius: 6px; +} + +.example-flow__badge--when { + background: #ede9fe; + color: #6d28d9; +} + +.example-flow__badge--action { + background: #dbeafe; + color: #3b82f6; } -.example-flow__card-items { +@media (prefers-color-scheme: dark) { + .example-flow__badge--when { + background: #3730a3; + color: #a5b4fc; + } + + .example-flow__badge--action { + background: #1e3a5f; + color: #60a5fa; + } +} + +/* ── Trigger grid ── */ + +.example-flow__triggers { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; +} + +.example-trigger { display: flex; align-items: center; - gap: 8px; - flex-wrap: nowrap; + gap: 10px; + padding: 10px 12px; + border-radius: 12px; + background: #ffffff; + border: 1px solid #cbd5e1; } -.example-flow__arrow { +@media (prefers-color-scheme: dark) { + .example-trigger { + background: #13151a; + border-color: #2a2f3f; + } +} + +.example-trigger__icon-box { + width: 34px; + height: 34px; + border-radius: 9px; display: flex; - flex-direction: column; align-items: center; - height: 40px; - gap: 2px; + justify-content: center; + flex-shrink: 0; } -.example-flow__arrow::before, -.example-flow__arrow::after { - content: ''; - flex: 1; - border-left: 1px dashed var(--color-accentedPalette-300); +.example-trigger__icon-box mat-icon { + font-size: 18px; + width: 18px; + height: 18px; } -.example-flow__arrow-icon { - font-size: 14px; - width: 14px; - height: 14px; - color: var(--color-accentedPalette-400); - font-variation-settings: 'FILL' 1; +.example-trigger__icon-box--add { + background: color-mix(in srgb, #4ade80, transparent 80%); + color: #15803d; +} + +.example-trigger__icon-box--update { + background: color-mix(in srgb, #60a5fa, transparent 80%); + color: #1d4ed8; +} + +.example-trigger__icon-box--delete { + background: color-mix(in srgb, #f87171, transparent 80%); + color: #b91c1c; } -.example-flow__arrow .step-label__badge { - font-size: 0.8em; - padding: 1px 5px; +.example-trigger__icon-box--custom { + background: color-mix(in srgb, #c084fc, transparent 80%); + color: #6d28d9; } -/* ── Branches ── */ +@media (prefers-color-scheme: dark) { + .example-trigger__icon-box--add { background: rgba(74, 222, 128, 0.12); color: #4ade80; } + .example-trigger__icon-box--update { background: rgba(96, 165, 250, 0.12); color: #60a5fa; } + .example-trigger__icon-box--delete { background: rgba(248, 113, 113, 0.12); color: #f87171; } + .example-trigger__icon-box--custom { background: rgba(192, 132, 252, 0.12); color: #c084fc; } +} -.example-flow__branches { +.example-trigger__text { display: flex; - justify-content: center; - gap: 16px; - position: relative; + flex-direction: column; + gap: 1px; } -.example-flow__then-badge { - position: absolute; - top: 0; - left: 50%; - transform: translate(-50%, -50%); - z-index: 1; +.example-trigger__title { + font-size: 13px; + font-weight: 600; + color: #0f172a; } -.example-flow__branches::before { - content: ''; - position: absolute; - top: 0; - left: calc((100% - 32px) / 6); - right: calc((100% - 32px) / 6); - border-top: 1px dashed var(--color-accentedPalette-300); +.example-trigger__desc { + font-size: 11px; + color: #64748b; } -.example-flow__branch { - flex: 1; +@media (prefers-color-scheme: dark) { + .example-trigger__title { color: #e2e8f0; } + .example-trigger__desc { color: #64748b; } +} + +/* ── Connector ── */ + +.example-flow__connector { display: flex; flex-direction: column; align-items: center; + height: 48px; + margin: 4px 0; } -.example-flow__branch-line { - width: 1px; - height: 28px; - border-left: 1px dashed var(--color-accentedPalette-300); - margin-bottom: 4px; +.example-flow__connector-line { + flex: 1; + border-left: 1px solid #cbd5e1; } -/* ── Example demo elements ── */ +@media (prefers-color-scheme: dark) { + .example-flow__connector-line { + border-color: #2a2f3f; + } +} -.trigger-pill--demo { - pointer-events: none; - cursor: default; +.example-flow__connector-pill { + font-size: 10px; + font-weight: 700; + letter-spacing: 0.05em; + padding: 2px 8px; + border-radius: 4px; + background: #e2e8f0; + color: #64748b; } -.example-toggle { - pointer-events: none; +@media (prefers-color-scheme: dark) { + .example-flow__connector-pill { + background: #1e2130; + color: #64748b; + } } -.example-toggle ::ng-deep .mat-button-toggle-button { - background: color-mix(in srgb, var(--color-accentedPalette-500), transparent 88%); - color: var(--color-accentedPalette-500); - border-color: color-mix(in srgb, var(--color-accentedPalette-500), transparent 70%); +/* ── Actions ── */ + +.example-flow__actions { + display: flex; + gap: 10px; +} + +.example-action { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + padding: 14px 8px; + border-radius: 12px; + background: #ffffff; + border: 1px solid #cbd5e1; } @media (prefers-color-scheme: dark) { - .example-toggle ::ng-deep .mat-button-toggle-button { - background: color-mix(in srgb, var(--color-accentedPalette-300), transparent 90%); - color: var(--color-accentedPalette-200); - border-color: color-mix(in srgb, var(--color-accentedPalette-300), transparent 60%); + .example-action { + background: #13151a; + border-color: #2a2f3f; } } -.example-toggle ::ng-deep .mat-button-toggle-label-content { +.example-action__icon-box { + width: 40px; + height: 40px; + border-radius: 10px; display: flex; align-items: center; - gap: 4px; + justify-content: center; + background: #dbeafe; + color: #1d4ed8; } -.example-toggle mat-icon { - font-size: 18px; - width: 18px; - height: 18px; +@media (prefers-color-scheme: dark) { + .example-action__icon-box { + background: #1e2130; + color: #6b7280; + } +} + +.example-action__icon-box mat-icon { + font-size: 20px; + width: 20px; + height: 20px; +} + +.example-action__label { + font-size: 12px; + font-weight: 600; + color: #334155; +} + +@media (prefers-color-scheme: dark) { + .example-action__label { + color: #6b7280; + } } diff --git a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html index 42dc44be4..fc10422cf 100644 --- a/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html +++ b/frontend/src/app/components/dashboard/db-table-view/db-table-actions/db-table-actions.component.html @@ -4,7 +4,7 @@

Automations

- No added automations + No automations yet