Discord Detail Integration Block for React

Each permission in PERMISSIONS carries Discord's documented bit value (View Channels is 1,024, Send Messages 2,048, Embed Links 16,384, Attach Files 32,768, Add Reactions 64, Read Message History 65,536, Mention Everyone 131,072, Manage Roles 268,435,456). The integer is the sum of the values that are switched on, worked out by total from the same list the rows come from, so the number, the "6 of 8" count and the link always agree. It is a plain sum because each permission is a different power of two.

Nothing yet: it is built, not sent. It has the shape of the OAuth link Discord uses to add a bot, with scope=bot applications.commands and permissions= set to the integer, and YOUR_APP_ID standing for your application's id. Replace inviteOf with your own, point Add to Discord at it, and Copy copies exactly what the field shows. Opening Add to Discord in this block goes nowhere (href="#"), and a polite line says that nothing is sent to Discord.

A bot that cannot see a channel or send a message cannot post an announcement, so View Channels and Send Messages are marked required: on, locked and labelled, with the reason in the row. Everything else can be switched off, and the line under the card says what that costs (plain-text announcements without Embed Links, no images without Attach Files, no role sync without Manage Roles). Edit cost on a permission to change that sentence.

The block names Discord in text, as any integration page says what it works with, and ships no Discord logo, colour or wordmark. Discord's tile is a neutral lettermark, Di in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both products.

The two buttons render the link they're given with render, with nativeButton={false}.

Every switch has a name (the permission) and is reachable by keyboard; the read-only link field selects itself on focus so it can be copied by hand.

Below lg the divider gives way to a rule and the parts stack in reading order: the title, the invite card, then the switches. In a right-to-left layout the columns flip while the integer, the link and the bit values keep their left-to-right order. The header and the card fade up once on load with CSS transitions; with reduced motion they simply appear.