Feature/UI redesing (#163)

* feat: redesign media upload UI with modern animations and improved UX

- Complete UI overhaul of MediaPreviewView, MediaProcessingView, and MediaSelectionView
- Add motion-v animations and enhanced visual design with gradients and shadows
- Implement step-by-step media processing workflow with progress indicators
- Add AGENTS.md coding guidelines document
- Fix FFmpeg instance cleanup and improve error handling
- Update types for media step configuration and processing

* refactor: modularize media processing and task management

Extract MediaProgressView component and useTaskListener composable for better separation of concerns. Replace command bus pattern with direct task polling, simplify error handling, and move layout structure to default layout.

* feat: redesign transcription detail page with animations and improved layout

- Add motion-v animations for page transitions, buttons, and sections
- Teleport transcription info to layout header (left side) as popover
- Teleport export toolbar to layout header (right side)
- Add loading state with animated spinner
- Enhance summary section with amber gradient styling
- Improve mode toggle with sliding indicator animation
- Add i18n translations for nameLabel and noMedia
- Make layout more mobile-friendly with responsive design

* Worked on the ui

* Updated the edit view

* cleanup of transcriptionService

* added dummy mode

* fixed the MediaPlaybackBar

* Squash merge ai/testing into feature/ui-redesing

* update the ci files

* Update the transcription list

* added cleanupTranscriptions

* Addd speaker stats

* added a progress indication for one segement

* added summary types

* added support for word export

In the export toolbar and a new button in the summary view.

* fixed pr findings

* Update bun.lock

* updated the translation file

* Removed unused component

* bumpt version to 0.6.0

* fixed pr findings

* Delete KeyboardShortcutsHint.vue

* fixed bun errors

* fixed console warnings

* added onboarding

* Add language selection to summary feature

- Create languages utility with 60+ supported languages (de, en, fr, it at top)
- Add optional language field to SummarizeRequest schema
- Add language selector with flag icons to summary popover
- Persist language selection using VueUse useStorage
- Add i18n translations for language selection labels

* fixed some ui bugs and added summary language

* bumpt to v1.0.0

* fixed pr finding s

---------

Co-authored-by: Tobias Bollinger <tobias.bollinger@bs.ch>

Author: swordbreaker

.env.example

@@ -1,2 +1,5 @@
 API_URL='http://localhost:8000'
+DUMMY=false
 GITHUB_TOKEN='YOUR_GITHUB_TOKEN'
+
+LOGGER_LAYER_URI=github:DCC-BS/nuxt-layers/pino-logger

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
             - main
 
 jobs:
-    build:
+    ci:
         runs-on: ubuntu-latest
         steps:
             - uses: DCC-BS/ci-workflows/actions/node-bun-biome-playwright@v8
@@ -20,6 +20,5 @@ jobs:
                   run_playwright: "false"
                   install_method: "bun"
                   build_command: "bun run build"
-                  test_command: "bunx playwright test"
-                  artifact_name: "playwright-report"
-                  artifact_retention_days: 30
+            - name: test
+              run: bun run test

.github/workflows/docker-publish.yml

@@ -1,13 +1,6 @@
 name: Build and Publish Docker Image
 on:
     workflow_dispatch:
-        inputs:
-            version_bump:
-                description: Version bump type
-                required: true
-                default: patch
-                type: choice
-                options: [major, minor, patch]
 
 permissions:
     contents: write
@@ -18,7 +11,6 @@ jobs:
         uses: DCC-BS/ci-workflows/.github/workflows/publish-docker.yml@v8
         secrets: inherit
         with:
-            release_type: ${{ inputs.version_bump }} # major|minor|patch
             version_project_type: "node" # or "python"
             registry: ghcr.io
             image_name: ghcr.io/${{ github.repository }}

.gitignore

@@ -23,3 +23,5 @@ logs
 .env.*
 !.env.example
 !docker/.env.backend.example
+
+.worktreees/*

.nuxtrc

@@ -0,0 +1 @@
+setups.@nuxt/test-utils="4.0.0"

AGENTS.md

@@ -0,0 +1,132 @@
+# Transcribo Frontend - Agent Coding Guidelines
+
+## Build & Development Commands
+
+```bash
+# Install dependencies (Bun required, not npm)
+bun install
+
+# Development server
+bun run dev
+
+# Build for production
+bun run build
+
+# Start production server
+bun run start
+
+# Generate static site
+bun run generate
+
+# Linting & Formatting
+bun run lint      # Biome format --write
+bun run check     # Biome check --fix
+
+# Docker
+bun run docker:dev       # Start dev container
+bun run docker:dev:down  # Stop dev container
+bun run docker:prod      # Start production container
+bun run docker:prod:down # Stop production container
+```
+
+## Package Manager
+**Use `bun` for all package operations, NOT npm.**
+
+## Code Style Guidelines
+
+### TypeScript & Vue
+- **Always use Composition API** (`<script setup lang="ts">`)
+- **Never use `any` type** - use `unknown` with validation or specific types
+- **Never use non-null assertion `!`** - structure code so TypeScript understands nullable values
+- **Always use semicolons** - terminate all statements
+- **Prefer undefined over null** - use `ref(undefined)` not `ref(null)`
+- **Non-null refs** - initialize refs with values, not null
+- **Explicit types** - function parameters and return types must be typed
+- **Function declarations** - use `function foo()` not `const foo = () => {}`
+- **Async/await** - prefer over promise chains
+
+### Naming Conventions
+- **Pages**: kebab-case (`user-profile.vue`)
+- **Components**: PascalCase (`UserProfileCard.vue`)
+- **Composables**: camelCase with `use` prefix (`useCounter.ts`)
+- **Server API**: kebab-case (`user-account.get.ts`)
+- **Utils/Services**: camelCase (`formatDate.ts`)
+
+### Import Aliases
+```typescript
+~/        // app/ directory
+~~/       // root directory
+~~/server  // server directory
+```
+
+### UI & Styling
+- **Use Nuxt UI components** instead of custom implementations
+- **Use Tailwind CSS** for styling (native, no custom CSS when possible)
+- **Use Lucide icons** (auto-imported via Nuxt UI)
+- **Use motion** for animations (auto-imported via `motion-v`)
+
+### Formatting (Biome)
+- 4 space indentation
+- Double quotes for strings
+- Semicolons required
+- `organizeImports` enabled
+
+## Key Conventions from Cursor/Copilot Rules
+- Use `===` and `!==` for equality
+- No `console` in production code
+- No `@ts-ignore` - always fix type errors
+- No TypeScript enums
+- No reassigning function parameters
+- No unused imports/variables (ignored in .vue files)
+- Use `for-of` instead of `forEach`
+- Use `Array.isArray()` instead of `instanceof Array`
+- Throw Error objects with messages
+- Handle async errors properly with try/catch
+
+## Project Structure
+```
+app/
+  components/    # Vue components (PascalCase)
+  composables/   # use* functions (camelCase) + other composables
+  pages/         # Routes (kebab-case)
+  utils/         # Framework-agnostic utilities
+  services/      # API/business logic (e.g., indexDbService.ts)
+  types/         # TypeScript definitions
+  plugins/       # Nuxt plugins (e.g., api.ts, konvaPlugin.client.ts)
+  layouts/       # Page layouts (default.vue, edit.vue)
+  assets/        # Static assets (CSS, images, disclaimer.html)
+server/
+  api/           # API endpoints (kebab-case with HTTP method suffix)
+  utils/         # Server utilities
+  changelogs/    # Version changelog markdown files
+  tsconfig.json  # Server-specific TypeScript config
+public/
+  ios/           # PWA icons for iOS
+  icons.json     # PWA icon configuration
+```
+
+## Key Dependencies
+- **Nuxt UI 4.x** - Component library
+- **@ffmpeg/ffmpeg** - Audio/video processing in browser
+- **dexie** - IndexedDB wrapper for local storage
+- **konva / vue-konva** - Canvas rendering for timeline editor
+- **ts-pattern** - Pattern matching
+- **zod** - Runtime type validation
+- **motion-v** - Vue animations
+
+## Nuxt Features
+- Auto-imports enabled for composables, utils, components
+- TypeScript strict mode enabled
+- Pinia for state management
+- Nuxt UI for components
+- i18n for internationalization (en, de)
+- PWA support via @vite-pwa/nuxt
+- Extends GitHub layers: backend_communication, health_check, feedback-control, logger
+
+## Testing
+- No test framework currently configured
+- Tests should be added when implementing new features
+
+## Before Committing
+1. Run `bun run check` - fix all linting issues
+2. Run `bun run build` - ensure production build works

app/app.config.ts

@@ -0,0 +1,12 @@
+export default defineAppConfig({
+    // ui: {
+    //     colors: {
+    //         primary: "purple",
+    //         secondary: "teal",
+    //         success: "green",
+    //         info: "blue",
+    //         warning: "yellow",
+    //         error: "red",
+    //     },
+    // },
+});

app/app.vue

@@ -10,6 +10,8 @@ const disclaimerText = disclaimerTextRaw as string;
 const { isOpen, title, message, onSubmit, onClose } = useInitDialog();
 const { undo, redo, canUndo, canRedo } = useCommandHistory();
 
+const appConfig = useAppConfig();
+
 onMounted(() => {
     window.addEventListener("keydown", handleKeyDown);
 });
@@ -32,7 +34,6 @@ function handleKeyDown(event: KeyboardEvent) {
 <template>
     <NuxtPwaManifest />
     <Changelogs />
-    <FeedbackControl />
     <Disclaimer
         app-name="Transcribo"
         :postfixHTML="disclaimerText"

app/components/AudioRecordingView.client.vue

@@ -17,7 +17,6 @@ const { isReady, abandonedRecording } =
         logger: debugLog,
     });
 
-const audioRecorder = ref<typeof AudioRecorder>();
 const shouldRecord = ref(false);
 const isRecording = ref(false);
 const audioBlob = ref<Blob | undefined>(undefined);
@@ -27,6 +26,7 @@ function onRecordingStopped(file: Blob, _: string) {
     isRecording.value = false;
     audioBlob.value = file;
     userRecording.value = true;
+    emitAudio();
 }
 
 function emitAudio(): void {
@@ -62,10 +62,6 @@ const audioSessionActions = computed(() => [
             t("pages.index.recordAudio") }}</UButton>
     </div>
     <div v-if="isReady && shouldRecord">
-        <AudioRecorder ref="audioRecorder" :logger="debugLog" auto-start :show-result="true"
-            @recording-stopped="onRecordingStopped" />
-        <div v-if="audioBlob" class="flex flex-col justify-center items-center mt-4">
-            <UButton @click="emitAudio">{{ t("audioRecorder.useRecording") }}</UButton>
-        </div>
+        <AudioRecorder :logger="debugLog" auto-start :show-result="true" @recording-stopped="onRecordingStopped" />
     </div>
-</template>
+</template>

app/components/EditorModeSelector.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { motion } from "motion-v";
+import { UButton } from "#components";
+
+type EditorMode = "view" | "summary" | "edit" | "statistics";
+
+const UButtonMotion = motion.create(UButton);
+
+const props = withDefaults(
+    defineProps<{ idPrefix?: string }>(),
+    { idPrefix: "" }
+);
+
+const mode = defineModel<EditorMode>({ default: "view" });
+
+const { t } = useI18n();
+
+const modes: { value: EditorMode; icon: string; label: string }[] = [
+    { value: "view", icon: "i-lucide-eye", label: "viewer" },
+    { value: "summary", icon: "i-lucide-sparkles", label: "summary" },
+    { value: "edit", icon: "i-lucide-square-pen", label: "editor" },
+    { value: "statistics", icon: "i-lucide-bar-chart-2", label: "statistics" },
+];
+</script>
+
+<template>
+    <div :id="`${props.idPrefix}editor-mode-selector`" class="editor-mode-selector">
+        <UFieldGroup>
+            <UButtonMotion
+                v-for="(m, index) in modes"
+                :key="m.value"
+                :variant="mode === m.value ? 'solid' : 'soft'"
+                color="primary"
+                :whileHover="{ scale: 1.02 }"
+                :whileTap="{ scale: 0.98 }"
+                :transition="{
+                    type: 'spring' as const,
+                    stiffness: 400,
+                    damping: 17,
+                }"
+                @click="mode = m.value"
+                :id="`${props.idPrefix}mode-${m.value}`"
+            >
+                <UIcon :name="m.icon" class="w-4 h-4" />
+                <span>{{ t(`mode.${m.label}`) }}</span>
+            </UButtonMotion>
+        </UFieldGroup>
+    </div>
+</template>