draft for tasks

Just/src/App.vue

@@ -12,7 +12,65 @@
           <ui-icon symbol="ChevronDown" :size="16" />
         </button>
       </header>
-<!--      <button type="button" @click="preload">Preload</button>-->
+      <div class="editor">
+        <input type="text" placeholder="Add a task" class="editor-input" />
+        <ui-icon symbol="CirclePlus" class="editor-add-icon" />
+      </div>
+      <ul class="tasks">
+        <li class="task">
+          <label class="task-check">
+            <input type="checkbox" />
+            <span class="task-check-input"></span>
+          </label>
+          <span class="task-text">Haferflocken</span>
+        </li>
+        <li class="task">
+          <label class="task-check">
+            <input type="checkbox" />
+            <span class="task-check-input"></span>
+          </label>
+          <span class="task-text">Cashewkerne</span>
+        </li>
+        <li class="task">
+          <label class="task-check">
+            <input type="checkbox" />
+            <span class="task-check-input"></span>
+          </label>
+          <span class="task-text">Creme (sensitiv)</span>
+        </li>
+        <li class="task">
+          <label class="task-check">
+            <input type="checkbox" />
+            <span class="task-check-input"></span>
+          </label>
+          <span class="task-text">Kreuzkümmel</span>
+        </li>
+        <li class="task">
+          <label class="task-check">
+            <input type="checkbox" />
+            <span class="task-check-input"></span>
+          </label>
+          <span class="task-text">Vanille</span>
+        </li>
+        <li class="task">
+          <label class="task-check">
+            <input type="checkbox" />
+            <span class="task-check-input"></span>
+          </label>
+          <span class="task-text">Parfüm</span>
+        </li>
+        <li class="task is-done">
+          <label class="task-check">
+            <input type="checkbox" checked />
+            <span class="task-check-input">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check task-check-symbol">
+                <path d="M20 6 9 17l-5-5"/>
+              </svg>
+            </span>
+          </label>
+          <span class="task-text">Zahnseide</span>
+        </li>
+      </ul>
     </main>
   </div>
 </template>
@@ -44,11 +102,9 @@
 <style lang="scss" scoped>
   .main
   {
-    padding: var(--space-m) 0;
-
     @media (max-width: 700px)
     {
-      padding: var(--space-m);
+      padding: 0 var(--space-m);
     }
   }
 
@@ -58,6 +114,7 @@
     display: flex;
     align-items: stretch;
     gap: var(--space-s);
+    padding: var(--space-m) 0;
   }
 
   .top-logo
@@ -96,4 +153,99 @@
     gap: var(--space-s);
     font-weight: 500;
   }
+
+  .editor
+  {
+    position: relative;
+    margin-top: var(--space-m);
+  }
+
+  .editor-input
+  {
+    width: 100%;
+    appearance: none;
+    background: var(--color-bg-shade-3);
+    border: 1px solid var(--color-bg-shade-4);
+    border-radius: var(--radius);
+    height: 48px;
+    color: var(--color-text);
+    padding-left: 46px;
+
+    &:focus
+    {
+      outline: none;
+    }
+  }
+
+  .editor-add-icon
+  {
+    position: absolute;
+    left: var(--space-m);
+    top: 50%;
+    height: 20px;
+    margin-top: -10px;
+    stroke-width: 1.5px;
+    color: var(--color-text-dim);
+    pointer-events: none;
+  }
+
+
+  .tasks
+  {
+    list-style: none;
+    padding: 0;
+    padding-left: 1px;
+    padding-top: var(--space);
+  }
+
+  .task
+  {
+    list-style: none;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+  }
+
+  .task-check
+  {
+    display: inline-flex;
+    padding: var(--space-sm) var(--space-m);
+    padding-right: var(--space);
+
+    input
+    {
+      position: absolute;
+      visibility: hidden;
+    }
+  }
+
+  .task-check-input
+  {
+    height: 16px;
+    aspect-ratio: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    border: 2px solid var(--color-text-dim);
+  }
+
+  .task-check-symbol
+  {
+    height: 7px;
+    aspect-ratio: 1;
+    stroke-width: 4px;
+    color: var(--color-text-dim);
+  }
+
+  .task-text
+  {
+    .task.is-done &
+    {
+      color: var(--color-text-dim);
+      text-decoration: line-through;
+      font-weight: 300;
+    }
+  }
 </style>

Just/src/components/ui-contextmenu.vue

@@ -96,7 +96,7 @@
   {
     --v-offset: 0px;
     position: absolute;
-    min-width: 220px;
+    min-width: 180px;
     min-height: 20px;
     background: var(--color-contextmenu-bg);
     border-radius: var(--radius);

Just/src/modules/app-menu.vue

@@ -66,6 +66,7 @@
     padding: var(--space);
     display: grid;
     grid-template-rows: auto 1fr auto;
+    z-index: 3;
 
     @media (max-width: 700px)
     {
@@ -74,6 +75,7 @@
       transform: translateX(-110%);
       transition: transform 0.6s ease;
       pointer-events: none;
+      box-shadow: var(--color-menu-shadow);
 
       &.is-open
       {

Just/src/styles/config.scss

@@ -2,6 +2,7 @@
 :root
 {
   --space-s: 8px;
+  --space-sm: 10px;
   --space-m: 12px;
   --space: 16px;
 

Just/src/styles/main.scss

@@ -56,4 +56,5 @@ button
   border: none;
   color: var(--color-text);
   cursor: pointer;
+  padding: 0;
 }

Just/src/styles/theme.scss

@@ -25,6 +25,7 @@
 
   // menu shades
   --color-menu-bg: var(--color-bg-shade-3);
+  --color-menu-shadow: 3px 6px 32px rgba(0, 0, 0, 0.1);
   --color-menu-item-hover-bg: var(--color-bg-shade-4);
   --color-menu-item-count-bg: var(--color-bg-shade-4);
   --color-menu-item-hover-count-bg: var(--color-bg-shade-5);