✨ Implement additional entry table features

README.md

@@ -20,3 +20,7 @@
 Art assets, typefaces, and other non-original code snippets will be credited here. 
 
 *Credits and links will be updated during development*
+
+#### Vectors
+Sailing Ship Logo: [publicdomainvectors.org](https://publicdomainvectors.org/en/free-clipart/Ship-in-the-restless-sea/38368.html)
+Background Pattern: [bg.ibelick.com](https://bg.ibelick.com)

package.json

@@ -20,6 +20,7 @@
     "drizzle-orm": "^0.29.3",
     "lucia": "^3.0.1",
     "oslo": "^1.0.2",
+    "pg": "^8.11.3",
     "postgres": "^3.4.3",
     "svelte": "^4.2.9",
     "tailwindcss": "^3.4.1",

src/components/EntryRow.astro

@@ -0,0 +1,88 @@
+---
+import * as schema from "../lib/schema";
+
+import dayjs from "dayjs";
+import duration from "dayjs/plugin/duration";
+import relativeTime from "dayjs/plugin/relativeTime";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+
+dayjs.extend(duration);
+dayjs.extend(relativeTime);
+dayjs.extend(localizedFormat);
+
+// initial entry and projects db query from page pass through via props
+const { entry, projects } = Astro.props
+---
+
+<li class="flex justify-between items-center">
+  <div class="flex gap-4 items-center">
+    <input
+      name={`description_${entry.id}`}
+      type="text"
+      value={entry.description}
+      placeholder="Add description"
+      hx-trigger="keyup changed delay:1s"
+      hx-post={`/partials/entry-table/update-entry-description?id=${entry.id}`}
+      hx-vals={`[name='description_${entry.id}']`}
+      hx-swap="outerHTML"
+      hx-target="this"
+      class="border px-4 py-2"
+    />
+
+    <select 
+      id={`project_select_${entry.id}`}
+      name={`project_select_${entry.id}`}
+      hx-post={`/partials/entry-table/update-entry-project?id=${entry.id}`}
+      hx-vals={`[name='project_select_${entry.id}']`}
+      hx-swap="outerHTML"
+      hx-target="this"
+      class="peer h-full w-fit border border-blue-gray-200 bg-transparent px-4 py-2 text-blue-gray-700 outline outline-0 transition-all placeholder-shown:border placeholder-shown:border-blue-gray-200 placeholder-shown:border-t-blue-gray-200 empty:!bg-gray-900 focus:border-neutral-400 focus:outline-0 disabled:border-0 disabled:bg-blue-gray-50"
+    >
+      <option value={null} selected>
+        -- Select Project --
+      </option>
+      {
+        projects.map((p : typeof schema.project.$inferSelect) => 
+          <option id={`project_${p.id}`} value={p.id} selected={p.id === entry.projectId}>
+            { p.name }
+          </option>
+        )
+      }
+      <option 
+        id={`new_project_${entry.id}`}
+        value="new_project"
+      >
+        + New Project
+      </option>
+    </select>
+
+    <label for={`billable_rate_${entry.id}`}>
+      $
+      <input
+        name={`billable_rate_${entry.id}`}
+        type="number"
+        min={0}
+        value={entry.billable_rate ?? 0}
+        hx-trigger="keyup changed delay:1s"
+        hx-post={`/partials/entry-table/update-entry-rate?id=${entry.id}`}
+        hx-vals={`[name='billable_rate_${entry.id}']`}
+        hx-swap="outerHTML"
+        hx-target="this"
+        class="border-b border-neutral-300 w-fit max-w-24 focus:border-neutral-400"
+      />
+      / hr
+    </label>
+  </div>
+
+  <div class="flex gap-4 items-center">
+    <!-- TODO: implement modal to update time -->
+    <button class="tabular-nums transition hover:scale-105 active:scale-95 hover:bg-neutral-200 rounded-xl px-4 py-2">
+      {dayjs.duration(entry.duration ?? 0, "milliseconds").format('HH:mm:ss')}
+    </button>
+
+    <!-- TODO: implement modal for extra options (delete) -->
+    <button class="transition hover:scale-110 active:scale-90 p-2 hover:bg-neutral-200 rounded-full"> 
+      <svg viewBox="0 0 32 32" width="16" height="16" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M19 16a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3zm0 13a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3zm0-26a3 3 0 0 1-3 3 3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3z" fill="#000000"></path></g></svg>
+    </button>
+  </div>
+</li>

src/components/TimerControl.svelte

@@ -39,14 +39,14 @@
 </script>
 
 <div class="flex gap-4 items-center">
+  <p class="tabular-nums">
+    {dayjs.duration(time_lapsed, "seconds").format('HH:mm:ss')}
+  </p>
+
   <button 
     on:click={() => is_running = !is_running}
-    class="inline-flex h-12 items-center justify-center rounded-md bg-white px-6 font-medium text-black border transition active:scale-95"
+    class="inline-flex h-12 items-center justify-center rounded-md bg-black px-6 font-semibold text-white transition hover:scale-105 active:scale-95"
   >
     { is_running ? "End" : "Start" }
   </button>
-
-  <p>
-    {dayjs.duration(time_lapsed, "seconds").format('HH:mm:ss')}
-  </p>
 </div>

src/layouts/SiteLayout.astro

@@ -1,7 +1,6 @@
 ---
 const { title } = Astro.props;
 const user = Astro.locals.user;
-console.log({ user });
 ---
 
 <html lang="en">
@@ -14,24 +13,32 @@ console.log({ user });
 		<title>{ title }</title>
 	</head>
 	<body class="font-satoshi">
-    <nav class="flex justify-between w-full h-fit px-8 py-4">
-      <a href="/" class="text-2xl font-cabinet inline-flex h-12 items-center justify-center rounded-md bg-white px-6 font-bold text-black border transition active:scale-95">Gust</a>
+    <nav class="flex justify-between w-full h-fit px-8 py-4 items-center">
+      <a href="/" class="w-fit text-3xl transition gap-4 hover:scale-105 active:scale-95 font-cabinet inline-flex items-center justify-center rounded-md bg-white px-6 font-bold text-black">
+        <img src="/SailingShip7.svg" class="w-8"/> 
+      </a>
       <div class="flex gap-8">
         { !user ? 
-          <a href="/auth/google" class="inline-flex h-12 items-center justify-center rounded-md bg-white px-6 font-medium text-black border transition active:scale-95">Google</a> 
+          <a href="/auth/google" class="inline-flex h-12 items-center justify-center rounded-md bg-black px-6 font-semibold text-white transition hover:scale-105 active:scale-95">Sign in with Google</a> 
           : (
             <>
               <form method="POST" action="/logout">
-                <button type="submit" class="inline-flex h-12 items-center justify-center rounded-md bg-white px-6 font-medium text-black border transition active:scale-95">Logout</button>
+                <button type="submit" class="inline-flex h-12 items-center justify-center rounded-md bg-white px-6 font-medium text-black border transition hover:scale-105 active:scale-95">Logout</button>
               </form>
-              <a href="/app/dashboard" class="inline-flex h-12 items-center justify-center rounded-md bg-white px-6 font-medium text-black border transition active:scale-95">Dashboard</a> 
+              <a href="/app/dashboard" class="inline-flex h-12 items-center justify-center rounded-md bg-black px-6 font-semibold text-white transition hover:scale-105 active:scale-95">Dashboard</a> 
             </>
           )
         }
       </div>
     </nav>
+
+    <!-- backgrounds from bg.ibelick.com -->
     <div class="fixed left-0 top-0 -z-10 h-full w-full">
+      <!-- light mode -->
       <div class="absolute inset-0 -z-10 h-full w-full bg-white bg-[radial-gradient(#e5e7eb_1px,transparent_1px)] [background-size:16px_16px]"></div>
+      <!-- TODO: implement dark mode
+        <div class="absolute top-0 z-[-2] h-screen w-screen bg-[#000000] bg-[radial-gradient(#ffffff33_1px,#00091d_1px)] bg-[size:20px_20px]"></div>
+      -->
     </div>
     <slot />
 	</body>
@@ -48,4 +55,3 @@ console.log({ user });
     src: url("/Satoshi-Variable.woff2")
   }
 </style>
-