From c38612dea52f1dcee6c19a245f170791d597a6bd Mon Sep 17 00:00:00 2001
From: David Emanuel Luksic <david@laralab.de>
Date: Fri, 30 Dec 2022 22:09:25 +0100
Subject: [PATCH] Trim space name, fix name input layout.

---
 src/components/Card.module.css   |  1 +
 src/db/space.ts                  |  2 +-
 src/design-system.css            |  2 ++
 src/routes/space/[id].module.css | 14 ++++++++++++--
 src/routes/space/[id].tsx        | 15 +++++++++++----
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/components/Card.module.css b/src/components/Card.module.css
index e34dc8e..94abc3d 100644
--- a/src/components/Card.module.css
+++ b/src/components/Card.module.css
@@ -7,6 +7,7 @@
   background-color: var(--color-bg-1);
   border: 1px solid gray;
   min-width: 20rem;
+  box-shadow: var(--shadow-1);
 
   & .response {
     display: grid;
diff --git a/src/db/space.ts b/src/db/space.ts
index cc48c26..a2de286 100644
--- a/src/db/space.ts
+++ b/src/db/space.ts
@@ -10,7 +10,7 @@ export function createSpace(name: string): Space {
   const space: Space = {
     version: projectVersion(),
     id: createUUID(),
-    name,
+    name: name.trim(),
     createdTimestamp: timestampNow(),
     cards: {},
   }
diff --git a/src/design-system.css b/src/design-system.css
index 142dc44..6e5b73a 100644
--- a/src/design-system.css
+++ b/src/design-system.css
@@ -13,4 +13,6 @@
 
   --color-bg-1: white;
   --color-bg-2: #EEE;
+
+  --shadow-1: 0 3px 16px #0004;
 }
diff --git a/src/routes/space/[id].module.css b/src/routes/space/[id].module.css
index 2a07b37..9b8371c 100644
--- a/src/routes/space/[id].module.css
+++ b/src/routes/space/[id].module.css
@@ -10,7 +10,8 @@
   grid-area: main;
   display: flex;
   flex-direction: column;
-  margin: var(--space-4);
+  padding: var(--space-4);
+  overflow: hidden;
 }
 
 .main-top-bar {
@@ -29,7 +30,7 @@
   margin-inline-end: 0;
   border-radius: var(--space-4);
   min-height: 10rem;
-  box-shadow: 0 2px 16px #0002;
+  box-shadow: var(--shadow-1);
 }
 
 .my-cards-list {
@@ -52,6 +53,7 @@
   text-align: center;
   line-height: 1;
   height: 1em;
+  min-width: 0;
 }
 
 .deck {
@@ -104,6 +106,10 @@
   grid-area: main;
   place-self: flex-end;
   color: gray;
+
+  &::before {
+    content: 'version ';
+  }
 }
 
 @media (max-width: 900px) {
@@ -131,4 +137,8 @@
     flex: unset;
     overflow-y: unset;
   }
+
+  .project-version::before {
+    content: 'v';
+  }
 }
\ No newline at end of file
diff --git a/src/routes/space/[id].tsx b/src/routes/space/[id].tsx
index 376f17e..2d1c13c 100644
--- a/src/routes/space/[id].tsx
+++ b/src/routes/space/[id].tsx
@@ -24,12 +24,19 @@ function SpaceName() {
         ref={autofocusFix}
         class={ui.spaceName}
         value={space.name}
-        onInput={ev => setSpace('name', ev.currentTarget.value)}
-        onChange={() => setEditingSpaceName(false)}
+        onChange={ev => {
+          setSpace('name', ev.currentTarget.value.trim())
+          setEditingSpaceName(false)
+        }}
         onBlur={() => setEditingSpaceName(false)}
       />
     }>
-      <h1 class={ui.spaceName} title='Space name' onDblClick={() => setEditingSpaceName(true)}>{space.name}</h1>
+      <h1
+        class={ui.spaceName}
+        title='Space name'
+        onClick={() => setEditingSpaceName(true)}>
+        {space.name}
+      </h1>
     </Show>
   )
 }
@@ -156,7 +163,7 @@ export default function SpaceComponent() {
                 </div>
                 <Deck adding={adding()} setAdding={setAdding} />
                 <CardControls adding={adding()} setAdding={setAdding} />
-                <span class={ui.projectVersion}>version {projectVersion()}</span>
+                <span class={ui.projectVersion}>{projectVersion()}</span>
               </div>
             </main>
           </SpaceContext.Provider>