diff --git a/.changeset/feat_sticker_add_link_to_settings.md b/.changeset/feat_sticker_add_link_to_settings.md new file mode 100644 index 000000000..52f082aef --- /dev/null +++ b/.changeset/feat_sticker_add_link_to_settings.md @@ -0,0 +1,5 @@ +--- +default: patch +--- + +Add a direct link to room/space settings when the current sticker list is empty diff --git a/src/app/components/emoji-board/components/NoStickerPacks.tsx b/src/app/components/emoji-board/components/NoStickerPacks.tsx index c8372b241..2335fc9e9 100644 --- a/src/app/components/emoji-board/components/NoStickerPacks.tsx +++ b/src/app/components/emoji-board/components/NoStickerPacks.tsx @@ -1,7 +1,30 @@ -import { Box, toRem, config, Text } from 'folds'; +import { Box, config, Text, toRem } from 'folds'; import { dropzoneIcon, Sticker } from '$components/icons/phosphor'; +import { useOpenRoomSettings } from '$state/hooks/roomSettings.ts'; +import { useOpenSpaceSettings } from '$state/hooks/spaceSettings.ts'; +import { useRoomOptionally } from '$hooks/useRoom.ts'; +import { useSpaceOptionally } from '$hooks/useSpace.ts'; +import * as css from './styles.css'; +import { RoomSettingsPage } from '$state/roomSettings.ts'; +import { SpaceSettingsPage } from '$state/spaceSettings.ts'; + +function OptionallyLinkedText(props: { text: string; isLink: boolean; onClick: () => void }) { + return props.isLink ? ( + + {props.text} + + ) : ( + <>{props.text} + ); +} export function NoStickerPacks() { + const openRoomSettings = useOpenRoomSettings(); + const openSpaceSettings = useOpenSpaceSettings(); + + const room = useRoomOptionally(); + const space = useSpaceOptionally(); + return ( No Sticker Packs! - Add stickers from user, room or space settings. + Add stickers from user,{' '} + + openRoomSettings( + room?.roomId as string, + space?.roomId, + RoomSettingsPage.EmojisStickersPage + ) + } + /> + {', '}or{' '} + + openSpaceSettings( + room?.roomId as string, + space?.roomId, + SpaceSettingsPage.EmojisStickersPage + ) + } + />{' '} + settings. diff --git a/src/app/components/emoji-board/components/styles.css.ts b/src/app/components/emoji-board/components/styles.css.ts index 13de5f2ec..7f8470cd7 100644 --- a/src/app/components/emoji-board/components/styles.css.ts +++ b/src/app/components/emoji-board/components/styles.css.ts @@ -228,3 +228,11 @@ export const GifImg = style({ objectFit: 'cover', borderRadius: config.radii.R400, }); + +export const TextLink = style({ + color: 'var(--tc-link)', + cursor: 'pointer', + ':hover': { + textDecoration: 'underline', + }, +}); diff --git a/src/app/hooks/useRoom.ts b/src/app/hooks/useRoom.ts index 4718a59a2..9617414e9 100644 --- a/src/app/hooks/useRoom.ts +++ b/src/app/hooks/useRoom.ts @@ -11,6 +11,10 @@ export function useRoom(): Room { return room; } +export function useRoomOptionally(): Room | null { + return useContext(RoomContext); +} + const IsDirectRoomContext = createContext(false); export const IsDirectRoomProvider = IsDirectRoomContext.Provider;