shadcn.io is not affiliated with official shadcn/ui
Chat Privacy Settings Block for Vue
A privacy panel for a messenger: choose who can message you, test the rule on six typed contacts, unblock people with Undo, and flip read receipts and online status beside a drawn sample of how you appear.
Installation
Overview
Show people exactly what a privacy setting does, with this chat privacy settings panel for Vue with Ark UI. A hairline frame with a plus mark on each corner holds the panel for Doorward, a messenger. Band one sets who can message you: Everyone, People who share a channel with me or Nobody, as three radio cards. Band two, "Check a person", takes one of six typed contacts, each with a relationship (shares #design, no shared channel, blocked), and writes the result from the same rule the setting uses: "Kai can message you: yes, you share #design". Band three lists the people you blocked; Unblock leaves the row as "Unblocked in this demo" with Undo. Band four holds two Switch controls, Read receipts and Show when I'm online, beside a drawn sample of how you appear to others. The action foot counts unsaved changes, and its Shine Button is the only colored control. It's built from Switch, Native Select, Button, Avatar, Shine Button and Guides, with a CSS entrance only. For messengers and any product where people decide who can reach them.
FAQ
What stays in the page, and how do I make it real?
Everything, and nothing is enforced: no one is blocked, hidden or told anything. The setting, the blocked list and the six contacts live in the page's state, and Save keeps them there. To wire it for real, send the audience, the blocked ids and the two switches to your API on Save, and enforce them on the server where messages are delivered, never only in the client.
How does the check work?
One small rule: blocked people can never message you, Nobody lets no one in, Everyone lets everyone in, and People who share a channel lets in only contacts who share one. The result row and the sentence under the field are built from that rule, so changing the setting or the blocked list changes the answer at once.
What happens when I unblock someone?
The row stays where it is and says "Unblocked in this demo" with an Undo button, so the list never jumps. The count in the heading and the result for that person update, and the foot counts it as an unsaved change until you save or discard.
Is the sample of how I appear live?
It is a drawn sample, not a view of any real person's screen. Turning Read receipts off changes "Seen 09:41" to "Delivered", and turning Show when I'm online off changes the dot and "Online" to "Status hidden".
Is it usable with a keyboard and a screen reader?
The three audiences are real radio buttons in a named group, the contact select has a visible label, each switch is named with its setting, Unblock and Undo name the person, and the foot's status line announces results and unsaved counts. The blocked and allowed answers are words and icons, never colour alone.