Add initial workspace review queue

assets/scss/main.scss

@@ -1,5 +1,12 @@
 @import "theme.scss";
 @import "bootstrap/scss/bootstrap.scss";
+@import "maplibre-gl/dist/maplibre-gl.css";
+
+:root {
+  --ws-create-color: $review-create-color;
+  --ws-modify-color: $review-modify-color;
+  --ws-delete-color: $review-delete-color;
+}
 
 html, body, #__nuxt {
   width: 100%;
@@ -34,3 +41,28 @@ label > .form-select:first-child {
   width: 100%;
   height: 100%;
 }
+
+.dropdown-menu {
+  box-shadow: $box-shadow;
+}
+
+/* Review */
+
+.bg-create {
+  background-color: $review-create-color;
+}
+.bg-modify {
+  background-color: $review-modify-color;
+}
+.bg-delete {
+  background-color: $review-delete-color;
+}
+.text-create {
+  color: #{darken($review-create-color, 27%)};
+}
+.text-modify {
+  color: $review-modify-color;
+}
+.text-delete {
+  color: #{darken($review-delete-color, 3%)};
+}

assets/scss/theme.scss

@@ -10,3 +10,7 @@ $primary: #9b0092;
 @import "bootstrap/scss/mixins";
 
 $navbar-height: 58px;
+
+$review-create-color: #39dbc0;
+$review-modify-color: #db950a;
+$review-delete-color: #cc2c47;

components/AppIcon.vue

@@ -6,23 +6,23 @@
 const props = defineProps({
   variant: {
     type: String,
     required: true
   },
   size: {
     type: [Number, String],
     default: 18
   },
   noMargin: {
     type: Boolean,
     default: false
   }
 })
 
 const classes = computed(() => ([
   'material-icons',
   `md-${props.size}`,
   `md-${props.variant}`,
   props.noMargin ? undefined : 'me-2'
 ]))
 </script>
 
@@ -30,14 +30,18 @@
 .material-icons {
   vertical-align: middle;
   margin-top: -3px;
+
+  &.me-2 {
+    margin-right: 0.33em !important;
+  }
 }
 .badge .material-icons {
   font-size: 1em;
   vertical-align: bottom;
   margin-top: 0;
 
   &.me-2 {
-    margin-right: 0.25rem !important;
+    margin-right: 0.25em !important;
   }
 }
 </style>

components/AppNavbar.vue

@@ -1,12 +1,12 @@
 <template>
   <nav class="app-navbar navbar navbar-expand-md shadow">
     <div class="container-lg">
       <nuxt-link class="navbar-brand" to="/">
         <app-logo />
         <span>TDEI</span>&nbsp;<span>Workspaces</span>
       </nuxt-link>
 
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
 
@@ -54,6 +54,8 @@
 
 <style>
 .app-navbar {
+  z-index: 900;
+
   .navbar-brand {
     display: inline-flex;
   }

components/AppPage.vue

@@ -1,5 +1,20 @@
 <template>
-  <section class="container-lg py-4">
+  <section :class="classes">
     <slot />
   </section>
 </template>
+
+<script setup lang="ts">
+const props = defineProps({
+  fluid: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const classes = computed(() => ({
+  'py-4': true,
+  'container-fluid': props.fluid === true,
+  'container-lg': props.fluid === false,
+}));
+</script>

components/ChatBox.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="chat-box">
+    <div
+      v-if="!props.messages?.length"
+      class="empty-notice"
+    >
+      <app-icon
+        variant="chat"
+        size="36"
+      />
+      <span>{{ props.emptyText }}</span>
+    </div>
+    <ul
+      v-else
+      class="message-list"
+    >
+      <chat-box-message
+        v-for="message in props.messages"
+        :key="message.id"
+        v-bind="message"
+      />
+    </ul>
+
+    <form
+      class="input-group"
+      @submit.prevent="send"
+    >
+      <label class="flex-grow-1">
+        <span class="visually-hidden">Message</span>
+        <textarea
+          v-model="draft"
+          class="form-control"
+          placeholder="Type your message here"
+        />
+      </label>
+      <button
+        type="submit"
+        class="btn btn-light border"
+        title="Send"
+      >
+        <app-icon
+          variant="send"
+          no-margin
+        />
+        <span class="visually-hidden">Post Comment</span>
+      </button>
+    </form>
+  </div>
+</template>
+
+<script lang="ts">
+export interface ChatMessage {
+  id: PropertyKey;
+  date: Date;
+  user?: string;
+  text: string;
+}
+</script>
+
+<script setup lang="ts">
+interface Props {
+  messages: ChatMessage[];
+  emptyText?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emptyText: 'Start a discussion…',
+});
+
+defineExpose({ clear });
+
+const emit = defineEmits(['send']);
+const draft = ref('');
+
+function send() {
+  emit('send', draft.value);
+}
+
+function clear() {
+  draft.value = '';
+}
+</script>
+
+<style lang="scss">
+.chat-box {
+  display: flex;
+  flex-direction: column;
+
+  .message-list {
+    list-style-type: none;
+    padding: 1rem;
+    margin: 0;
+    max-height: 30rem;
+    overflow: auto;
+  }
+
+  .empty-notice {
+    text-align: center;
+    padding: 5rem 1rem;
+    font-size: 1.5em;
+    font-weight: 300;
+
+    i {
+      opacity: 0.4;
+    }
+    span {
+      opacity: 0.65;
+    }
+  }
+
+  .message-list,
+  .empty-notice {
+    border-top: 1px solid var(--bs-border-color);
+    box-shadow: inset 0 0px 0.5rem rgba(0, 0, 0, 0.075);
+  }
+
+  .input-group {
+    * {
+      border-radius: 0;
+    }
+
+    textarea {
+      &:focus {
+        box-shadow: none;
+      }
+    }
+  }
+}
+</style>

components/ChatBoxMessage.vue

@@ -0,0 +1,64 @@
+<template>
+  <li class="chat-box-message">
+    <header>
+      <span class="visually-hidden">Comment by</span>
+      <span class="fw-bold">
+        <app-icon variant="account_circle" />{{ props.user ?? 'Anonymous' }}
+      </span>
+      <span :title="date">{{ elapsed }}</span>
+    </header>
+    <blockquote>{{ props.text }}</blockquote>
+  </li>
+</template>
+
+<script setup lang="ts">
+import { formatElapsed, formatShort } from '~/util/time';
+
+interface Props {
+  id: PropertyKey;
+  text: string;
+  user?: string;
+  date: Date;
+}
+
+const props = defineProps<Props>();
+const elapsed = computed(() => formatElapsed(props.date));
+const date = computed(() => formatShort(props.date));
+</script>
+
+<style lang="scss">
+.chat-box-message {
+  width: calc(100% - 1rem);
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  background: var(--bs-light);
+  border: 1px solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius);
+  box-shadow: var(--bs-box-shadow-sm);
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  &:last-child {
+    margin: 0;
+  }
+
+  &.mine {
+    background: var(--bs-primary-bg-subtle);
+    border-color: var(--bs-primary-border-subtle);
+    margin-left: auto;
+
+    header {
+      text-align: right;
+    }
+  }
+
+  blockquote {
+    white-space: pre-line;
+    margin: 0;
+  }
+}
+</style>

components/dashboard/Toolbar.vue

@@ -4,22 +4,33 @@
       <app-icon variant="edit_location_alt" size="24" />
       Edit
     </nuxt-link>
-    <div class="btn-group">
+    <div class="btn-group ms-1">
+      <nuxt-link
+        class="btn"
+        :to="reviewRoute"
+      >
+        <app-icon
+          variant="playlist_add_check"
+          size="24"
+          no-margin
+        />
+        <span class="d-none d-sm-inline ms-2">Review</span>
+      </nuxt-link>
       <!--
       <a :href="tasksHref" class="btn" target="_blank">
         <app-icon variant="checklist" size="24" />
         <span class="d-none d-sm-inline">Tasks</span>
       </a>
       -->
       <nuxt-link class="btn" :to="exportRoute" :aria-disabled="!workspace.center">
-        <app-icon variant="drive_folder_upload" size="24" />
-        <span class="d-none d-sm-inline">Export</span>
+        <app-icon variant="drive_folder_upload" size="24" no-margin />
+        <span class="d-none d-sm-inline ms-2">Export</span>
       </nuxt-link>
     </div>
     <div class="btn-group ms-auto">
       <nuxt-link class="btn" :to="settingsRoute">
-        <app-icon variant="settings" size="24" />
-        <span class="d-none d-sm-inline">Settings</span>
+        <app-icon variant="settings" size="24" no-margin />
+        <span class="d-none d-sm-inline ms-2">Settings</span>
       </nuxt-link>
     </div>
   </div>
@@ -49,6 +60,7 @@ const editRoute = computed(() => ({
   hash: editHash.value
 }));
 
+const reviewRoute = computed(() => workspacePath('review'));
 const exportRoute = computed(() => workspacePath('export'));
 const settingsRoute = computed(() => workspacePath('settings'));