Implement new item button

src/components/modals/NewItemModal.svelte

@@ -1,16 +1,95 @@
 <script lang="ts">
+  import { createEventDispatcher } from 'svelte';
   import Modal from './Modal.svelte';
+  import api from '$endpoints';
+  import { goto } from '$app/navigation';
+
   export let show: boolean;
   export let groupId: string;
+
+  let itemName = '';
+  let itemId = '';
+  let itemDescription = '';
+  let userModifiedId = false;
+
+  const dispatch = createEventDispatcher();
+
+  function resetAndClose() {
+    itemName = '';
+    itemDescription = '';
+    itemId = '';
+    userModifiedId = false;
+    dispatch('close');
+  }
+
+  function nameToId(name: string): string {
+    // TODO: Make this a little more reliable
+    return name.toLowerCase().replaceAll(' ', '-');
+  }
+
+  async function makeItem() {
+    await api().group.withId(groupId).item.withId(itemId).create(itemName, itemDescription);
+    await goto(`/${groupId}/${itemId}`);
+  }
 </script>
 
-<Modal {show} on:close>
+<Modal {show} on:close={resetAndClose}>
   <h2 slot="header">New item</h2>
-  Creating a new item within the group '{groupId}'
-  <form>
-    <input />
-    <input />
-    <input />
-    <input type="submit" />
+  <p>Creating an item within the group '{groupId}'.</p>
+  <form on:submit|preventDefault={makeItem}>
+    <p>
+      Item name
+      <input
+        placeholder="Manyfolio"
+        bind:value={itemName}
+        required
+        on:input={() => {
+          // Whenever the user modifies the name, we should update the ID
+          // to match, until the user modifies the ID themselves
+          if (!userModifiedId) {
+            itemId = nameToId(itemName);
+          }
+        }}
+      />
+    </p>
+    <p>
+      Item ID
+      <input placeholder="manyfolio" required bind:value={itemId} on:input={() => { userModifiedId = true; }} />
+    </p>
+    <p>
+      Item description
+      <input placeholder="A data-driven portfolio website" bind:value={itemDescription} />
+    </p>
+    <p>
+      <input type="submit" value="Create" />
+    </p>
   </form>
 </Modal>
+
+<style>
+  form {
+    margin: 10px;
+  }
+
+  form p {
+    display: flex;
+    gap: 10px;
+    width: 100%;
+  }
+  form p input {
+    flex: 1;
+    height: 1.2rem;
+  }
+
+  input[type="submit"] {
+    height: 2rem;
+    background-color: transparent;
+    border: none;
+    border-radius: 5px;
+  }
+
+  input[type="submit"]:hover {
+    background-color: rgba(124, 124, 124, 0.253);
+    cursor: pointer;
+  }
+</style>

src/components/navbar/Navbar.svelte

@@ -62,22 +62,22 @@
   <!-- Control buttons -->
   <span id="control-buttons">
     {#if loggedIn}
-      {#if createGroupButton}
-        <div>
-          <button on:click={() => { createGroupModalShown = true; }}> New group </button>
-          <NewGroupModal show={createGroupModalShown} on:close={closeCreateGroupModal} />
-        </div>
-      {/if}
       {#if createItemButtonGroup}
         <div>
-          <button> New item </button>
+          <button on:click={() => { createItemModalShown = true; }}> New item </button>
           <NewItemModal
             show={createItemModalShown}
             groupId={createItemButtonGroup}
             on:close={closeCreateItemModal}
           />
         </div>
       {/if}
+      {#if createGroupButton}
+        <div>
+          <button on:click={() => { createGroupModalShown = true; }}> New group </button>
+          <NewGroupModal show={createGroupModalShown} on:close={closeCreateGroupModal} />
+        </div>
+      {/if}
       <button on:click={() => goto('/admin')}> Admin </button>
       <button on:click={logOut}> Log out </button>
     {:else if loggedIn !== undefined}

src/routes/[group]/+page.svelte

@@ -2,7 +2,7 @@
   import { Navbar, Markdown } from '$components';
   import { ItemCardGrid } from '$components/card';
   import Background from '$components/Background.svelte';
-    import Paper from '$components/Paper.svelte';
+  import Paper from '$components/Paper.svelte';
 
   export let data: import('./$types').PageData;
 
@@ -15,6 +15,8 @@
   path={[{ url: data.groupId, txt: groupData.info.name }]}
   config={data.globals.config}
   loggedIn={data.loggedIn}
+  createGroupButton
+  createItemButtonGroup={data.groupId}
 />
 
 <main>

src/routes/[group]/[item]/+page.svelte

@@ -20,6 +20,8 @@
   ]}
   config={data.globals.config}
   loggedIn={data.loggedIn}
+  createGroupButton
+  createItemButtonGroup={data.groupId}
 />
 
 <main>