client: add more formatting icons and improve formatting bar responsiveness

Author: MaxLeiter

client/components/edit-document/document.module.css

@@ -38,3 +38,10 @@
 	position: absolute;
 	right: 0;
 }
+
+@media (max-width: 768px) {
+	.actionWrapper .actions {
+		position: relative;
+		margin-left: 0 !important;
+	}
+}

client/components/edit-document/formatting-icons/index.tsx

@@ -1,10 +1,13 @@
 import Bold from "@geist-ui/icons/bold"
 import Italic from "@geist-ui/icons/italic"
 import Link from "@geist-ui/icons/link"
+import Code from "@geist-ui/icons/code"
+import List from "@geist-ui/icons/list"
+
 import ImageIcon from "@geist-ui/icons/image"
-import { RefObject, useCallback, useMemo } from "react"
+import { RefObject, useMemo } from "react"
 import styles from "../document.module.css"
-import { Button, ButtonGroup } from "@geist-ui/core"
+import { Button, ButtonGroup, Tooltip } from "@geist-ui/core"
 import { TextareaMarkdownRef } from "textarea-markdown-editor"
 
 // TODO: clean up
@@ -19,6 +22,9 @@ const FormattingIcons = ({
 		const handleItalicClick = () => textareaRef?.current?.trigger("italic")
 		const handleLinkClick = () => textareaRef?.current?.trigger("link")
 		const handleImageClick = () => textareaRef?.current?.trigger("image")
+		const handleCodeClick = () => textareaRef?.current?.trigger("code")
+		const handleListClick = () =>
+			textareaRef?.current?.trigger("unordered-list")
 		return [
 			{
 				icon: <Bold />,
@@ -30,11 +36,6 @@ const FormattingIcons = ({
 				name: "italic",
 				action: handleItalicClick
 			},
-			// {
-			//     icon: <Underline />,
-			//     name: 'underline',
-			//     action: handleUnderlineClick
-			// },
 			{
 				icon: <Link />,
 				name: "hyperlink",
@@ -44,6 +45,16 @@ const FormattingIcons = ({
 				icon: <ImageIcon />,
 				name: "image",
 				action: handleImageClick
+			},
+			{
+				icon: <Code />,
+				name: "code",
+				action: handleCodeClick
+			},
+			{
+				icon: <List />,
+				name: "unordered-list",
+				action: handleListClick
 			}
 		]
 	}, [textareaRef])
@@ -52,16 +63,20 @@ const FormattingIcons = ({
 		<div className={styles.actionWrapper}>
 			<ButtonGroup className={styles.actions}>
 				{formattingActions.map(({ icon, name, action }) => (
-					<Button
-						auto
-						scale={2 / 3}
-						px={0.6}
-						aria-label={name}
+					<Tooltip
+						text={name[0].toUpperCase() + name.slice(1).replace("-", " ")}
 						key={name}
-						icon={icon}
-						onMouseDown={(e) => e.preventDefault()}
-						onClick={action}
-					/>
+					>
+						<Button
+							auto
+							scale={2 / 3}
+							px={0.6}
+							aria-label={name}
+							icon={icon}
+							onMouseDown={(e) => e.preventDefault()}
+							onClick={action}
+						/>
+					</Tooltip>
 				))}
 			</ButtonGroup>
 		</div>

client/components/new-post/drag-and-drop/index.tsx

@@ -1,4 +1,4 @@
-import { Text, useTheme, useToasts } from "@geist-ui/core"
+import { Text, useMediaQuery, useTheme, useToasts } from "@geist-ui/core"
 import { memo } from "react"
 import { useDropzone } from "react-dropzone"
 import styles from "./drag-and-drop.module.css"
@@ -14,6 +14,9 @@ import byteToMB from "@lib/byte-to-mb"
 function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) {
 	const { palette } = useTheme()
 	const { setToast } = useToasts()
+	const isMobile = useMediaQuery("xs", {
+		match: "down"
+	})
 	const onDrop = async (acceptedFiles: File[]) => {
 		const newDocs = await Promise.all(
 			acceptedFiles.map((file) => {
@@ -84,6 +87,7 @@ function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) {
 		</li>
 	))
 
+	const verb = isMobile ? "tap" : "click"
 	return (
 		<div className={styles.container}>
 			<div
@@ -95,7 +99,7 @@ function FileDropzone({ setDocs }: { setDocs: (docs: Document[]) => void }) {
 			>
 				<input {...getInputProps()} />
 				{!isDragActive && (
-					<Text p>Drag some files here, or click to select files</Text>
+					<Text p>Drag some files here, or {verb} to select files</Text>
 				)}
 				{isDragActive && <Text p>Release to drop the files here</Text>}
 			</div>