From 9c93c151ccbd02e5a8294a6ddeb6004dfca30395 Mon Sep 17 00:00:00 2001 From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com> Date: Tue, 30 Jun 2026 18:39:34 +0100 Subject: [PATCH 1/4] feat(sticker): add a direct link to room/space settings when sticker list is empty --- .../feat_sticker_add_link_to_settings.md | 5 ++ .../emoji-board/components/NoStickerPacks.tsx | 63 +++++++++++++------ .../emoji-board/components/styles.css.ts | 8 +++ src/app/hooks/useRoom.ts | 4 ++ 4 files changed, 61 insertions(+), 19 deletions(-) create mode 100644 .changeset/feat_sticker_add_link_to_settings.md 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 0000000000..7f95100438 --- /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 \ No newline at end of file diff --git a/src/app/components/emoji-board/components/NoStickerPacks.tsx b/src/app/components/emoji-board/components/NoStickerPacks.tsx index c8372b2418..8a65534231 100644 --- a/src/app/components/emoji-board/components/NoStickerPacks.tsx +++ b/src/app/components/emoji-board/components/NoStickerPacks.tsx @@ -1,22 +1,47 @@ -import { Box, toRem, config, Text } from 'folds'; -import { dropzoneIcon, Sticker } from '$components/icons/phosphor'; +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() { - return ( - - {dropzoneIcon(Sticker)} - - No Sticker Packs! - - Add stickers from user, room or space settings. - - - - ); + const openRoomSettings = useOpenRoomSettings(); + const openSpaceSettings = useOpenSpaceSettings(); + + const room = useRoomOptionally(); + const space = useSpaceOptionally(); + + return ( + + {dropzoneIcon(Sticker)} + + No Sticker Packs! + + 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 13de5f2ec6..a7458cc568 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: color.Secondary.Main, + ':hover': { + textDecoration: 'underline', + cursor: 'pointer', + } +}); \ No newline at end of file diff --git a/src/app/hooks/useRoom.ts b/src/app/hooks/useRoom.ts index 4718a59a29..9617414e96 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; From 6e485d8d2b893d32709f0e0c60ba0951d07b3b18 Mon Sep 17 00:00:00 2001 From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com> Date: Tue, 30 Jun 2026 18:44:41 +0100 Subject: [PATCH 2/4] format --- .../components/emoji-board/components/NoStickerPacks.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/app/components/emoji-board/components/NoStickerPacks.tsx b/src/app/components/emoji-board/components/NoStickerPacks.tsx index 8a65534231..339d32e108 100644 --- a/src/app/components/emoji-board/components/NoStickerPacks.tsx +++ b/src/app/components/emoji-board/components/NoStickerPacks.tsx @@ -8,7 +8,7 @@ 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}) { +function OptionallyLinkedText(props: { text: string, isLink: boolean, onClick: () => void }) { return props.isLink ? ( {props.text} ) : ( @@ -36,9 +36,11 @@ export function NoStickerPacks() { No Sticker Packs! Add stickers from user,{' '} - openRoomSettings(room?.roomId as string, space?.roomId, RoomSettingsPage.EmojisStickersPage)} /> + openRoomSettings(room?.roomId as string, space?.roomId, RoomSettingsPage.EmojisStickersPage)}/> {', '}or{' '} - openSpaceSettings(room?.roomId as string, space?.roomId, SpaceSettingsPage.EmojisStickersPage)} /> + openSpaceSettings(room?.roomId as string, space?.roomId, SpaceSettingsPage.EmojisStickersPage)}/> {' '}settings. From a242f559497f4b83bb303c714ae0e7c7c2aa3d45 Mon Sep 17 00:00:00 2001 From: ellieplayswow <164806095+ellieplayswow@users.noreply.github.com> Date: Tue, 30 Jun 2026 18:59:25 +0100 Subject: [PATCH 3/4] format for real this time --- .../feat_sticker_add_link_to_settings.md | 2 +- .../emoji-board/components/NoStickerPacks.tsx | 102 +++++++++++------- .../emoji-board/components/styles.css.ts | 4 +- 3 files changed, 64 insertions(+), 44 deletions(-) diff --git a/.changeset/feat_sticker_add_link_to_settings.md b/.changeset/feat_sticker_add_link_to_settings.md index 7f95100438..52f082aeff 100644 --- a/.changeset/feat_sticker_add_link_to_settings.md +++ b/.changeset/feat_sticker_add_link_to_settings.md @@ -2,4 +2,4 @@ default: patch --- -Add a direct link to room/space settings when the current sticker list is empty \ No newline at end of file +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 339d32e108..2335fc9e96 100644 --- a/src/app/components/emoji-board/components/NoStickerPacks.tsx +++ b/src/app/components/emoji-board/components/NoStickerPacks.tsx @@ -1,49 +1,69 @@ -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 { 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"; +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} - ); +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 openRoomSettings = useOpenRoomSettings(); + const openSpaceSettings = useOpenSpaceSettings(); - const room = useRoomOptionally(); - const space = useSpaceOptionally(); + const room = useRoomOptionally(); + const space = useSpaceOptionally(); - return ( - - {dropzoneIcon(Sticker)} - - No Sticker Packs! - - Add stickers from user,{' '} - openRoomSettings(room?.roomId as string, space?.roomId, RoomSettingsPage.EmojisStickersPage)}/> - {', '}or{' '} - openSpaceSettings(room?.roomId as string, space?.roomId, SpaceSettingsPage.EmojisStickersPage)}/> - {' '}settings. - - - - ); + return ( + + {dropzoneIcon(Sticker)} + + No Sticker Packs! + + 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 a7458cc568..a3658c51b6 100644 --- a/src/app/components/emoji-board/components/styles.css.ts +++ b/src/app/components/emoji-board/components/styles.css.ts @@ -234,5 +234,5 @@ export const TextLink = style({ ':hover': { textDecoration: 'underline', cursor: 'pointer', - } -}); \ No newline at end of file + }, +}); From 056dbed66b4d1d41e0e834d46617d1358aaa8054 Mon Sep 17 00:00:00 2001 From: 7w1 Date: Thu, 2 Jul 2026 11:59:15 -0500 Subject: [PATCH 4/4] change link color --- src/app/components/emoji-board/components/styles.css.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/components/emoji-board/components/styles.css.ts b/src/app/components/emoji-board/components/styles.css.ts index a3658c51b6..7f8470cd78 100644 --- a/src/app/components/emoji-board/components/styles.css.ts +++ b/src/app/components/emoji-board/components/styles.css.ts @@ -230,9 +230,9 @@ export const GifImg = style({ }); export const TextLink = style({ - color: color.Secondary.Main, + color: 'var(--tc-link)', + cursor: 'pointer', ':hover': { textDecoration: 'underline', - cursor: 'pointer', }, });