getting there..

public/global.css

@@ -93,3 +93,11 @@ textarea {
   width: 50%;
   cursor: pointer;
 }
+
+.tierline {
+  display: flex;
+}
+
+.buttons {
+  margin-left: auto;
+}

src/App.svelte

@@ -39,13 +39,15 @@
      relpermalink = repo.relpermalink
      protocol = document.location.protocol.substring(0,4)
     
-     let xastiers = Object.keys(repo.frontmatter).filter(t => t.startsWith("has_"))
      let tkey = Object.keys(repo.frontmatter).filter(t => t.toLowerCase() == "title")[0]
      title = repo.frontmatter[tkey]
-     hastiers = xastiers[0].substr(4)
-     tiers = METASP[xastiers[0].split("has_")[1]].tiers.filter(t => repo.frontmatter[xastiers].includes(t.file)).reverse()
-     if (xastiers.length == 1) {
-       candidates = diffArrr(METASP[xastiers[0].split("has_")[1]].tiers, tiers)
+     let xastiers = Object.keys(repo.frontmatter).filter(t => t.startsWith("has_"))
+     if (xastiers.length > 0) {
+       hastiers = xastiers[0].substr(4)
+       tiers = METASP[xastiers[0].split("has_")[1]].tiers.filter(t => repo.frontmatter[xastiers].includes(t.file)).reverse()
+       if (xastiers.length == 1) {
+         candidates = diffArrr(METASP[xastiers[0].split("has_")[1]].tiers, tiers)
+       }
      }
    }
    el.src = `../js/repo/${location.hash.substring(1)}.js`
@@ -78,8 +80,10 @@
 <main id="sandpoints">
   <form>
     <SpTitle title={title} />
+    {#if 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

@@ -23,6 +23,6 @@
 <select class="selecttier" bind:value>
   <option id="addnew" value="1" disabled selected>Add new...</option>
   {#each candidates as tier (tier.file)}
-    <option value={tier.file}>{tier.file}</option>
+    <option title="{tier.title}" value={tier.file}>{tier.file} ({tier.title})</option>
   {/each}
 </select>

src/SpHasTiers.svelte

@@ -24,10 +24,14 @@
 <div class="tierbox">
   {#each tiers as tier, i (tier.file)}
     <div class="tierline">
-      <input type="text" name="has_{hastiers}[]" class="hasinput" value="{tier.file}">
-      <button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == tiers.length ? true:false}>⇓</button>
-      <button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0  ? true:false}>⇑</button>
-      <button type="button" on:click="{removeTier(tier)}">×</button>
+      <div class="filetitle">
+        <input type="text" name="has_{hastiers}[]" class="hasinput" value="{tier.file}"><span class="tiertitle">({tier.title})</span>
+      </div>
+      <div class="buttons">
+        <button type="button" class="buttondown" on:click="{swapTier(tier, 1)}" disabled={i+1 == tiers.length ? true:false}>⇓</button>
+        <button type="button" class="buttonup" on:click="{swapTier(tier, -1)}" disabled={i == 0  ? true:false}>⇑</button>
+        <button type="button" on:click="{removeTier(tier)}">×</button>
+      </div>
     </div>
   {/each}
 </div>

src/SpTitle.svelte

@@ -3,4 +3,4 @@
 </script>
 
 <label for="title">Title:</label>
-<input type="text" value="{title}">
+<input type="text" name="title" value="{title}">