Merge pull request #163 from spacebarchat/dev/message-input-refactor

Refactor Message Input
spacebarchat · Sep 12, 2023 · 8b48d3d · 8b48d3d
2 parents 0b54722 + eb0d625
commit 8b48d3d
Show file tree

Hide file tree

Showing 34 changed files with 747 additions and 605 deletions.
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
 		"react": "^18.2.0",
 		"react-advanced-cropper": "^0.18.0",
 		"react-colorful": "^5.6.1",
+		"react-device-detect": "^2.2.3",
 		"react-dom": "^18.2.0",
 		"react-error-boundary": "^3.1.4",
 		"react-hook-form": "^7.43.9",
@@ -48,9 +49,6 @@
 		"react-select-search": "^4.1.6",
 		"react-spinners": "^0.13.8",
 		"reoverlay": "^1.0.3",
-		"slate": "^0.94.1",
-		"slate-history": "^0.93.0",
-		"slate-react": "^0.98.1",
 		"styled-components": "^5.3.10",
 		"typescript": "^4.9.5"
 	},

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/AuthComponents.tsx b/src/components/AuthComponents.tsx
@@ -71,6 +71,9 @@ export const InputErrorText = styled.label`
 	font-size: 14px;
 	font-weight: var(--font-weight-regular);
 	font-style: italic;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 `;
 
 export const InputLabel = styled.label`

diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
@@ -2,6 +2,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import React from "react";
 import styled from "styled-components";
 import { BannerContext } from "../contexts/BannerContext";
+import useLogger from "../hooks/useLogger";
 import Icon from "./Icon";
 import IconButton from "./IconButton";
 
@@ -17,6 +18,7 @@ const CloseWrapper = styled(IconButton)`
 `;
 
 function Banner() {
+	const logger = useLogger("Banner");
 	const bannerContext = React.useContext(BannerContext);
 
 	return (
@@ -45,7 +47,7 @@ function Banner() {
 					animate="show"
 					exit="hide"
 					onAnimationComplete={() => {
-						console.log("animation complete");
+						logger.debug("animation complete");
 					}}
 					style={bannerContext.content.style}
 				>

diff --git a/src/components/ChannelHeader.tsx b/src/components/ChannelHeader.tsx
@@ -22,6 +22,9 @@ const Wrapper = styled(SectionHeader)`
 const HeaderText = styled.header`
 	font-size: 16px;
 	font-weight: var(--font-weight-medium);
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
 `;
 
 interface Props {
@@ -104,7 +107,7 @@ function ChannelHeader({ guild, guildId }: Props) {
 
 	return (
 		<Wrapper onClick={openMenu}>
-			<HeaderText>{guild.name.length > 18 ? guild.name.substring(0, 18) + "..." : guild.name}</HeaderText>
+			<HeaderText>{guild.name}</HeaderText>
 			<Icon icon="mdiChevronDown" size="20px" color="var(--text)" />
 		</Wrapper>
 	);

diff --git a/src/components/GuildItem.tsx b/src/components/GuildItem.tsx
@@ -102,10 +102,7 @@ function GuildItem({ guild, active }: Props) {
 			}}
 		>
 			<SidebarPill type={pillType} />
-			<Tooltip
-				title={guild.name.length > 18 ? guild.name.substring(0, 18) + "..." : guild.name}
-				placement="right"
-			>
+			<Tooltip title={guild.name} placement="right">
 				<Wrapper
 					onClick={doNavigate}
 					active={active}

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -7,15 +7,11 @@ interface Props {
 }
 
 export default styled.button<Props>`
-	display: flex;
-	align-items: center;
-	justify-content: center;
 	position: relative;
 	margin: 0;
 	padding: 0;
 	width: 32px;
 	height: 32px;
-	border-radius: 4px;
 	cursor: pointer;
 	outline: none;
 	opacity: ${(props) => (props.disabled ? 0.5 : 1)};

diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
@@ -16,5 +16,6 @@ export default styled(({ className, ...props }: MuiTooltipProps) => (
 		fontSize: "14px",
 		padding: "8px 12px",
 		overflow: "hidden",
+		textOverflow: "ellipsis",
 	},
 }));
diff --git a/src/components/messaging/Chat.tsx b/src/components/messaging/Chat.tsx
@@ -8,6 +8,7 @@ import MemberList from "../MemberList";
 import ChatHeader from "./ChatHeader";
 import MessageInput from "./MessageInput";
 import MessageList from "./MessageList";
+import TypingIndicator from "./TypingIndicator";
 
 /**
  * Wrapps chat and member list into a row
@@ -50,16 +51,17 @@ interface Props2 {
 	guild: Guild;
 }
 
-export function ChatContent({ channel, guild }: Props2) {
+function ChatContent({ channel, guild }: Props2) {
 	return (
 		<Container>
 			<MessageList guild={guild} channel={channel} />
 			<MessageInput channel={channel} guild={guild} />
+			<TypingIndicator channel={channel} />
 		</Container>
 	);
 }
 
-export function Content(props: Props2) {
+function Content(props: Props2) {
 	return (
 		<WrapperOne>
 			<ChatContent {...props} />