From ad29bb0611f80febb26368e2f227281129f5f5d1 Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Sun, 18 Apr 2021 18:13:42 +0200
Subject: [PATCH] fix tags displaying in quest log lists.

---
 svelte-ui/src/components/QuestLog.svelte | 21 +++++++++++++++------
 svelte-ui/src/components/Tag.svelte      | 12 ++++++++++--
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/svelte-ui/src/components/QuestLog.svelte b/svelte-ui/src/components/QuestLog.svelte
index 25fbae2..f4f97fc 100644
--- a/svelte-ui/src/components/QuestLog.svelte
+++ b/svelte-ui/src/components/QuestLog.svelte
@@ -23,16 +23,25 @@
   let ideaProjects: ProjectResult[];
   let project: ProjectResult = null;
 
+  function sortProjects(a: ProjectResult, b: ProjectResult) {
+    const aName = `${a.tags.slice(0, 1).map(t => t+":").join("")} ${a.name}`.trim();
+    const bName = `${b.tags.slice(0, 1).map(t => t+":").join("")} ${b.name}`.trim();
+
+    console.log(aName, bName)
+    
+    return aName.localeCompare(bName);
+  }
+
   $: project = $selectionStore.hash.startsWith("P") ? projects.find(p => p.id === $selectionStore.hash) : null;
   $: expiringProjects = projects.filter(p => p.active && p.endTime).sort((a,b) => Date.parse(a.endTime) - Date.parse(b.endTime));
-  $: activeProjects = projects.filter(p => p.active && !p.endTime).sort((a,b) => a.name.localeCompare(b.name));
-  $: inactiveProjects = projects.filter(p => !p.active).sort((a,b) => a.name.localeCompare(b.name));
+  $: activeProjects = projects.filter(p => p.active && !p.endTime).sort(sortProjects);
+  $: inactiveProjects = projects.filter(p => !p.active).sort(sortProjects);
   $: completedProjects = inactiveProjects.filter(p => p.statusTag === "completed" || p.statusTag == null);
   $: failedProjects = inactiveProjects.filter(p => p.statusTag === "failed" || p.statusTag === "declined");
-  $: onholdProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "onhold");
-  $: ideaProjects = inactiveProjects.filter(p => p.statusTag === "to do" || p.statusTag === "idea");
-  $: backgroundProjects = inactiveProjects.filter(p => p.statusTag === "background");
-  $: progressProjects = inactiveProjects.filter(p => p.statusTag === "progress");
+  $: onholdProjects = inactiveProjects.filter(p => p.statusTag === "on hold" || p.statusTag === "onhold").sort(sortProjects);
+  $: ideaProjects = inactiveProjects.filter(p => p.statusTag === "to do" || p.statusTag === "idea").sort(sortProjects);
+  $: backgroundProjects = inactiveProjects.filter(p => p.statusTag === "background").sort(sortProjects);
+  $: progressProjects = inactiveProjects.filter(p => p.statusTag === "progress").sort(sortProjects);
 
   $: {
     if (project === null && projects.length > 0) {
diff --git a/svelte-ui/src/components/Tag.svelte b/svelte-ui/src/components/Tag.svelte
index ee559f6..e467049 100644
--- a/svelte-ui/src/components/Tag.svelte
+++ b/svelte-ui/src/components/Tag.svelte
@@ -17,7 +17,7 @@
   }
 </script>
 
-<div style={style} class="tag" class:small>{value}</div>
+<div style={style} class="tag" class:small>{value}{small?":":""}</div>
 
 <style>
   div.tag {
@@ -28,6 +28,14 @@
   }
 
   div.tag.small {
-    padding: 0em 0.5ch;
+    font-size: 1em;
+    padding: 0;
+    margin: 0;
+    margin-right: 0.50ch;
+    border: none;
+  }
+
+  :global(div.ql-list-item:hover) div.tag.small {
+    filter: brightness(150%);
   }
 </style>
\ No newline at end of file