Improve translations import/export and UI

Author: MohmmedAshraf

dist/css/app.css

@@ -31,7 +31,7 @@ import { ReportBugLink } from './report-bug-link';
 export function AppSidebar() {
     const { state } = useSidebar();
     const isCollapsed = state === 'collapsed';
-    const { auth } = usePage<SharedData>().props;
+    const { auth, hasSourceLanguage } = usePage<SharedData>().props;
     const canManageContributors = ['owner', 'admin'].includes(auth.role ?? '');
 
     const mainNavItems: NavItem[] = [
@@ -40,11 +40,15 @@ export function AppSidebar() {
             href: languagesIndex().url,
             icon: Languages,
         },
-        {
-            title: 'Source Language',
-            href: sourceIndex().url,
-            icon: DocumentText,
-        },
+        ...(hasSourceLanguage
+            ? [
+                  {
+                      title: 'Source Language',
+                      href: sourceIndex().url,
+                      icon: DocumentText,
+                  },
+              ]
+            : []),
         {
             title: 'Groups',
             href: groupsIndex().url,
@@ -85,7 +89,7 @@ export function AppSidebar() {
                         <ReportBugLink />
 
                         <a
-                            href="https://outhebox.dev/products/translations-pro?utm_source=app_sidebar&utm_medium=link&utm_campaign=upgrade_to_pro"
+                            href="https://outhebox.dev/products/laravel-translations-ui-pro?utm_source=app_sidebar&utm_medium=link&utm_campaign=upgrade_to_pro"
                             target="_blank"
                             rel="noopener noreferrer"
                             className="group/pro relative block overflow-hidden rounded-xl bg-linear-to-r from-indigo-300 via-violet-300 to-purple-300 p-px shadow-sm transition-all hover:shadow-lg hover:shadow-indigo-300/30 dark:from-indigo-400 dark:via-violet-400 dark:to-purple-400 dark:hover:shadow-indigo-400/15"
@@ -128,7 +132,7 @@ export function AppSidebar() {
                         <ReportBugLink />
 
                         <a
-                            href="https://outhebox.dev/products/translations-pro?utm_source=app_sidebar&utm_medium=link&utm_campaign=upgrade_to_pro"
+                            href="https://outhebox.dev/products/laravel-translations-ui-pro?utm_source=app_sidebar&utm_medium=link&utm_campaign=upgrade_to_pro"
                             target="_blank"
                             rel="noopener noreferrer"
                             className="group/pro relative block overflow-hidden rounded-lg bg-linear-to-r from-indigo-300 via-violet-300 to-purple-300 p-px transition-shadow hover:shadow-lg hover:shadow-indigo-300/30 dark:from-indigo-400 dark:via-violet-400 dark:to-purple-400 dark:hover:shadow-indigo-400/15"

dist/js/app.js

@@ -15,7 +15,7 @@ import { Field, FieldError, FieldLabel } from '@/components/ui/field';
 import { Flag } from '@/components/ui/flag';
 import { Input } from '@/components/ui/input';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-import { AddCircle, Global, Magnifer, Stars } from '@/lib/icons';
+import { AddCircle, Global, Magnifer } from '@/lib/icons';
 import { store, storeCustom } from '@/routes/ltu/languages';
 
 export interface AvailableLanguage {
@@ -28,19 +28,16 @@ export interface AvailableLanguage {
 
 export function AddLanguageDialog({
     availableLanguages,
-    totalKeys,
     trigger,
 }: {
     availableLanguages: AvailableLanguage[];
-    totalKeys: number;
     trigger: React.ReactNode;
 }) {
     const [open, setOpen] = React.useState(false);
     const [search, setSearch] = React.useState('');
     const [selected, setSelected] = React.useState<Set<number>>(new Set());
     const [tab, setTab] = React.useState('browse');
 
-    const [autoTranslate, setAutoTranslate] = React.useState(false);
     const browseForm = useForm({ language_ids: [] as number[] });
     const customForm = useForm({
         code: '',
@@ -76,7 +73,6 @@ export function AddLanguageDialog({
         setSearch('');
         setSelected(new Set());
         setTab('browse');
-        setAutoTranslate(false);
         browseForm.reset();
         customForm.reset();
         customForm.clearErrors();
@@ -93,7 +89,6 @@ export function AddLanguageDialog({
         e.preventDefault();
         browseForm.transform(() => ({
             language_ids: Array.from(selected),
-            auto_translate: autoTranslate,
         }));
         browseForm.post(store.url(), {
             onSuccess: () => {
@@ -105,10 +100,6 @@ export function AddLanguageDialog({
 
     const handleCustomSubmit = (e: React.FormEvent) => {
         e.preventDefault();
-        customForm.transform((data) => ({
-            ...data,
-            auto_translate: autoTranslate,
-        }));
         customForm.post(storeCustom.url(), {
             onSuccess: () => {
                 resetState();
@@ -224,12 +215,6 @@ export function AddLanguageDialog({
                                 )}
                             </div>
 
-                            <AutoTranslateCard
-                                checked={autoTranslate}
-                                onCheckedChange={setAutoTranslate}
-                                totalKeys={totalKeys}
-                            />
-
                             <Button
                                 type="submit"
                                 className="w-full"
@@ -321,12 +306,6 @@ export function AddLanguageDialog({
                                 </span>
                             </label>
 
-                            <AutoTranslateCard
-                                checked={autoTranslate}
-                                onCheckedChange={setAutoTranslate}
-                                totalKeys={totalKeys}
-                            />
-
                             <div className="mt-auto">
                                 <Button
                                     type="submit"
@@ -345,44 +324,3 @@ export function AddLanguageDialog({
         </Dialog>
     );
 }
-
-function AutoTranslateCard({
-    checked,
-    onCheckedChange,
-    totalKeys,
-}: {
-    checked: boolean;
-    onCheckedChange: (checked: boolean) => void;
-    totalKeys: number;
-}) {
-    return (
-        <label
-            className={`flex cursor-pointer gap-3 rounded-lg border p-3 transition-colors ${
-                checked
-                    ? 'border-primary/50 bg-primary/5 dark:border-primary/40 dark:bg-primary/10'
-                    : 'border-neutral-200 hover:border-neutral-300 dark:border-neutral-800 dark:hover:border-neutral-700'
-            }`}
-        >
-            <Checkbox
-                checked={checked}
-                onCheckedChange={(v) => onCheckedChange(v === true)}
-                className="sr-only mt-0.5"
-            />
-            <div className="flex flex-1 items-center gap-3">
-                <Stars className="size-8 text-primary" />
-                <div className="flex-col">
-                    <div className="flex items-center gap-2">
-                        <span className="text-sm font-medium">
-                            Auto-translate with AI
-                        </span>
-                    </div>
-                    <p className="mt-0.5 text-sm text-muted-foreground">
-                        {checked && totalKeys > 0
-                            ? `${totalKeys.toLocaleString()} keys per language will be translated.`
-                            : 'Automatically translate all keys from source language.'}
-                    </p>
-                </div>
-            </div>
-        </label>
-    );
-}

resources/js/components/app-sidebar.tsx

@@ -33,7 +33,6 @@ interface PageProps {
     data: PaginatedData<Language>;
     tableConfig: TableConfig;
     availableLanguages: AvailableLanguage[];
-    totalKeys: number;
     [key: string]: unknown;
 }
 
@@ -135,7 +134,7 @@ function languageHref(language: Language): string {
 }
 
 export default function Languages() {
-    const { data, tableConfig, availableLanguages, totalKeys } =
+    const { data, tableConfig, availableLanguages } =
         usePage<PageProps>().props;
 
     const [removeLanguage, setRemoveLanguage] = React.useState<Language | null>(
@@ -228,7 +227,6 @@ export default function Languages() {
                             {data.data.some((l) => l.is_source) ? (
                                 <AddLanguageDialog
                                     availableLanguages={availableLanguages}
-                                    totalKeys={totalKeys}
                                     trigger={
                                         <Button size="lg">
                                             <AddCircle className="size-4" />

resources/js/components/translations/add-language-dialog.tsx

@@ -11,5 +11,6 @@ export type SharedData = {
     sidebarOpen: boolean;
     environment: string;
     isContributorMode: boolean;
+    hasSourceLanguage: boolean;
     [key: string]: unknown;
 };

resources/js/pages/translations/languages.tsx

@@ -3,15 +3,20 @@
 namespace Outhebox\Translations\Console\Commands;
 
 use Illuminate\Console\Command;
+use Illuminate\Support\Facades\File;
+use Illuminate\Support\Facades\Schema;
+use Laravel\Prompts\Prompt;
 use Outhebox\Translations\Concerns\DisplayHelper;
 use Outhebox\Translations\Database\Seeders\LanguageSeeder;
 use Outhebox\Translations\Enums\AuthDriver;
 use Outhebox\Translations\Enums\ContributorRole;
 use Outhebox\Translations\Models\Contributor;
 
+use function Laravel\Prompts\confirm;
 use function Laravel\Prompts\info;
 use function Laravel\Prompts\password;
 use function Laravel\Prompts\text;
+use function Laravel\Prompts\warning;
 
 class InstallCommand extends Command
 {
@@ -26,52 +31,121 @@ public function handle(): int
     {
         $this->displayHeader('Install');
 
-        $this->publishAssets();
+        if ($this->isV1Schema()) {
+            return $this->handleV1Detected();
+        }
+
+        $interactive = $this->input->isInteractive();
+
+        if (! $interactive || confirm('Publish configuration file?', default: true)) {
+            $this->publishConfig();
+        }
 
-        $this->call('migrate', ['--no-interaction' => true]);
+        if (! $interactive || confirm('Publish frontend assets?', default: true)) {
+            $this->publishAssets();
+        }
 
-        $this->call('db:seed', ['--class' => LanguageSeeder::class, '--no-interaction' => true]);
+        if (! $interactive || confirm('Run database migrations?', default: true)) {
+            $this->callSubCommand('migrate', ['--no-interaction' => true]);
+        }
+
+        if (! $interactive || confirm('Seed default languages?', default: true)) {
+            $this->callSubCommand('db:seed', ['--class' => LanguageSeeder::class, '--no-interaction' => true]);
+        }
+
+        if (! File::isDirectory(lang_path())) {
+            if (! $interactive || confirm('Lang folder not found. Publish default language files?', default: true)) {
+                $this->callSubCommand('lang:publish', ['--no-interaction' => true]);
+            }
+        }
 
         if (config('translations.auth.driver') === AuthDriver::Contributors->value) {
-            $this->createFirstContributor();
+            if (! $interactive || confirm('Create first contributor?', default: true)) {
+                $this->createFirstContributor();
+            }
         }
 
         if ($this->option('import')) {
-            $this->call('translations:import', ['--no-interaction' => true]);
+            if (! $interactive || confirm('Import existing translation files?', default: true)) {
+                $this->callSubCommand('translations:import', ['--no-interaction' => true]);
+            }
         }
 
         info('Translations installed successfully!');
 
         return self::SUCCESS;
     }
 
-    private function publishAssets(): void
+    private function isV1Schema(): bool
     {
-        $this->call('vendor:publish', [
+        $connection = config('translations.database_connection');
+
+        return Schema::connection($connection)->hasTable('ltu_phrases')
+            && Schema::connection($connection)->hasTable('ltu_translation_files')
+            && ! Schema::connection($connection)->hasTable('ltu_translation_keys');
+    }
+
+    private function handleV1Detected(): int
+    {
+        warning('v1 schema detected — you need to upgrade before installing v2.');
+
+        if (! $this->input->isInteractive()) {
+            $this->callSubCommand('translations:upgrade', ['--force' => true]);
+
+            return self::SUCCESS;
+        }
+
+        if (confirm('Run translations:upgrade now?', default: true)) {
+            $this->callSubCommand('translations:upgrade');
+
+            return self::SUCCESS;
+        }
+
+        warning('Upgrade cancelled. Please run translations:upgrade manually before installing.');
+
+        return self::FAILURE;
+    }
+
+    private function publishConfig(): void
+    {
+        $this->callSubCommand('vendor:publish', [
             '--tag' => 'translations-config',
             '--no-interaction' => true,
         ]);
 
-        $this->call('vendor:publish', [
+        if ($this->proIsInstalled()) {
+            $this->callSubCommand('vendor:publish', [
+                '--tag' => 'translations-pro-config',
+                '--no-interaction' => true,
+            ]);
+        }
+    }
+
+    private function publishAssets(): void
+    {
+        $this->callSubCommand('vendor:publish', [
             '--tag' => 'translations-assets',
             '--force' => true,
             '--no-interaction' => true,
         ]);
 
         if ($this->proIsInstalled()) {
-            $this->call('vendor:publish', [
-                '--tag' => 'translations-pro-config',
-                '--no-interaction' => true,
-            ]);
-
-            $this->call('vendor:publish', [
+            $this->callSubCommand('vendor:publish', [
                 '--tag' => 'translations-pro-assets',
                 '--force' => true,
                 '--no-interaction' => true,
             ]);
         }
     }
 
+    private function callSubCommand(string $command, array $arguments = []): int
+    {
+        $result = $this->call($command, $arguments);
+        Prompt::interactive($this->input->isInteractive());
+
+        return $result;
+    }
+
     private function proIsInstalled(): bool
     {
         return class_exists(\Outhebox\TranslationsPro\Providers\TranslationsProServiceProvider::class);
@@ -100,13 +174,11 @@ private function createFirstContributor(): void
 
         $name = text(
             label: 'What is the contributor\'s name?',
-            default: 'Admin',
             required: true,
         );
 
         $email = text(
             label: 'What is the contributor\'s email?',
-            default: '[email protected]',
             required: true,
             validate: function (string $value): ?string {
                 if (! filter_var($value, FILTER_VALIDATE_EMAIL)) {

resources/js/types/index.ts

@@ -5,6 +5,7 @@
 use Closure;
 use Illuminate\Http\Request;
 use Inertia\Inertia;
+use Outhebox\Translations\Models\Language;
 use Symfony\Component\HttpFoundation\Response;
 
 class ShareTranslationsData
@@ -27,6 +28,7 @@ public function handle(Request $request, Closure $next): Response
             'environment' => fn () => app()->environment(),
             'translationsNav' => fn () => $this->navigationItems(),
             'isContributorMode' => fn () => $auth->isContributorMode(),
+            'hasSourceLanguage' => fn () => Language::query()->source()->exists(),
         ]);
 
         return $next($request);