b7a4cf4ce8
All checks were successful
Build and Release / build-and-release (push) Successful in 13m12s
- 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.
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
/**
|
|
* 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>
|
|
);
|
|
}
|