remove Trans component and update copilot instruction

Author: Klhmt

.github/copilot-instructions.md

@@ -15,10 +15,12 @@ Fluorite is an elegant Progressive Web App (PWA) video player built with React,
 **Development Workflow:**
 
 1. Install dependencies: `pnpm install`
-2. Run linting: `pnpm run lint` (run ESLint to ensure code quality)
-3. Build the project: `pnpm run build` (typecheck and build application, NEVER CANCEL, set timeout to 30+ seconds)
-4. Run development server: `pnpm run dev` (starts development server with hot reload)
-5. Run preview server: `pnpm run preview` (for serving built application)
+2. Run text extract command for translation: `pnpm run extract`
+3. Add the translation in all locale sub-directory of `src/locales`
+4. Run linting: `pnpm run lint` (run ESLint to ensure code quality)
+5. Build the project: `pnpm run build` (typecheck and build application, NEVER CANCEL, set timeout to 30+ seconds)
+6. Run development server: `pnpm run dev` (starts development server with hot reload)
+7. Run preview server: `pnpm run preview` (for serving built application)
 
 ### Running the Application
 
@@ -90,6 +92,7 @@ After making any changes, ALWAYS test these scenarios:
   - `components/`: UI components (ControlBar.tsx)
   - `hooks/`: Custom React hooks (useFileHandler.ts, etc.)
   - `utils.ts`: Utility functions and constants
+  - `locales/`: Extracted and translated text in PO format
 - `public/`: Static assets (fluorite.svg)
 - `dist/`: Build output (generated)
 
@@ -101,6 +104,7 @@ After making any changes, ALWAYS test these scenarios:
 - `tsconfig.app.json`: Application TypeScript settings
 - `eslint.config.js`: ESLint configuration
 - `prettier.config.js`: Prettier formatting configuration
+- `lingui.config.ts`: Lingui configuration
 
 **Important Implementation Details:**
 
@@ -109,6 +113,7 @@ After making any changes, ALWAYS test these scenarios:
 - PWA features include service worker, manifest, and file handling
 - Tailwind CSS for styling
 - React 19 with TypeScript strict mode
+- Use the Lingui macro for translating UI text (not the `<Trans>` component)
 
 ## Common Commands Reference
 
@@ -127,6 +132,9 @@ pnpm run lint         # Run ESLint
 # Formatting
 pnpx prettier --write .  # Format all files
 pnpx prettier --check .  # Check formatting
+
+# Translating
+pnpm run extract # Extract text from the app and add them in PO translation files
 ```
 
 **Troubleshooting:**
@@ -143,6 +151,7 @@ pnpx prettier --check .  # Check formatting
 **Language:** TypeScript (strict mode)
 **Styling:** Tailwind CSS v4 with Vite plugin
 **PWA:** vite-plugin-pwa with Workbox
+**Internationalization:** Lingui with Vite plugin
 
 **Deploy Target:** Vercel (based on README badges)
 **Browser Support:** Modern browsers with PWA support

src/components/VideoPlayer.tsx

@@ -21,7 +21,7 @@ import {
   updatePlayStateAtom,
   updateVolumeStateAtom,
 } from "../store/video";
-import { useLingui, Trans } from "@lingui/react/macro";
+import { useLingui } from "@lingui/react/macro";
 
 export default function VideoPlayerApp() {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -374,9 +374,7 @@ export default function VideoPlayerApp() {
               <div className="flex justify-center">
                 <HiFilm className="h-12 w-12" />
               </div>
-              <p>
-                <Trans>Drop video file here</Trans>
-              </p>
+              <p>t`Drop video file here`</p>
             </div>
           </div>
         </div>

src/locales/en/messages.po

@@ -47,23 +47,23 @@ msgstr "Color Space:"
 msgid "Container Format"
 msgstr "Container Format"
 
-#: src/components/VideoPlayer.tsx:372
+#: src/components/VideoPlayer.tsx:355
 msgid "Drop a video file anywhere or click here to open one"
 msgstr "Drop a video file anywhere or click here to open one"
 
 #: src/components/VideoPlayer.tsx:395
-msgid "Drop video file here"
-msgstr "Drop video file here"
+#~ msgid "Drop video file here"
+#~ msgstr "Drop video file here"
 
 #: src/components/VideoInfoOverlay.tsx:27
 msgid "Duration"
 msgstr "Duration"
 
-#: src/components/ControlBar.tsx:192
+#: src/components/ControlBar.tsx:202
 msgid "Enter fullscreen"
 msgstr "Enter fullscreen"
 
-#: src/components/ControlBar.tsx:191
+#: src/components/ControlBar.tsx:201
 msgid "Exit fullscreen"
 msgstr "Exit fullscreen"
 
@@ -83,22 +83,26 @@ msgstr "fps"
 msgid "Frame Rate:"
 msgstr "Frame Rate:"
 
-#: src/components/ControlBar.tsx:142
+#: src/components/ControlBar.tsx:152
 msgid "Mute"
 msgstr "Mute"
 
-#: src/components/ControlBar.tsx:204
+#: src/components/ControlBar.tsx:214
 msgid "Open File"
 msgstr "Open File"
 
-#: src/components/ControlBar.tsx:119
+#: src/components/ControlBar.tsx:126
 msgid "Pause"
 msgstr "Pause"
 
-#: src/components/ControlBar.tsx:119
+#: src/components/ControlBar.tsx:126
 msgid "Play"
 msgstr "Play"
 
+#: src/components/ControlBar.tsx:126
+msgid "Replay"
+msgstr "Replay"
+
 #: src/components/VideoInfoOverlay.tsx:29
 msgid "Resolution"
 msgstr "Resolution"
@@ -107,18 +111,18 @@ msgstr "Resolution"
 msgid "Sample Rate:"
 msgstr "Sample Rate:"
 
-#: src/components/ControlBar.tsx:142
+#: src/components/ControlBar.tsx:152
 msgid "Unmute"
 msgstr "Unmute"
 
 #: src/components/VideoInfoOverlay.tsx:103
 msgid "Video Details"
 msgstr "Video Details"
 
-#: src/components/ControlBar.tsx:180
+#: src/components/ControlBar.tsx:190
 msgid "Video Information"
 msgstr "Video Information"
 
-#: src/components/ControlBar.tsx:169
+#: src/components/ControlBar.tsx:179
 msgid "Volume"
 msgstr "Volume"

src/locales/fr/messages.po

@@ -47,23 +47,23 @@ msgstr "Espace colorimétrique :"
 msgid "Container Format"
 msgstr "Format de conteneur"
 
-#: src/components/VideoPlayer.tsx:372
+#: src/components/VideoPlayer.tsx:355
 msgid "Drop a video file anywhere or click here to open one"
 msgstr "Déposez un fichier vidéo n'importe où, ou cliquez ici pour en ouvrir un"
 
 #: src/components/VideoPlayer.tsx:395
-msgid "Drop video file here"
-msgstr "Déposez un fichier vidéo ici"
+#~ msgid "Drop video file here"
+#~ msgstr "Déposez un fichier vidéo ici"
 
 #: src/components/VideoInfoOverlay.tsx:27
 msgid "Duration"
 msgstr "Durée"
 
-#: src/components/ControlBar.tsx:192
+#: src/components/ControlBar.tsx:202
 msgid "Enter fullscreen"
 msgstr "Mettre en plein écran"
 
-#: src/components/ControlBar.tsx:191
+#: src/components/ControlBar.tsx:201
 msgid "Exit fullscreen"
 msgstr "Sortir du plein écran"
 
@@ -83,22 +83,26 @@ msgstr "fps"
 msgid "Frame Rate:"
 msgstr "Fréquence d'images :"
 
-#: src/components/ControlBar.tsx:142
+#: src/components/ControlBar.tsx:152
 msgid "Mute"
 msgstr "Désactiver le son"
 
-#: src/components/ControlBar.tsx:204
+#: src/components/ControlBar.tsx:214
 msgid "Open File"
 msgstr "Ouvrir un fichier"
 
-#: src/components/ControlBar.tsx:119
+#: src/components/ControlBar.tsx:126
 msgid "Pause"
 msgstr "Pause"
 
-#: src/components/ControlBar.tsx:119
+#: src/components/ControlBar.tsx:126
 msgid "Play"
 msgstr "Lire"
 
+#: src/components/ControlBar.tsx:126
+msgid "Replay"
+msgstr "Relancer"
+
 #: src/components/VideoInfoOverlay.tsx:29
 msgid "Resolution"
 msgstr "Résolution"
@@ -107,18 +111,18 @@ msgstr "Résolution"
 msgid "Sample Rate:"
 msgstr "Fréquence d'échantillonnage :"
 
-#: src/components/ControlBar.tsx:142
+#: src/components/ControlBar.tsx:152
 msgid "Unmute"
 msgstr "Activer le son"
 
 #: src/components/VideoInfoOverlay.tsx:103
 msgid "Video Details"
 msgstr "Détails vidéo"
 
-#: src/components/ControlBar.tsx:180
+#: src/components/ControlBar.tsx:190
 msgid "Video Information"
 msgstr "Informations sur la vidéo"
 
-#: src/components/ControlBar.tsx:169
+#: src/components/ControlBar.tsx:179
 msgid "Volume"
 msgstr "Volume"