squashme

frontend/src/app.css

@@ -197,4 +197,11 @@
     @apply rounded-md;
     @apply p-1;
   }
+
+  ul {
+    @apply list-inside list-disc;
+  }
+  ol {
+    @apply list-inside list-decimal;
+  }
 }

frontend/src/routes/todos/[todo]/+page.svelte

@@ -1,11 +1,76 @@
 <script lang="ts">
   import type { TodoDetailPage } from './+page';
+  import type { TodoItem } from '$lib/api/types';
   import { markdownToHtml } from '$lib/utils/markdown';
 
   export let data: TodoDetailPage;
+
+  let todo: TodoItem = data.todo;
+  let editingEnabled = true;
+
+  function adjustTextareaRows(event: InputEvent) {
+    const textarea = event.target as HTMLTextAreaElement;
+    const scrollHeight = textarea.scrollHeight;
+
+    const computedStyle = getComputedStyle(textarea);
+    const lineHeight = parseFloat(computedStyle.lineHeight);
+    const paddingTop = parseFloat(computedStyle.paddingTop);
+    const paddingBottom = parseFloat(computedStyle.paddingBottom);
+
+    const contentHeight = scrollHeight - paddingTop - paddingBottom;
+    const rows = Math.ceil(contentHeight / lineHeight);
+
+    textarea.rows = rows
+  }
+
+
+  async function handleFormSubmit() {
+
+  }
 </script>
 
-<h1>{data.todo.title}</h1>
-<div>
-  {@html markdownToHtml(data.todo.description)}
+<div class="flex flex-col w-full h-full p-4 sm:p-8 gap-4 max-w-7xl">
+  <form action="" method="post" on:submit={handleFormSubmit}>
+    <fieldset>
+      <div class="field-pair">
+        <textarea id="title" bind:value={todo.title} disabled={!editingEnabled} on:input={adjustTextareaRows} rows="1" cols="1"></textarea>
+        <label for="title">Title</label>
+      </div>
+    </fieldset>
+    <div class="text-display">
+      {@html markdownToHtml(data.todo.description)}
+    </div>
+  </form>
 </div>
+
+<style>
+  h1 {
+    @apply font-semibold;
+    @apply w-full;
+  }
+  span.title-heading {
+    @apply text-xl text-secondary font-bold;
+  }
+
+  .text-display {
+    @apply text-start;
+    @apply border-2 border-secondary rounded-md;
+    @apply w-full p-4;
+  }
+
+  div.field-pair {
+    @apply flex flex-col gap-0.5;
+  }
+
+  input {
+    @apply w-full;
+  }
+  input:disabled {
+    @apply bg-background border-none;
+  }
+
+  .field-pair label {
+    @apply border-t;
+  }
+
+</style>

frontend/src/routes/users/[user]/+page.svelte

@@ -22,7 +22,7 @@
 
 </script>
 
-<div class="grow flex flex-col items-center gap-y-4 px-4">
+<div class="grow flex flex-col items-center justify-center gap-y-4 px-4">
   {#if user.id === data.user.id}
     <h1>My Profile</h1>
   {:else}

frontend/src/routes/users/[user]/todos/+page.svelte

@@ -44,7 +44,7 @@
 
   const table = {
     caption: user.id === data.user.id ? 'My TODOs' : `${data.user.first_name} ${data.user.last_name}'s TODOs`,
-    columns: columns,
+    columns: user.isAdmin ? columns : columns.slice(1, -1),
     getItemsEndpoint: {
       callable: readTodos,
       args: [