release: v2.0.5

omsimos · Jul 7, 2024 · 624616e · 624616e
2 parents d6f057c + 4f6d088
commit 624616e
Show file tree

Hide file tree

Showing 21 changed files with 223 additions and 169 deletions.
diff --git a/apps/www/src/app/components/chat-list.tsx b/apps/www/src/app/components/chat-list.tsx
@@ -4,7 +4,6 @@ import {
   AvatarImage,
   AvatarFallback,
 } from "@umamin/ui/components/avatar";
-import { cn } from "@umamin/ui/lib/utils";
 
 type Props = {
   imageUrl?: string | null;
@@ -16,7 +15,7 @@ type Props = {
 export const ChatList = ({ imageUrl, question, reply, response }: Props) => {
   return (
     <div className="flex flex-col">
-      <div className="flex gap-2 items-center">
+      <div className="flex gap-2 items-end">
         <Avatar>
           <AvatarImage className="rounded-full" src={imageUrl ?? ""} />
           <AvatarFallback>
@@ -29,11 +28,7 @@ export const ChatList = ({ imageUrl, question, reply, response }: Props) => {
       </div>
 
       {reply && (
-        <div
-          className={cn(
-            "max-w-[75%] sm:max-w-[55%] rounded-lg px-3 py-2 whitespace-pre-wrap bg-primary text-primary-foreground mt-6 self-end min-w-0 break-words",
-          )}
-        >
+        <div className="max-w-[75%] sm:max-w-[55%] rounded-lg px-3 py-2 whitespace-pre-wrap bg-primary text-primary-foreground mt-6 self-end min-w-0 break-words">
           {reply}
         </div>
       )}

diff --git a/apps/www/src/app/components/menu.tsx b/apps/www/src/app/components/menu.tsx
@@ -18,11 +18,11 @@ export type MenuItems = {
 
 export const Menu = ({ menuItems }: { menuItems: MenuItems }) => {
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger title='post menu'>
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger title="post menu">
         <Icons.elipsisVertical />
       </DropdownMenuTrigger>
-      <DropdownMenuContent className='font-semibold [&>*]:cursor-pointer [&>*]:border-b [&>*]:last:border-0'>
+      <DropdownMenuContent className="font-semibold [&>*]:cursor-pointer [&>*]:border-b [&>*]:last:border-0">
         {menuItems.map((item, i) => (
           <React.Fragment key={item.title}>
             <DropdownMenuItem onClick={item.onClick} className={item.className}>

diff --git a/apps/www/src/app/components/navbar.tsx b/apps/www/src/app/components/navbar.tsx
@@ -49,24 +49,28 @@ export async function Navbar() {
           </Link>
         )}
 
-        <Link href="/notes">
+        <Link href="/notes" title="Notes">
           <ScrollText className="h-6 w-6" />
         </Link>
 
-        <Link href={user ? "/inbox" : "/login"} aria-label="home button">
+        <Link
+          href={user ? "/inbox" : "/login"}
+          aria-label="home button"
+          title="Inbox"
+        >
           <Icons.squares />
         </Link>
 
-        <Link href="/social">
+        <Link href="/social" title="Social">
           <MessagesSquare className="h-6 w-6" />
         </Link>
 
         {user ? (
-          <Link href="/settings">
+          <Link href="/settings" title="Settings">
             <UserCog className="w-6 h-6" />
           </Link>
         ) : (
-          <Link href="/login">
+          <Link href="/login" title="Login">
             <LogIn className="h-6 w-6" />
           </Link>
         )}

diff --git a/apps/www/src/app/components/share-link-dialog.tsx b/apps/www/src/app/components/share-link-dialog.tsx
@@ -34,7 +34,7 @@ export default function ShareLinkDialog({ username }: { username: string }) {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <button type="button">
+        <button type="button" title="Share Link">
           <LinkIcon className="h-6 w-6" />
         </button>
       </DialogTrigger>

diff --git a/apps/www/src/app/inbox/components/received/list.tsx b/apps/www/src/app/inbox/components/received/list.tsx
@@ -49,7 +49,7 @@ export function ReceivedMessagesList({
   });
 
   const [msgList, setMsgList] = useState(messages);
-  const [hasMore, setHasMore] = useState(messages?.length === 5);
+  const [hasMore, setHasMore] = useState(messages?.length === 10);
   const [isFetching, setIsFetching] = useState(false);
 
   function loadMessages() {
@@ -67,7 +67,6 @@ export function ReceivedMessagesList({
         .then((res) => {
           if (res.error) {
             toast.error(res.error.message);
-            setIsFetching(false);
             return;
           }
 
@@ -92,7 +91,7 @@ export function ReceivedMessagesList({
   }
 
   useEffect(() => {
-    if (inView) {
+    if (inView && !isFetching) {
       loadMessages();
     }
   }, [inView]);

diff --git a/apps/www/src/app/inbox/components/sent/list.tsx b/apps/www/src/app/inbox/components/sent/list.tsx
@@ -49,7 +49,7 @@ export function SentMessagesList({
   });
 
   const [msgList, setMsgList] = useState(messages);
-  const [hasMore, setHasMore] = useState(messages?.length === 5);
+  const [hasMore, setHasMore] = useState(messages?.length === 10);
   const [isFetching, setIsFetching] = useState(false);
 
   function loadMessages() {
@@ -67,7 +67,6 @@ export function SentMessagesList({
         .then((res) => {
           if (res.error) {
             toast.error(res.error.message);
-            setIsFetching(false);
             return;
           }
 
@@ -92,7 +91,7 @@ export function SentMessagesList({
   }
 
   useEffect(() => {
-    if (inView) {
+    if (inView && !isFetching) {
       loadMessages();
     }
   }, [inView]);

diff --git a/apps/www/src/app/notes/components/card.tsx b/apps/www/src/app/notes/components/card.tsx
@@ -86,7 +86,7 @@ export function NoteCard({ note, user, menuItems, currentUserId }: Props) {
                     </span>
                     {username &&
                       process.env.NEXT_PUBLIC_VERIFIED_USERS?.split(
-                        ",",
+                        ","
                       ).includes(username) && (
                         <BadgeCheck className="w-4 h-4 text-pink-500" />
                       )}
@@ -108,24 +108,12 @@ export function NoteCard({ note, user, menuItems, currentUserId }: Props) {
                 </span>
               )}
 
-              {!note.isAnonymous && currentUserId && (
-                <button
-                  onClick={() => setOpen(!open)}
-                  className="hover:underline"
-                >
+              {currentUserId && !note.isAnonymous && (
+                <button onClick={() => setOpen(!open)}>
                   <Icons.chat className="h-5 w-5" />
                 </button>
               )}
 
-              {!note.isAnonymous && !currentUserId && (
-                <Link
-                  href={`/to/${user?.username}`}
-                  className="hover:underline"
-                >
-                  <Icons.chat className="h-5 w-5" />
-                </Link>
-              )}
-
               <Menu
                 menuItems={[
                   ...(menuItems ?? []),

diff --git a/apps/www/src/app/notes/components/form.tsx b/apps/www/src/app/notes/components/form.tsx
@@ -12,14 +12,16 @@ import { CurrentNoteQueryResult } from "../queries";
 
 import { formatError } from "@/lib/utils";
 import { analytics } from "@/lib/firebase";
-import useBotDetection from "@/hooks/useBotDetection";
 
 import { SelectUser } from "@umamin/db/schema/user";
 import { useNoteStore } from "@/store/useNoteStore";
 import { Label } from "@umamin/ui/components/label";
 import { Button } from "@umamin/ui/components/button";
 import { Switch } from "@umamin/ui/components/switch";
 import { Textarea } from "@umamin/ui/components/textarea";
+import useBotDetection from "@/hooks/use-bot-detection";
+import { useDynamicTextarea } from "@/hooks/use-dynamic-textarea";
+import { cn } from "@umamin/ui/lib/utils";
 
 const UPDATE_NOTE_MUTATION = graphql(`
   mutation UpdateNote($content: String!, $isAnonymous: Boolean!) {
@@ -48,6 +50,8 @@ export function NoteForm({ user, currentNote }: Props) {
   const [content, setContent] = useState("");
   const [isFetching, setIsFetching] = useState(false);
   const [isAnonymous, setIsAnonymous] = useState(false);
+  const [textAreaCount, setTextAreaCount] = useState(0);
+  const inputRef = useDynamicTextarea(content);
 
   const updatedNote = useNoteStore((state) => state.note);
   const clearNote = useNoteStore((state) => state.clear);
@@ -112,11 +116,14 @@ export function NoteForm({ user, currentNote }: Props) {
         <Textarea
           id="message"
           required
+          ref={inputRef}
           value={content}
-          onChange={(e) => setContent(e.target.value)}
-          maxLength={500}
+          onChange={(e) => {
+            setContent(e.target.value);
+            setTextAreaCount(e.target.value.length);
+          }}
           placeholder="How's your day going?"
-          className="focus-visible:ring-transparent text-base max-h-[500px]"
+          className="focus-visible:ring-transparent text-base lg:max-h-[400px] max-h-[250px]"
           autoComplete="off"
         />
         <div className="flex w-full justify-between items-center">
@@ -134,18 +141,33 @@ export function NoteForm({ user, currentNote }: Props) {
             </Label>
           </div>
 
-          <Button
-            disabled={isFetching || !content}
-            type="submit"
-            // disabled={input.trim().length === 0}
-          >
-            <p>Share Note</p>
-            {isFetching ? (
-              <Loader2 className="h-4 w-4 animate-spin ml-2" />
-            ) : (
-              <Sparkles className="h-4 w-4 ml-2" />
-            )}
-          </Button>
+          <div className="space-x-3">
+            <span
+              className={cn(
+                textAreaCount > 500 ? "text-red-500" : "text-zinc-500",
+                "text-sm",
+              )}
+            >
+              {textAreaCount >= 450 ? 500 - textAreaCount : null}
+            </span>
+
+            <Button
+              disabled={
+                isFetching ||
+                !content ||
+                textAreaCount > 500 ||
+                textAreaCount === 0
+              }
+              type="submit"
+            >
+              <p>Share Note</p>
+              {isFetching ? (
+                <Loader2 className="h-4 w-4 animate-spin ml-2" />
+              ) : (
+                <Sparkles className="h-4 w-4 ml-2" />
+              )}
+            </Button>
+          </div>
         </div>
       </form>
 

diff --git a/apps/www/src/app/notes/components/list.tsx b/apps/www/src/app/notes/components/list.tsx
@@ -55,7 +55,7 @@ export function NotesList({ currentUserId, notes }: Props) {
   });
 
   const [notesList, setNotesList] = useState(notes);
-  const [hasMore, setHasMore] = useState(notes?.length === 10);
+  const [hasMore, setHasMore] = useState(notes?.length === 20);
   const [isFetching, setIsFetching] = useState(false);
 
   function loadNotes() {
@@ -70,7 +70,6 @@ export function NotesList({ currentUserId, notes }: Props) {
         .then((res) => {
           if (res.error) {
             toast.error(res.error.message);
-            setIsFetching(false);
             return;
           }
 
@@ -95,10 +94,10 @@ export function NotesList({ currentUserId, notes }: Props) {
   }
 
   useEffect(() => {
-    if (inView) {
+    if (inView && !isFetching) {
       loadNotes();
     }
-  }, [inView]);
+  }, [inView, isFetching]);
 
   return (
     <>
@@ -112,9 +111,9 @@ export function NotesList({ currentUserId, notes }: Props) {
               currentUserId={currentUserId}
             />
 
-            {/* v2-note-feed */}
+            {/* v2-note-list */}
             {(i + 1) % 5 === 0 && (
-              <AdContainer className="mt-5" slotId="4344956885" />
+              <AdContainer className="mt-5" slotId="9012650581" />
             )}
           </div>
         ))}