refactor(frontend): split documents and review into workspace components

frontend/app/components/workspace/documents/CrmDocumentsPanel.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import ContactCollaborativeEditor from "~~/app/components/ContactCollaborativeEditor.client.vue";
+
+type DocumentSortOption = {
+  value: string;
+  label: string;
+};
+
+type DocumentListItem = {
+  id: string;
+  title: string;
+  scope: string;
+  summary: string;
+  updatedAt: string;
+};
+
+type SelectedDocument = {
+  id: string;
+  title: string;
+  scope: string;
+  owner: string;
+  summary: string;
+  body: string;
+};
+
+const props = defineProps<{
+  documentSearch: string;
+  documentSortMode: string;
+  documentSortOptions: DocumentSortOption[];
+  filteredDocuments: DocumentListItem[];
+  selectedDocumentId: string;
+  selectedDocument: SelectedDocument | null;
+  formatDocumentScope: (scope: string) => string;
+  formatStamp: (iso: string) => string;
+}>();
+
+const emit = defineEmits<{
+  (e: "update:documentSearch", value: string): void;
+  (e: "update:documentSortMode", value: string): void;
+  (e: "select-document", documentId: string): void;
+  (e: "update-selected-document-body", value: string): void;
+}>();
+</script>
+
+<template>
+  <section class="flex h-full min-h-0 flex-col gap-0">
+    <div class="grid h-full min-h-0 flex-1 gap-0 md:grid-cols-[248px_minmax(0,1fr)]">
+      <aside class="h-full min-h-0 border-r border-base-300 flex flex-col">
+        <div class="sticky top-0 z-20 border-b border-base-300 bg-base-100 p-2">
+          <div class="flex items-center gap-1">
+            <input
+              :value="props.documentSearch"
+              type="text"
+              class="input input-bordered input-sm w-full"
+              placeholder="Search documents"
+              @input="emit('update:documentSearch', ($event.target as HTMLInputElement).value)"
+            >
+
+            <div class="dropdown dropdown-end">
+              <button
+                tabindex="0"
+                class="btn btn-ghost btn-sm btn-square"
+                title="Sort documents"
+              >
+                <svg viewBox="0 0 24 24" class="h-4 w-4 fill-current">
+                  <path d="M3 5h18v2H3zm3 6h12v2H6zm4 6h4v2h-4z" />
+                </svg>
+              </button>
+
+              <div tabindex="0" class="dropdown-content z-20 mt-2 w-44 rounded-xl border border-base-300 bg-base-100 p-2 shadow-lg">
+                <p class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-base-content/55">Sort docs</p>
+                <button
+                  v-for="option in props.documentSortOptions"
+                  :key="`document-sort-${option.value}`"
+                  class="btn btn-ghost btn-sm w-full justify-between"
+                  @click="emit('update:documentSortMode', option.value)"
+                >
+                  <span>{{ option.label }}</span>
+                  <span v-if="props.documentSortMode === option.value">✓</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto p-0">
+          <button
+            v-for="doc in props.filteredDocuments"
+            :key="doc.id"
+            class="w-full border-b border-base-300 px-3 py-2 text-left transition hover:bg-base-200/40"
+            :class="props.selectedDocumentId === doc.id ? 'bg-primary/10' : ''"
+            @click="emit('select-document', doc.id)"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <p class="min-w-0 flex-1 truncate text-xs font-semibold">{{ doc.title }}</p>
+            </div>
+            <p class="mt-0.5 truncate text-[11px] text-base-content/75">{{ props.formatDocumentScope(doc.scope) }}</p>
+            <p class="mt-0.5 line-clamp-2 text-[11px] text-base-content/70">{{ doc.summary }}</p>
+            <p class="mt-1 text-[10px] text-base-content/55">Updated {{ props.formatStamp(doc.updatedAt) }}</p>
+          </button>
+          <p v-if="props.filteredDocuments.length === 0" class="px-2 py-2 text-xs text-base-content/55">
+            No documents found.
+          </p>
+        </div>
+      </aside>
+
+      <article class="h-full min-h-0 flex flex-col">
+        <div v-if="props.selectedDocument" class="flex h-full min-h-0 flex-col p-3 md:p-4">
+          <div class="border-b border-base-300 pb-2">
+            <p class="font-medium">{{ props.selectedDocument.title }}</p>
+            <p class="text-xs text-base-content/60">
+              {{ props.formatDocumentScope(props.selectedDocument.scope) }} · {{ props.selectedDocument.owner }}
+            </p>
+            <p class="mt-1 text-sm text-base-content/80">{{ props.selectedDocument.summary }}</p>
+          </div>
+
+          <div class="mt-3 min-h-0 flex-1 overflow-y-auto">
+            <ContactCollaborativeEditor
+              :key="`doc-editor-${props.selectedDocument.id}`"
+              :model-value="props.selectedDocument.body"
+              :room="`crm-doc-${props.selectedDocument.id}`"
+              placeholder="Describe policy, steps, rules, and exceptions..."
+              @update:model-value="emit('update-selected-document-body', $event)"
+            />
+          </div>
+        </div>
+
+        <div v-else class="flex h-full items-center justify-center text-sm text-base-content/60">
+          No document selected.
+        </div>
+      </article>
+    </div>
+  </section>
+</template>