Move selected state out of store and into route

2 files changed, 21 insertions, 19 deletions

diff --git a/components/Editor/EditorSidebarCategory.vue b/components/Editor/EditorSidebarCategory.vue
index 7153b92..071ebc8 100644
--- a/components/Editor/EditorSidebarCategory.vue
+++ b/components/Editor/EditorSidebarCategory.vue
@@ -13,6 +13,7 @@ const { category } = toRefs(props);
 const expanded = ref(true);
 
 const sessionStore = useSessionStore();
+const route = useRoute();
 
 const questsInCategory = computed(() => {
   return sessionStore.getQuestsInCategory(category.value.id);
@@ -23,21 +24,22 @@ const expandCategory = () => {
 };
 
 const setSelectedCategory = () => {
-  sessionStore.setEditorSelected('Category', category.value.id);
+  navigateTo({ path: `/category/${category.value.id}` })
 };
 
 const selected = computed(() => {
-  return sessionStore.editor.selected.type === 'Category' && sessionStore.editor.selected.id === category.value.id;
+  return route.path.startsWith('/category') && route.params.id === category.value.id;
 });
 </script>
 
 <template>
-  <div id="category-container" :class="{selected: selected}">
+  <div id="category-container" :class="{ selected: selected }">
     <span id="category-title" @click="setSelectedCategory">
-      <font-awesome-icon @click.stop="expandCategory" class="category-icon" :icon="expanded ? ['fas', 'fa-caret-down'] : ['fas', 'fa-caret-up']"/> 
+      <font-awesome-icon @click.stop="expandCategory" class="category-icon"
+        :icon="expanded ? ['fas', 'fa-caret-down'] : ['fas', 'fa-caret-up']" />
       <span id="category-name">
-        <span id="category-display-name">{{ stripColorCodes(category.display.name) }}</span> 
-        <code id="category-display-id">{{ category.id }}</code> 
+        <span id="category-display-name">{{ stripColorCodes(category.display.name) }}</span>
+        <code id="category-display-id">{{ category.id }}</code>
       </span>
     </span>
   </div>
@@ -52,19 +54,19 @@ const selected = computed(() => {
   padding: 0.5rem 1rem;
   transition: background-color 0.3s;
   border-bottom: 1px solid var(--color-border-soft);
-  
+
   #category-title {
     display: flex;
     align-items: center;
     margin: 0;
     gap: 1rem;
     font-size: 1.1rem;
-    
+
     #category-name {
       display: flex;
       flex-direction: column;
       align-items: left;
-      
+
       #category-display-id {
         font-size: 0.8rem;
         color: var(--color-text-mute);
@@ -76,7 +78,7 @@ const selected = computed(() => {
 .selected {
   background-color: var(--color-primary-mute);
 }
-    
+
 #quests {
   background-color: var(--color-background-mute);
   border-bottom: 1px solid var(--color-border-soft);
diff --git a/components/Editor/EditorSidebarQuest.vue b/components/Editor/EditorSidebarQuest.vue
index baf06f1..a7b3e3f 100644
--- a/components/Editor/EditorSidebarQuest.vue
+++ b/components/Editor/EditorSidebarQuest.vue
@@ -9,24 +9,24 @@ const props = defineProps<{
 
 const { quest } = toRefs(props);
 
-const sessionStore = useSessionStore();
+const route = useRoute();
 
 const setSelectedQuest = () => {
-  sessionStore.setEditorSelected('Quest', quest.value.id);
+  navigateTo({ path: `/quest/${quest.value.id}` })
 };
 
 const selected = computed(() => {
-  return sessionStore.editor.selected.type === 'Quest' && sessionStore.editor.selected.id === quest.value.id;
+  return route.path.startsWith('/quest') && route.params.id === quest.value.id;
 });
 </script>
 
 <template>
-  <div id="quest-container" @click.stop="setSelectedQuest" :class="{selected: selected}">
+  <div id="quest-container" @click.stop="setSelectedQuest" :class="{ selected: selected }">
     <span id="quest-title">
-      <font-awesome-icon class="quest-icon" :icon="['far', 'fa-compass']"/> 
+      <font-awesome-icon class="quest-icon" :icon="['far', 'fa-compass']" />
       <span id="quest-name">
-        <span id="quest-display-name">{{ stripColorCodes(quest.display.name) }}</span> 
-        <code id="quest-display-id">{{ quest.id }}</code> 
+        <span id="quest-display-name">{{ stripColorCodes(quest.display.name) }}</span>
+        <code id="quest-display-id">{{ quest.id }}</code>
       </span>
     </span>
   </div>
@@ -44,12 +44,12 @@ const selected = computed(() => {
     margin: 0;
     gap: 0.5rem;
     font-size: 0.8rem;
-    
+
     #quest-name {
       display: flex;
       flex-direction: column;
       align-items: left;
-      
+
       #quest-display-id {
         font-size: 0.6rem;
         color: var(--color-text-mute);