add support for project inactivity, added new checkbox component.

svelte-ui/src/components/Checkbox.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import Icon from "./Icon.svelte";
+
+  export let checked = false;
+  export let centered = false;
+  export let disabled = false;
+  export let label = "(Missing label property)";
+
+  function handleClick() {
+    if (!disabled) {
+      checked = !checked;
+    }
+  }
+</script>
+
+<div class="checkbox" class:centered on:click={handleClick}>
+  <div class="box" class:disabled class:checked class:unchecked={!checked}>
+    <Icon name="check" />
+  </div>
+  <div class="label">{label}</div>
+</div>
+
+<style>
+  div.checkbox {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    margin-top: 0.5em;
+    margin-bottom: 1em;
+  }
+  div.checkbox.centered {
+    margin: auto
+  }
+
+  div.box {
+    border: 0.5px solid;
+    padding: 0.025em 0.5ch;
+    padding-top: 0.25em;
+    background-color: #111;
+    color: #555;
+    font-size: 1.25em;
+  }
+  div.box.checked {
+    color: #fC1;
+    background-color: #5c4d20;
+  }
+  div.box.disabled {
+    color: #777;
+    background-color: #444;
+  }
+
+  div.box.unchecked :global(*) {
+    opacity: 0;
+  }
+
+  div.label {
+    margin: auto 0;
+    margin-left: 1ch;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+  }
+</style>

svelte-ui/src/components/ProjectEntry.svelte

@@ -25,7 +25,7 @@
 </script>
 
 <div class="project">
-  <div class="icon"><Icon block name={iconName} /></div>
+  <div class="icon" class:inactive={!project.active}><Icon block name={iconName} /></div>
   <div class="body">
     <div class="header">
       <div class="name">{project.name}</div>
@@ -66,6 +66,9 @@
     padding-top: 0.125em;
     color: #333;
   }
+  div.icon.inactive {
+    color: #484;
+  }
   div.body {
     display: flex;
     flex-direction: column;
@@ -91,4 +94,13 @@
     padding: 0;
     margin: 0.25em 0;
   }
+
+  @media screen and (max-width: 550px) {
+    div.icon {
+      color: #777;
+    }
+    div.icon.inactive {
+      color: #78ff78;
+    }
+  }
 </style>