feat(ui): add Button, Modal, Spinner, Toast, and Tooltip components with styles

- Implemented Button component with various props for customization.
- Created Modal component with header, content, and footer subcomponents.
- Added Spinner component for loading indicators.
- Developed Toast component for displaying notifications.
- Introduced Tooltip component for contextual hints with keyboard shortcuts.
- Added corresponding CSS modules for styling each component.
- Updated index file to export new components.
- Configured TypeScript settings for the UI package.

packages/shared/src/components/channel/MobilePinActionsSheet.module.css

@@ -0,0 +1,68 @@
+/* ── Mobile pin actions sheet ────────────────────────────────────────
+   Bottom sheet opened by long-pressing a pinned message in the
+   ChannelDetailsDrawer Pins tab. Currently only has one action
+   ("Unpin Message"), but structured as a card stack so we can
+   drop in "Jump to Message" / "Copy Link" etc. later without
+   reshuffling the layout. */
+
+.body {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 8px 16px 32px;
+}
+
+.actionList {
+	background-color: var(--background-secondary-alt);
+	border-radius: 0.75rem;
+	overflow: hidden;
+}
+
+.actionItem {
+	position: relative;
+	display: flex;
+	align-items: center;
+	gap: 14px;
+	width: 100%;
+	padding: 16px;
+	background: transparent;
+	border: none;
+	color: var(--text-primary);
+	font: inherit;
+	font-size: 15px;
+	font-weight: 600;
+	text-align: left;
+	cursor: pointer;
+	transition: background-color 0.1s;
+	-webkit-tap-highlight-color: transparent;
+}
+
+.actionItem:active {
+	background-color: var(--background-modifier-hover);
+}
+
+.actionItem svg {
+	flex-shrink: 0;
+	color: var(--text-primary-muted);
+}
+
+.actionItem:not(:last-child)::after {
+	content: '';
+	position: absolute;
+	left: calc(16px + 20px + 14px);
+	right: 16px;
+	bottom: 0;
+	height: 1px;
+	background-color: var(--background-header-secondary);
+	pointer-events: none;
+}
+
+/* Danger variant — Unpin Message. Fluxer reference uses the same
+   red HSL as Delete Message in the message actions sheet. */
+.actionItemDanger {
+	color: hsl(350, calc(90% * var(--saturation-factor)), 65%);
+}
+
+.actionItemDanger svg {
+	color: hsl(350, calc(90% * var(--saturation-factor)), 65%);
+}