feat: Windows support (#42)

* Adjusted file system and rendering for windows * Fixed image pathing issue, added windows package command * Patched broken package * Added border * Fixed issue with snapping * Fixed joinPath bug, catching no-ai key errors (only appear during development) * Cleaned up patch file * windows styles --------- Co-authored-by: udara <[email protected]>
UdaraJay · Jan 1, 2024 · 0bc44d7 · 0bc44d7
1 parent 334eb23
commit 0bc44d7
Show file tree

Hide file tree

Showing 23 changed files with 245 additions and 84 deletions.
diff --git a/.yarnclean b/.yarnclean
@@ -43,3 +43,8 @@ wercker.yml
 
 # misc
 *.md
+
+# exceptions
+<!-- This doc folder is required for the yaml package -->
+<!-- https://github.com/eemeli/yaml/issues/384 -->
+!**/yaml/dist/**/doc
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "description": "Pile",
-  "version": "0.3.1",
+  "version": "0.9.2",
   "keywords": [
     "pile"
   ],
@@ -30,9 +30,13 @@
     "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"",
     "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.main.prod.ts",
     "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",
+    "postinstall": "patch-package && 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 --publish always",
+    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --publish never",
+    "package:mac": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac",
+    "publish:mac": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --publish always",
+    "package:win": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --win",
+    "publish:win": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --win --publish always",
     "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 .",
@@ -166,7 +170,9 @@
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "mini-css-extract-plugin": "^2.7.6",
+    "patch-package": "^8.0.0",
     "postcss": "^8.4.31",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^2.8.8",
     "react-refresh": "^0.14.0",
     "react-test-renderer": "^18.2.0",

diff --git a/patches/pdf-parse+1.1.1.patch b/patches/pdf-parse+1.1.1.patch
@@ -0,0 +1,13 @@
+diff --git a/node_modules/pdf-parse/index.js b/node_modules/pdf-parse/index.js
+index e9fc367..47fcd1e 100644
+--- a/node_modules/pdf-parse/index.js
++++ b/node_modules/pdf-parse/index.js
+@@ -3,7 +3,7 @@ const Pdf = require('./lib/pdf-parse.js');
+
+ module.exports = Pdf;
+
+-let isDebugMode = !module.parent; 
++let isDebugMode = false; 
+
+ //process.env.AUTO_KENT_DEBUG
+
diff --git a/release/app/package-lock.json b/release/app/package-lock.json
diff --git a/src/main/handlers/file.ts b/src/main/handlers/file.ts
@@ -113,7 +113,7 @@ ipcMain.handle('open-file', async (event, data) => {
     const hours = String(currentDate.getHours()).padStart(2, '0');
     const minutes = String(currentDate.getMinutes()).padStart(2, '0');
     const seconds = String(currentDate.getSeconds()).padStart(2, '0');
-    const selectedFileName = filePath.split('/').pop();
+    const selectedFileName = filePath.split(/[/\\]/).pop();
 
     if (!selectedFileName) continue;
 

diff --git a/src/main/main.ts b/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, Menu } from 'electron';
+import { app, BrowserWindow, shell, protocol, net, Menu, nativeTheme } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
 import MenuBuilder from './menu';
@@ -85,8 +85,13 @@ const createWindow = async () => {
     frame: false,
     titleBarStyle: 'hidden',
     trafficLightPosition: { x: 18, y: 16 },
-    transparent: true,
+    transparent: process.platform === 'darwin',
     vibrancy: 'sidebar',
+    titleBarOverlay: {
+      color: '#00000000',
+      symbolColor: nativeTheme.shouldUseDarkColors ? 'white' : 'black',
+      height: 50,
+    },
   });
 
   mainWindow.loadURL(resolveHtmlPath('index.html'));

diff --git a/src/main/preload.ts b/src/main/preload.ts
@@ -55,6 +55,9 @@ const electronHandler = {
     fs.writeFile(path, data, 'utf-8', callback),
   joinPath: (...args: any) => path.join(...args),
   mkdir: (...args: any) => fs.mkdir(...args),
+  isMac: process.platform === 'darwin',
+  isWindows: process.platform === 'win32',
+  pathSeparator: path.sep,
 };
 
 contextBridge.exposeInMainWorld('electron', electronHandler);

diff --git a/src/main/utils/pileVectorIndex.js b/src/main/utils/pileVectorIndex.js
@@ -39,12 +39,17 @@ class PileVectorIndex {
 
     this.pilePath = pilePath;
 
-    await this.setAPIKeyToEnv();
-    await this.setStorageContext();
-    await this.setServiceContext();
-    await this.initVectorStoreIndex();
-    await this.initQueryEngine();
-    await this.initChatEngine();
+    try {
+      await this.setAPIKeyToEnv();
+      await this.setStorageContext();
+      await this.setServiceContext();
+      await this.initVectorStoreIndex();
+      await this.initQueryEngine();
+      await this.initChatEngine();
+    } catch (e) {
+      console.error(e);
+      return false;
+    }
   }
 
   async sendMessageToRenderer(channel = 'status', message) {
@@ -57,8 +62,7 @@ class PileVectorIndex {
   async setAPIKeyToEnv() {
     const apikey = await keytar.getPassword('pile', 'aikey');
     if (!apikey) {
-      console.error('API key not found. Please set it first.');
-      throw new Error('API key not found');
+      throw new Error('API key not found. Please set it first.');
     }
     process.env['OPENAI_API_KEY'] = apikey;
   }
@@ -136,7 +140,8 @@ class PileVectorIndex {
   // when new entries are created or when they are updated.
   async add(pilePath, relativeFilePath, parentRelativeFilePath = null) {
     // Initialize if needed
-    await this.initialize(pilePath);
+    const initialized = await this.initialize(pilePath);
+    if (!initialized) return;
 
     const filePath = path.join(pilePath, relativeFilePath);
     const fileContent = await fs.promises.readFile(filePath, 'utf-8');
@@ -263,7 +268,8 @@ class PileVectorIndex {
     if (!pilePath) return;
 
     // Setup or load the vector store
-    await this.initialize(pilePath);
+    const initialized = await this.initialize(pilePath);
+    if (!initialized) return;
 
     // Load the base index
     this.pilePath = pilePath;

diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -114,6 +114,8 @@
     --bg-tertiary: #1a375f;
     --bg-color-secondary-hover: rgb(95, 100, 122);
     --bg-translucent: rgba(10, 15, 35, 0.45); */
+
+    color-scheme: dark;
   }
 }
 

diff --git a/src/renderer/context/PilesContext.js b/src/renderer/context/PilesContext.js
@@ -32,7 +32,7 @@ export const PilesContextProvider = ({ children }) => {
     if (!location.pathname) return;
     if (!location.pathname.startsWith('/pile/')) return;
 
-    const currentPileName = location.pathname.split('/').pop();
+    const currentPileName = location.pathname.split(/[/\\]/).pop();
 
     changeCurrentPile(currentPileName);
   }, [location.pathname]);

diff --git a/src/renderer/hooks/usePost.js b/src/renderer/hooks/usePost.js
@@ -96,7 +96,7 @@ function usePost(
         }
 
         const postRelativePath = saveToPath.replace(
-          getCurrentPilePath() + '/',
+          getCurrentPilePath() + window.electron.pathSeparator,
           ''
         );
         addIndex(postRelativePath, parentPostPath); // Add the file to the index
@@ -110,7 +110,7 @@ function usePost(
   );
 
   const addReplyToParent = async (parentPostPath, replyPostPath) => {
-    const relativeReplyPath = replyPostPath.split('/').slice(-3).join('/');
+    const relativeReplyPath = window.electron.joinPath(...replyPostPath.split(/[/\\]/).slice(-3));
     const fullParentPostPath = getCurrentPilePath(parentPostPath);
     const parentPost = await getPost(fullParentPostPath);
     const content = parentPost.content;

diff --git a/src/renderer/hooks/usePostHelpers.js b/src/renderer/hooks/usePostHelpers.js
@@ -48,7 +48,7 @@ export const attachToPostCreator =
     // Attachments are stored relative to the base path from the
     // base directory of the pile
     const correctedPaths = newAttachments.map((path) => {
-      const pathArr = path.split('/').slice(-4);
+      const pathArr = path.split(/[/\\]/).slice(-4);
       const newPath = window.electron.joinPath(...pathArr);
 
       return newPath;

diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
@@ -4,9 +4,13 @@ import { MemoryRouter as Router } from 'react-router-dom';
 const container = document.getElementById('root') as HTMLElement;
 const root = createRoot(container);
 
+const wrapperStyle = {
+  background: window.electron.isMac ? 'var(--bg-translucent)' : 'var(--bg)',
+}
+
 root.render(
   <Router>
-    <div style={{ background: 'var(--bg-translucent)' }}>
+    <div style={wrapperStyle}>
       <App />
     </div>
   </Router>

diff --git a/src/renderer/pages/CreatePile/index.tsx b/src/renderer/pages/CreatePile/index.tsx
@@ -43,7 +43,7 @@ export default function CreatePile() {
 
   const renderPiles = () => {
     return pilesList.map((pile) => {
-      const name = pile.split('/').pop();
+      const name = pile.split(/[/\\]/).pop();
       return (
         <div className={styles.pile} key={pile}>
           <div className={styles.left}>

diff --git a/src/renderer/pages/Home/Home.module.scss b/src/renderer/pages/Home/Home.module.scss
@@ -148,6 +148,7 @@
     font-size: 0.8em;
     border-radius: 12px;
     overflow: hidden;
+    opacity: 0.999; // Having the opacity set to 1 interferes with 'overflow: hidden'
 
     .pile {
         -webkit-app-region: none;

diff --git a/src/renderer/pages/Pile/Editor/Attachments/index.jsx b/src/renderer/pages/Pile/Editor/Attachments/index.jsx
@@ -16,7 +16,8 @@ const Attachments = ({
   return post.data.attachments.map((attachment) => {
     const image_exts = ['jpg', 'jpeg', 'png', 'gif', 'svg'];
     const extension = attachment.split('.').pop();
-    const imgPath = 'local://' + getCurrentPilePath() + '/' + attachment;
+    const sep = window.electron.pathSeparator;
+    const imgPath = 'local:' + sep + sep + getCurrentPilePath() + sep + attachment;
 
     if (image_exts.includes(extension)) {
       return (

diff --git a/src/renderer/pages/Pile/Layout.tsx b/src/renderer/pages/Pile/Layout.tsx
@@ -3,7 +3,7 @@ import styles from './PileLayout.module.scss';
 import { HomeIcon } from 'renderer/icons';
 import Sidebar from './Sidebar/Timeline/index';
 import { useIndexContext } from 'renderer/context/IndexContext';
-import { useEffect, useCallback, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import { DateTime } from 'luxon';
 import Settings from './Settings';
 import HighlightsDialog from './Highlights';
@@ -37,7 +37,7 @@ export default function PileLayout({ children }) {
     window.scrollTo(0, 0);
   }, []);
 
-  const themeStyles = useCallback(() => {
+  const themeStyles = useMemo(() => {
     switch (currentTheme) {
       case 'purple':
         return styles.purpleTheme;
@@ -50,8 +50,13 @@ export default function PileLayout({ children }) {
     }
   }, [currentTheme]);
 
+  const osStyles = useMemo(
+    () => (window.electron.isMac ? styles.mac : styles.win),
+    []
+  );
+
   return (
-    <div className={`${styles.frame} ${themeStyles()}`}>
+    <div className={`${styles.frame} ${themeStyles} ${osStyles}`}>
       <div className={styles.bg}></div>
       <div className={styles.main}>
         <div className={styles.sidebar}>

diff --git a/src/renderer/pages/Pile/NewPost/index.jsx b/src/renderer/pages/Pile/NewPost/index.jsx
@@ -14,7 +14,7 @@ const NewPost = memo(() => {
 
   return (
     <div className={styles.post}>
-      <div className={styles.now}>at this moment</div>
+      {/* <div className={styles.now}>at this moment</div> */}
       <div className={styles.editor}>
         <Editor editable />
       </div>

diff --git a/src/renderer/pages/Pile/PileLayout.module.scss b/src/renderer/pages/Pile/PileLayout.module.scss
@@ -167,7 +167,6 @@
     position: sticky;
     top: 0;
     z-index: 4;
-    width: 100%;
     height: var(--nav-height);
     font-size: 0.85em;
     background: var(--bg);
@@ -373,10 +372,22 @@
             opacity: 0.5;
             transition: all ease-in-out 120ms;
             font-size: 13px;
+        }
+    }
+}
 
-            @media only screen and (max-width: 909px) {
-                margin-left: 86px;
-            }
+// OS Styles
+
+.mac {
+    .nav {
+        @media only screen and (max-width: 909px) {
+            padding-left: 86px;
         }
     }
+}
+
+.win {
+    .nav {
+        padding-right: 130px;
+    }
 }