Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Smart Notification Comments Block for Svelte

Six comment events scored by visible factors, a Focus level range from Everything to Only important that splits them into Deliver now and Batch for 17:00, and a formula panel.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Make a noisy inbox explain itself, with this scoring preview for Svelte with Ark UI. A compact header and a frame in three bands. The first has the Focus level, a range from Everything to Only important, with the current name, the threshold and the count that follows ("3 now, 3 later"). The second lists six comment events; each shows its words, a Badge chip for every factor that applies (+40 Mentioned you, +25 From your lead, +20 Reply in your thread, +10 You follow it, +2 Reaction), the total score and what happens to it, Deliver now or Batch for 17:00. Moving the level changes the threshold and every verdict at once, and no row moves. The third is a Collapsible called Why this score that prints the factor table and the rule. It is rules, not a model, and nothing is sent. For team chat, issue trackers and any product that wants to show why something was or was not worth an interrupt.

FAQ

How do I fill it with my own factors and events?

Edit FACTORS (an id, a label and the points it adds), SIGNALS (an id, the text and the list of factor ids that apply) and FOCUSES (a name and the least score that is delivered now). The totals, the verdicts and the "now, later" counts are worked out from them.

What do the levels do?

Each level is a threshold: Everything delivers all six, Balanced delivers events that score at least 30, and Only important delivers those at 70 or more. Events below the threshold are batched for 17:00 instead of being dropped.

Is this machine learning?

No. The score is a sum of fixed points and the page says so. A real product might learn the weights or let people edit them; this block shows the part that should always exist, a score a person can read and argue with.

What stays local?

The focus level. The status line names each result and nothing is sent. To make it real, store the level per person, compute the score on the server when the event is created, and queue the events below the line for the batch.

Is it accessible?

The range is a native input named by its heading and reads out the level name and threshold as its value. Chips are text, the verdict is a word with an icon and not a colour, and the formula section opens with a button. The status line is read out politely.

How does it look on a phone?

Scores and verdicts wrap under each event's words, the level names under the range are hidden (the current name is written above it), and the factor table becomes one column.