Include abilities and modifiers in navigation.

src/sources/ability.ts

@@ -51,6 +51,7 @@ export interface TaskListTemplate
 
 export interface Modifier
 {
+  Name:string // Does not exist in data
   BehaviorFlagList?:string[]
   UseSnapshotEntity?:boolean
   EnterBattlePriority?:string
@@ -373,12 +374,22 @@ export function findTaskTemplate(templateName:string, expressionContext:Expressi
 async function getAbilities(commitId:string, path:string) : Promise<AbilityConfig>
 {
   const result = await retrieveJson(path, commitId, false) as AbilityConfig
+  for (const ability of result.AbilityList)
+    if (ability.Modifiers)
+      for (const [name, modifier] of Object.entries(ability.Modifiers))
+        modifier.Name = name
+  if (result.GlobalModifiers)
+    for (const [name, modifier] of Object.entries(result.GlobalModifiers))
+      modifier.Name = name
   return result
 }
 
 async function getModifiers(commitId:string, path:string) : Promise<ModifierConfig>
 {
   const result = await retrieveJson(path, commitId, false) as ModifierConfig
+  if (result.ModifierMap)
+  for (const [name, modifier] of Object.entries(result.ModifierMap))
+    modifier.Name = name
   return result
 }
 

src/views/abilities/AnyAbility.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-  import ProvideEmptyContext from './components/ProvideEmptyContext.vue';
+  import ProvideNeutralContext from './components/ProvideNeutralContext.vue';
   import Ability from './Ability.vue';
 
   defineProps<{commitId:string, abilityId:string}>()
 </script>
 
 <template> 
   <main class="panel">
-    <ProvideEmptyContext :commitId="commitId">
+    <ProvideNeutralContext :commitId="commitId">
       <Ability :abilityId="abilityId" />
-    </ProvideEmptyContext>
+    </ProvideNeutralContext>
   </main>
 </template>
 

src/views/abilities/AnyModifier.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-  import ProvideEmptyContext from './components/ProvideEmptyContext.vue';
+  import ProvideNeutralContext from './components/ProvideNeutralContext.vue';
   import Modifier from './Modifier.vue';
 
   defineProps<{commitId:string, modifierId:string}>()
 </script>
 
 <template> 
   <main class="panel">
-    <ProvideEmptyContext :commitId="commitId">
+    <ProvideNeutralContext :commitId="commitId">
       <Modifier :modifierId="modifierId" />
-    </ProvideEmptyContext>
+    </ProvideNeutralContext>
   </main>
 </template>
 

src/views/abilities/StatusAbility.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-  import ProvideEmptyContext from './components/ProvideEmptyContext.vue';
+  import ProvideNeutralContext from './components/ProvideNeutralContext.vue';
   import Ability from './Ability.vue';
 
   defineProps<{commitId:string, abilityId:string}>()
 </script>
 
 <template> 
   <main class="panel">
-    <ProvideEmptyContext :commitId="commitId" abilityRouteName="statusAbility" modifierRouteName="statusModifier">
+    <ProvideNeutralContext :commitId="commitId" abilityRouteName="statusAbility" modifierRouteName="statusModifier">
       <Ability :abilityId="abilityId" />
-    </ProvideEmptyContext>
+    </ProvideNeutralContext>
   </main>
 </template>
 

src/views/abilities/StatusModifier.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-  import ProvideEmptyContext from './components/ProvideEmptyContext.vue';
+  import ProvideNeutralContext from './components/ProvideNeutralContext.vue';
   import Modifier from './Modifier.vue';
 
   defineProps<{commitId:string, modifierId:string}>()
 </script>
 
 <template> 
   <main class="panel">
-    <ProvideEmptyContext :commitId="commitId" abilityRouteName="statusAbility" modifierRouteName="statusModifier">
+    <ProvideNeutralContext :commitId="commitId" abilityRouteName="statusAbility" modifierRouteName="statusModifier">
       <Modifier :modifierId="modifierId" />
-    </ProvideEmptyContext>
+    </ProvideNeutralContext>
   </main>
 </template>
 

src/views/abilities/components/ProvideEmptyContext.vue → src/views/abilities/components/ProvideNeutralContext.vue

@@ -32,7 +32,7 @@
 </script>
 
 <template>
-  <div class="nocontext minor">(Context is missing)</div>
+  <div class="nocontext minor">(No Context)</div>
   <slot></slot>
 </template>
 

src/views/navigation/AbilityNav.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { ref, computed, inject, Ref, } from 'vue'
+  import { RouterLink } from 'vue-router';
+  import NavItem from '@/components/NavItem.vue'
+  import { Ability, TaskContext, TaskContextType, getTaskContext } from '@/sources/ability';
+
+  const commitId = inject<string>('commitId') as string
+  const search = inject<Ref<string>>('search') as Ref<string>
+
+  const taskContext = ref<TaskContext>(await getTaskContext(commitId, TaskContextType.All))
+  const abilitiesSearchResults = computed(() => allAbilities())
+
+  function allAbilities() : Ability[]
+  {
+    return Object.values(taskContext.value.Abilities)
+      .filter(v => v.Name.toLowerCase().includes(search.value.toLowerCase()))
+      .sort((a, b) => a.Name > b.Name ? 1 : -1)
+  }
+</script>
+
+<template>
+  <NavItem v-for="ability in abilitiesSearchResults" :key="ability.Name">
+    <RouterLink :to="{ name:'ability', params:{ commitId: commitId, abilityId: ability.Name }}">
+      <span :title="ability.Name">{{ ability.Name }}</span>
+    </RouterLink>
+  </NavItem>
+</template>
+
+<style scoped>
+</style>

src/views/navigation/CommitNav.vue

@@ -1,11 +1,15 @@
 <script setup lang="ts">
   import { ref, provide, computed, } from 'vue'
   import { useRoute } from 'vue-router'
+  
   import AvatarNav from './AvatarNav.vue'
   import MonsterNav from './MonsterNav.vue'
   import EquipmentNav from './EquipmentNav.vue'
   import RelicSetNav from './RelicSetNav.vue'
   import StatusNav from './StatusNav.vue'
+  import AbilityNav from './AbilityNav.vue'
+  import ModifierNav from './ModifierNav.vue'
+
   import NavTree from '@/components/NavTree.vue'
   import NavItem from '@/components/NavItem.vue'
 
@@ -52,13 +56,25 @@
             <StatusNav />
           </NavTree>
         </NavItem>
+        <NavItem> 
+          <NavTree :startsOpen="mainNav == 'Ability'">
+            <template #header>Abilities</template>
+            <AbilityNav />
+          </NavTree>
+        </NavItem>
+        <NavItem>
+          <NavTree :startsOpen="mainNav == 'Modifier'">
+            <template #header>Modifiers</template>
+            <ModifierNav />
+          </NavTree>
+        </NavItem>
       </NavTree>
     </section>
 
     <hr />
 
     <section class="subnav">
-        <slot />
+      <slot />
     </section>
 
   </nav>

src/views/navigation/ModifierNav.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+  import { ref, computed, inject, Ref, } from 'vue'
+  import { RouterLink } from 'vue-router';
+  import NavItem from '@/components/NavItem.vue'
+  import {  Modifier, TaskContext, TaskContextType, getTaskContext } from '@/sources/ability';
+
+  const commitId = inject<string>('commitId') as string
+  const search = inject<Ref<string>>('search') as Ref<string>
+
+  const taskContext = ref<TaskContext>(await getTaskContext(commitId, TaskContextType.All))
+  const modifiersSearchResults = computed(() => allModifiers())
+
+  function allModifiers() : Modifier[]
+  {
+    return Object.values(taskContext.value.Modifiers)
+      .filter(v => v.Name.toLowerCase().includes(search.value.toLowerCase()))
+      .sort((a, b) => a.Name > b.Name ? 1 : -1)
+  }
+</script>
+
+<template>
+  <NavItem v-for="modifier in modifiersSearchResults" :key="modifier.Name">
+    <RouterLink :to="{ name:'modifier', params:{ commitId: commitId, modifierId: modifier.Name }}">
+      <span :title="modifier.Name">{{ modifier.Name }}</span>
+    </RouterLink>
+  </NavItem>
+</template>
+
+<style scoped>
+</style>