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.tsx

@@ -0,0 +1,65 @@
+/**
+ * MobilePinActionsSheet — bottom sheet opened by long-pressing a
+ * pinned message in the mobile Pins tab. Mirrors the pattern used
+ * by MobileMessageActionsSheet: a rounded card of danger-styled
+ * action rows, with inset dividers between them.
+ *
+ * Currently only has one action ("Unpin Message") since that's the
+ * only contextual action the pinned list needs — jumping to the
+ * message is already the tap behaviour on the card itself, and
+ * there's no "reply to pin" or "react to pin" concept. Structured
+ * as a card stack so future actions can drop in without reshuffling.
+ */
+import { PushPinSlash } from '@phosphor-icons/react';
+import { BottomSheet } from '@brycord/ui';
+import styles from './MobilePinActionsSheet.module.css';
+
+interface MobilePinActionsSheetProps {
+	isOpen: boolean;
+	onClose: () => void;
+	/** True when the local user has permission to unpin — the sheet
+	 *  simply doesn't render the Unpin action otherwise. */
+	canUnpin: boolean;
+	onUnpin: () => void;
+}
+
+export function MobilePinActionsSheet({
+	isOpen,
+	onClose,
+	canUnpin,
+	onUnpin,
+}: MobilePinActionsSheetProps) {
+	// Wrap each action so tapping it always closes the sheet. Mirrors
+	// the pattern in MobileMessageActionsSheet so behaviour is
+	// consistent across both bottom sheets.
+	const wrap = (fn: () => void) => () => {
+		fn();
+		onClose();
+	};
+
+	return (
+		<BottomSheet
+			isOpen={isOpen}
+			onClose={onClose}
+			disableDefaultHeader
+			showHandle
+			initialHeightSvh={25}
+			expandable
+		>
+			<div className={styles.body}>
+				{canUnpin && (
+					<div className={styles.actionList}>
+						<button
+							type="button"
+							className={`${styles.actionItem} ${styles.actionItemDanger}`}
+							onClick={wrap(onUnpin)}
+						>
+							<PushPinSlash size={20} weight="fill" />
+							<span>Unpin Message</span>
+						</button>
+					</div>
+				)}
+			</div>
+		</BottomSheet>
+	);
+}