Add AI response animation + various performance improvments

src/main/main.ts

@@ -1,5 +1,5 @@
 /* eslint global-require: off, no-console: off, promise/always-return: off */
-import { app, BrowserWindow, shell, protocol, net } from 'electron';
+import { app, BrowserWindow, shell, protocol, net, Menu } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
@@ -9,6 +9,8 @@ import path from 'path';
 
 import './ipc';
 
+Menu.setApplicationMenu(null);
+
 class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';

src/renderer/App.css

@@ -41,8 +41,8 @@
     --primary: #fff;
     --secondary: #c1c1c1;
 
-    --base: #6297ff;
-    --base-hover: #b6ceff;
+    --base: #4d88ff;
+    --base-hover: #82acff;
     --base-yellow: #776b0e;
     --base-green: #128212;
     --base-red: #cb1d1d;
@@ -58,6 +58,60 @@
     --bg-secondary: #373737;
     --bg-tertiary: #575757;
     --bg-color-secondary-hover: rgb(108, 108, 108);
+
+    /* Theme 1 */
+    /* --translucent: rgba(13, 10, 35, 0.5);
+    --sidebar-width: 250px;
+    --nav-height: 52px;
+
+    --primary: #ffe9ff;
+    --secondary: #ab92ae;
+
+    --base: #d014e1;
+    --base-hover: #df38e5;
+    --base-yellow: #776b0e;
+    --base-green: #128212;
+    --base-red: rgb(255, 71, 71);
+    --base-red-light: #3d2323;
+
+    --active: #ff9500;
+    --active-hover: #df7000;
+    --active-text: #fff;
+
+    --border: #5f4263;
+
+    --bg: #251b24;
+    --bg-secondary: #481e51;
+    --bg-tertiary: #5a1a5f;
+    --bg-color-secondary-hover: rgb(114, 95, 122);
+    --bg-translucent: rgba(32, 10, 35, 0.45); */
+
+    /* Midnight */
+    /* --translucent: rgba(13, 10, 35, 0.5);
+    --sidebar-width: 250px;
+    --nav-height: 52px;
+
+    --primary: #e9f3ff;
+    --secondary: #9299ae;
+
+    --base: #4d8eff;
+    --base-hover: #8299ff;
+    --base-yellow: #776b0e;
+    --base-green: #128212;
+    --base-red: rgb(255, 25, 25);
+    --base-red-light: #3d2323;
+
+    --active: #ff9634;
+    --active-hover: #ff8000;
+    --active-text: #fff;
+
+    --border: #424a63;
+
+    --bg: #1b1d25;
+    --bg-secondary: #16233c;
+    --bg-tertiary: #1a375f;
+    --bg-color-secondary-hover: rgb(95, 100, 122);
+    --bg-translucent: rgba(10, 15, 35, 0.45); */
   }
 }
 
@@ -77,14 +131,13 @@
 
 body {
   position: relative;
-  color: var(--primary);
-  padding: 0;
-  margin: 0;
   width: 100vw;
-  overflow: hidden;
   height: 100vh;
-  /* background: var(--bg); */
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
   font-family: 'Inter', sans-serif;
+  color: var(--primary);
 }
 
 li {

src/renderer/context/PilesContext.js

@@ -25,22 +25,17 @@ export const PilesContextProvider = ({ children }) => {
 
   const getConfig = async () => {
     const configFilePath = window.electron.getConfigPath();
-    // Setup piles.json if doesn't exist
+
+    // Setup new piles.json if doesn't exist,
+    // or read in the existing
     if (!window.electron.existsSync(configFilePath)) {
       window.electron.writeFile(configFilePath, JSON.stringify([]), (err) => {
-        if (err) {
-          console.error('Error writing to config');
-          return;
-        }
-
+        if (err) return;
         setPiles([]);
       });
     } else {
       await window.electron.readFile(configFilePath, (err, data) => {
-        if (err) {
-          console.error('Error reading file', err);
-          return;
-        }
+        if (err) return;
         const jsonData = JSON.parse(data);
         setPiles(jsonData);
       });
@@ -107,12 +102,35 @@ export const PilesContextProvider = ({ children }) => {
     writeConfig(newPiles);
   };
 
+  // Update current pile
+  const updateCurrentPile = (newPile) => {
+    const newPiles = piles.map((pile) => {
+      if (currentPile.path === path) {
+        setCurrentPile(newPile);
+        return newPile;
+      }
+      return pile;
+    });
+    writeConfig(newPiles);
+  };
+
+  // THEMES
+  const getTheme = () => {
+    return currentPile.theme ?? 'light';
+  };
+
+  const setTheme = (theme = 'light') => {
+    const valid = ['light', 'dark', 'purple', 'green', 'night'];
+    if (!valid.includes(theme)) return;
+    const _pile = { ...currentPile, theme: theme };
+    updateCurrentPile(_pile);
+  };
+
   const pilesContextValue = {
     piles,
     getCurrentPilePath,
     createPile,
     currentPile,
-    changeCurrentPile,
     deletePile,
   };
 

src/renderer/context/TimelineContext.js

@@ -6,11 +6,16 @@ import {
   useCallback,
 } from 'react';
 import { useLocation } from 'react-router-dom';
+import debounce from 'renderer/utils/debounce';
 
 export const TimelineContext = createContext();
 
 export const TimelineContextProvider = ({ children }) => {
-  const [closestDate, setClosestDate] = useState(new Date());
+  const [closestDate, _setClosestDate] = useState(new Date());
+
+  const setClosestDate = debounce((val) => {
+    _setClosestDate(val);
+  }, 15);
 
   const timelineContextValue = { closestDate, setClosestDate };
 

src/renderer/index.tsx

@@ -6,6 +6,8 @@ const root = createRoot(container);
 
 root.render(
   <Router>
-    <App />
+    <div style={{ background: 'var(--bg-translucent)' }}>
+      <App />
+    </div>
   </Router>
 );

src/renderer/pages/Home/Home.module.scss

@@ -7,7 +7,6 @@
     overflow-y: overlay;
     position: relative;
     -webkit-app-region: drag;
-
 }
 
 .wrapper {

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

@@ -35,6 +35,37 @@
             margin-top: -2px;
         }
     }
+
+    &.responding {
+        p {
+            --bg-size: 400%;
+            background: linear-gradient(-90deg,
+                    var(--secondary),
+                    var(--primary),
+                    var(--secondary)) 0 0 / var(--bg-size) 100%;
+            color: transparent;
+            background-clip: text;
+            -webkit-background-clip: text;
+            transition: all ease-in-out 120ms;
+            animation: move-bg 4s infinite linear;
+        }
+    }
+
+
+    @media (prefers-reduced-motion: no-preference) {
+        .responding {
+            p {
+                animation: move-bg 8s linear infinite;
+            }
+        }
+
+        @keyframes move-bg {
+            to {
+                background-position: calc(-1 * var(--bg-size)) 0;
+            }
+        }
+    }
+
 }
 
 .uneditable {
@@ -95,18 +126,19 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            height: 28px;
-            width: 34px;
+            height: 26px;
+            width: 26px;
             background: var(--bg-secondary);
             color: var(--secondary);
-            border-radius: 7px;
+            border-radius: 9px;
             transition: all ease-in-out 120ms;
             margin-right: 7px;
 
             .icon {
                 height: 23px;
                 width: 23px;
                 fill: var(--secondary);
+                transition: all ease-in-out 120ms;
             }
 
             &.active {
@@ -117,6 +149,10 @@
                 cursor: pointer;
                 background: var(--bg-tertiary);
                 color: var(--primary);
+
+                .icon {
+                    fill: var(--primary);
+                }
             }
 
             &:active {

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

@@ -52,7 +52,7 @@ export default function Editor({
       StarterKit,
       Typography,
       Placeholder.configure({
-        placeholder: 'What are you thinking?',
+        placeholder: isAI ? 'AI is thinking...' : 'What are you thinking?',
       }),
       CharacterCount.configure({
         limit: 100000,
@@ -192,7 +192,9 @@ export default function Editor({
       {editable ? (
         <EditorContent
           key={'new'}
-          className={`${styles.editor} ${isBig() ? styles.editorBig : ''}`}
+          className={`${styles.editor} ${isBig() && styles.editorBig} ${
+            isAIResponding && styles.responding
+          }`}
           editor={editor}
         />
       ) : (

src/renderer/pages/Pile/PileLayout.module.scss

@@ -1,7 +1,4 @@
 .frame {
-    // position: fixed;
-    // top: 0;
-    // left: 0;
     position: relative;
     max-width: 100vw;
 }
@@ -10,17 +7,16 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    font-size: 0.85em;
-    height: var(--nav-height);
-    -webkit-app-region: drag;
-    position: relative;
-    z-index: 4;
     position: sticky;
     top: 0;
-    transition: all ease-in-out 220ms, border ease-in-out 500ms;
+    z-index: 4;
     width: 100%;
+    height: var(--nav-height);
+    font-size: 0.85em;
     background: var(--bg);
+    transition: all ease-in-out 220ms, border ease-in-out 500ms;
     background: linear-gradient(to bottom, var(--bg), 90%, transparent);
+    -webkit-app-region: drag;
 
     .left {
         display: flex;
@@ -31,12 +27,10 @@
         transition: all ease-in-out 120ms;
         padding-bottom: 3px;
 
-
         .search {
             display: flex;
             margin-left: 12px;
             border-radius: 22px;
-            // width: 100%;
             width: 220px;
             align-items: center;
             -webkit-app-region: none;
@@ -153,7 +147,6 @@
         width: var(--sidebar-width);
         flex: 0 0 var(--sidebar-width);
         border-right: 1px solid rgba(0, 0, 0, 0.03);
-        transition: all ease-in-out 220ms;
 
         @media only screen and (max-width: 909px) {
             display: none;
@@ -200,14 +193,12 @@
     .content {
         position: relative;
         flex: 1 0 calc(100vw - var(--sidebar-width));
-        // width: calc(100vw - var(--sidebar-width));
         margin-left: var(--sidebar-width);
         font-size: 0.9em;
         background: var(--bg);
         box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.05);
         background: var(--bg);
         min-height: 100vh;
-        transition: all ease-in-out 220ms;
         height: 100vh;
         overflow-y: overlay;
         overflow-x: hidden;
@@ -220,7 +211,6 @@
         .left {
             display: flex;
             margin-left: 16px;
-            // margin-bottom: 4px;
             color: var(--secondary);
             opacity: 0.5;
             transition: all ease-in-out 120ms;