Emoji picker

scripts/emoji-convert.sh

@@ -10,7 +10,7 @@ if [ -z "$1" ]; then
     echo "Syntax: $0 FILE.(js|json|md)"
     echo "Example:"
     echo "  $0 emoji-converted.json"
-    echo "  $0 $ROOTDIR/server/static/js/emoji.js"
+    echo "  $0 $ROOTDIR/web/src/app/emojis.js"
     echo "  $0 $ROOTDIR/docs/emojis.md"
     exit 1
 fi
@@ -19,7 +19,7 @@ if [[ "$1" == *.js ]]; then
   echo -n "// This file is generated by scripts/emoji-convert.sh to reduce the size
 // Original data source: https://github.com/github/gemoji/blob/master/db/emoji.json
 export const rawEmojis = " > "$1"
-    cat "$SCRIPTDIR/emoji.json" | jq -rc 'map({emoji: .emoji,aliases: .aliases})' >> "$1"
+    cat "$SCRIPTDIR/emoji.json" | jq -rc 'map({emoji: .emoji,aliases: .aliases, tags: .tags, category: .category, description: .description})' >> "$1"
 elif [[ "$1" == *.md ]]; then
   echo "# Emoji reference
 

web/src/components/App.js

@@ -14,19 +14,13 @@ import {useLiveQuery} from "dexie-react-hooks";
 import subscriptionManager from "../app/SubscriptionManager";
 import userManager from "../app/UserManager";
 import {BrowserRouter, Outlet, Route, Routes, useOutletContext, useParams} from "react-router-dom";
-import {expandUrl, topicUrl} from "../app/utils";
+import {expandUrl} from "../app/utils";
 import ErrorBoundary from "./ErrorBoundary";
 import routes from "./routes";
 import {useAutoSubscribe, useBackgroundProcesses, useConnectionListeners} from "./hooks";
-import Paper from "@mui/material/Paper";
-import IconButton from "@mui/material/IconButton";
-import TextField from "@mui/material/TextField";
-import SendIcon from "@mui/icons-material/Send";
-import api from "../app/Api";
 import SendDialog from "./SendDialog";
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import Messaging from "./Messaging";
 
-// TODO add drag and drop
 // TODO races when two tabs are open
 // TODO investigate service workers
 
@@ -128,89 +122,6 @@ const Main = (props) => {
     );
 };
 
-const Messaging = (props) => {
-    const [message, setMessage] = useState("");
-    const [dialogKey, setDialogKey] = useState(0);
-
-    const dialogOpenMode = props.dialogOpenMode;
-    const subscription = props.selected;
-    const selectedTopicUrl = (subscription) ? topicUrl(subscription.baseUrl, subscription.topic) : "";
-
-    const handleOpenDialogClick = () => {
-        props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT);
-    };
-
-    const handleSendDialogClose = () => {
-        props.onDialogOpenModeChange("");
-        setDialogKey(prev => prev+1);
-    };
-
-    return (
-        <>
-            {subscription && <MessageBar
-                subscription={subscription}
-                message={message}
-                onMessageChange={setMessage}
-                onOpenDialogClick={handleOpenDialogClick}
-            />}
-            <SendDialog
-                key={`sendDialog${dialogKey}`} // Resets dialog when canceled/closed
-                openMode={dialogOpenMode}
-                topicUrl={selectedTopicUrl}
-                message={message}
-                onClose={handleSendDialogClose}
-                onDragEnter={() => props.onDialogOpenModeChange(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG)} // Only update if not already open
-                onResetOpenMode={() => props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT)}
-            />
-        </>
-    );
-}
-
-const MessageBar = (props) => {
-    const subscription = props.subscription;
-    const handleSendClick = () => {
-        api.publish(subscription.baseUrl, subscription.topic, props.message); // FIXME
-        props.onMessageChange("");
-    };
-    return (
-        <Paper
-            elevation={3}
-            sx={{
-                display: "flex",
-                position: 'fixed',
-                bottom: 0,
-                right: 0,
-                padding: 2,
-                width: `calc(100% - ${Navigation.width}px)`,
-                backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
-            }}
-        >
-            <IconButton color="inherit" size="large" edge="start" onClick={props.onOpenDialogClick}>
-                <KeyboardArrowUpIcon/>
-            </IconButton>
-            <TextField
-                autoFocus
-                margin="dense"
-                placeholder="Message"
-                type="text"
-                fullWidth
-                variant="standard"
-                value={props.message}
-                onChange={ev => props.onMessageChange(ev.target.value)}
-                onKeyPress={(ev) => {
-                    if (ev.key === 'Enter') {
-                        ev.preventDefault();
-                        handleSendClick();
-                    }
-                }}
-            />
-            <IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
-                <SendIcon/>
-            </IconButton>
-        </Paper>
-    );
-};
-
 const updateTitle = (newNotificationsCount) => {
     document.title = (newNotificationsCount > 0) ? `(${newNotificationsCount}) ntfy` : "ntfy";
 }

web/src/components/EmojiPicker.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import Popover from '@mui/material/Popover';
+import Typography from '@mui/material/Typography';
+import {rawEmojis} from '../app/emojis';
+import Box from "@mui/material/Box";
+
+const emojisByCategory = {};
+rawEmojis.forEach(emoji => {
+    if (!emojisByCategory[emoji.category]) {
+        emojisByCategory[emoji.category] = [];
+    }
+    emojisByCategory[emoji.category].push(emoji);
+});
+
+const EmojiPicker = (props) => {
+    const open = Boolean(props.anchorEl);
+
+    return (
+        <>
+            <Popover
+                open={open}
+                anchorEl={props.anchorEl}
+                onClose={props.onClose}
+                anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }}
+            >
+                <Box sx={{ padding: 2, paddingRight: 0, width: "370px", maxHeight: "300px" }}>
+                    {Object.keys(emojisByCategory).map(category =>
+                        <Category title={category} emojis={emojisByCategory[category]} onPick={props.onEmojiPick}/>
+                    )}
+                </Box>
+            </Popover>
+        </>
+    );
+};
+
+const Category = (props) => {
+    return (
+        <>
+            <Typography variant="body2">{props.title}</Typography>
+            <Box sx={{ display: "flex", flexWrap: "wrap", paddingRight: 0, marginBottom: 1 }}>
+                {props.emojis.map(emoji => <Emoji emoji={emoji} onClick={() => props.onPick(emoji.aliases[0])}/>)}
+            </Box>
+        </>
+    );
+};
+
+const Emoji = (props) => {
+    const emoji = props.emoji;
+    return (
+        <div
+            onClick={props.onClick}
+            title={`${emoji.description} (${emoji.aliases[0]})`}
+            style={{
+                fontSize: "30px",
+                width: "30px",
+                height: "30px",
+                marginTop: "8px",
+                marginBottom: "8px",
+                marginRight: "8px",
+                lineHeight: "30px",
+                cursor: "pointer"
+            }}
+        >
+            {props.emoji.emoji}
+        </div>
+    );
+};
+
+export default EmojiPicker;

web/src/components/Messaging.js

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import {useState} from 'react';
+import Navigation from "./Navigation";
+import {topicUrl} from "../app/utils";
+import Paper from "@mui/material/Paper";
+import IconButton from "@mui/material/IconButton";
+import TextField from "@mui/material/TextField";
+import SendIcon from "@mui/icons-material/Send";
+import api from "../app/Api";
+import SendDialog from "./SendDialog";
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import EmojiPicker from "./EmojiPicker";
+
+const Messaging = (props) => {
+    const [message, setMessage] = useState("");
+    const [dialogKey, setDialogKey] = useState(0);
+
+    const dialogOpenMode = props.dialogOpenMode;
+    const subscription = props.selected;
+    const selectedTopicUrl = (subscription) ? topicUrl(subscription.baseUrl, subscription.topic) : "";
+
+    const handleOpenDialogClick = () => {
+        props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT);
+    };
+
+    const handleSendDialogClose = () => {
+        props.onDialogOpenModeChange("");
+        setDialogKey(prev => prev+1);
+    };
+
+    return (
+        <>
+            {subscription && <MessageBar
+                subscription={subscription}
+                message={message}
+                onMessageChange={setMessage}
+                onOpenDialogClick={handleOpenDialogClick}
+            />}
+            <SendDialog
+                key={`sendDialog${dialogKey}`} // Resets dialog when canceled/closed
+                openMode={dialogOpenMode}
+                topicUrl={selectedTopicUrl}
+                message={message}
+                onClose={handleSendDialogClose}
+                onDragEnter={() => props.onDialogOpenModeChange(prev => (prev) ? prev : SendDialog.OPEN_MODE_DRAG)} // Only update if not already open
+                onResetOpenMode={() => props.onDialogOpenModeChange(SendDialog.OPEN_MODE_DEFAULT)}
+            />
+        </>
+    );
+}
+
+const MessageBar = (props) => {
+    const subscription = props.subscription;
+    const handleSendClick = () => {
+        api.publish(subscription.baseUrl, subscription.topic, props.message); // FIXME
+        props.onMessageChange("");
+    };
+    return (
+        <Paper
+            elevation={3}
+            sx={{
+                display: "flex",
+                position: 'fixed',
+                bottom: 0,
+                right: 0,
+                padding: 2,
+                width: `calc(100% - ${Navigation.width}px)`,
+                backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900]
+            }}
+        >
+            <IconButton color="inherit" size="large" edge="start" onClick={props.onOpenDialogClick}>
+                <KeyboardArrowUpIcon/>
+            </IconButton>
+            <TextField
+                autoFocus
+                margin="dense"
+                placeholder="Message"
+                type="text"
+                fullWidth
+                variant="standard"
+                value={props.message}
+                onChange={ev => props.onMessageChange(ev.target.value)}
+                onKeyPress={(ev) => {
+                    if (ev.key === 'Enter') {
+                        ev.preventDefault();
+                        handleSendClick();
+                    }
+                }}
+            />
+            <IconButton color="inherit" size="large" edge="end" onClick={handleSendClick}>
+                <SendIcon/>
+            </IconButton>
+        </Paper>
+    );
+};
+
+export default Messaging;

web/src/components/SendDialog.js

@@ -24,6 +24,7 @@ import AttachmentIcon from "./AttachmentIcon";
 import DialogFooter from "./DialogFooter";
 import api from "../app/Api";
 import userManager from "../app/UserManager";
+import EmojiPicker from "./EmojiPicker";
 
 const SendDialog = (props) => {
     const [topicUrl, setTopicUrl] = useState("");
@@ -54,6 +55,8 @@ const SendDialog = (props) => {
     const [status, setStatus] = useState("");
     const disabled = !!activeRequest;
 
+    const [emojiPickerAnchorEl, setEmojiPickerAnchorEl] = useState(null);
+
     const [dropZone, setDropZone] = useState(false);
     const [sendButtonEnabled, setSendButtonEnabled] = useState(true);
 
@@ -191,6 +194,18 @@ const SendDialog = (props) => {
         }
     };
 
+    const handleEmojiClick = (ev) => {
+        setEmojiPickerAnchorEl(ev.currentTarget);
+    };
+
+    const handleEmojiPick = (emoji) => {
+        setTags(tags => (tags.trim()) ? `${tags.trim()}, ${emoji}` : emoji);
+    };
+
+    const handleEmojiClose = () => {
+        setEmojiPickerAnchorEl(null);
+    };
+
     return (
         <>
             {dropZone && <DropArea
@@ -245,7 +260,14 @@ const SendDialog = (props) => {
                         multiline
                     />
                     <div style={{display: 'flex'}}>
-                        <DialogIconButton disabled={disabled} onClick={() => null}><InsertEmoticonIcon/></DialogIconButton>
+                        <EmojiPicker
+                            anchorEl={emojiPickerAnchorEl}
+                            onEmojiPick={handleEmojiPick}
+                            onClose={handleEmojiClose}
+                        />
+                        <DialogIconButton disabled={disabled} onClick={handleEmojiClick}>
+                            <InsertEmoticonIcon/>
+                        </DialogIconButton>
                         <TextField
                             margin="dense"
                             label="Tags"