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;