From 61e51acaf1b9a6d44d85b519b403103c19a3b4cc Mon Sep 17 00:00:00 2001
From: danielterletzkiy <danielterletzkiy@gmail.com>
Date: Thu, 16 Feb 2023 01:02:50 +0100
Subject: [PATCH] ULT-1 beautify update

Took 2 hours 5 minutes
---
 electron/controller/ProjectScraper.ts      |   5 +-
 electron/types/Jira.ts                     |  29 ++-
 package.json                               |   2 +-
 src/components/JiraBranchView.vue          |  21 +-
 src/components/JiraButtonConfirm.vue       |  33 ++-
 src/components/JiraChangeStep.vue          |  47 ++--
 src/components/JiraInfoView.vue            |   4 +-
 src/components/JiraProjectButton.vue       |  72 +++--
 src/components/JiraSettings.vue            | 290 ++-------------------
 src/components/JiraSettingsConfig.vue      |  30 ++-
 src/components/JiraSettingsTabGeneral.vue  | 196 ++++++++++++++
 src/components/JiraSettingsTabProjects.vue |  74 ++++++
 src/views/JiraDashboard.vue                |  26 +-
 types/Jira.ts                              |  29 ++-
 14 files changed, 484 insertions(+), 374 deletions(-)
 create mode 100644 src/components/JiraSettingsTabGeneral.vue
 create mode 100644 src/components/JiraSettingsTabProjects.vue

diff --git a/electron/controller/ProjectScraper.ts b/electron/controller/ProjectScraper.ts
index fa1e6be..7fea358 100644
--- a/electron/controller/ProjectScraper.ts
+++ b/electron/controller/ProjectScraper.ts
@@ -78,8 +78,9 @@ module.exports = class ProjectScraper {
       //in project
 
       const masterBranch = await GitShell.getMasterBranch(path);
-      const [prefix, master] = masterBranch.split("/");
-      console.log("change project: ", master, issue, path, !!event);
+      console.log({ masterBranch })
+      const master = masterBranch === 'none' ? 'master' : masterBranch.split("/").pop();
+      console.log("change project: ", { master }, { issue }, { path });
 
       //update master and stash
       changeStep({ step: 2, state: ChangeState.Started });
diff --git a/electron/types/Jira.ts b/electron/types/Jira.ts
index 04d434d..a1f8037 100644
--- a/electron/types/Jira.ts
+++ b/electron/types/Jira.ts
@@ -1,23 +1,30 @@
 import { ChangeState } from "./ChangeState";
 import { ApplicationType } from "./ApplicationType";
 
+export type IDE = {
+  id: string;
+  path: string;
+  name: string;
+};
+
 export type Project = {
-  path: string,
-  project: string,
-  branch: string,
-  changes: Array<Array<string>>,
-}
+  path: string;
+  project: string;
+  branch: string;
+  defaultBranch?: string;
+  changes: Array<Array<string>>;
+  ideId?: IDE["id"];
+};
 
 export type ChangeStep = {
-  step: number,
-  state: ChangeState,
-  path: string,
-}
+  step: number;
+  state: ChangeState;
+  path: string;
+};
 
 export type JiraConfig = {
   id: string;
   url: string;
   name: string;
   applicationType: ApplicationType;
-}
-
+};
diff --git a/package.json b/package.json
index fd1c7b5..fad1646 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ultira",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": true,
   "description": "ultimate jira tool",
   "author": {
diff --git a/src/components/JiraBranchView.vue b/src/components/JiraBranchView.vue
index df4a642..bc100f6 100644
--- a/src/components/JiraBranchView.vue
+++ b/src/components/JiraBranchView.vue
@@ -22,16 +22,20 @@
           :key="option"
           height="40px"
           style="font-size: 1.2rem"
-        >{{ option }}
+          >{{ option }}
         </d-list-item>
       </d-tab-list>
       <JiraProjectBranchRefreshButton />
     </template>
-    <d-card block background-color="transparent" style="
+    <d-card
+      block
+      background-color="transparent"
+      style="
         max-height: calc(500px - 50px - 8px);
         overflow: overlay;
         overflow-x: hidden;
-      ">
+      "
+    >
       <d-column
         key="content"
         v-if="
@@ -55,7 +59,7 @@
                   {{ repository.name }}
                 </d-card-title>
                 <d-card-subtitle
-                >Repository
+                  >Repository
                   <JiraLinkIconButton
                     v-if="repository.url"
                     :url="repository.url"
@@ -73,9 +77,12 @@
                 <d-card-subtitle> Commits</d-card-subtitle>
               </d-column>
               <d-spacer />
-              <JiraPRButton
-                :repository="repository"
-              />
+              <d-tooltip>
+                <JiraPRButton :repository="repository" />
+                <template v-slot:tooltip>
+                  Create PR
+                </template>
+              </d-tooltip>
               <JiraProjectButton
                 :repository="
                   repository.name.match(new RegExp('.*(/|^)(.*)')).pop()
diff --git a/src/components/JiraButtonConfirm.vue b/src/components/JiraButtonConfirm.vue
index d94b030..106178a 100644
--- a/src/components/JiraButtonConfirm.vue
+++ b/src/components/JiraButtonConfirm.vue
@@ -1,8 +1,24 @@
 <template>
   <OnClickOutside @trigger="onReset">
-    <d-icon-button v-if="icon" :color="currentColor" :active="state" @click="onClick" :name="icon"
-                   :outlined="state" :outline-color="color" outline-offset="2px" outline-width="4px" />
-    <d-button v-else :color="currentColor" :filled="state" @click="onClick">
+    <d-icon-button
+      v-if="icon"
+      :color="currentColor"
+      :active="state"
+      @click="onClick"
+      :disabled="disabled"
+      :name="icon"
+      :outlined="state"
+      :outline-color="color"
+      outline-offset="2px"
+      outline-width="4px"
+    />
+    <d-button
+      v-else
+      :color="currentColor"
+      :filled="state"
+      @click="onClick"
+      :disabled="disabled"
+    >
       <template v-slot:prefix>
         <slot name="prefix" />
       </template>
@@ -21,8 +37,9 @@ import { OnClickOutside } from "@vueuse/components";
 const emit = defineEmits(["click", "confirm", "cancel"]);
 const props = defineProps({
   color: { type: String, default: "primary" },
-  askColor: { type: String, default: "info" },
-  icon: { type: String }
+  askColor: { type: String, default: "primary" },
+  icon: { type: String },
+  disabled: { type: Boolean },
 });
 
 const state = ref(false);
@@ -45,10 +62,6 @@ function onReset() {
   emit("cancel");
   state.value = false;
 }
-
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/JiraChangeStep.vue b/src/components/JiraChangeStep.vue
index d3c32bf..bed6dbe 100644
--- a/src/components/JiraChangeStep.vue
+++ b/src/components/JiraChangeStep.vue
@@ -1,15 +1,16 @@
 <template>
-  <d-row gap>
-    <d-tooltip v-for="step in steps" :key="step.description">
-      <d-column glow :color="step.color">
-        <d-icon :name="step.icon" :size="40" />
-      </d-column>
-      <template v-slot:tooltip>
-        {{ step.description }}
-      </template>
-    </d-tooltip>
-    <d-icon-button name="times" @click="onClear" :size="30" color="inherit"/>
-  </d-row>
+  <d-column no-padding v-ripple @click="onClear">
+    <d-row gap>
+      <d-tooltip v-for="step in steps" :key="step.description">
+        <d-column glow :color="step.color">
+          <d-icon :name="step.icon" :size="40" />
+        </d-column>
+        <template v-slot:tooltip>
+          {{ step.description }}
+        </template>
+      </d-tooltip>
+    </d-row>
+  </d-column>
 </template>
 
 <script setup lang="ts">
@@ -21,13 +22,10 @@ import ProjectController from "../controller/ProjectController";
 import { ChangeState } from "../../types/ChangeState";
 
 const steps = computed(() => {
-
-  const stepGroup = groupBy(changeSteps.value, (n) => n.step);
-  console.log(stepGroup, typeof stepGroup);
+  const stepGroup = getGroup();
   if (!Object.keys(stepGroup)) {
     return changeStepsInfo;
   }
-
   const clone = cloneDeep(changeStepsInfo);
 
   for (const [i, stepInfo] of clone.entries()) {
@@ -38,24 +36,29 @@ const steps = computed(() => {
     if (!currentGroup) {
       continue;
     }
-    console.log("cr:", currentGroup);
     const currentStep = currentGroup.at(-1);
     if (!currentStep) {
       continue;
     }
     stepInfo.color =
-      currentStep.state === ChangeState.Started ? "warning" :
-        currentStep.state === ChangeState.Finished ? "success" :
-          currentStep.state === ChangeState.Failed ? "error" : "";
+      currentStep.state === ChangeState.Started
+        ? "warning"
+        : currentStep.state === ChangeState.Finished
+        ? "success"
+        : currentStep.state === ChangeState.Failed
+        ? "error"
+        : "inherit";
   }
   return clone;
 });
 
+function getGroup() {
+  return groupBy(changeSteps.value, (n) => n.step);
+}
+
 function onClear() {
   ProjectController.clearChangeSteps();
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/components/JiraInfoView.vue b/src/components/JiraInfoView.vue
index 2e9ee6d..e0a54bf 100644
--- a/src/components/JiraInfoView.vue
+++ b/src/components/JiraInfoView.vue
@@ -4,8 +4,8 @@
       <d-row class="px-1" gap :wrap="false">
         <d-tooltip position="right" filled color="primary">
           <JiraImage
-            :url="currentIssue.task.fields.project.avatarUrls['48x48']"
-            :key="currentIssue.task.fields.project.key"
+            :url="currentIssue?.task.fields.project.avatarUrls['48x48']"
+            :key="currentIssue?.task.fields.project.key"
           >
             <template v-slot:default="{ base64 }">
               <d-card width="64px" height="64px" elevation-light>
diff --git a/src/components/JiraProjectButton.vue b/src/components/JiraProjectButton.vue
index 7a692cf..93fdabb 100644
--- a/src/components/JiraProjectButton.vue
+++ b/src/components/JiraProjectButton.vue
@@ -1,14 +1,30 @@
 <template>
-  <d-tooltip :position="tooltipPosition" color="primary" filled :key="hasChangeSteps" :popover="hasChangeSteps">
-    <d-card :outlined="hasChanges" background-color="transparent" outline-width="2px">
-      <JiraButtonConfirm icon="folder-open" color="primary" askColor="primary" :disabled="!project"
-                         @confirm="onClick" />
+  <d-tooltip
+    :position="tooltipPosition"
+    color="primary"
+    filled
+    :key="hasChangeSteps"
+    :popover="hasChangeSteps"
+  >
+    <d-card
+      :outlined="hasChanges"
+      background-color="transparent"
+      outline-width="2px"
+    >
+      <JiraButtonConfirm
+        icon="folder-open"
+        color="primary"
+        askColor="primary"
+        :disabled="!project"
+        @confirm="onClick"
+      />
     </d-card>
     <template v-slot:tooltip-wrapper>
       <d-card>
-        <d-column gap>
+        <d-column>
           <d-row gap>
             <d-icon
+              class="ml-4"
               name="corner-down-right"
               :size="20"
               style="transform: rotate(45deg)"
@@ -16,28 +32,35 @@
             <d-row gap style="max-width: max-content">
               <d-column>
                 <d-card-subtitle>
-                  <strong v-if="project">{{ project.branch.toUpperCase() }}</strong>
+                  <strong v-if="project">{{
+                    project.branch.toUpperCase()
+                  }}</strong>
                   <span v-else>Project not installed</span>
                 </d-card-subtitle>
-                <d-divider color="primary" :tint="-40" />
+                <d-divider />
                 <d-card-subtitle>
                   <strong>{{ currentIssueKey }}</strong>
                 </d-card-subtitle>
               </d-column>
-              <d-divider color="primary" :tint="-40" vertical block class="my-3" v-if="hasChanges" />
+              <d-divider vertical block class="my-3" size="4px" v-if="hasChanges" />
               <d-column v-if="hasChanges">
                 <d-card-subtitle>
                   <strong>{{ project.changes.length }}</strong> Files
                 </d-card-subtitle>
-                <d-divider color="primary" :tint="-40" />
-                <d-card-subtitle color="inherit" class="font-weight-bold">
+                <d-divider />
+                <d-card-subtitle>
                   <d-icon name="file-edit-alt" :size="18" />
                   Changes
                 </d-card-subtitle>
               </d-column>
             </d-row>
           </d-row>
-          <d-card v-if="hasChangeSteps" class="ma-2 pa-2" outlined elevation="2">
+          <d-card
+            v-if="hasChangeSteps"
+            class="ma-2 pa-2"
+            outlined
+            elevation="2"
+          >
             <JiraChangeStep />
           </d-card>
         </d-column>
@@ -57,24 +80,29 @@ import JiraButtonConfirm from "./JiraButtonConfirm.vue";
 
 const props = defineProps({
   repository: { type: String, required: true },
-  tooltipPosition: { type: String as PropType<Position>, default: "left" }
+  tooltipPosition: { type: String as PropType<Position>, default: "left" },
 });
 
 const project = computed<Project>(
   () =>
-    projects.value.find(
-      (project) => {
-        try {
-          return project.project.toLowerCase() === props.repository.toLowerCase();
-        } catch (e) {
-          return "error";
-        }
+    projects.value.find((project) => {
+      try {
+        return project.project.toLowerCase() === props.repository.toLowerCase();
+      } catch (e) {
+        return "error";
       }
-    ) as Project);
+    }) as Project
+);
 
-const hasChanges = computed<boolean>(() => project.value && project.value?.changes?.length > 0);
+const hasChanges = computed<boolean>(
+  () => project.value && project.value?.changes?.length > 0
+);
 
-const hasChangeSteps = computed<boolean>(() => project.value && changeSteps.value.findIndex((step) => step.path === project.value.path) >= 0);
+const hasChangeSteps = computed<boolean>(
+  () =>
+    project.value &&
+    changeSteps.value.findIndex((step) => step.path === project.value.path) >= 0
+);
 
 function onClick() {
   ProjectController.clearChangeSteps();
diff --git a/src/components/JiraSettings.vue b/src/components/JiraSettings.vue
index 845168d..e3068bd 100644
--- a/src/components/JiraSettings.vue
+++ b/src/components/JiraSettings.vue
@@ -4,291 +4,57 @@
     @update:modelValue="(e) => $emit('update:open', e)"
   >
     <d-card width="700px">
-      <d-card class="pa-2 pt-1" block>
+      <d-card class="pa-2 pt-1 pb-0" block>
         <d-card-title> Ultira Settings</d-card-title>
-        <d-divider />
+        <d-tab-list v-model="currentSetting" color="primary" elevation="2">
+          <d-list-item v-for="item in settingsList" center :key="item.name">
+            <d-icon :name="item.icon" />
+            {{ item.name }}
+          </d-list-item>
+        </d-tab-list>
       </d-card>
       <d-column
-        class="pa-4"
+        class="pa-4 pt-0"
         gap
         :wrap="false"
         style="min-height: 300px; max-height: 800px; overflow: overlay"
       >
-        <d-column gap>
-          <d-card-subtitle class="pl-0 font-weight-bold">
-            Look & Feel
-          </d-card-subtitle>
-          <d-checkbox color="primary" v-model="$vuelize.theme.dark">
-            Dark mode
-          </d-checkbox>
-          <d-card-subtitle
-            root-tag="label"
-            for="color"
-            class="color-picker"
-            glow
-            color="primary"
-            v-ripple
-            :depressed="false"
-          >
-            <input
-              id="color"
-              type="color"
-              v-model="$vuelize.theme.themes[currentTheme].primary"
-            />
-            Primary color
-          </d-card-subtitle>
-          <d-textfield
-            v-model="refreshTime"
-            full-width
-            color="primary"
-            filled
-            label="Refresh Interval"
-            type="number"
-            min="15"
-          >
-            <template v-slot:suffix> seconds</template>
-          </d-textfield>
-          <d-textfield
-            v-model="maxResults"
-            full-width
-            color="primary"
-            filled
-            label="Max Results"
-            type="number"
-            min="5"
-          />
-          <d-card-subtitle class="pl-0 pb-0 font-weight-bold">
-            Zoom
-          </d-card-subtitle>
-          <d-row gap block outlined space-between :wrap="false">
-            <d-icon-button
-              :size="40"
-              name="angle-left-b"
-              type="button"
-              @click="zoomFactor > 0.1 ? (zoomFactor -= 0.1) : null"
-            />
-            <d-button
-              block
-              color="secondary"
-              type="button"
-              style="font-size: 1.5rem"
-              @click="zoomFactor = 1"
-            >
-              {{
-                (Math.round(zoomFactor * 10) / 10).toString().padEnd(3, ".0")
-              }}
-            </d-button>
-            <d-icon-button
-              :size="40"
-              name="angle-right-b"
-              type="button"
-              @click="zoomFactor < 5 ? (zoomFactor += 0.1) : null"
-            />
-          </d-row>
-        </d-column>
-        <d-divider />
-        <d-column gap>
-          <d-card-subtitle class="pl-0 font-weight-bold">
-            Jira Configurations
-          </d-card-subtitle>
-          <d-column v-for="(config, i) in jiraConfigs" :key="i" gap>
-            <JiraSettingsConfig
-              :modelValue="config"
-              @update:modelValue="(e)=>jiraConfigs[i]=e"
-              @remove="removeConfig(i)"
-            />
-            <d-divider />
-          </d-column>
-          <d-button color="primary" glow type="button" @click="addConfig">
-            <template v-slot:prefix>
-              <d-icon name="plus" />
-            </template>
-            Add Config
-          </d-button>
-        </d-column>
-        <d-divider />
-        <d-column gap>
-          <d-card-subtitle class="pl-0 font-weight-bold">
-            Projects
-          </d-card-subtitle>
-          <d-column gap>
-            <d-textfield
-              v-model="scrapePath"
-              color="primary"
-              outlined
-              filled
-              full-width
-              label="Scrape Path"
-              placeholder="C:\Users\[Current User]/[your input] or ~/[your input]"
-            >
-              <template v-slot:suffix>
-                <d-icon-button
-                  name="arrow-right"
-                  :size="30"
-                  :disabled="!scrapePath"
-                  @click="startScraper(scrapePath)"
-                />
-              </template>
-            </d-textfield>
-            <JiraProjectBranchRefreshButton />
-          </d-column>
-          <d-column v-for="(project, i) in projects" :key="i" gap>
-            <JiraSettingsProject
-              v-model="projects[i]"
-              @remove="removeProject(i)"
-            />
-            <d-divider />
-          </d-column>
-          <d-button color="primary" glow type="button" @click="addProject">
-            <template v-slot:prefix>
-              <d-icon name="plus" />
-            </template>
-            Add Project
-          </d-button>
-        </d-column>
+        <component :is="currentComponent"/>
       </d-column>
     </d-card>
   </d-dialog>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeMount, ref, watch } from "vue";
-import { useStore } from "vuex";
-import JiraSettingsConfig from "./JiraSettingsConfig.vue";
-import JiraSettingsProject from "./JiraSettingsProject.vue";
-import {
-  jiraConfigs, maxResults,
-  projects,
-  refreshTime, theme,
-  zoomFactor
-} from "../store/jira.store";
-import { useZoomFactor } from "@vueuse/electron";
-import ProjectController from "../controller/ProjectController";
-import JiraProjectBranchRefreshButton from "./JiraProjectBranchRefreshButton.vue";
-import { v4 as uuidv4 } from "uuid";
-import { ApplicationType } from "../../types/ApplicationType";
+import { computed, ref } from "vue";
+import JiraSettingsTabProjects from "./JiraSettingsTabProjects.vue";
+import JiraSettingsTabGeneral from "./JiraSettingsTabGeneral.vue";
 
-const factor = useZoomFactor();
-
-// eslint-disable-next-line no-undef
-const vuelize: Vuelize = inject("vuelize") as Vuelize;
 defineEmits(["submit"]);
 defineProps({
-  open: Boolean
+  open: Boolean,
 });
 
-const store = useStore();
-watch(
-  jiraConfigs,
-  (value) => {
-    store.dispatch("setJiraConfigs", value);
+const currentSetting = ref("General");
+const settingsList = [
+  {
+    name: "General",
+    icon: "setting",
+    component: JiraSettingsTabGeneral,
   },
-  { deep: true }
-);
-
-function addConfig() {
-  jiraConfigs.value.push({
-    id: uuidv4(),
-    name: "",
-    url: "",
-    applicationType: ApplicationType.Bitbucket
-  });
-}
-
-function removeConfig(index: number) {
-  jiraConfigs.value.splice(index, 1);
-}
-
-watch(
-  projects,
-  (value) => {
-    store.dispatch("setProjects", value);
+  {
+    name: "Projects",
+    icon: "folder-open",
+    component: JiraSettingsTabProjects,
   },
-  { deep: true }
-);
-
-function addProject() {
-  projects.value.push({
-    project: "",
-    path: "",
-    branch: "none",
-    changes: []
-  });
-}
-
-function removeProject(index: number) {
-  projects.value.splice(index, 1);
-}
-
-const scrapePath = ref("");
-
-function startScraper(path: string) {
-  ProjectController.scrape(path);
-}
-
-const currentTheme = computed(() => (vuelize.theme.dark ? "dark" : "light"));
-watch(
-  () => vuelize.theme.themes[currentTheme.value].primary,
-  (color) => {
-    //@ts-ignore
-    theme.value = { primary: { [currentTheme.value]: color } };
-  }
-);
-
-watch(
-  () => vuelize.theme.dark,
-  (dark) => {
-    theme.value = { isDark: dark };
-  }
-);
-
-watch(
-  () => zoomFactor.value,
-  (factor) => {
-    setElectronZoom(factor);
-  }
+];
+const currentComponent = computed(() =>
+  (currentSetting.value && settingsList.length > 0
+    ? settingsList.find((item) => item.name === currentSetting.value)
+    : settingsList[0])?.component
 );
-
-function setElectronZoom(value: string | number) {
-  if (typeof value === "string") {
-    factor.value = parseFloat(value);
-  } else {
-    factor.value = value;
-  }
-}
-
-onBeforeMount(() => {
-  setElectronZoom(zoomFactor.value);
-  vuelize.theme.dark = theme.value.isDark as boolean;
-  ["dark", "light"].forEach((mode) => {
-    //@ts-ignore
-    vuelize.theme.themes[mode].primary = theme.value.primary[mode];
-  });
-});
 </script>
 
 <style scoped lang="scss">
-.color-picker {
-  user-select: auto !important;
-  overflow: hidden;
-  padding: 0;
-
-  input[type="color"] {
-    z-index: 1;
-    -webkit-appearance: none;
-    border: none;
-    width: 30px;
-    height: 30px;
-    background: transparent;
-  }
-
-  input[type="color"]::-webkit-color-swatch-wrapper {
-    padding: 0;
-  }
 
-  input[type="color"]::-webkit-color-swatch {
-    border: none;
-    border-radius: 6px;
-  }
-}
 </style>
diff --git a/src/components/JiraSettingsConfig.vue b/src/components/JiraSettingsConfig.vue
index bb831a3..5b6ed53 100644
--- a/src/components/JiraSettingsConfig.vue
+++ b/src/components/JiraSettingsConfig.vue
@@ -12,7 +12,7 @@
       <d-textfield
         full-width
         v-model="config.url"
-        :color="!validation.url?'error':'primary'"
+        :color="!validation.url ? 'error' : 'primary'"
         filled
         label="Url"
         type="url"
@@ -37,16 +37,29 @@
       </d-tab-list>
     </d-column>
     <d-column elevation="n1">
-      <JiraButtonConfirm color="error" icon="times" @confirm="remove" />
-      <JiraButtonConfirm color="primary" icon="key-skeleton" @confirm="edit" />
+      <d-tooltip position="left">
+        <JiraButtonConfirm color="error" icon="times" @confirm="remove" />
+        <template v-slot:tooltip>Delete</template>
+      </d-tooltip>
+      <d-tooltip position="left">
+        <JiraButtonConfirm
+          color="primary"
+          icon="key-skeleton"
+          @confirm="edit"
+        />
+        <template v-slot:tooltip>Change Credentials</template>
+      </d-tooltip>
       <d-spacer />
-      <JiraButtonConfirm color="success" icon="save" @confirm="save" />
+      <d-tooltip position="left">
+        <JiraButtonConfirm color="success" icon="save" @confirm="save" />
+        <template v-slot:tooltip>Save</template>
+      </d-tooltip>
     </d-column>
   </d-row>
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, reactive, ref, toRefs, watch } from "vue";
+import { computed, PropType, ref, toRefs } from "vue";
 import { JiraConfig } from "../../types/Jira";
 import { credentialsOpen, selectedJiraConfig } from "../store/jira.store";
 import JiraButtonConfirm from "./JiraButtonConfirm.vue";
@@ -61,7 +74,7 @@ const AppTypes = Object.keys(ApplicationType).map(
 
 const emit = defineEmits(["remove", "update:modelValue"]);
 const props = defineProps({
-  modelValue: { type: Object as PropType<JiraConfig>, required: true }
+  modelValue: { type: Object as PropType<JiraConfig>, required: true },
 });
 
 const config = ref(clone(toRefs(props).modelValue?.value));
@@ -81,10 +94,11 @@ function save() {
   config.value = clone(config.value);
 }
 
-
 const validation = computed(() => {
   return {
-    url: config.value.url && /^((?:https?:\/\/)?[^./]+(?:\.[^./]+)+?)$/.test(config.value.url)
+    url:
+      config.value.url &&
+      /^((?:https?:\/\/)?[^./]+(?:\.[^./]+)+?)$/.test(config.value.url),
   };
 });
 </script>
diff --git a/src/components/JiraSettingsTabGeneral.vue b/src/components/JiraSettingsTabGeneral.vue
new file mode 100644
index 0000000..2a11f47
--- /dev/null
+++ b/src/components/JiraSettingsTabGeneral.vue
@@ -0,0 +1,196 @@
+<template>
+  <d-column gap>
+    <d-card-subtitle class="pl-0 font-weight-bold">
+      Look & Feel
+    </d-card-subtitle>
+    <d-checkbox color="primary" v-model="$vuelize.theme.dark">
+      Dark mode
+    </d-checkbox>
+    <d-card-subtitle
+      root-tag="label"
+      for="color"
+      class="color-picker"
+      glow
+      color="primary"
+      v-ripple
+      :depressed="false"
+    >
+      <input
+        id="color"
+        type="color"
+        v-model="$vuelize.theme.themes[currentTheme].primary"
+      />
+      Primary color
+    </d-card-subtitle>
+    <d-textfield
+      v-model="refreshTime"
+      full-width
+      color="primary"
+      filled
+      label="Refresh Interval"
+      type="number"
+      min="15"
+    >
+      <template v-slot:suffix> seconds</template>
+    </d-textfield>
+    <d-textfield
+      v-model="maxResults"
+      full-width
+      color="primary"
+      filled
+      label="Max Results"
+      type="number"
+      min="5"
+    />
+    <d-card-subtitle class="pl-0 pb-0 font-weight-bold">
+      Zoom
+    </d-card-subtitle>
+    <d-row gap block outlined space-between :wrap="false">
+      <d-icon-button
+        :size="40"
+        name="angle-left-b"
+        type="button"
+        @click="zoomFactor > 0.1 ? (zoomFactor -= 0.1) : null"
+      />
+      <d-button
+        block
+        color="secondary"
+        type="button"
+        style="font-size: 1.5rem"
+        @click="zoomFactor = 1"
+      >
+        {{
+          (Math.round(zoomFactor * 10) / 10).toString().padEnd(3, ".0")
+        }}
+      </d-button>
+      <d-icon-button
+        :size="40"
+        name="angle-right-b"
+        type="button"
+        @click="zoomFactor < 5 ? (zoomFactor += 0.1) : null"
+      />
+    </d-row>
+  </d-column>
+  <d-divider />
+  <d-column gap>
+    <d-card-subtitle class="pl-0 font-weight-bold">
+      Jira Configurations
+    </d-card-subtitle>
+    <d-column v-for="(config, i) in jiraConfigs" :key="i" gap>
+      <JiraSettingsConfig
+        :modelValue="config"
+        @update:modelValue="(e) => (jiraConfigs[i] = e)"
+        @remove="removeConfig(i)"
+      />
+      <d-divider />
+    </d-column>
+    <d-button color="primary" glow type="button" @click="addConfig">
+      <template v-slot:prefix>
+        <d-icon name="plus" />
+      </template>
+      Add Config
+    </d-button>
+  </d-column>
+</template>
+
+<script setup lang="ts">
+import JiraSettingsConfig from "./JiraSettingsConfig.vue";
+import { jiraConfigs, maxResults, refreshTime, theme, zoomFactor } from "../store/jira.store";
+import { v4 as uuidv4 } from "uuid";
+import { ApplicationType } from "../../types/ApplicationType";
+import { computed, inject, onBeforeMount, watch } from "vue";
+import { useStore } from "vuex";
+import { useZoomFactor } from "@vueuse/electron";
+
+const factor = useZoomFactor();
+const store = useStore();
+
+// eslint-disable-next-line no-undef
+const vuelize: Vuelize = inject("vuelize") as Vuelize;
+
+watch(
+  jiraConfigs,
+  (value) => {
+    store.dispatch("setJiraConfigs", value);
+  },
+  { deep: true }
+);
+function addConfig() {
+  jiraConfigs.value.push({
+    id: uuidv4(),
+    name: "",
+    url: "",
+    applicationType: ApplicationType.Bitbucket,
+  });
+}
+
+function removeConfig(index: number) {
+  jiraConfigs.value.splice(index, 1);
+}
+
+const currentTheme = computed(() => (vuelize.theme.dark ? "dark" : "light"));
+watch(
+  () => vuelize.theme.themes[currentTheme.value].primary,
+  (color) => {
+    //@ts-ignore
+    theme.value = { primary: { [currentTheme.value]: color } };
+  }
+);
+
+watch(
+  () => vuelize.theme.dark,
+  (dark) => {
+    theme.value = { isDark: dark };
+  }
+);
+
+watch(
+  () => zoomFactor.value,
+  (factor) => {
+    setElectronZoom(factor);
+  }
+);
+
+function setElectronZoom(value: string | number) {
+  if (typeof value === "string") {
+    factor.value = parseFloat(value);
+  } else {
+    factor.value = value;
+  }
+}
+
+onBeforeMount(() => {
+  setElectronZoom(zoomFactor.value);
+  vuelize.theme.dark = theme.value.isDark as boolean;
+  ["dark", "light"].forEach((mode) => {
+    //@ts-ignore
+    vuelize.theme.themes[mode].primary = theme.value.primary[mode];
+  });
+});
+</script>
+
+<style scoped lang="scss">
+.color-picker {
+  user-select: auto !important;
+  overflow: hidden;
+  padding: 0;
+
+  input[type="color"] {
+    z-index: 1;
+    -webkit-appearance: none;
+    border: none;
+    width: 30px;
+    height: 30px;
+    background: transparent;
+  }
+
+  input[type="color"]::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  input[type="color"]::-webkit-color-swatch {
+    border: none;
+    border-radius: 6px;
+  }
+}
+</style>
diff --git a/src/components/JiraSettingsTabProjects.vue b/src/components/JiraSettingsTabProjects.vue
new file mode 100644
index 0000000..f808b71
--- /dev/null
+++ b/src/components/JiraSettingsTabProjects.vue
@@ -0,0 +1,74 @@
+<template>
+  <d-column gap>
+    <d-column gap>
+      <d-textfield
+        v-model="scrapePath"
+        color="primary"
+        filled
+        full-width
+        label="Scrape Path"
+        placeholder="C:\Path\To\Projects\ or /Path/To/Projects/"
+      >
+        <template v-slot:suffix>
+          <d-button :disabled="!scrapePath" @click="startScraper(scrapePath)">
+            <template v-slot:suffix>
+              <d-icon name="arrow-right" :size="30" />
+            </template>
+            Scrape
+          </d-button>
+        </template>
+      </d-textfield>
+      <JiraProjectBranchRefreshButton />
+    </d-column>
+    <d-column v-for="(project, i) in projects" :key="i" gap>
+      <JiraSettingsProject v-model="projects[i]" @remove="removeProject(i)" />
+      <d-divider />
+    </d-column>
+    <d-button color="primary" glow type="button" @click="addProject">
+      <template v-slot:prefix>
+        <d-icon name="plus" />
+      </template>
+      Add Project
+    </d-button>
+  </d-column>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { projects } from "../store/jira.store";
+import ProjectController from "../controller/ProjectController";
+import { useStore } from "vuex";
+import JiraProjectBranchRefreshButton from "./JiraProjectBranchRefreshButton.vue";
+import JiraSettingsProject from "./JiraSettingsProject.vue";
+
+const store = useStore();
+
+watch(
+  projects,
+  (value) => {
+    store.dispatch("setProjects", value);
+  },
+  { deep: true }
+);
+
+const scrapePath = ref("");
+
+function addProject() {
+  projects.value.push({
+    project: "",
+    path: "",
+    branch: "none",
+    changes: [],
+  });
+}
+
+function removeProject(index: number) {
+  projects.value.splice(index, 1);
+}
+
+function startScraper(path: string) {
+  ProjectController.scrape(path);
+}
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/views/JiraDashboard.vue b/src/views/JiraDashboard.vue
index c72c584..4005cef 100644
--- a/src/views/JiraDashboard.vue
+++ b/src/views/JiraDashboard.vue
@@ -1,10 +1,6 @@
 <template>
   <d-column gap block style="position: relative">
-    <d-card
-      v-if="selectedJiraConfig"
-      background-color="transparent"
-      block
-    >
+    <d-card v-if="selectedJiraConfig" background-color="transparent" block>
       <d-column :wrap="false">
         <d-row
           :wrap="false"
@@ -21,7 +17,11 @@
             style="flex: 1; max-height: 500px; min-height: 500px"
           />
         </d-row>
-        <d-row :wrap="false" style="flex: 1; max-width: calc(100vw - 16px)" align="stretch">
+        <d-row
+          :wrap="false"
+          style="flex: 1; max-width: calc(100vw - 16px)"
+          align="stretch"
+        >
           <JiraList
             class="card card--bottom"
             style="flex: 3"
@@ -53,7 +53,8 @@ import {
   projects,
   currentIssueKey,
   selectedJiraConfig,
-  currentIssue, changeSteps
+  currentIssue,
+  changeSteps,
 } from "../store/jira.store";
 import JiraBaseController from "../controller/JiraBaseController";
 import JiraController from "../controller/JiraController";
@@ -88,9 +89,7 @@ async function setJiraBase(id: string) {
   if (localStorage.getItem(`${id}Cred`)) {
     let cookieCredentials;
     try {
-      cookieCredentials = JSON.parse(
-        localStorage.getItem(`${id}Cred`) || "{}"
-      );
+      cookieCredentials = JSON.parse(localStorage.getItem(`${id}Cred`) || "{}");
     } catch (e) {
       credentialsOpen.value = true;
       return;
@@ -104,7 +103,7 @@ async function setJiraBase(id: string) {
     JiraController.setBase(
       new JiraBaseController({
         ...currentJiraConfig.value,
-        credentials: cookieCredentials
+        credentials: cookieCredentials,
       })
     );
     await JiraController.getAllIssues();
@@ -140,11 +139,6 @@ onMounted(() => {
   ProjectController.subscribeBranches((resProjects) => {
     console.log("projects branches: ", resProjects);
     projects.value = resProjects;
-    vuelize.notify(
-      "Scraper",
-      `Updated ${resProjects.length} Branches`,
-      State.Success
-    );
   });
 
   ProjectController.subscribeChangeStep((resChangeSteps) => {
diff --git a/types/Jira.ts b/types/Jira.ts
index 04d434d..a1f8037 100644
--- a/types/Jira.ts
+++ b/types/Jira.ts
@@ -1,23 +1,30 @@
 import { ChangeState } from "./ChangeState";
 import { ApplicationType } from "./ApplicationType";
 
+export type IDE = {
+  id: string;
+  path: string;
+  name: string;
+};
+
 export type Project = {
-  path: string,
-  project: string,
-  branch: string,
-  changes: Array<Array<string>>,
-}
+  path: string;
+  project: string;
+  branch: string;
+  defaultBranch?: string;
+  changes: Array<Array<string>>;
+  ideId?: IDE["id"];
+};
 
 export type ChangeStep = {
-  step: number,
-  state: ChangeState,
-  path: string,
-}
+  step: number;
+  state: ChangeState;
+  path: string;
+};
 
 export type JiraConfig = {
   id: string;
   url: string;
   name: string;
   applicationType: ApplicationType;
-}
-
+};