From aceef6edd8bd1663249e9d06fc1d4a063add4689 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Sun, 10 Mar 2024 17:17:01 +0000
Subject: Add more options to sidebar

---
 app.vue                                        | 14 +++++
 components/editor/Sidebar.vue                  | 81 ++++++++++++++++++++++++--
 components/editor/SidebarMainConfiguration.vue | 57 ++++++++++++++++++
 components/editor/task/ConfigurationRow.vue    |  2 +-
 components/editor/task/modal/Create.vue        |  2 +
 pages/config.vue                               | 17 ++++++
 6 files changed, 168 insertions(+), 5 deletions(-)
 create mode 100644 components/editor/SidebarMainConfiguration.vue
 create mode 100644 pages/config.vue

diff --git a/app.vue b/app.vue
index e6d505a..e43ace9 100644
--- a/app.vue
+++ b/app.vue
@@ -1,5 +1,19 @@
 <script setup lang="ts">
 import '~/assets/main.css'
+
+useHead({
+  link: [
+    {
+      rel: 'preconnect',
+      href: 'https://rsms.me/'
+    },
+    {
+      rel: 'stylesheet',
+      href: 'https://rsms.me/inter/inter.css',
+      crossorigin: ''
+    }
+  ]
+})
 </script>
 
 <template>
diff --git a/components/editor/Sidebar.vue b/components/editor/Sidebar.vue
index a46cdbe..20168df 100644
--- a/components/editor/Sidebar.vue
+++ b/components/editor/Sidebar.vue
@@ -5,14 +5,39 @@ import { storeToRefs } from 'pinia';
 const sessionStore = useSessionStore();
 
 const { session } = storeToRefs(sessionStore);
+
+const currentType = ref('quests' as 'quests' | 'items');
+
+const setSelectedType = (type: 'quests' | 'items') => {
+  currentType.value = type;
+}
 </script>
 
 <template>
   <div id="sidebar-container">
-    <EditorSidebarCategory v-for="category in session.categories" :key="category.id" :category="category" />
-    <EditorSidebarQuest
-      v-for="quest in session.quests.filter((q) => (!session.categories.some((c) => c.id === q.options.category)))"
-      :key="quest.id" :quest="quest" />
+    <div id="selector">
+      <span class="option" @click="setSelectedType('quests')" :class="{ selected: currentType === 'quests' }">
+        <span>
+          <font-awesome-icon :icon="['far', 'compass']" />
+          Quests
+        </span>
+      </span>
+      <span class="option" @click="setSelectedType('items')" :class="{ selected: currentType === 'items' }">
+        <span>
+          <font-awesome-icon :icon="['fas', 'cube']" />
+          Items
+        </span>
+      </span>
+    </div>
+    <div id="quests">
+      <EditorSidebarCategory v-for="category in session.categories" :key="category.id" :category="category" />
+      <EditorSidebarQuest
+        v-for="quest in session.quests.filter((q) => (!session.categories.some((c) => c.id === q.options.category)))"
+        :key="quest.id" :quest="quest" />
+    </div>
+    <div id="configuration-container">
+      <EditorSidebarMainConfiguration />
+    </div>
   </div>
 </template>
 
@@ -24,5 +49,53 @@ const { session } = storeToRefs(sessionStore);
   max-height: calc(100vh - 73px);
   background-color: var(--color-background);
   user-select: none;
+  position: relative;
+
+  #selector {
+    display: flex;
+    height: 30px;
+    align-items: center;
+    cursor: pointer;
+
+    .option {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      transition: background-color 0.3s;
+
+      &.selected {
+        background-color: var(--color-background);
+
+        span {
+          font-weight: 700;
+        }
+      }
+
+      &:not(.selected) {
+        background-color: var(--color-background-mute);
+        color: var(--color-text-mute);
+        transition: color 0.3s;
+
+        &:hover {
+          color: var(--color-text)
+        }
+      }
+    }
+  }
+
+  #quests {
+    max-height: calc(100vh - 73px - 46px);
+    overflow-y: scroll;
+  }
+
+  #configuration-container {
+    height: 46px;
+    border-top: 1px solid var(--color-border);
+    position: absolute;
+    bottom: 0;
+    width: 100%
+  }
 }
 </style>
\ No newline at end of file
diff --git a/components/editor/SidebarMainConfiguration.vue b/components/editor/SidebarMainConfiguration.vue
new file mode 100644
index 0000000..c4727c6
--- /dev/null
+++ b/components/editor/SidebarMainConfiguration.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const route = useRoute();
+
+const setSelected = () => {
+  navigateTo({ path: '/config' })
+};
+
+const selected = computed(() => {
+  return route.path.startsWith('/config');
+});
+</script>
+
+<template>
+  <div id="container" :class="{ selected: selected }">
+    <span id="title" @click="setSelected">
+      <font-awesome-icon class="icon" :icon="['fas', 'wrench']" />
+      <span id="name">
+        Configuration
+      </span>
+    </span>
+  </div>
+</template>
+
+<style scoped>
+#container {
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  transition: background-color 0.3s;
+  border-bottom: 1px solid var(--color-border-soft);
+  max-height: 45px;
+  overflow-y: hidden;
+
+  #title {
+    display: flex;
+    align-items: center;
+    margin: 0;
+    gap: 1rem;
+    font-size: 1.1rem;
+
+    #name {
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+    }
+  }
+}
+
+.selected {
+  background-color: var(--color-primary-mute);
+}
+
+#container:hover {
+  background-color: var(--color-hover);
+}
+</style>
\ No newline at end of file
diff --git a/components/editor/task/ConfigurationRow.vue b/components/editor/task/ConfigurationRow.vue
index fa512b6..8194dcd 100644
--- a/components/editor/task/ConfigurationRow.vue
+++ b/components/editor/task/ConfigurationRow.vue
@@ -60,7 +60,7 @@ const addValue = (searchQuery: any) => {
   <div id="task-configuration-row">
     <div id="key">
       <div id="delete" @click="emit('delete')" v-if="!props.required" class="delete">
-        <font-awesome-icon :icon="['fas', 'fa-xmark']" />
+        <font-awesome-icon :icon="['fas', 'xmark']" />
       </div>
       <p id="name" @click="showDescription = !showDescription">{{ props.configKey }}</p>
     </div>
diff --git a/components/editor/task/modal/Create.vue b/components/editor/task/modal/Create.vue
index e3867b6..30e4cca 100644
--- a/components/editor/task/modal/Create.vue
+++ b/components/editor/task/modal/Create.vue
@@ -55,6 +55,8 @@ const newTypeDescription = computed(() => session.getTaskDefinitionByTaskType(ne
           <Button type="solid" :icon="['fas', 'check']" :label="'Confirm'"
             :disabled="unknownTaskType || invalidTaskId || duplicateTaskId"
             @click="emit('add', newId, newType)"></Button>
+
+
         </div>
       </div>
     </template>
diff --git a/pages/config.vue b/pages/config.vue
new file mode 100644
index 0000000..4dfc679
--- /dev/null
+++ b/pages/config.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+definePageMeta({
+  layout: 'editor'
+})
+</script>
+
+<template>
+  <div id="title">
+    <h1>Config</h1>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#title {
+  text-align: center;
+}
+</style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2