feat: project form

src/app.vue

@@ -88,22 +88,6 @@ const bg = computed(() => useBackground({ pub: currentRoom.pub, size: 1200, ligh
 
 
 <style lang="postcss">
-html {
-  scroll-behavior: smooth;
-  hyphens: auto;
-  overscroll-behavior-y: none;
-}
-
-body {
-  @apply bg-light-500 dark-bg-dark-200 dark-text-light-200;
-  overscroll-behavior-y: none;
-  touch-action: pan-x pan-y;
-}
-
-#app {
-  @apply min-h-100vh max-h-100vh flex;
-}
-
 .app-container {
   display: grid;
   width: 100%;

src/project/ProjectForm.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { watchEffect } from 'vue';
+import { useNewProject } from './useProject';
+
+const props = defineProps({
+  title: { type: String, default: 'Project0' }
+})
+
+const { newProject, addProject } = useNewProject()
+
+watchEffect(() => {
+  newProject.title = props.title
+})
+</script>
+
+<template lang='pug'>
+.p-2.flex.flex-col.gap-2.max-w-16em
+  .text-lg Add a new project {{ newProject.id }}
+
+  .grid.gap-2.items-center(style="grid-template-columns:  auto 1fr;")
+    h3 ID: 
+    .font-bold {{ newProject.id }}
+    h3 Title:
+    input(type="text" v-model="newProject.title")
+
+  pre.text-xs {{ newProject }}
+</template>

src/project/ProjectList.vue

@@ -1,12 +1,13 @@
 <script setup>
-import { useProjects, addProject, newProject, currentRoom } from '../composables';
-import { ProjectCard } from '../components'
+import { useProjects, currentRoom } from '#composables';
+import { ProjectCard } from '#components'
+import ProjectForm from './ProjectForm.vue';
 
 const props = defineProps({
   pub: { type: String, default: currentRoom?.pub }
 })
 
-const { candidates } = useProjects(props.pub)
+const { candidates, search } = useProjects(props.pub)
 
 defineEmits(['open'])
 
@@ -17,7 +18,7 @@ defineEmits(['open'])
 .flex.flex-col 
   .p-2.flex.flex-col.gap-2
     input.p-2.rounded-xl.shadow.dark-bg-dark-400(
-      v-model="newProject.title" 
+      v-model="search" 
       placeholder="Start typing a project title"
       )
   .flex.flex-col.gap-4.p-2
@@ -31,9 +32,5 @@ defineEmits(['open'])
         @click="$emit('open', proj.item.path)"
         )
   .p-2.flex.flex-col.gap-2
-    button.button(
-      v-if="newProject.title" 
-      key="button" 
-      @click="addProject()"
-      ) Add Project {{ newProject.title }}
+    project-form(:title="search" v-if="search")
 </template>

src/project/useProject.ts

@@ -7,51 +7,57 @@
 import { reactive, ref, computed } from 'vue'
 import { useGun2, useGun, genUUID } from '../gun/composables'
 import { currentRoom } from '../room/composables'
-import { useUser } from '../user/composables'
+import { useUser, user } from '../user/composables'
 
 import { hashText, isHash } from '../crypto/composables'
 
 import { ProjectItem, ProjectType } from './useProject.d'
 
+export function useNewProject(title?: string) {
 
-export const newProject: ProjectItem = reactive({
-  id: '',
-  title: '',
-  type: 'project',
-  public: true,
-  funding: false,
-  room: currentRoom.pub,
-  author: ''
-})
-
-export async function addProject() {
-  const gun = useGun()
   const { user } = useUser()
 
-  const id = genUUID(6)
-  newProject.author = user.pub
-
-  const link = gun.user().get('projects').get(id).put(newProject, () => {
-    if (!newProject.public) return
-
-    gun
-      .user(currentRoom.pub)
-      .get('projects')
-      .get(id + '@' + user.pub)
-      .put(
-        link,
-        undefined,
-        {
-          opt:
-            { cert: currentRoom.features?.projects }
-        }
-      )
-    newProject.title = ''
-    newProject.id = ''
+  const newProject: ProjectItem = reactive({
+    id: genUUID(6),
+    title,
+    type: 'project',
+    public: true,
+    funding: false,
+    room: computed(() => currentRoom.pub),
+    author: computed(() => user.pub),
   })
 
+  async function addProject() {
+    const gun = useGun()
+    const { user } = useUser()
+
+    const id = genUUID(6)
+    newProject.author = user.pub
+
+    const link = gun.user().get('projects').get(id).put(newProject, () => {
+      if (!newProject.public) return
+
+      gun
+        .user(currentRoom.pub)
+        .get('projects')
+        .get(id + '@' + user.pub)
+        .put(
+          link,
+          undefined,
+          {
+            opt:
+              { cert: currentRoom.features?.projects }
+          }
+        )
+      newProject.title = ''
+      newProject.id = ''
+    })
+
+  }
+  return { newProject, addProject }
 }
 
+
 export function updateProjectField(title: string, field: string, value: string) {
   const gun = useGun();
   const proj = gun.user().get('projects').get(title)

src/project/useProjects.ts

@@ -5,7 +5,6 @@
  */
 
 import { computed, reactive, ref } from "vue"
-import { newProject } from './useProject'
 import { useGun } from "../gun/composables"
 import { currentRoom } from "../room/composables"
 import Fuse from "fuse.js";
@@ -26,8 +25,8 @@ export function useProjects(pub = currentRoom.pub) {
   })
 
   const candidates = computed(() => {
-    if (newProject.title) {
-      return fuse.value.search(newProject.title)
+    if (search.value) {
+      return fuse.value.search(search.value)
     } else {
       return Object.entries(projects).map(arr => ({ item: { ...arr[1] as object, path: arr[0] } }))
     }

src/styles/index.css

@@ -1,6 +1,25 @@
 @import "./markdown.css";
 @import "./transitions.css";
 
+html {
+  scroll-behavior: smooth;
+  hyphens: auto;
+  overscroll-behavior-y: none;
+}
+
+body {
+  @apply bg-light-500 dark-bg-dark-200 dark-text-light-200;
+  overscroll-behavior-y: none;
+  touch-action: pan-x pan-y;
+}
+
+#app {
+  @apply min-h-100vh max-h-100vh flex;
+}
+
+input[type="text"] {
+  @apply dark-bg-dark-500 p-2 rounded-lg
+}
 
 .button {
   @apply p-2 flex font-bold rounded-xl shadow-md hover-(shadow-lg bg-light-100) transition-all duration-200 ease-out bg-light-600 items-center dark-bg-dark-200;