Bug fixes: Improve Task Workflows, Project Permissions, Pagination, and UI Consistency

assets/scss/theme.scss

@@ -4,6 +4,8 @@
 $border-radius: 0.15rem;
 $card-height: 100%;
 $primary: #32006e;
+$primary-hover: #421178;
+$primary-soft: #f1eeff;
 $secondary: #5f647a;
 $btn-font-weight: 600;
 
@@ -22,8 +24,36 @@ $tdei-cyan: #59c3c8;
 $purple-background-light: #f4f0fb;
 $purple-background-dark: #ddd2ee;
 $purple-background-medium: #ebe4f6;
-$text-navy: #1A1E3D;
-$text-secondary: #5A607B;
+$text-navy: #1a1e3d;
+$text-secondary: #5a607b;
+$text-disabled: #8a91ab;
+$surface-card: #ffffff;
+$surface-subtle: #fbfcff;
+$border-card: #e5e7f0;
+$border-subtle: #dfe2ef;
+$progress-border: #d9ddf0;
+$progress-track: #ebedf6;
+$progress-fill: #4e5fe0;
+$link-text: #5578d9;
+$hero-gradient-start: #eeeaff;
+$hero-gradient-end: #f9f4ff;
+$header-shadow: 0 0.1875rem 0.375rem rgba($black, 0.16);
+$status-warning-text: #8a6300;
+$status-warning-surface: #fffaf0;
+$status-warning-border: #ead9ad;
+$task-ready-mapping: #fde9aa;
+$task-ready-validation: #a8d8f8;
+$task-remap: #f8be90;
+$task-completed: #aae8cd;
+$status-completed-surface: #f6fcfa;
+$status-completed-border: #d4e4dd;
+$status-completed-text: #067a57;
+$status-in-progress-surface: #f4fbff;
+$status-in-progress-border: #c8e0ee;
+$status-in-progress-text: #1a74a8;
+$status-draft-surface: #fffcf5;
+$status-draft-border: #e9e1d3;
+$status-draft-text: #8f6c1a;
 $dropdown-active-bg: #e2f0f8;
 $danger-red: #c7393a;
 

components/AppPage.vue

@@ -5,15 +5,20 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  fluid: {
-    type: Boolean,
-    default: false,
-  },
+interface Props {
+  fluid?: boolean;
+  padding?: 'default' | 'none' | 'sm';
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  fluid: false,
+  padding: 'default',
 });
 
 const classes = computed(() => ({
-  'py-4': true,
+  'py-0': props.padding === 'none',
+  'py-3': props.padding === 'sm',
+  'py-4': props.padding === 'default',
   'container-fluid': props.fluid === true,
   'container-lg': props.fluid === false,
 }));

components/AreaUnitToggle.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="area-unit-toggle"
+    :class="`area-unit-toggle-${size}`"
+    role="group"
+    :aria-label="label"
+  >
+    <button
+      v-for="option in AREA_UNIT_OPTIONS"
+      :key="option.value"
+      class="area-unit-toggle-option"
+      :class="{ 'area-unit-toggle-option-active': areaDisplayUnit === option.value }"
+      type="button"
+      :aria-pressed="areaDisplayUnit === option.value"
+      :disabled="disabled"
+      @click="areaDisplayUnit = option.value"
+    >
+      {{ option.label }}
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AREA_UNIT_OPTIONS, type AreaDisplayUnit } from '~/util/area';
+
+interface Props {
+  disabled?: boolean;
+  label: string;
+  size?: 'sm' | 'md';
+}
+
+withDefaults(defineProps<Props>(), {
+  disabled: false,
+  size: 'sm',
+});
+
+const areaDisplayUnit = defineModel<AreaDisplayUnit>({ required: true });
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/scss/theme.scss";
+
+.area-unit-toggle {
+  display: inline-flex;
+  padding: 0.15rem;
+  background: rgba($text-navy, 0.06);
+  border: 1px solid rgba($text-navy, 0.12);
+  border-radius: 0.45rem;
+}
+
+.area-unit-toggle-option {
+  min-width: 2.8rem;
+  padding: 0.3rem 0.45rem;
+  color: $secondary;
+  font-size: 0.78rem;
+  font-weight: 700;
+  line-height: 1;
+  background: transparent;
+  border: 0;
+  border-radius: 0.32rem;
+}
+
+.area-unit-toggle-md {
+  padding: 0.2rem;
+  border-radius: 0.55rem;
+}
+
+.area-unit-toggle-md .area-unit-toggle-option {
+  min-width: 3.25rem;
+  padding: 0.35rem 0.55rem;
+  font-size: 0.85rem;
+  border-radius: 0.4rem;
+}
+
+.area-unit-toggle-option:hover:not(:disabled),
+.area-unit-toggle-option:focus-visible {
+  color: $text-navy;
+}
+
+.area-unit-toggle-option:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba($primary, 0.16);
+}
+
+.area-unit-toggle-option-active {
+  color: $text-navy;
+  background: $white;
+  box-shadow: $box-shadow-sm;
+}
+</style>

components/project-wizard/RichTextEditor.vue

@@ -9,7 +9,7 @@
         v-for="tool in tools"
         :key="tool.id"
         class="btn btn-link project-wizard-rich-text-editor-tool"
-        :class="{ 'project-wizard-rich-text-editor-tool-active': isToolActive(tool.id) }"
+        :class="{ 'project-wizard-rich-text-editor-tool-active': tool.active }"
         type="button"
         :aria-label="tool.label"
         @mousedown.prevent
@@ -31,9 +31,9 @@
 </template>
 
 <script setup lang="ts">
+import type { Editor } from '@tiptap/core';
 import { EditorContent, useEditor } from '@tiptap/vue-3';
 import { Image } from '@tiptap/extension-image';
-import { Link } from '@tiptap/extension-link';
 import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table';
 import { StarterKit } from '@tiptap/starter-kit';
 
@@ -47,56 +47,76 @@ type RichTextToolId
     | 'table'
     | 'quote';
 
-interface Props {
-  modelValue: string;
-}
-
-const props = defineProps<Props>();
-const emit = defineEmits<{
-  'update:modelValue': [value: string];
-}>();
+const model = defineModel<string>({ default: '' });
 
-const tools: Array<{ icon: string; id: RichTextToolId; label: string }> = [
+const TOOL_DEFINITIONS: Array<{ icon: string; id: RichTextToolId; label: string }> = [
   { id: 'bold', icon: 'format_bold', label: 'Bold' },
   { id: 'italic', icon: 'format_italic', label: 'Italic' },
   { id: 'link', icon: 'link', label: 'Link' },
   { id: 'bullet-list', icon: 'format_list_bulleted', label: 'Bullet list' },
   { id: 'numbered-list', icon: 'format_list_numbered', label: 'Numbered list' },
   { id: 'image', icon: 'image', label: 'Image' },
   { id: 'table', icon: 'table_rows', label: 'Table' },
-  { id: 'quote', icon: 'format_quote', label: 'Quote' },
+  { id: 'quote', icon: 'format_quote', label: 'Quote' }
 ];
+const ACTIVE_TOOL_NAMES: Partial<Record<RichTextToolId, string>> = {
+  'bold': 'bold',
+  'italic': 'italic',
+  'link': 'link',
+  'bullet-list': 'bulletList',
+  'numbered-list': 'orderedList',
+  'image': 'image',
+  'table': 'table',
+  'quote': 'blockquote'
+};
+const activeToolIds = ref<Set<RichTextToolId>>(new Set());
+const lastEditorModelValue = ref(model.value);
+const tools = computed(() =>
+  TOOL_DEFINITIONS.map(tool => ({
+    ...tool,
+    active: activeToolIds.value.has(tool.id)
+  }))
+);
 
 const editor = useEditor({
-  content: props.modelValue || '<p></p>',
+  content: model.value || '<p></p>',
+  editable: true,
   extensions: [
-    StarterKit,
-    Link.configure({
-      openOnClick: false,
-      autolink: true,
-      defaultProtocol: 'https',
+    StarterKit.configure({
+      link: {
+        openOnClick: false,
+        autolink: true,
+        defaultProtocol: 'https'
+      }
     }),
     Image,
     Table.configure({
-      resizable: false,
+      resizable: false
     }),
     TableRow,
     TableHeader,
-    TableCell,
+    TableCell
   ],
   editorProps: {
     attributes: {
-      class: 'project-wizard-rich-text-editor-surface project-wizard-rich-text-content',
-    },
+      class: 'project-wizard-rich-text-editor-surface project-wizard-rich-text-content'
+    }
   },
   onUpdate({ editor: currentEditor }) {
     const nextValue = currentEditor.isEmpty ? '' : currentEditor.getHTML();
-    emit('update:modelValue', nextValue);
+    lastEditorModelValue.value = nextValue;
+    model.value = nextValue;
+  },
+  onCreate({ editor: currentEditor }) {
+    updateActiveTools(currentEditor);
   },
+  onTransaction({ editor: currentEditor }) {
+    updateActiveTools(currentEditor);
+  }
 });
 
 watch(
-  () => props.modelValue,
+  model,
   (value) => {
     const currentEditor = editor.value;
 
@@ -106,37 +126,27 @@ watch(
 
     const nextValue = value || '<p></p>';
 
-    if (currentEditor.isFocused || currentEditor.getHTML() === nextValue) {
+    if (
+      value === lastEditorModelValue.value
+      || currentEditor.getHTML() === nextValue
+    ) {
       return;
     }
 
     currentEditor.commands.setContent(nextValue, { emitUpdate: false });
-  },
-);
-
-function isToolActive(toolId: RichTextToolId) {
-  const currentEditor = editor.value;
-
-  if (!currentEditor) {
-    return false;
+    lastEditorModelValue.value = value;
   }
+);
 
-  switch (toolId) {
-    case 'bold':
-      return currentEditor.isActive('bold');
-    case 'italic':
-      return currentEditor.isActive('italic');
-    case 'link':
-      return currentEditor.isActive('link');
-    case 'bullet-list':
-      return currentEditor.isActive('bulletList');
-    case 'numbered-list':
-      return currentEditor.isActive('orderedList');
-    case 'quote':
-      return currentEditor.isActive('blockquote');
-    default:
-      return false;
-  }
+function updateActiveTools(currentEditor: Editor) {
+  activeToolIds.value = new Set(
+    TOOL_DEFINITIONS
+      .filter(({ id }) => {
+        const activeToolName = ACTIVE_TOOL_NAMES[id];
+        return activeToolName ? currentEditor.isActive(activeToolName) : false;
+      })
+      .map(({ id }) => id)
+  );
 }
 
 function applyTool(toolId: RichTextToolId) {