has tiers form is getting there...

src/App.svelte

@@ -1,6 +1,7 @@
 <script>
  import SpTitle from './SpTitle.svelte'
  import SpHasTiers from './SpHasTiers.svelte'
+ import SpHasWhat from './SpHasWhat.svelte'
  import SpHasCandidates from './SpHasCandidates.svelte'
  import { onMount } from 'svelte';
  let v = "loading...";
@@ -8,10 +9,11 @@
  let relpermalink = "";
  let protocol = "";
  let title = "Foo bar";
- let tiers = [{file:"", title:""}];
+ let tiers = [];
  let tier = {};
  let hastiers = "";
  let candidates = [];
+ let hases = [];
  
  function keyUp(e) {
    if (e.key == "Escape") {
@@ -26,7 +28,15 @@
     }
    return Array.from(diff)
  }
- 
+
+ function newHasTiers(h) {
+   hastiers = h.detail.substring(1)
+   tiers = []
+   if (hastiers != "Has new") {
+     candidates = METASP[hastiers].tiers
+   }
+ }
+
  function loadHugoPageMetadata() {
    var el = document.createElement('script');
    el.onload = ()=> {
@@ -38,6 +48,7 @@
      relpath = repo.path;
      relpermalink = repo.relpermalink
      protocol = document.location.protocol.substring(0,4)
+     hases = Object.keys(METASP)
      let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
      title = repo.frontmatter[tkey]
      let xastiers = Object.keys(repo.frontmatter).filter(t => t.toLowerCase().startsWith("has_"))
@@ -74,17 +85,16 @@
      }
  }
  
- onMount(()=> {loadHugoPageMetadata()}) 
+ onMount(()=> {loadHugoPageMetadata()})
 </script>
 
 <svelte:window on:keyup={keyUp}/>
 <main id="sandpoints">
   <form>
     <SpTitle title={title} />
-    {#if hastiers}
+    <SpHasWhat on:hasTiersSelected={newHasTiers} hases={hases} hastiers={hastiers} />
     <SpHasTiers on:addToCandidatesRemoveFromTiers={addToCandidatesRemoveFromTiers} hastiers={hastiers} candidates={candidates} tiers={tiers}/>
     <SpHasCandidates on:addToTiersRemoveFromCandidates={addToTiersRemoveFromCandidates} candidates={candidates} />
-    {/if}
     <label for="content">Content:</label>
     <textarea bind:value={v} oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"'></textarea>
     {#if document.location.protocol.substring(0,4) != "file"}

src/SpHasCandidates.svelte

@@ -19,10 +19,11 @@
  }
 </script>
 
-
+{#if candidates.length > 0}
 <select class="selecttier" bind:value>
   <option id="addnew" value="1" disabled selected>Add new...</option>
   {#each candidates as tier (tier.file)}
     <option title="{tier.title}" value={tier.file}>{tier.file} {#if tier.title.length < 70}({tier.title}){:else}({tier.title.slice(0, 68) + '…'}){/if}</option>
   {/each}
 </select>
+{/if}

src/SpHasTiers.svelte

@@ -20,7 +20,7 @@
 
 </script>
 
-<label for="hastiers">Has {hastiers}:</label>
+{#if tiers.length >0}
 <div class="tierbox">
   {#each tiers as tier, i (tier.file)}
     <div class="tierline">
@@ -35,3 +35,4 @@
     </div>
   {/each}
 </div>
+{/if}

src/SpHasWhat.svelte

@@ -0,0 +1,31 @@
+<script>
+ import { createEventDispatcher } from 'svelte';
+ import { afterUpdate } from 'svelte';
+ export let hases;
+ export let hastiers;
+ let value;
+ const dispatch = createEventDispatcher();
+
+ afterUpdate(() => {
+   let optsel = document.getElementById(hasNew)
+   if (hastiers=="" && optsel) {
+     optsel.selected = 'selected';
+   } else if (hastiers != "") {
+     let optsel = document.getElementById('_' + hastiers)
+     optsel.selected = 'selected'
+   }
+ });
+
+$: {
+   if (value && value.startsWith("_")) {
+     dispatch("hasTiersSelected", value)
+   }
+ }
+</script>
+
+<select id="selecthas" class="selecthas" bind:value>
+  <option id="hasNew" title="Has new" value="hasNew">Has new...</option>
+  {#each hases as has}
+    <option id="{'_' + has}" class="hasoption" title="{has}" value={'_' + has}>Has {has}:</option>
+  {/each}
+</select>