📕 Strapi Dictionary Plugin (Premium)

A powerful, high-performance plugin to manage global translations, UI phrases, and dictionary entries directly from the Strapi Admin Panel.

NOW featuring a Premium UI, Dark Mode Support, and advanced Folder Management.

✨ Features

🎨 Premium UI & Experience

• Modern Dashboard: Clean, spacious layout with summary statistics (Total Entries, Folders, Locales).
• Dark Mode Support: Fully integrated with Strapi's design system—toggle your theme and the plugin adapts instantly.
• Visual Hierarchy: Beautiful tree view with distinct styles for Folders vs. Items, visual depth guides, and hover effects.

📂 Advanced Folder Management

• Batch Operations: Create and manage entire "folders" of keys (e.g., auth.login.*) in one go.
• Smart Sanitization: Automatically converts spaces to underscores (e.g., "My Folder" -> My_Folder) to ensure valid API keys.
• Deep Nesting: Unlimited depth support (e.g., home.header.menu.item).

🛠 Core Capabilities

• Multi-language: Store translations for unlimited locales in a single entry.
• Search: Real-time search to instantly filter thousands of keys.
• Import/Export: Bulk import capabilities for easy migration.
• Developer API: Optimized public endpoint to fetch flattened translation JSON for your frontend.

🚀 Installation

1. Clone/Copy this plugin into src/plugins/dictionary.
2. Enable in config/plugins.ts:

   export default () => ({
     dictionary: {
       enabled: true,
     },
   });

3. Rebuild: npm run build && npm run develop.

📖 User Guide

1. Dictionary Manager

Navigate to Dictionary Manager in the main menu.

• Dashboard: View quick stats at the top.
• Search: Type in the search bar to filter keys instantly.
• Expand/Collapse: Use the controls to manage the tree view.

2. Creating Entries

• Add Entry: Creates a single key-value pair (e.g., button.save).
• Create Folder: Opens the Folder Mode modal.
  • Prefix: Set a parent folder name (e.g., auth).
  • Items: Add multiple child keys at once (e.g., login, logout, signup).
  • Result: Creates auth.login, auth.logout, etc.

3. Editing Folders

Click the Pencil Icon next to any folder to open Batch Edit Mode.

• Add new sub-items.
• Edit specific sub-item translations.
• Delete a sub-item from the list to remove it from the database.

🔌 API Reference

Fetch translations for your frontend (Next.js, React, Mobile).

GET /api/dictionary

Query Params:

• lang (optional): Locale code (default: en).

Response: Returns a flat, optimized JSON object ideal for i18n libraries.

{
  "auth.login.title": "Welcome Back",
  "auth.login.button": "Sign In",
  "common.error": "Something went wrong"
}

💻 Tech Stack & Design

• UI Framework: @strapi/design-system with strict Layout implementation.
• Theming: Dynamic DesignSystemProvider injection for seamless Dark/Light mode switching.
• State Management: React useState / useMemo for efficient tree rendering.
• Backend Service: Custom Content Type dictionary-item with JSON fields for flexibility.