2 files changed, 29 insertions, 3 deletions
diff --git a/src/view/shell/Composer.web.tsx b/src/view/shell/Composer.web.tsx
index 73f9f540e..ed64bc799 100644
--- a/src/view/shell/Composer.web.tsx
+++ b/src/view/shell/Composer.web.tsx
@@ -5,6 +5,10 @@ import {ComposePost} from '../com/composer/Composer'
 import {useComposerState} from 'state/shell/composer'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {
+  EmojiPicker,
+  EmojiPickerState,
+} from 'view/com/composer/text-input/web/EmojiPicker.web.tsx'
 
 const BOTTOM_BAR_HEIGHT = 61
 
@@ -13,6 +17,26 @@ export function Composer({}: {winHeight: number}) {
   const {isMobile} = useWebMediaQueries()
   const state = useComposerState()
 
+  const [pickerState, setPickerState] = React.useState<EmojiPickerState>({
+    isOpen: false,
+    pos: {top: 0, left: 0, right: 0, bottom: 0},
+  })
+
+  const onOpenPicker = React.useCallback((pos: DOMRect | undefined) => {
+    if (!pos) return
+    setPickerState({
+      isOpen: true,
+      pos,
+    })
+  }, [])
+
+  const onClosePicker = React.useCallback(() => {
+    setPickerState(prev => ({
+      ...prev,
+      isOpen: false,
+    }))
+  }, [])
+
   // rendering
   // =
 
@@ -41,8 +65,10 @@ export function Composer({}: {winHeight: number}) {
           quote={state.quote}
           onPost={state.onPost}
           mention={state.mention}
+          openPicker={onOpenPicker}
         />
       </Animated.View>
+      <EmojiPicker state={pickerState} close={onClosePicker} />
     </Animated.View>
   )
 }
diff --git a/src/view/shell/desktop/RightNav.tsx b/src/view/shell/desktop/RightNav.tsx
index 02b742dc9..894624a6e 100644
--- a/src/view/shell/desktop/RightNav.tsx
+++ b/src/view/shell/desktop/RightNav.tsx
@@ -180,14 +180,14 @@ const styles = StyleSheet.create({
     position: 'absolute',
     // @ts-ignore web only
     left: 'calc(50vw + 320px)',
-    width: 304,
+    width: 300,
     maxHeight: '100%',
     overflowY: 'auto',
   },
 
   message: {
     paddingVertical: 18,
-    paddingHorizontal: 10,
+    paddingHorizontal: 12,
   },
   messageLine: {
     marginBottom: 10,
@@ -195,7 +195,7 @@ const styles = StyleSheet.create({
 
   inviteCodes: {
     borderTopWidth: 1,
-    paddingHorizontal: 16,
+    paddingHorizontal: 12,
     paddingVertical: 12,
     flexDirection: 'row',
   },