Docs

Overview

The docs module provides a collaborative document editor with folder organization, supporting both personal documents and hub-scoped documents.

Module path: src/lib/modules/docs/ Routes: /docs, /docs/[id]

Document Data Model

interface Doc {
  id: string;
  title: string;
  type: DocType;           // 'document' | 'list' | 'board' | 'calendar'
  description?: string;
  status: DocumentStatus;  // 'active' | 'draft' | 'deleted'
  createdAt: Timestamp;
  createdBy: string;
  hubId: string;
  folderId?: string;
}

interface Folder {
  id: string;
  name: string;
  hubId: string;
  position: number;
  createdAt: Timestamp;
  createdBy: string;
  status: FolderStatus;    // 'active' | 'draft' | 'deleted'
}

Storage Architecture

Unlike blogs (which store content as JSON in Firestore), docs use a split storage approach:

Metadata: Firestore (documents/{docId} or hubs/{hubId}/documents/{docId})
Content: Firebase Realtime Database (for real-time sync capabilities)

EditorJS Integration

Controller: src/lib/modules/docs/components/doc-editor.svelte.ts

Same EditorJS tools as the blog editor. Key differences:

Document discovery searches personal collection first, then all hubs
Content synced via Realtime Database
Title updates handle personal vs hub document paths

State Management

docsManager

docsManager.createDoc(title, type, options);
docsManager.updateDocName(docId, newTitle);
docsManager.updateDocContent(docId, content);
docsManager.deleteDoc(docId);
docsManager.softDeleteDoc(docId);  // status: 'deleted'
docsManager.selectDocItem(itemId, multi?);

documentsManager

Alternative store using Firestore + Realtime Database:

Tracks current document for editing
Manages active/draft/deleted documents

Components

Component	Purpose
`doc-editor.svelte`	EditorJS editor for documents
`docs-grid-view.svelte`	Main grid (personal + hubs)
`docs-personal-grid.svelte`	Personal docs section
`docs-hub-grid.svelte`	Hub docs section
`docs-dialogs.svelte`	Create/update/delete dialogs
`doc-form.svelte`	Document create/update form
`folder-form.svelte`	Folder create/update form
`hub-doc-card.svelte`	Document card display
`hub-folder-card.svelte`	Folder card display

Personal vs Hub Documents

Context	Firestore Path	Description
Personal	`documents/{docId}`	User’s own documents
Hub	`hubs/{hubId}/documents/{docId}`	Documents within a hub

The editor auto-discovers documents by searching personal collection first, then hub collections.