Multi-Tag System with Auto-Suggestions

[adriandarian]

Description

Implement a flexible tagging system for documents with auto-suggestions based on document content, filename, type, and usage patterns. Allow multiple tags per document with color coding and filtering.

---

Requirements

• Create tag data structure
• Build tag input component (multi-select)
• Implement tag CRUD operations
• Add auto-suggestion algorithm
• Analyze document content for suggestions
• Parse filename for tag suggestions
• Consider document type for tags
• Learn from user tagging patterns
• Add tag color customization
• Implement tag filtering
• Show tag usage statistics
• Add tag management page

---

Auto-Suggestion Sources

1. Document Content Analysis

• Extract keywords from resume/CV
• Identify skills mentioned
• Detect job titles
• Find company names
• Recognize programming languages
• Identify certifications

2. Filename Parsing

• Extract company names
• Identify role/position
• Detect version numbers
• Parse date patterns
• Recognize document types

3. Document Type

• Resume → suggest: "resume", "cv", "application"
• Cover Letter → suggest: "cover-letter", "application"
• Certificate → suggest: "certification", "credential"
• Portfolio → suggest: "portfolio", "work-sample"

4. Usage Patterns

• Tags used for similar documents
• Tags used for same company
• Tags used for same position type
• Recently used tags
• Frequently used tags

5. Context

• Application company
• Application position
• Application status
• Related documents

---

Tag Features

Tag Properties

• Name: String (required)
• Color: From palette
• Category: Group (e.g., Skill, Company, Type)
• Usage Count: Number
• Created: Timestamp

Tag Actions

• Add tag to document
• Remove tag from document
• Create new tag
• Rename tag
• Change tag color
• Merge tags
• Delete tag
• Bulk tag operations

Tag Categories

• Document Type: Resume, Cover Letter, Portfolio, etc.
• Skills: JavaScript, Python, React, etc.
• Companies: Google, Microsoft, etc.
• Roles: Frontend, Backend, Full-Stack, etc.
• Status: Current, Archive, Template, etc.
• Custom: User-defined

---

Acceptance Criteria

• Can add multiple tags to documents
• Tag input shows auto-suggestions
• Suggestions are relevant and accurate
• Can create new tags inline
• Can customize tag colors
• Tags display as colorful badges
• Can filter documents by tags
• Can filter by multiple tags (AND/OR)
• Tag management page functional
• Can merge duplicate tags
• Tag statistics display correctly
• Tags persist to storage
• Performance good with 500+ tags

---

Technical Details

Data Structure

interface Tag {
  id: string;
  name: string;
  color: string;
  category: TagCategory;
  usageCount: number;
  createdAt: Date;
}

interface TagSuggestion {
  tag: string;
  confidence: number; // 0-1
  source: 'content' | 'filename' | 'type' | 'pattern' | 'context';
  reason: string;
}

type TagCategory = 
  | 'document-type'
  | 'skill'
  | 'company'
  | 'role'
  | 'status'
  | 'custom';

Files to Create

• src/types/tag.ts
• src/stores/tagStore.ts
• src/components/documents/TagInput.tsx
• src/components/documents/TagBadge.tsx
• src/components/documents/TagManager.tsx
• src/lib/tagSuggestions.ts
• src/lib/contentAnalysis.ts
• src/hooks/useTags.ts
• src/hooks/useTagSuggestions.ts

Suggestion Algorithm

async function generateTagSuggestions(
  document: Document,
  context?: ApplicationContext
): Promise<TagSuggestion[]> {
  const suggestions: TagSuggestion[] = [];
  
  // Analyze content
  const contentTags = await analyzeContent(document.file);
  suggestions.push(...contentTags);
  
  // Parse filename
  const filenameTags = parseFilename(document.name);
  suggestions.push(...filenameTags);
  
  // Type-based tags
  const typeTags = getTypeBasedTags(document.type);
  suggestions.push(...typeTags);
  
  // Pattern-based tags
  const patternTags = await analyzeUsagePatterns(document);
  suggestions.push(...patternTags);
  
  // Context-based tags
  if (context) {
    const contextTags = getContextTags(context);
    suggestions.push(...contextTags);
  }
  
  // Sort by confidence and deduplicate
  return deduplicateAndSort(suggestions);
}

---

UI Components

Tag Input

<TagInput
  document={document}
  suggestions={suggestions}
  onAdd={handleAddTag}
  onRemove={handleRemoveTag}
  onCreate={handleCreateTag}
/>

Tag Display

<div className="flex flex-wrap gap-2">
  {tags.map(tag => (
    <TagBadge
      key={tag.id}
      tag={tag}
      onRemove={() => removeTag(tag.id)}
    />
  ))}
</div>

Tag Filter

<TagFilter
  mode="AND" // or "OR"
  selectedTags={selectedTags}
  onChange={handleFilterChange}
/>

---

Testing Plan

• Unit tests for suggestion algorithm
• Test content analysis accuracy
• Test filename parsing
• Test pattern recognition
• Test tag CRUD operations
• Test tag filtering (AND/OR)
• Test tag management page
• E2E test for tagging workflow
• Performance test with 1000+ tags

---

Success Metrics

• Suggestion Accuracy: >80% relevant suggestions
• Suggestion Acceptance: >60% of suggestions accepted
• Time Saved: 15 seconds per document
• Tag Coverage: >90% documents have 3+ tags

---

Related Tasks

• TASK-200: Custom Folder System - 📋 Planned
• TASK-202: Smart Document Organization - 📋 Planned
• TASK-204: Tag-based Smart Views - 💡 Backlog

---

Notes

• Consider using ML for content analysis in future
• Tag suggestions improve with usage over time
• May add tag hierarchies/relationships later
• Consider tag translation for international users