Add navigation bar to sticker board

diff --git a/src/app/organisms/emoji-board/EmojiBoard.jsx b/src/app/organisms/emoji-board/EmojiBoard.jsx
index b97cab0aeff3f013c80cb548753977ca6b77372c..d9762323cd380911b3f8b7a3381183a4c561f25e 100644 (file)
--- a/src/app/organisms/emoji-board/EmojiBoard.jsx
+++ b/src/app/organisms/emoji-board/EmojiBoard.jsx
@@ -252,39 +252,6 @@ function EmojiBoard({ onSelect, searchRef }) {
 
   return (
     <div id="emoji-board" className="emoji-board">
-      <div className="emoji-board__content">
-        <div className="emoji-board__content__search">
-          <RawIcon size="small" src={SearchIC} />
-          <Input onChange={handleSearchChange} forwardRef={searchRef} placeholder="Search" />
-        </div>
-        <div className="emoji-board__content__emojis">
-          <ScrollView ref={scrollEmojisRef} autoHide>
-            <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
-              <SearchedEmoji />
-              {recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />}
-              {
-                availableEmojis.map((pack) => (
-                  <EmojiGroup
-                    name={pack.displayName ?? 'Unknown'}
-                    key={pack.packIndex}
-                    groupEmojis={pack.getEmojis()}
-                    className="custom-emoji-group"
-                  />
-                ))
-              }
-              {
-                emojiGroups.map((group) => (
-                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
-                ))
-              }
-            </div>
-          </ScrollView>
-        </div>
-        <div ref={emojiInfo} className="emoji-board__content__info">
-          <div>{ parse(twemoji.parse('🙂')) }</div>
-          <Text>:slight_smile:</Text>
-        </div>
-      </div>
       <ScrollView invisible>
         <div className="emoji-board__nav">
           {recentEmojis.length > 0 && (
@@ -292,7 +259,7 @@ function EmojiBoard({ onSelect, searchRef }) {
               onClick={() => openGroup(0)}
               src={RecentClockIC}
               tooltip="Recent"
-              tooltipPlacement="right"
+              tooltipPlacement="left"
             />
           )}
           <div className="emoji-board__nav-custom">
@@ -306,7 +273,7 @@ function EmojiBoard({ onSelect, searchRef }) {
                     src={src}
                     key={pack.packIndex}
                     tooltip={pack.displayName ?? 'Unknown'}
-                    tooltipPlacement="right"
+                    tooltipPlacement="left"
                     isImage
                   />
                 );
@@ -330,13 +297,46 @@ function EmojiBoard({ onSelect, searchRef }) {
                   key={indx}
                   src={ico}
                   tooltip={name}
-                  tooltipPlacement="right"
+                  tooltipPlacement="left"
                 />
               ))
             }
           </div>
         </div>
       </ScrollView>
+      <div className="emoji-board__content">
+        <div className="emoji-board__content__search">
+          <RawIcon size="small" src={SearchIC} />
+          <Input onChange={handleSearchChange} forwardRef={searchRef} placeholder="Search" />
+        </div>
+        <div className="emoji-board__content__emojis">
+          <ScrollView ref={scrollEmojisRef} autoHide>
+            <div onMouseMove={hoverEmoji} onClick={selectEmoji}>
+              <SearchedEmoji />
+              {recentEmojis.length > 0 && <EmojiGroup name="Recently used" groupEmojis={recentEmojis} />}
+              {
+                availableEmojis.map((pack) => (
+                  <EmojiGroup
+                    name={pack.displayName ?? 'Unknown'}
+                    key={pack.packIndex}
+                    groupEmojis={pack.getEmojis()}
+                    className="custom-emoji-group"
+                  />
+                ))
+              }
+              {
+                emojiGroups.map((group) => (
+                  <EmojiGroup key={group.name} name={group.name} groupEmojis={group.emojis} />
+                ))
+              }
+            </div>
+          </ScrollView>
+        </div>
+        <div ref={emojiInfo} className="emoji-board__content__info">
+          <div>{ parse(twemoji.parse('🙂')) }</div>
+          <Text>:slight_smile:</Text>
+        </div>
+      </div>
     </div>
   );
 }

diff --git a/src/app/organisms/emoji-board/EmojiBoard.scss b/src/app/organisms/emoji-board/EmojiBoard.scss
index 6883e18ee33b58eb1b0b414b1f19cf785ad4902b..7bdaa0664058093ef68f69ef17975889997da066 100644 (file)
--- a/src/app/organisms/emoji-board/EmojiBoard.scss
+++ b/src/app/organisms/emoji-board/EmojiBoard.scss
@@ -26,7 +26,7 @@
     min-height: 100%;
     padding: 4px 6px;
     background-color: var(--bg-surface-low);
-    @include dir.side(border, 1px solid var(--bg-surface-border), none);
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
 
     position: relative;
     
@@ -122,8 +122,11 @@
     @include dir.side(margin, var(--left-margin), var(--right-margin));
   }
   & .emoji {
-    width: 38px;
-    height: 38px;
+    max-width: 38px;
+    max-height: 38px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
     object-fit: contain;
     padding: var(--emoji-padding);
     cursor: pointer;

diff --git a/src/app/organisms/sticker-board/StickerBoard.jsx b/src/app/organisms/sticker-board/StickerBoard.jsx
index 53b75635f80a6d46459e03e856473ca16b92e330..91e259186576672a84ea645414cc9d28d7f1e650 100644 (file)
--- a/src/app/organisms/sticker-board/StickerBoard.jsx
+++ b/src/app/organisms/sticker-board/StickerBoard.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 /* eslint-disable jsx-a11y/no-static-element-interactions */
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import './StickerBoard.scss';
 
@@ -9,10 +9,12 @@ import { getRelevantPacks } from '../emoji-board/custom-emoji';
 
 import Text from '../../atoms/text/Text';
 import ScrollView from '../../atoms/scroll/ScrollView';
+import IconButton from '../../atoms/button/IconButton';
 
 function StickerBoard({ roomId, onSelect }) {
   const mx = initMatrix.matrixClient;
   const room = mx.getRoom(roomId);
+  const scrollRef = useRef(null);
 
   const parentIds = initMatrix.roomList.getAllParentSpaces(room.roomId);
   const parentRooms = [...parentIds].map((id) => mx.getRoom(id));
@@ -38,6 +40,11 @@ function StickerBoard({ roomId, onSelect }) {
     onSelect(stickerData);
   };
 
+  const openGroup = (groupIndex) => {
+    const scrollContent = scrollRef.current.firstElementChild;
+    scrollContent.children[groupIndex].scrollIntoView();
+  };
+
   const renderPack = (pack) => (
     <div className="sticker-board__pack" key={pack.id}>
       <Text className="sticker-board__pack-header" variant="b2" weight="bold">{pack.displayName ?? 'Unknown'}</Text>
@@ -50,6 +57,7 @@ function StickerBoard({ roomId, onSelect }) {
             alt={sticker.shortcode}
             title={sticker.body ?? sticker.shortcode}
             data-mx-sticker={sticker.mxc}
+            loading="lazy"
           />
         ))}
       </div>
@@ -58,8 +66,27 @@ function StickerBoard({ roomId, onSelect }) {
 
   return (
     <div className="sticker-board">
+      {packs.length > 0 && (
+        <ScrollView invisible>
+          <div className="sticker-board__sidebar">
+            {packs.map((pack, index) => {
+              const src = mx.mxcUrlToHttp(pack.avatarUrl ?? pack.getStickers()[0].mxc);
+              return (
+                <IconButton
+                  key={pack.id}
+                  onClick={() => openGroup(index)}
+                  src={src}
+                  tooltip={pack.displayName || 'Unknown'}
+                  tooltipPlacement="left"
+                  isImage
+                />
+              );
+            })}
+          </div>
+        </ScrollView>
+      )}
       <div className="sticker-board__container">
-        <ScrollView autoHide>
+        <ScrollView autoHide ref={scrollRef}>
           <div
             onClick={handleOnSelect}
             className="sticker-board__content"

diff --git a/src/app/organisms/sticker-board/StickerBoard.scss b/src/app/organisms/sticker-board/StickerBoard.scss
index be8ad35a64634184f0a96ed51959241633a29f08..524ceeae055ff38d82abc8220578b980f9b52fa0 100644 (file)
--- a/src/app/organisms/sticker-board/StickerBoard.scss
+++ b/src/app/organisms/sticker-board/StickerBoard.scss
@@ -5,6 +5,22 @@
   --sticker-board-width: 286px;
   display: flex;
   height: var(--sticker-board-height);
+  display: flex;
+
+  & > .scrollbar {
+    width: initial;    
+    height: var(--sticker-board-height);
+  }
+
+  &__sidebar {
+    display: flex;
+    flex-direction: column;
+    min-height: 100%;
+    padding: 4px 6px;
+
+    background-color: var(--bg-surface-low);
+    @include dir.side(border, none, 1px solid var(--bg-surface-border));
+  }
 
   &__container {
     flex-grow: 1;