Merge pull request #9 from Kholid060/dev

Dev

package.json

@@ -3,7 +3,7 @@
   "private": false,
   "description": "An app to manage your JS projects",
   "main": "packages/main/dist/index.cjs",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "author": "Ahmad Kholid <kholid060@gmail.com>",
   "scripts": {
     "clean": "rimraf -y dist",

packages/main/src/index.js

@@ -1,5 +1,6 @@
 import { app, BrowserWindow, shell, dialog } from 'electron';
 import { join } from 'path';
+import { autoUpdater } from 'electron-updater';
 import { URL } from 'url';
 import { ipcMain } from 'electron-better-ipc';
 import { userStore } from './lib/electron-store';
@@ -61,6 +62,8 @@ const createWindow = async () => {
     if (env.MODE === 'development') {
       mainWindow?.webContents.openDevTools();
     }
+
+    autoUpdater.checkForUpdatesAndNotify();
   });
 
   mainWindow.webContents.once('did-finish-load', () => {
@@ -108,6 +111,10 @@ ipcMain.answerRenderer('app:info', () => ({
   version: app.getVersion(),
 }));
 
+ipcMain.answerRenderer('updater:check', () => {
+  autoUpdater.checkForUpdatesAndNotify();
+});
+
 ipcMain.answerRenderer('get:workspaces', getWorkspaces);
 ipcMain.answerRenderer('get:repository', helper.getRepository);
 ipcMain.answerRenderer('get:package-manager', helper.getPackageManager);

packages/renderer/src/components/app/bottom/BottomAbout.vue

@@ -59,19 +59,24 @@ function checkUpdate() {
 
   fetch(`https://api.github.com/repos/kholid060/projectile/releases/latest`)
     .then((response) => response.json())
-    .then((result) => {
+    .then(async (result) => {
       if (!result.tag_name) throw new Error();
 
       const isLatest = result.tag_name === `v${props.version}`;
+      const { ipcRenderer } = window.electron;
 
-      window.electron.ipcRenderer.callMain('dialog:message', {
+      await ipcRenderer.callMain('dialog:message', {
         type: 'info',
         title: isLatest ? 'Check for update' : 'Found Updates',
         message: isLatest
           ? "You're using the latest version of the app"
-          : `Found updates, Projectile ${result.tag_name}`,
+          : `Found update for Projectile ${result.tag_name}`,
       });
 
+      if (!isLatest) {
+        await ipcRenderer.callMain('updater:check');
+      }
+
       loading.value = false;
     })
     .catch((error) => {

packages/renderer/src/components/app/bottom/BottomPackagesQueue.vue

@@ -41,14 +41,13 @@
           </li>
         </ul>
       </div>
-      <div
-        class="bg-gray-900 text-gray-200 text-sm rounded-lg min-w-[200px]"
-      >
+      <div class="bg-gray-900 text-gray-200 text-sm rounded-lg min-w-[200px]">
         <p class="flex-1 text-gray-400 p-2">Logs</p>
         <pre
           class="max-h-64 max-w-sm overflow-auto scroll px-2 pb-2"
-          style="font-family: 'Jetbrains mono', monospace;"
-        >{{ logs }}</pre>
+          style="font-family: 'Jetbrains mono', monospace"
+          >{{ logs }}</pre
+        >
       </div>
     </div>
   </ui-popover>
@@ -164,7 +163,9 @@ export default {
       logs.value = '';
 
       ipcRenderer.callMain('terminal:log').then((data) => {
-        const terminalId = Object.keys(data).find((item) => item.startsWith('package'));
+        const terminalId = Object.keys(data).find((item) =>
+          item.startsWith('package')
+        );
 
         if (!terminalId) return;
 

packages/renderer/src/components/app/bottom/BottomTerminal.vue

@@ -29,7 +29,7 @@ export default {
     const ptyDataListener = ipcRenderer.answerMain(
       'terminal-pty-data',
       ({ data, name }) => {
-        if (!terminal || name !== props.activeTerminal || !isDone.value) return;
+        if (!terminal || name !== props.activeTerminal || !isDone.value || !data) return;
 
         terminal.write(data);
       }
@@ -43,8 +43,8 @@ export default {
       ipcRenderer
         .callMain('terminal:log', props.activeTerminal)
         .then((data) => {
-          terminal.reset();
-          terminal.write(data.log);
+          terminal?.reset();
+          terminal?.write(data?.log ?? '');
           isDone.value = true;
         });
     }

packages/renderer/src/components/app/sidebar/ProjectSidebar.vue

@@ -26,7 +26,7 @@
     </option>
   </ui-select>
   <ui-list class="space-y-1 text-gray-200">
-    <ui-list-item tag="router-link" to="/">
+    <ui-list-item tag="router-link" to="/" title="Ctrl+Shift+1">
       <v-mdi name="mdi-home-variant-outline" class="mr-2"></v-mdi>
       <span>Home</span>
     </ui-list-item>
@@ -35,6 +35,7 @@
       :key="item.id"
       :active="item.id === $route.name"
       :to="`/project/${$route.params.id}/${item.path}`"
+      :title="item.title"
       tag="router-link"
     >
       <v-mdi :name="item.icon" class="mr-2"></v-mdi>
@@ -43,8 +44,9 @@
   </ui-list>
 </template>
 <script>
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import Mousetrap from 'mousetrap';
 import Project from '@/models/project';
 
 export default {
@@ -55,18 +57,21 @@ export default {
         id: 'project-packages',
         icon: 'mdi-puzzle-outline',
         path: '',
+        title: 'Ctrl+Shift+2',
       },
       {
         name: 'Scripts',
         id: 'project-id-scripts',
         icon: 'mdi-clipboard-text-outline',
         path: 'scripts',
+        title: 'Ctrl+Shift+3',
       },
       {
         name: 'Boards',
         id: 'project-id-boards',
         icon: 'mdi-view-dashboard-outline',
         path: 'boards',
+        title: 'Ctrl+Shift+4',
       },
     ];
 
@@ -75,6 +80,13 @@ export default {
 
     const rootId = ref('');
 
+    const shortcuts = {
+      'mod+shift+1': () => router.push('/'),
+      'mod+shift+2': () => router.push(`/project/${route.params.id}`),
+      'mod+shift+3': () => router.push(`/project/${route.params.id}/scripts`),
+      'mod+shift+4': () => router.push(`/project/${route.params.id}/boards`),
+    };
+
     const projects = computed(() =>
       Project.query()
         .where('isMonorepo', false)
@@ -98,6 +110,13 @@ export default {
       const project = Project.find(route.params.id);
 
       rootId.value = project.isMonorepo ? project.rootId : route.params.id;
+
+      Mousetrap.bind(Object.keys(shortcuts), (event, combo) => {
+        shortcuts[combo]();
+      });
+    });
+    onUnmounted(() => {
+      Mousetrap.unbind(Object.keys(shortcuts));
     });
 
     return {

packages/renderer/src/components/home/HomeProjects.vue

@@ -87,3 +87,8 @@ export default {
   },
 };
 </script>
+<style>
+.project-card.is-active {
+  @apply ring-2 ring-primary;
+}
+</style>

packages/renderer/src/components/home/view/ViewGrid.vue

@@ -4,7 +4,9 @@
       <ui-card
         v-for="project in projects"
         :key="project.id"
-        class="list-transition hover:ring-2 hover:ring-gray-700"
+        :data-project-id="project.id"
+        :data-project-name="project.name"
+        class="list-transition hover:ring-2 hover:ring-gray-700 project-card"
       >
         <router-link :to="`/project/${project.id}`" class="block text-overflow">
           {{ project.name }}

packages/renderer/src/components/home/view/ViewList.vue

@@ -3,7 +3,9 @@
     <ui-list-item
       v-for="project in projects"
       :key="project.id"
-      class="group even:bg-gray-500 even:bg-opacity-5"
+      :data-project-id="project.id"
+      :data-project-name="project.name"
+      class="group even:bg-gray-500 even:bg-opacity-5 project-card"
     >
       <ui-button
         class="mr-4"

packages/renderer/src/components/package/AddPackageModal.vue

@@ -53,7 +53,10 @@
           lazy
         ></ui-img>
         <div class="text-overflow flex-1 mr-4">
-          <p class="text-overflow">
+          <p
+            class="text-overflow cursor-pointer"
+            @click="packageDetails(item.package.name)"
+          >
             {{ item.package.name }}
             <span class="text-gray-300 text-sm"
               >({{ item.package.version }})</span

packages/renderer/src/components/ui/Select.vue

@@ -11,7 +11,7 @@
         bg-gray-100 bg-opacity-5
         hover:bg-opacity-10
         pl-4
-        pr-8
+        pr-10
         py-2
         z-10
         relative

packages/renderer/src/pages/index.vue

@@ -36,9 +36,19 @@
 }
 </route>
 <script>
-import { computed, shallowReactive, onMounted } from 'vue';
+import {
+  computed,
+  shallowRef,
+  shallowReactive,
+  onMounted,
+  onUnmounted,
+  watch,
+} from 'vue';
 import { useStore } from 'vuex';
+import { useRouter } from 'vue-router';
 import { nanoid } from 'nanoid';
+import { debounce } from '@/utils/helper';
+import KeyboardNavigation from '@/utils/keyboardNavigation';
 import Project from '@/models/project';
 import HomeNav from '@/components/home/HomeNav.vue';
 import HomeProjects from '@/components/home/HomeProjects.vue';
@@ -47,8 +57,11 @@ export default {
   components: { HomeNav, HomeProjects },
   setup() {
     const store = useStore();
+    const router = useRouter();
+
     const { ipcRenderer, existsSync, path } = window.electron;
 
+    const keyboardNavigation = shallowRef(null);
     const state = shallowReactive({
       search: '',
       viewType: 'list',
@@ -143,9 +156,64 @@ export default {
         store.dispatch('saveToStorage', 'projects');
       });
     }
+    function deleteProject(name, id) {
+      const confirm = window.confirm(`Are you sure want to delete "${name}"?`);
+
+      if (confirm) Project.delete(id);
+    }
+
+    const navigationBreakpoints = {
+      default: 2,
+      '(min-width: 1024px)': 3,
+      '(min-width: 1280px)': 4,
+    };
+
+    watch(
+      projects,
+      debounce(() => {
+        keyboardNavigation.value?.refresh();
+      }, 200)
+    );
+    watch(
+      () => state.viewType,
+      debounce((value) => {
+        keyboardNavigation.value?.setOptions({
+          breakpoints:
+            value === 'grid' ? navigationBreakpoints : { default: 1 },
+        });
+      }, 200)
+    );
 
     onMounted(() => {
       state.viewType = localStorage.getItem('view-type') || 'list';
+
+      keyboardNavigation.value = new KeyboardNavigation({
+        itemSelector: '.project-card',
+      });
+
+      keyboardNavigation.value.on('keydown', ({ key }, activeItem) => {
+        if (!activeItem) return;
+
+        const { projectId, projectName } = activeItem.dataset;
+
+        switch (key) {
+          case 'Enter':
+            router.push(`/project/${projectId}`);
+            break;
+          case 'Backspace':
+          case 'Delete':
+            deleteProject(projectName, projectId);
+            break;
+          default:
+        }
+      });
+
+      setTimeout(() => {
+        keyboardNavigation.value.refresh();
+      }, 250);
+    });
+    onUnmounted(() => {
+      keyboardNavigation.value.destroy();
     });
 
     return {

packages/renderer/src/pages/project/[id]/boards.vue

@@ -3,7 +3,7 @@
     <div class="flex items-center mb-8">
       <h2 class="text-2xl font-semibold text-overflow">Boards</h2>
       <div class="flex-grow"></div>
-      <ui-button variant="primary" @click="addBoard">
+      <ui-button variant="primary" title="Ctrl+Shift+N" @click="addBoard">
         <v-mdi name="mdi-plus" class="mr-1 -ml-2"></v-mdi>
         <span>Board</span>
       </ui-button>
@@ -42,10 +42,11 @@
   </div>
 </template>
 <script>
-import { computed, shallowReactive } from 'vue';
+import { computed, shallowReactive, onMounted, onUnmounted } from 'vue';
 import { useStore } from 'vuex';
 import { useRoute } from 'vue-router';
 import Draggable from 'vuedraggable/src/vuedraggable';
+import Mousetrap from 'mousetrap';
 import { useDialog } from '@/composable/dialog';
 import Board from '@/models/board';
 import AddCard from '@/components/boards/AddCard.vue';
@@ -123,6 +124,13 @@ export default {
       store.dispatch('saveToStorage', 'cards');
     }
 
+    onMounted(() => {
+      Mousetrap.bind('mod+shift+n', addBoard);
+    });
+    onUnmounted(() => {
+      Mousetrap.unbind('mod+shift+n');
+    });
+
     return {
       boards,
       addBoard,