npm package: @jaydeep28/strapi-plugin-dictionary
Description: A powerful, high-performance plugin to manage global translations, UI phrases, and dictionary entries directly from the Strapi Admin Panel.
Author: Jaydeep
Latest version: 1.0.1

# 📕 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`:
    ```typescript
    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.

```json
{
  "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.