feat(sticker): add a direct link to room/space settings when sticker list is empty (#1016)

<!-- Please read
https://github.com/SableClient/Sable/blob/dev/CONTRIBUTING.md before
submitting your pull request -->

### Description

hey! i was helping onboard some friends and sable is really cool. i
wanted to add a bit of an easier way to get into the sticker page, so i
added quick links to them in the room & space bits of text:
<img width="428" height="525" alt="Screenshot_2026-06-30_18-41-32"
src="https://github.com/user-attachments/assets/57bb6273-9681-4d0c-960a-1beb07e62e6d"
/>

there doesn't seem to be an existing style to piggy-back off for the
links, so i put something quick together. happy to change to whatever
works best, the contrast is probably a bit low in the default dark
theme?

#### Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- [ ] This change requires a documentation update

### Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings

### AI disclosure:

- [ ] Partially AI assisted (clarify which code was AI assisted and
briefly explain what it does).
- [ ] Fully AI generated (explain what all the generated code does in
moderate detail).
<!-- Write any explanation required here, but do not generate the
explanation using AI!! You must prove you understand what the code in
this PR does. -->

Author: 7w1

.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

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 ? (
+    <Text as="span" className={css.TextLink} onClick={props.onClick} size="Inherit">
+      {props.text}
+    </Text>
+  ) : (
+    <>{props.text}</>
+  );
+}
 
 export function NoStickerPacks() {
+  const openRoomSettings = useOpenRoomSettings();
+  const openSpaceSettings = useOpenSpaceSettings();
+
+  const room = useRoomOptionally();
+  const space = useSpaceOptionally();
+
   return (
     <Box
       style={{ padding: `${toRem(60)} ${config.space.S500}` }}
@@ -14,7 +37,31 @@ export function NoStickerPacks() {
       <Box direction="Inherit">
         <Text align="Center">No Sticker Packs!</Text>
         <Text priority="300" align="Center" size="T200">
-          Add stickers from user, room or space settings.
+          Add stickers from user,{' '}
+          <OptionallyLinkedText
+            text="room"
+            isLink={room !== null}
+            onClick={() =>
+              openRoomSettings(
+                room?.roomId as string,
+                space?.roomId,
+                RoomSettingsPage.EmojisStickersPage
+              )
+            }
+          />
+          {', '}or{' '}
+          <OptionallyLinkedText
+            text="space"
+            isLink={room !== null && space !== null}
+            onClick={() =>
+              openSpaceSettings(
+                room?.roomId as string,
+                space?.roomId,
+                SpaceSettingsPage.EmojisStickersPage
+              )
+            }
+          />{' '}
+          settings.
         </Text>
       </Box>
     </Box>

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',
+  },
+});

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;