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

.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;