.

3 files changed, 218 insertions, 6 deletions

diff --git a/code/app/src/routes/(main)/(app)/projects/+page.svelte b/code/app/src/routes/(main)/(app)/projects/+page.svelte
index 55e9372..e39a886 100644
--- a/code/app/src/routes/(main)/(app)/projects/+page.svelte
+++ b/code/app/src/routes/(main)/(app)/projects/+page.svelte
@@ -20,7 +20,7 @@
     while (i < 101) {
       tempProjects.push({
         id: crypto.randomUUID(),
-        name: faker.word.preposition(),
+        name: faker.lorem.word(),
         start: Temporal.Now.plainDateISO().toLocaleString(),
         description: faker.lorem.words(3),
         members: [],
@@ -31,7 +31,9 @@
     projects.set(tempProjects);
   });
 
-  function goto_project(name: string) {
+  function on_open_project(event) {
+    if (event.code && (event.code !== "Enter" || event.code !== "Space")) return;
+    const name = event.target.innerText;
     const projectId = $projects.find((p) => p.name === name).id;
     goto("/projects/" + projectId);
   }
@@ -59,7 +61,7 @@
   </div>
   <div class="mt-4 sm:mt-0 sm:ml-16 inline-flex gap-1 sm:flex-none">
     <Input icon={MagnifyingGlassIcon} placeholder="Search" bind:value={$filterValue} />
-    <Button text="Create project" href="/projects/new" />
+    <Button text="Create project" href="/projects/create" />
   </div>
 </div>
 <div class="-mx-2 mt-6 rounded-md shadow overflow-auto max-h-[80vh] sm:-mx-6 md:mx-0">
@@ -79,6 +81,7 @@
                     <Render of={cell.render()} />
                     <span
                       on:click={props.sort.toggle}
+                      on:keypress={props.sort.toggle}
                       class="{props.sort.disabled
                         ? 'bg-gray-200 text-gray-900 group-hover:bg-gray-300'
                         : 'invisible text-gray-400 group-hover:visible group-focus:visible'}
@@ -115,7 +118,7 @@
               <Subscribe attrs={cell.attrs()} let:attrs>
                 <td {...attrs} class="whitespace-nowrap px-2 py-2 text-sm">
                   {#if cell.id === "name"}
-                    <span class="link" title="Open project" on:click={() => goto_project(materialisedCell.toString())}>
+                    <span class="link" title="Open project" on:click={on_open_project} on:keypress={on_open_project}>
                       <Render of={materialisedCell} />
                     </span>
                   {:else if cell.id === "status"}
diff --git a/code/app/src/routes/(main)/(app)/projects/new/+page.svelte b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte
index 4c453dc..2b5e7bc 100644
--- a/code/app/src/routes/(main)/(app)/projects/new/+page.svelte
+++ b/code/app/src/routes/(main)/(app)/projects/create/+page.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { useSWR } from "sswr";
-    import { Input, TextArea } from "$lib/components";
+    import { Input, TextArea, Combobox, Button } from "$lib/components";
     import type { ProjectMember } from "$lib/models/projects/ProjectMember";
+    import LL from "$lib/i18n/i18n-svelte";
 
     const formFields = {
         name: {
@@ -40,4 +41,15 @@
         <Input type="date" label="Start" bind:value={formFields.start.value} errorText={formFields.start.error} />
         <Input type="date" label="Stop" bind:value={formFields.stop.value} errorText={formFields.stop.error} />
     </section>
+    <Combobox options={$members} label={$LL.app.members()}>
+        <svelte:fragment slot="no-records">
+            <h1>No members found</h1>
+            {#if !$members?.length}
+                <p>
+                    <a href="/users/create" class="link">Click here</a> to create your first user
+                </p>
+            {/if}
+        </svelte:fragment>
+    </Combobox>
+    <Button text={$LL.submit()} />
 </form>
diff --git a/code/app/src/routes/(main)/(app)/settings/+page.svelte b/code/app/src/routes/(main)/(app)/settings/+page.svelte
index ae6d403..1f0cc67 100644
--- a/code/app/src/routes/(main)/(app)/settings/+page.svelte
+++ b/code/app/src/routes/(main)/(app)/settings/+page.svelte
@@ -1,4 +1,201 @@
 <script lang="ts">
+    import { Input, Button, Switch } from "$lib/components";
 </script>
 
-<h1>Settings</h1>
+<div class="relative mx-auto max-w-4xl md:px-8 xl:px-0">
+    <div class="pt-10 pb-16">
+        <div class="px-4 sm:px-6 md:px-0">
+            <h1 class="text-3xl font-bold tracking-tight text-gray-900">Settings</h1>
+        </div>
+        <div class="px-4 sm:px-6 md:px-0">
+            <div class="py-6">
+                <!-- Tabs -->
+                <div class="lg:hidden">
+                    <label for="selected-tab" class="sr-only">Select a tab</label>
+                    <select
+                        id="selected-tab"
+                        name="selected-tab"
+                        class="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-purple-500 focus:outline-none focus:ring-purple-500 sm:text-sm"
+                    >
+                        <option selected>General</option>
+
+                        <option>Password</option>
+
+                        <option>Notifications</option>
+
+                        <option>Plan</option>
+
+                        <option>Billing</option>
+
+                        <option>Team Members</option>
+                    </select>
+                </div>
+                <div class="hidden lg:block">
+                    <div class="border-b border-gray-200">
+                        <nav class="-mb-px flex space-x-8">
+                            <!-- Current: "border-purple-500 text-purple-600", Default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700" -->
+                            <a href="#" class="border-purple-500 text-purple-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                >General</a
+                            >
+
+                            <a
+                                href="#"
+                                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                >Password</a
+                            >
+
+                            <a
+                                href="#"
+                                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                >Notifications</a
+                            >
+
+                            <a
+                                href="#"
+                                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                >Plan</a
+                            >
+
+                            <a
+                                href="#"
+                                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                >Billing</a
+                            >
+
+                            <a
+                                href="#"
+                                class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm"
+                                >Team Members</a
+                            >
+                        </nav>
+                    </div>
+                </div>
+
+                <!-- Description list with inline editing -->
+                <div class="mt-10 divide-y divide-gray-200">
+                    <div class="space-y-1">
+                        <h3 class="text-lg font-medium leading-6 text-gray-900">Profile</h3>
+                        <p class="max-w-2xl text-sm text-gray-500">
+                            This information will be displayed publicly so be careful what you share.
+                        </p>
+                    </div>
+                    <div class="mt-6">
+                        <dl class="divide-y divide-gray-200">
+                            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
+                                <dt class="text-sm font-medium text-gray-500">Name</dt>
+                                <dd class="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                                    <span class="flex-grow">Chelsea Hagon</span>
+                                    <span class="ml-4 flex-shrink-0">
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Update</button
+                                        >
+                                    </span>
+                                </dd>
+                            </div>
+                            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:pt-5">
+                                <dt class="text-sm font-medium text-gray-500">Photo</dt>
+                                <dd class="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                                    <span class="flex-grow">
+                                        <img
+                                            class="h-8 w-8 rounded-full"
+                                            src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
+                                            alt=""
+                                        />
+                                    </span>
+                                    <span class="ml-4 flex flex-shrink-0 items-start space-x-4">
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Update</button
+                                        >
+                                        <span class="text-gray-300" aria-hidden="true">|</span>
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Remove</button
+                                        >
+                                    </span>
+                                </dd>
+                            </div>
+                            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:pt-5">
+                                <dt class="text-sm font-medium text-gray-500">Email</dt>
+                                <dd class="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                                    <span class="flex-grow">chelsea.hagon@example.com</span>
+                                    <span class="ml-4 flex-shrink-0">
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Update</button
+                                        >
+                                    </span>
+                                </dd>
+                            </div>
+                            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-b sm:border-gray-200 sm:py-5">
+                                <dt class="text-sm font-medium text-gray-500">Job title</dt>
+                                <dd class="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                                    <span class="flex-grow">Human Resources Manager</span>
+                                    <span class="ml-4 flex-shrink-0">
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Update</button
+                                        >
+                                    </span>
+                                </dd>
+                            </div>
+                        </dl>
+                    </div>
+                </div>
+
+                <div class="mt-10 divide-y divide-gray-200">
+                    <div class="space-y-1">
+                        <h3 class="text-lg font-medium leading-6 text-gray-900">Account</h3>
+                        <p class="max-w-2xl text-sm text-gray-500">Manage how information is displayed on your account.</p>
+                    </div>
+                    <div class="mt-6">
+                        <dl class="divide-y divide-gray-200">
+                            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5">
+                                <dt class="text-sm font-medium text-gray-500">Language</dt>
+                                <dd class="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                                    <span class="flex-grow">English</span>
+                                    <span class="ml-4 flex-shrink-0">
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Update</button
+                                        >
+                                    </span>
+                                </dd>
+                            </div>
+                            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:pt-5">
+                                <dt class="text-sm font-medium text-gray-500">Date format</dt>
+                                <dd class="mt-1 flex text-sm text-gray-900 sm:col-span-2 sm:mt-0">
+                                    <span class="flex-grow">DD-MM-YYYY</span>
+                                    <span class="ml-4 flex flex-shrink-0 items-start space-x-4">
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Update</button
+                                        >
+                                        <span class="text-gray-300" aria-hidden="true">|</span>
+                                        <button
+                                            type="button"
+                                            class="rounded-md bg-white font-medium text-purple-600 hover:text-purple-500 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2"
+                                            >Remove</button
+                                        >
+                                    </span>
+                                </dd>
+                            </div>
+                            <div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:pt-5">
+                                <dt class="text-sm font-medium text-gray-500" id="timezone-option-label">Automatic timezone</dt>
+                                <Switch />
+                            </div>
+                        </dl>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>