Cleanup toasts and attachments

package.json

@@ -32,7 +32,7 @@
     "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
     "postinstall": "ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
-    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --win --publish never",
+    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --publish never",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
     "start:main": "cross-env NODE_ENV=development electronmon -r ts-node/register/transpile-only .",

src/renderer/icons/img/ChainIcon.js

@@ -9,10 +9,10 @@ export const ChainIcon = (props) => {
     >
       <g
         fill="none"
-        fill-rule="evenodd"
+        fillRule="evenodd"
         stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         transform="translate(4 4)"
       >
         <path d="m5.5 7.5c.96940983 1.36718798 3.01111566 1.12727011 4.01111565 0l1.98888435-2c1.1243486-1.22807966 1.1641276-2.81388365 0-4-1.135619-1.15706921-2.86438099-1.15706947-4 0l-2 2" />

src/renderer/icons/img/EditIcon.js

@@ -3,15 +3,15 @@ export const EditIcon = (props) => {
     <svg {...props} width="24" height="24" fill="none" viewBox="0 0 24 24">
       <path
         stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         stroke-width="1.5"
         d="M4.75 19.25L9 18.25L18.2929 8.95711C18.6834 8.56658 18.6834 7.93342 18.2929 7.54289L16.4571 5.70711C16.0666 5.31658 15.4334 5.31658 15.0429 5.70711L5.75 15L4.75 19.25Z"
       ></path>
       <path
         stroke="currentColor"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeLinecap="round"
+        strokeLinejoin="round"
         stroke-width="1.5"
         d="M19.25 19.25H13.75"
       ></path>

src/renderer/pages/Pile/Editor/Attachments/Attachments.module.scss

@@ -7,6 +7,7 @@
 
         img {
             max-height: 350px;
+            max-width: 100%;
             border-radius: 22px;
             transition: all ease-in-out 120ms;
 

src/renderer/pages/Pile/Editor/Attachments/index.jsx

@@ -1,7 +1,7 @@
 import styles from './Attachments.module.scss';
 import { useCallback, useState, useEffect } from 'react';
 import { DiscIcon, PhotoIcon, TrashIcon, TagIcon } from 'renderer/icons';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { usePilesContext } from 'renderer/context/PilesContext';
 
 export default function Attachments({
@@ -20,17 +20,25 @@ export default function Attachments({
 
     if (image_exts.includes(extension)) {
       return (
-        <div key={attachment} className={styles.image}>
-          {editable && (
-            <div
-              className={styles.remove}
-              onClick={() => onRemoveAttachment(attachment)}
-            >
-              <TrashIcon className={styles.icon} />
-            </div>
-          )}
-          <img src={imgPath} draggable="false" />
-        </div>
+        <motion.div
+          key={attachment}
+          initial={{ opacity: 0, y: -30, scale: 0.8 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 0, scale: 0.9 }}
+          transition={{ delay: 0.1 }}
+        >
+          <div className={styles.image}>
+            {editable && (
+              <div
+                className={styles.remove}
+                onClick={() => onRemoveAttachment(attachment)}
+              >
+                <TrashIcon className={styles.icon} />
+              </div>
+            )}
+            <img src={imgPath} draggable="false" />
+          </div>
+        </motion.div>
       );
     }
   });

src/renderer/pages/Pile/Editor/index.jsx

@@ -20,6 +20,7 @@ import ProseMirrorStyles from './ProseMirror.scss';
 import { useAIContext } from 'renderer/context/AIContext';
 import useThread from 'renderer/hooks/useThread';
 import LinkPreviews from './LinkPreviews';
+import { useToastsContext } from 'renderer/context/ToastsContext';
 
 export default function Editor({
   postPath = null,
@@ -44,27 +45,29 @@ export default function Editor({
   } = usePost(postPath, { isReply, parentPostPath, reloadParentPost, isAI });
   const { getThread } = useThread();
   const { ai, prompt } = useAIContext();
+  const { addNotification, removeNotification } = useToastsContext();
 
   const isNew = !postPath;
 
   const EnterSubmitExtension = Extension.create({
-    name: 'customExtension',
-
+    name: 'EnterSubmitExtension',
     addCommands() {
       return {
-        triggerSubmit: () => ({ state, dispatch }) => {
-          // This will trigger a 'submit' event on the editor
-          const event = new CustomEvent('submit');
-          document.dispatchEvent(event);
-
-          return true;
-        },
+        triggerSubmit:
+          () =>
+          ({ state, dispatch }) => {
+            // This will trigger a 'submit' event on the editor
+            const event = new CustomEvent('submit');
+            document.dispatchEvent(event);
+
+            return true;
+          },
       };
     },
 
     addKeyboardShortcuts() {
       return {
-        'Enter': ({ editor }) => {
+        Enter: ({ editor }) => {
           editor.commands.triggerSubmit();
           return true;
         },
@@ -86,10 +89,10 @@ export default function Editor({
       EnterSubmitExtension,
     ],
     editorProps: {
-      handlePaste: function(view, event, slice) {
+      handlePaste: function (view, event, slice) {
         const items = Array.from(event.clipboardData?.items || []);
         for (const item of items) {
-          if (item.type.indexOf("image") === 0) {
+          if (item.type.indexOf('image') === 0) {
             const file = item.getAsFile();
             const fileName = file.name; // Retrieve the filename
             const fileExtension = fileName.split('.').pop(); // Extract the file extension
@@ -105,7 +108,7 @@ export default function Editor({
           }
         }
         return false; // not handled use default behaviour
-      }
+      },
     },
     autofocus: true,
     editable: editable,
@@ -170,11 +173,23 @@ export default function Editor({
     };
   }, [handleSubmit, editor]);
 
+  // This has to ensure that it only calls the AI generate function
+  // on entries added for the AI that are empty.
   const generateAiResponse = useCallback(async () => {
     if (!editor) return;
     if (isAIResponding) return;
+
     const isEmpty = editor.state.doc.textContent.length === 0;
+
+    // isAI makes sure AI responses are only generated for
+    // AI entries that are empty.
     if (isAI && isEmpty) {
+      addNotification({
+        id: 'reflecting',
+        type: 'thinking',
+        message: 'talking to AI',
+        dismissTime: 10000,
+      });
       setEditable(false);
       setIsAiResponding(true);
       const thread = await getThread(parentPostPath);
@@ -187,6 +202,7 @@ export default function Editor({
         const message = { role: 'user', content: post.content };
         context.push(message);
       });
+
       context.push({
         role: 'system',
         content: 'You can only respond in plaintext, do NOT use HTML.',
@@ -205,6 +221,7 @@ export default function Editor({
         const token = part.choices[0].delta.content;
         editor.commands.insertContent(token);
       }
+      removeNotification('reflecting');
       setIsAiResponding(false);
     }
   }, [editor, isAI]);
@@ -251,7 +268,7 @@ export default function Editor({
   if (!post) return;
 
   return (
-    <div  className={`${styles.frame} ${isNew && styles.isNew}`}>
+    <div className={`${styles.frame} ${isNew && styles.isNew}`}>
       {editable ? (
         <EditorContent
           key={'new'}
@@ -271,37 +288,39 @@ export default function Editor({
       )}
 
       <LinkPreviews post={post} />
-
-      <motion.div
-        initial={{ opacity: 0, x: 20 }}
-        animate={{ opacity: 1, x: 0 }}
-        transition={{ duration: 0.75 }}
-      >
-        <div
-          className={`${styles.media} ${
-            post?.data?.attachments.length > 0 ? styles.open : ''
-          }`}
+      <AnimatePresence>
+        <motion.div
+          key="attachments"
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.75 }}
         >
           <div
-            className={`${styles.scroll} ${isNew && styles.new}`}
-            ref={elRef}
-            onMouseDown={handleMouseDown}
-            onMouseMove={handleMouseMove}
-            onMouseUp={handleMouseUp}
-            onMouseLeave={handleMouseUp}
+            className={`${styles.media} ${
+              post?.data?.attachments.length > 0 ? styles.open : ''
+            }`}
           >
-            <div className={styles.container}>
-              <Attachments
-                post={post}
-                editable={editable}
-                onRemoveAttachment={detachFromPost}
-              />
+            <div
+              className={`${styles.scroll} ${isNew && styles.new}`}
+              ref={elRef}
+              onMouseDown={handleMouseDown}
+              onMouseMove={handleMouseMove}
+              onMouseUp={handleMouseUp}
+              onMouseLeave={handleMouseUp}
+            >
+              <div className={styles.container}>
+                <AnimatePresence>
+                  <Attachments
+                    post={post}
+                    editable={editable}
+                    onRemoveAttachment={detachFromPost}
+                  />
+                </AnimatePresence>
+              </div>
             </div>
           </div>
-        </div>
-      </motion.div>
+        </motion.div>
 
-      <AnimatePresence>
         {editable && (
           <motion.div
             initial={{ opacity: 0, height: 0 }}

src/renderer/pages/Pile/Posts/Post/Ball/Ball.module.scss

@@ -105,7 +105,7 @@ button {
 .DropdownMenuSubTrigger {
     font-size: 13px;
     line-height: 1;
-    color: var(--violet-11);
+    color: var(--active-text);
     border-radius: 5px;
     display: flex;
     align-items: center;

src/renderer/pages/Pile/Toasts/Toast/Loaders/Info/index.jsx

@@ -8,7 +8,7 @@ export default function Info(props) {
       viewBox="0 0 44 44"
       stroke="currentcolor"
     >
-      <g fill="none" fill-rule="evenodd" stroke-width="2">
+      <g fill="none" fillRule="evenodd" stroke-width="2">
         <circle cx="22" cy="22" r="1">
           <animate
             attributeName="r"

src/renderer/pages/Pile/Toasts/Toast/Loaders/Waiting/index.jsx

@@ -8,7 +8,7 @@ export default function Waiting(props) {
       viewBox="0 0 38 38"
       stroke="currentcolor"
     >
-      <g fill="none" fill-rule="evenodd">
+      <g fill="none" fillRule="evenodd">
         <g transform="translate(1 1)" stroke-width="3">
           <circle stroke-opacity=".5" cx="18" cy="18" r="18" />
           <path d="M36 18c0-9.94-8.06-18-18-18">