Finish UI and UX iteration

src/components/CollabAgenda.vue

@@ -122,17 +122,19 @@ async function addAgendaItem() {
       <DueDate label="Propose agenda items by" :dateString="collabAgenda.due" />
     </div>
 
-    <form @submit.prevent="addAgendaItem">
-      <BaseCard>
+    <form @submit.prevent="addAgendaItem" class="box-border w-full">
+      <BaseCard class="box-border w-full">
         <div>Propose agenda item</div>
         <TextInput label="Title" v-model="agendaItemTitle" />
         <!-- Description is optional -->
+        <!-- 556px max w is a temp fix to stop editor breaking out of container -->
         <ToastUiEditor
           @updateValue="(t) => (agendaItemText = t)"
           label="Agenda item text"
           height="auto"
           initialEditType="markdown"
           ref="editor"
+          class="max-w-[556px]"
         />
       </BaseCard>
       <button type="submit" class="btn mt-4">Add agenda item</button>

src/components/ConversationList.vue

@@ -1,39 +1,18 @@
 <script setup lang="ts">
-import { useKoreroStore } from '@/stores/korero'
 import type { Conversation } from '@/types'
-import ConversationTypeIcon from './ConversationTypeIcon.vue'
-import FormatDateString from './FormatDateString.vue'
+import ConversationListItem from './ConversationListItem.vue'
 
 defineProps<{ conversations: Conversation[] }>()
-
-const koreroStore = useKoreroStore()
 </script>
 
 <template>
   <div class="flex flex-col gap-3">
-    <div
+    <ConversationListItem
       v-for="conversation in conversations"
       :key="conversation.id"
-      class="flex gap-4 items-center [&:not(:last-child)]:border-b border-slate-200 [&:not(:last-child)]:pb-4"
-    >
-      <ConversationTypeIcon :type="conversation.type" class="flex-shrink-0" />
-      <div>
-        <h2 class="card-title">
-          <RouterLink :to="{ name: 'conversation', params: { conversationId: conversation.id } }">{{
-            conversation.title
-          }}</RouterLink>
-        </h2>
-        <div class="italic text-xs">
-          By {{ koreroStore.getUser(conversation.authorId).name }} on
-          <FormatDateString :dateString="conversation.created" :defaultCss="false" /> in
-          <RouterLink
-            :to="{ name: 'channel', params: { channelId: conversation.channelId } }"
-            class="link"
-            >{{ koreroStore.getChannelName(conversation.channelId) }}</RouterLink
-          >
-        </div>
-      </div>
-    </div>
+      :conversation="conversation"
+      class="[&:not(:last-child)]:border-b border-slate-200 [&:not(:last-child)]:pb-4"
+    />
   </div>
 </template>
 

src/components/ConversationListItem.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { Conversation } from '@/types'
+import ConversationTypeIcon from './ConversationTypeIcon.vue'
+import FormatDateString from './FormatDateString.vue'
+import { useKoreroStore } from '@/stores/korero'
+
+const { conversation, iconWidth } = defineProps<{
+  conversation: Conversation
+  iconWidth?: string
+}>()
+
+const koreroStore = useKoreroStore()
+</script>
+
+<template>
+  <div class="flex gap-4 items-center">
+    <ConversationTypeIcon :type="conversation.type" class="flex-shrink-0" :width="iconWidth" />
+    <div>
+      <h2 class="card-title">
+        <!-- could make this not a link when on the conversation view -->
+        <RouterLink :to="{ name: 'conversation', params: { conversationId: conversation.id } }">{{
+          conversation.title
+        }}</RouterLink>
+      </h2>
+      <div class="italic text-xs">
+        By {{ koreroStore.getUser(conversation.authorId).name }} on
+        <FormatDateString :dateString="conversation.created" :defaultCss="false" /> in
+        <RouterLink
+          :to="{ name: 'channel', params: { channelId: conversation.channelId } }"
+          class="link"
+          >{{ koreroStore.getChannelName(conversation.channelId) }}</RouterLink
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/ConversationTypeIcon.vue

@@ -8,7 +8,7 @@ import BrainstormSVG from '@/components/BrainstormSVG.vue'
 import { ConversationType } from '@/types'
 import { computed, type Component } from 'vue'
 
-defineProps<{ type: ConversationType }>()
+const { type, width = '18px' } = defineProps<{ type: ConversationType; width?: string }>()
 
 // TODO need to make SVG title ids unique for accessibility
 // Could create a composable and generate a unique ID on mount to append to id and aria-labelledby
@@ -26,7 +26,7 @@ const getIconComponent = computed(() => (type: ConversationType) => iconMap[type
 </script>
 
 <template>
-  <component :is="getIconComponent(type)" width="18px" />
+  <component :is="getIconComponent(type)" :width="width" />
 </template>
 
 <style scoped></style>

src/components/ManageChannelMembers.vue

@@ -4,13 +4,14 @@ import { storeToRefs } from 'pinia'
 import { computed, type ComputedRef } from 'vue'
 import { type Team, type Org } from '@bzr/bazaar'
 import { bzr } from '@/bazaar'
+import BazaarLogoIcon from './BazaarLogoIcon.vue'
 
 const props = defineProps<{ initialMembers: string[] }>()
 const emit = defineEmits(['update:addMember', 'update:removeMember'])
 
 const koreroStore = useKoreroStore()
 
-function openModal() {
+function openOrgModal() {
   // @ts-ignore
   bzr.orgs.openModal()
 }
@@ -45,11 +46,7 @@ const availableMembers = computed(() => {
   })
 })
 
-console.log('initial', props.initialMembers)
-console.log('me', user.value.id)
-
 function selectMember(id: string) {
-  console.log('select', id)
   emit('update:addMember', id)
 }
 
@@ -68,35 +65,28 @@ function userName(id: string) {
 
 <template>
   <div>
-    <p>Channel Members</p>
-    <div>
-      <span class="badge">You</span>
-      <span class="badge" v-for="m in initialMembers" :key="m" @click="unselectMember(m)"
-        >{{ userName(m) }} X</span
-      >
-    </div>
-    <div>
-      <!-- <div
-            class="btn"
-            @click="
-              bzr.social.openModal((userId) => {
-                selectMember(userId)
-              })
-            "
-          >
-            Invite Guets
-          </div> -->
-      <p>
-        Org Members
-        <span class="btn btn-xs" @click="openModal()">Manage Members</span>
-      </p>
-      <div v-if="availableMembers.length > 0">
-        <div v-for="m in availableMembers" :key="m">
+    <ul class="text-sm">
+      <li>{{ user.name }}</li>
+      <li v-for="m in initialMembers" :key="m">
+        {{ userName(m) }}
+        <button @click="unselectMember(m)" class="text-error text-xs">Remove</button>
+      </li>
+    </ul>
+    <div class="pt-4">
+      <h3 class="font-bold pb-2 text-sm">
+        Non-members <span class="badge badge-sm">{{ availableMembers.length }}</span>
+      </h3>
+      <ul v-if="availableMembers.length > 0" class="text-sm pb-4">
+        <li v-for="m in availableMembers" :key="m">
           {{ userName(m) }}
-          <div class="btn" @click="selectMember(m)">Select</div>
-        </div>
-      </div>
-      <div v-else>Nobody left</div>
+          <button class="text-success text-xs" @click="selectMember(m)">Add</button>
+        </li>
+      </ul>
+      <button @click="openOrgModal" class="btn btn-sm">
+        <BazaarLogoIcon width="12px" /> Manage organization members
+      </button>
+      <!-- What does this mean? -->
+      <!-- <div v-else>Nobody left</div> -->
     </div>
   </div>
 </template>

src/components/ManageWorkspaces.vue

@@ -50,7 +50,7 @@ function openOrgModal() {
     <div class="flex flex-col gap-8">
       <div>
         <button @click="openOrgModal" class="btn btn-sm">
-          <BazaarLogoIcon width="12px" /> Manage Organizations
+          <BazaarLogoIcon width="12px" /> Manage organizations
         </button>
       </div>
       <div v-for="org in orgs" :key="org.id">