clean up task modal and add non-segmented progress bars.

svelte-ui/src/components/ItemSelect.svelte

@@ -3,6 +3,7 @@
 
   export let value = "";
   export let name = "";
+  export let disabled = false;
 
   $: {
     if ($groupStore.stale && !$groupStore.loading) {
@@ -20,7 +21,7 @@
   }
 </script>
 
-<select name={name} bind:value={value} disabled={$groupStore.loading}>
+<select name={name} bind:value={value} disabled={disabled || $groupStore.loading}>
   {#each $groupStore.groups as group (group.id)}
     <optgroup label={group.name}>
       {#each group.items as item (item.id)}

svelte-ui/src/components/Modal.svelte

@@ -169,6 +169,10 @@ div.modal :global(input), div.modal :global(select), div.modal :global(textarea)
 div.modal :global(select) {
   padding-left: 0.5ch;
 }
+div.modal :global(select:disabled) {
+  background: #4a4a4a;
+  color: #aaa;
+}
 div.modal :global(input:disabled) {
   background: #444;
   color: #aaa;

svelte-ui/src/components/Progress.svelte

@@ -18,6 +18,7 @@
   let onClass = COLORS[1];
   let ons = 0;
   let offs = 1;
+  let nonSegmented = false;
 
   $: {
     let level = Math.floor(count / target);
@@ -41,16 +42,27 @@
       onClass = "green"
       offClass = "none"
     }
+
+    // Mark it non-segmented if the target is too high. This prevents a clunky progress bar,
+    // or a browser freeze if you set the target very high. 
+    if (target > 50) {
+      nonSegmented = true;
+    }
   }
 </script>
 
 <div class="bar" class:thin>
-  {#each {length: ons} as _}
-    <div class={"on " + onClass}></div>
-  {/each}
-  {#each {length: offs} as _}
-    <div class={"off " + offClass}></div>
-  {/each}
+  {#if nonSegmented}
+    <div style="flex: {ons}" class={"non-segmented on " + onClass}></div>
+    <div style="flex: {offs}" class={"non-segmented off " + offClass}></div>
+  {:else}
+    {#each {length: ons} as _}
+      <div class={"on " + onClass}></div>
+    {/each}
+    {#each {length: offs} as _}
+      <div class={"off " + offClass}></div>
+    {/each}
+  {/if}
 </div>
 
 <style>
@@ -71,6 +83,11 @@
     border: 1px solid #000;
   }
 
+  div.non-segmented {
+    flex-grow: inherit;
+    flex-basis: inherit;
+  }
+
   div.none { background-color: #555555; }
   div.bronze { background-color: #f4b083; }
   div.silver { background-color: #d8dce4; }

svelte-ui/src/components/ProjectEntry.svelte

@@ -69,7 +69,7 @@
     <div class="list" class:full={showAllOptions}>
       {#each project.tasks as task (task.id)}
         {#if !hideInactive || task.active}
-          <TaskEntry showAllOptions={showAllOptions} task={task} />
+          <TaskEntry showAllOptions={showAllOptions} task={task} project={project} />
         {/if}
       {/each}
     </div>

svelte-ui/src/components/TaskEntry.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from "svelte";
-  import { link } from "svelte-routing";
+  import type Project from "../models/project";
   import type { TaskResult } from "../models/task";
   import type { ModalData } from "../stores/modal";
   import DateSpan from "./DateSpan.svelte";
@@ -10,6 +10,7 @@
   import OptionRow from "./OptionRow.svelte";
 
   export let task: TaskResult = null;
+  export let project: Project = null;
   export let showAllOptions: boolean = false;
 
   let showLogs = false;
@@ -28,9 +29,9 @@
     showLogs = !showLogs;
   }
 
-  $: mdLogAdd = {name: "log.add", task};
-  $: mdTaskEdit = {name: "task.edit", task};
-  $: mdTaskDelete = {name: "task.delete", task};
+  $: mdLogAdd = {name: "log.add", task: {...task, project}};
+  $: mdTaskEdit = {name: "task.edit", task: {...task, project}};
+  $: mdTaskDelete = {name: "task.delete", task: {...task, project}};
 </script>
 
 <div class="task">