canviq — Category & Label Editor

MOCKUP
Scene 1 — Category Management

Main view showing all feedback categories as draggable, reorderable cards. Each card displays color coding, multilingual status, and submission count.

Categories & Labels

Settings > Categories & Labels
⠇ Feature Request EN +5 142 submissions
⠇ Bug Report EN +5 98 submissions
⠇ UX Improvement EN +2 76 submissions
⠇ Performance EN 54 submissions
⠇ Integration EN +5 41 submissions
⠇ Documentation EN +2 33 submissions
⠇ Accessibility EN +5 27 submissions
⠇ Security EN 19 submissions
+ Add Category

Design Annotations

1

Drag-to-reorder: Categories use display_order column. Drag handle on left, CSS transform + blue drop line indicates placement.

2

JSONB multilingual names: Category names stored as JSONB with locale keys. "EN +5" badge = 6 translations configured.

3

Color assignment: Each category gets a unique color from the design system palette for consistent visual coding across the board.

4

Submission counts: Denormalized count (ADR-0006) shown inline. Categories with submissions cannot be deleted without reassignment.

Scene 2 — Category Create/Edit Modal

Full-featured category editor with multilingual name tabs, color picker, optional icon, description, and visibility toggles.

Edit Category

Name displayed to users in their language

✓
Feature Request

Shown when users select this category

Show on public board
Allow in submissions

Design Annotations

1

JSONB multilingual storage: Each tab writes to a different locale key in the JSONB column: {"en":"Feature Request","es":"Solicitud de funcionalidad",...}

2

Color-coding system: 12 preset swatches from design system + custom hex input. Color persists across cards, pills, and board filters.

3

Icon selection: Optional emoji-based icons render alongside category name in submission cards and filter dropdowns.

4

Visibility controls: "Show on public board" hides from users but keeps data. "Allow in submissions" prevents new use while preserving existing.

Scene 3 — Tags Management

Cross-cutting labels management with visual tag cloud, sortable table, and bulk operations including merge and category assignment.

Categories & Labels

Settings > Categories & Labels
checkout 89 mobile 67 performance 56 onboarding 52 ios 45 dark-mode 41 android 34 api 31 notifications 28 accessibility 23 search 19 pricing 15
3 selected
Tag Name ▼ Color Category Submissions ▲ Created Actions
checkoutBug Report89Jan 12
mobileFeature Request67Jan 8
performancePerformance56Jan 5
onboardingUX Improvement52Dec 28
ios--45Dec 20
dark-modeUX Improvement41Dec 15
android--34Dec 10
apiIntegration31Dec 5
notificationsFeature Request28Nov 30
accessibilityAccessibility23Nov 25

Design Annotations

1

Tags vs Categories: Categories are mutually exclusive (one per submission). Tags are cross-cutting labels (many per submission).

2

Tag cloud sizing: Pill font-size scales proportional to submission count. Visual density communicates tag popularity at a glance.

3

Merge workflow: Bulk select duplicates, merge into canonical tag. Rewrites submission_tags FK and removes source tags atomically.

4

Category affinity: Tags can optionally be linked to a parent category for organizational grouping in filters.

Scene 4 — Tag Merge Flow

Guided merge workflow for combining duplicate or similar tags. Step 2 (Preview) shows source tags, target tag, affected submissions, and irreversibility warning.

Merge Tags

1. Select → 2. Preview → 3. Confirm
● ios-app 12 submissions
● iOS 33 submissions
● ios-bugs 8 submissions
merge into
● ios 53 submissions
53
Submissions updated
3
Tags removed
1
Tag remaining
⚠
This action cannot be undone.

Merged tags will be permanently removed. All submissions currently tagged with source tags will be retagged with "ios".

Affected Submissions (showing 5 of 53)

#142 — App crashes on iOS 18 when opening profile
#138 — Push notifications not working on iOS
#127 — Dark mode inconsistencies on iOS app
#119 — Improve iOS widget support
#103 — Add Face ID authentication for iOS

Design Annotations

1

Irreversible operation UX: Three-step flow with explicit preview before destructive action. Warning card and confirmation button use amber/coral signaling.

2

Data integrity: Merge is an atomic transaction: UPDATE submission_tags SET tag_id = target WHERE tag_id IN (sources), then DELETE sources.

3

Audit trail: Merge operation logged to audit_log with before/after state, affected submission IDs, and acting admin.

4

Duplicate detection: Levenshtein distance + case-insensitive matching suggests merge candidates automatically (ADR-0013).

Scene 5 — Status Labels Customization

Customize the 7 submission status labels, colors, display names, and workflow transitions. Visual flow diagram shows the status state machine.

Categories & Labels

Settings > Categories & Labels
Status Workflow
1
Open
2
Under Review
D
Declined
3
Planned
4
In Progress
5
Shipped
M
Merged
Open Default status for new submissions
Under Review
203
Under Review Team is evaluating
PlannedDeclined
47
Planned Accepted and scheduled
In Progress
31
In Progress Actively being worked on
Shipped
18
Shipped Completed and deployed
89
Declined Not planned
24
Merged Duplicate, redirects to parent
12
Notify followers on status change

Design Annotations

1

ADR-0012 status workflow: 7-status enum with defined transitions. Open-only entry point, terminal states: Shipped, Declined, Merged.

2

Custom naming: Organizations can rename statuses (e.g., "Open" to "New", "Shipped" to "Released") while keeping the canonical enum internally.

3

Transition rules: Allowed transitions are configurable per status. Enforced both client-side (UI) and server-side (RLS + check constraints).

4

Auto-notifications: When enabled, status changes trigger email to all followers via Resend (ADR-0011). Respects notification_preferences per user.