feat: much better UX

DeFUCC · May 1, 2023 · 9862e70 · 9862e70
1 parent b950f25
commit 9862e70
Show file tree

Hide file tree

Showing 17 changed files with 202 additions and 214 deletions.
diff --git a/app/app.ts b/app/app.ts
@@ -1,11 +1,9 @@
 import { createApp } from "vue";
-
-import * as Vue from 'vue'
 import { useGun } from '../src/composables'
-
 import * as components from '../src/all-components'
 import { GunVuePlugin } from '../src/components'
 
+export * as vue from 'vue'
 
 export function createGunVueApp(
   tag = "#app",

diff --git a/examples/messages.html b/examples/messages.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Chat example</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="https://unpkg.com/@gun-vue/components/dist/style.css">
+  <script type="importmap">
+  {
+    "imports": {
+      "app": "../app/dist/app.js"
+    }
+  }
+  </script>
+  <script type="module">
+    import {createGunVueApp} from 'app'
+    createGunVueApp('#app', {
+      data() {
+        return {
+          other: ''
+        }
+      }
+    })
+  </script>
+
+</head>
+
+<body>
+
+  <div id="app" class="flex-col">
+    <h1>Chat example app!</h1>
+    <div class="flex flex-wrap items-center gap-2 p-4">
+      <gun-relay></gun-relay>
+      <user-icon></user-icon>
+      <room-button></room-button>
+    </div>
+    <keep-alive>
+      <user-list v-if="!other" @user="other=$event"></user-list>
+      <chat-private v-else :pub="other">
+        <button class="button" @click="other=''">Close</button>
+        </chat-room>
+    </keep-alive>
+  </div>
+
+</body>
+
+</html>
diff --git a/src/form/FormTitle.vue b/src/form/FormTitle.vue
@@ -19,7 +19,7 @@ function update(ev) {
 </script>
 
 <template lang="pug">
-.flex.mt-12.mb-2.items-center.gap-4
+.flex.mb-2.items-center.gap-4
   h1.text-3xl.font-bold(
     ref="content"
     :contenteditable="editable" 

diff --git a/src/post/PostCard.vue b/src/post/PostCard.vue
@@ -27,10 +27,9 @@ const hasText = computed(() => post.icon || post.title || post.statement || post
   :style="{ backgroundImage: `url(${post?.cover || post?.raw})`, backgroundColor: colorDeep.hex(hash) }"
   )
   .p-0(
-    style="flex: 12 1 120px" 
     :style="{ paddingTop: post?.cover || post?.raw ? '18em' : '0' }"
     )
-  .flex.flex-wrap.items-center.max-w-full.w-full.backdrop-blur-lg.rounded-2xl.bg-light-100.dark-bg-dark-400.backdrop-blur-sm.backdrop-filter.shadow-md(
+  .flex.flex-wrap.items-center.max-w-full.w-full.backdrop-blur-lg.rounded-2xl.bg-light-100.bg-opacity-80.dark-bg-dark-400.dark-bg-opacity-80.backdrop-blur-sm.backdrop-filter.shadow-md(
     style="flex: 14 1 620px"
   )
     .p-0(
@@ -44,10 +43,12 @@ const hasText = computed(() => post.icon || post.title || post.statement || post
     .flex.flex-col.p-2.overflow-hidden(style="flex: 10 1 280px" v-if="hasText")
       .px-2
         .flex.items-center
-          .text-xl.font-bold.my-2(v-if="post?.title") {{ post.title }}
+          .flex.flex-col
+            .text-xl.font-bold.my-2(v-if="post?.title") {{ post.title }}
+            .statement(v-if="post?.statement") {{ post.statement }}
           .flex-1
           post-link(:hash="hash")
-        .statement(v-if="post?.statement") {{ post.statement }}
+
       .flex.items-center.flex-wrap.items-center.mt-2.gap-2
         .i-la-youtube.mx-1(v-if="post?.youtube")
         .i-mdi-text-long.mx-1(v-if="post?.text")

diff --git a/src/post/PostList.vue b/src/post/PostList.vue
@@ -57,7 +57,7 @@ const filteredPosts = computed(() => {
       ) # {{ tag }} 
     .flex-1
     .p-2.font-bold.mx-2 {{ countPosts }}
-  .flex.flex-col.items-center.bg-dark-50.bg-opacity-20.backdrop-filter.backdrop-blur-md.flex-1.p-2.w-full.gap-8
+  .flex.flex-col.bg-dark-50.bg-opacity-20.backdrop-filter.backdrop-blur-md.flex-1.p-2.w-full.gap-8
     .p-2.flex.flex-wrap.z-300.text-sm.bg-light-300.bg-opacity-40.dark-bg-dark-500.rounded-2xl.m-2.flex-1(
       v-if="user.pub"
       style="order:-2147483647; flex: 1000 100%"
@@ -113,9 +113,9 @@ const filteredPosts = computed(() => {
       )
         button.button(@click="user.auth = true") Authorize to post here
         slot
-
+  .flex.flex-wrap.gap-4
     transition-group(name="list")
-      post-card.max-w-3xl.w-full.shadow-xl(
+      post-card.max-w-xl.flex-1.shadow-xl(
         v-for="(authors, hash) in filteredPosts"
         v-show="tag != hash"
         :key="hash" 

diff --git a/src/private/ChatPrivate.vue b/src/private/ChatPrivate.vue
@@ -26,6 +26,8 @@ const chat = computed(() => usePrivateChat(props.pub))
     account-avatar(:pub="pub" @click="$emit('user')")
     .text-lg.font-bold.p-2 {{ account.profile?.name }}
     .text-lg {{ account.lastSeen }}
+    .flex-1
+    slot
   chat-messages.bg-dark-50.dark-bg-dark-400(:messages="chat.sorted")
   .flex-0.bg-light-900.dark-bg-dark-600.p-4
     chat-input(@submit="chat.send($event)")

diff --git a/src/project/ProjectForm.vue b/src/project/ProjectForm.vue
@@ -1,32 +1,47 @@
 <script setup>
 import { watchEffect } from 'vue';
 import { useNewProject } from './useProject';
+import { ref, computed } from 'vue';
+import { genUUID } from '../gun/useGun';
 
 const props = defineProps({
-  title: { type: String, default: 'Project0' },
+  title: { type: String, default: '' },
   source: { type: String, default: '' },
+  required: { type: Array, default: ['id', 'title'] }
 })
 
 const emit = defineEmits(['added'])
 
+const open = ref(false)
+
 const { newProject, addProject } = useNewProject()
 
 watchEffect(() => {
   newProject.title = props.title
   newProject.source = props.source
 })
+
+const formComplete = computed(() => {
+  return props.required.reduce((a, f) => {
+    return a && !!newProject?.[f]
+  }, true)
+})
 </script>
 
 <template lang='pug'>
-.p-2.flex.flex-col.gap-2.max-w-16em
-  .text-lg Add a new project {{ newProject.id }}
+.p-2
+  .flex.flex-col.gap-2.max-w-16em(v-if="open")
+    .grid.gap-2.items-center(style="grid-template-columns:  auto 1fr;")
+      h3 ID: 
+      .p-2.flex.items-center.cursor-pointer.gap-1(@click="newProject.id = genUUID(6)")
+        pre {{ newProject.id }}
+        .flex-1
+        .i-la-sync
+      h3 Title:
+      input(type="text" v-model="newProject.title")
+    pre.text-xs.overflow-scroll {{ newProject }}
+    button.button(@click="addProject(()=>$emit('added'))" v-if="formComplete") ADD PROJECT {{ formComplete }}
 
-  .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")
+  button.button.text-lg(@click="open=true" v-if="!open") Add a new project
 
-  button.button(@click="addProject(()=>$emit('added'))") ADD PROJECT
-  pre.text-xs {{ newProject }}
 </template>
diff --git a/src/project/ProjectPage.vue b/src/project/ProjectPage.vue
@@ -1,8 +1,10 @@
 
 <script setup>
-import { useUser, useProject, useMd, useProjectGifts, itemTypes, useNewDiscourseItem } from '#composables';
+import { useUser, useProject, useMd } from '#composables';
 import { toRef, ref, computed, watch } from 'vue'
 import { FormPicture, FormTitle, ProjectFunding, ProjectForm } from '../components'
+import { useDebounceFn } from '@vueuse/core'
+
 
 const emit = defineEmits(['gift', 'user'])
 
@@ -23,66 +25,62 @@ const editable = computed(() => props.path.includes(user.pub))
 
 const editing = ref(false)
 
-const text = ref(project.text)
+const content = ref(project.content)
 
-watch(() => project.text, (t) => {
-  text.value = t
+watch(() => project.content, (t) => {
+  content.value = t
 })
 
-const { newItem, add } = useNewDiscourseItem()
-
-
+const debouncedUpdate = useDebounceFn(updateField, 1000)
 
 </script>
 <!-- eslint-disable vue/no-v-html -->
 <template lang="pug">
-.flex.flex-col
-  .p-2.relative(:style="{ background: `url(${project.cover}) center`, backgroundColor: project.color, paddingTop: project.cover || project.color ? '120px' : '' }")
-
+.flex.flex-col.max-w-65ch
+  .p-2.relative(:style="{ background: `url(${project.cover}) center`, backgroundColor: project?.color, paddingTop: project?.cover || project?.color ? '220px' : '60px' }")
+    form-picture.absolute.top-2(
+      v-if="editable" 
+      @update="updateCover($event)"
+      )
     input.absolute.top-4.right-4(
       v-if="editable" 
       type="color" 
-      :value="project.color" 
+      :value="project?.color" 
       @input="updateField('color', $event.target.value)"
       )
-
-    form-picture(
-      v-if="editable" 
-      @update="updateCover($event)"
-      )
-
-    form-title(
-      :text="project.title" 
-      :editable="editable" 
-      @update="updateField('title', $event)")
-
-    //- account-badge.absolute.bottom-4.right-4(
-      :pub="path.slice(-87)" 
-      @click="$emit('user', path.slice(-87))")
-
-  .flex.flex-col.gap-2.m-2.bg-light-200.dark-bg-dark-400.p-2.rounded-xl.shadow.relative
+    .rounded.p-2.bg-light-100.bg-opacity-80.dark-bg-dark-300.dark-bg-opacity-60.flex.items-center
+      .flex.flex-col
+        .font-mono.text-xs.capitalize {{ project?.type }} {{ project?.id }}
+
+        form-title(
+          :text="project?.title" 
+          :editable="editable" 
+          @update="updateField('title', $event)")
+      .flex-1
+      account-badge(
+        :pub="path.slice(-87)" 
+        @click="$emit('user', path.slice(-87))")
+
+  .flex.flex-col.gap-2.px-4.bg-light-200.dark-bg-dark-400.relative
     .i-la-pen.cursor-pointer.text-2xl.absolute.top-2.right-2.z-2(
       v-if="editable" 
       @click="editing = !editing"
       )
     .p-2.text-base.prose.prose-truegray.dark-prose-light.dark-bg-dark-400(
       v-if="!editing || !editable" 
-      v-html="md.render(text || '')")
+      v-html="md.render(content || '')")
     textarea.dark-bg-dark-400(
       v-else 
-      v-model="text" 
-      @update:model-value="updateField('text', $event)")
-
-
-  project-form(:source="path")
-
+      v-model="content" 
+      @update:model-value="debouncedUpdate('content', $event)")
+    pre.text-xs.max-w-full.overflow-scroll {{ Object.keys(project) }}
 
   project-funding(
     :path="path" 
     :enabled="!!project.funding" 
     @enable="updateField('funding', 'true')"
     @gift="$emit('gift', $event)"
     )
-
+  project-form(:source="path")
 
 </template>
diff --git a/src/project/composables.ts b/src/project/composables.ts
@@ -1,4 +1,3 @@
 export * from "./useProject"
 export * from "./useProjects"
-export * from './useDiscourse'
 
diff --git a/src/project/schema.json b/src/project/schema.json