create-pxlr 1.0.0

package/templates/blog/pxlr-cms/packages/admin/src/app/settings/page.tsx

@@ -0,0 +1,178 @@
+'use client';
+
+import { useState } from 'react';
+import { useAuthStore } from '@/lib/store/auth';
+import { useI18n } from '@/lib/i18n/context';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Settings, User, Globe, Database, Languages, Check } from 'lucide-react';
+
+export default function SettingsPage() {
+  const { user } = useAuthStore();
+  const { t, locale, setLocale } = useI18n();
+  const [apiUrl] = useState(process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4000');
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold tracking-tight">{t('settings.title')}</h1>
+        <p className="text-muted-foreground">
+          {t('settings.subtitle')}
+        </p>
+      </div>
+
+      <div className="grid gap-6">
+        {/* Language Switcher */}
+        <div className="rounded-lg border bg-card p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Languages className="h-5 w-5" />
+            <h2 className="text-lg font-semibold">{t('settings.language')}</h2>
+          </div>
+          <div className="grid gap-2">
+            <button
+              onClick={() => setLocale('en')}
+              className={`flex items-center justify-between p-4 rounded-lg border-2 transition-colors ${
+                locale === 'en' 
+                  ? 'border-primary bg-primary/5' 
+                  : 'border-transparent bg-muted hover:border-muted-foreground/20'
+              }`}
+            >
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">🇬🇧</span>
+                <div className="text-left">
+                  <p className="font-medium">English</p>
+                  <p className="text-xs text-muted-foreground">Interface in English</p>
+                </div>
+              </div>
+              {locale === 'en' && <Check className="h-5 w-5 text-primary" />}
+            </button>
+            <button
+              onClick={() => setLocale('ru')}
+              className={`flex items-center justify-between p-4 rounded-lg border-2 transition-colors ${
+                locale === 'ru' 
+                  ? 'border-primary bg-primary/5' 
+                  : 'border-transparent bg-muted hover:border-muted-foreground/20'
+              }`}
+            >
+              <div className="flex items-center gap-3">
+                <span className="text-2xl">🇷🇺</span>
+                <div className="text-left">
+                  <p className="font-medium">Русский</p>
+                  <p className="text-xs text-muted-foreground">Интерфейс на русском</p>
+                </div>
+              </div>
+              {locale === 'ru' && <Check className="h-5 w-5 text-primary" />}
+            </button>
+          </div>
+        </div>
+
+        {/* Profile Section */}
+        <div className="rounded-lg border bg-card p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <User className="h-5 w-5" />
+            <h2 className="text-lg font-semibold">{t('header.profile')}</h2>
+          </div>
+          <div className="grid gap-4 md:grid-cols-2">
+            <div className="space-y-2">
+              <Label>{t('profile.displayName')}</Label>
+              <Input value={user?.name || ''} disabled />
+            </div>
+            <div className="space-y-2">
+              <Label>{t('profile.email')}</Label>
+              <Input value={user?.email || ''} disabled />
+            </div>
+            <div className="space-y-2">
+              <Label>Role</Label>
+              <Input value={user?.role || ''} disabled />
+            </div>
+          </div>
+        </div>
+
+        {/* API Configuration */}
+        <div className="rounded-lg border bg-card p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Database className="h-5 w-5" />
+            <h2 className="text-lg font-semibold">{t('dashboard.apiAccess')}</h2>
+          </div>
+          <div className="grid gap-4">
+            <div className="space-y-2">
+              <Label>{t('dashboard.apiEndpoint')}</Label>
+              <Input value={apiUrl} disabled />
+            </div>
+            <div className="space-y-2">
+              <Label>{t('dashboard.documentation')}</Label>
+              <a 
+                href={`${apiUrl}/docs`}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-sm text-primary hover:underline"
+              >
+                {t('dashboard.viewDocs')}
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Locales (Content Localization) */}
+        <div className="rounded-lg border bg-card p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Globe className="h-5 w-5" />
+            <h2 className="text-lg font-semibold">{t('settings.localization')}</h2>
+          </div>
+          <p className="text-sm text-muted-foreground mb-4">
+            {locale === 'ru' 
+              ? 'Языки контента (не интерфейса)'
+              : 'Content languages (not interface)'}
+          </p>
+          <div className="grid gap-4">
+            <div className="flex items-center justify-between p-3 rounded-md bg-muted">
+              <div>
+                <p className="font-medium">English</p>
+                <p className="text-xs text-muted-foreground">en - {t('settings.defaultLocale')}</p>
+              </div>
+              <span className="text-xs bg-primary text-primary-foreground px-2 py-1 rounded">Default</span>
+            </div>
+            <div className="flex items-center justify-between p-3 rounded-md bg-muted">
+              <div>
+                <p className="font-medium">Русский</p>
+                <p className="text-xs text-muted-foreground">ru</p>
+              </div>
+              <span className="text-xs bg-secondary text-secondary-foreground px-2 py-1 rounded">Active</span>
+            </div>
+          </div>
+        </div>
+
+        {/* System Info */}
+        <div className="rounded-lg border bg-card p-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Settings className="h-5 w-5" />
+            <h2 className="text-lg font-semibold">{t('settings.systemInfo')}</h2>
+          </div>
+          <div className="grid gap-2 text-sm">
+            <div className="flex justify-between py-2 border-b">
+              <span className="text-muted-foreground">{t('settings.version')}</span>
+              <span>1.0.0</span>
+            </div>
+            <div className="flex justify-between py-2 border-b">
+              <span className="text-muted-foreground">{t('settings.environment')}</span>
+              <span>Development</span>
+            </div>
+            <div className="flex justify-between py-2 border-b">
+              <span className="text-muted-foreground">Database</span>
+              <span>PostgreSQL</span>
+            </div>
+            <div className="flex justify-between py-2 border-b">
+              <span className="text-muted-foreground">Cache</span>
+              <span>Redis</span>
+            </div>
+            <div className="flex justify-between py-2">
+              <span className="text-muted-foreground">Storage</span>
+              <span>MinIO (S3)</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/blog/pxlr-cms/packages/admin/src/components/editor/media-picker.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useState, useCallback } from 'react';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useDropzone } from 'react-dropzone';
+import { api } from '@/lib/api';
+import { formatBytes } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { 
+  X, 
+  Upload, 
+  Search, 
+  Loader2, 
+  Images,
+  Check
+} from 'lucide-react';
+
+interface MediaFile {
+  id: string;
+  filename: string;
+  original_filename: string;
+  mime_type: string;
+  size_bytes: number;
+  url: string;
+  thumbnail_url?: string;
+}
+
+interface MediaPickerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSelect: (url: string, file: MediaFile) => void;
+  allowMultiple?: boolean;
+}
+
+function getPublicUrl(url: string): string {
+  if (!url) return '';
+  return url
+    .replace('http://minio:9000', 'http://localhost:9010')
+    .replace('http://localhost:9000', 'http://localhost:9010');
+}
+
+export function MediaPicker({ isOpen, onClose, onSelect, allowMultiple = false }: MediaPickerProps) {
+  const queryClient = useQueryClient();
+  const [search, setSearch] = useState('');
+  const [isUploading, setIsUploading] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<MediaFile | null>(null);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['media', search],
+    queryFn: () => api.get(`/media?${search ? `search=${search}&` : ''}limit=50`),
+    enabled: isOpen,
+  });
+
+  const onDrop = useCallback(async (acceptedFiles: File[]) => {
+    setIsUploading(true);
+    try {
+      for (const file of acceptedFiles) {
+        const result = await api.upload('/media/upload', file);
+        if (!allowMultiple && result.file) {
+          onSelect(getPublicUrl(result.file.url), result.file);
+          onClose();
+          return;
+        }
+      }
+      queryClient.invalidateQueries({ queryKey: ['media'] });
+    } catch (error) {
+      console.error('Upload failed:', error);
+    } finally {
+      setIsUploading(false);
+    }
+  }, [queryClient, allowMultiple, onSelect, onClose]);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'],
+    },
+  });
+
+  const handleSelect = () => {
+    if (selectedFile) {
+      onSelect(getPublicUrl(selectedFile.url), selectedFile);
+      onClose();
+    }
+  };
+
+  const files: MediaFile[] = data?.files || [];
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50" onClick={onClose}>
+      <div 
+        className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b">
+          <h2 className="text-lg font-semibold">Выберите изображение</h2>
+          <Button variant="ghost" size="icon" onClick={onClose}>
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Upload area */}
+        <div className="p-4 border-b">
+          <div
+            {...getRootProps()}
+            className={`flex cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors ${
+              isDragActive ? 'border-blue-500 bg-blue-50' : 'border-gray-300 hover:border-gray-400'
+            }`}
+          >
+            <input {...getInputProps()} />
+            {isUploading ? (
+              <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+            ) : (
+              <Upload className="h-8 w-8 text-gray-400" />
+            )}
+            <p className="mt-2 text-sm text-gray-500">
+              {isDragActive
+                ? 'Отпустите для загрузки'
+                : 'Перетащите изображение или нажмите для выбора'}
+            </p>
+          </div>
+        </div>
+
+        {/* Search */}
+        <div className="p-4 border-b">
+          <div className="relative">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+            <Input
+              placeholder="Поиск..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </div>
+
+        {/* Media grid */}
+        <div className="flex-1 overflow-auto p-4">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="h-8 w-8 animate-spin text-gray-400" />
+            </div>
+          ) : files.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+              <Images className="h-12 w-12 mb-2" />
+              <p>Нет изображений</p>
+            </div>
+          ) : (
+            <div className="grid grid-cols-4 gap-4">
+              {files.filter(f => f.mime_type.startsWith('image/')).map((file) => (
+                <button
+                  key={file.id}
+                  onClick={() => setSelectedFile(file)}
+                  className={`relative aspect-square rounded-lg overflow-hidden border-2 transition-all ${
+                    selectedFile?.id === file.id
+                      ? 'border-blue-500 ring-2 ring-blue-200'
+                      : 'border-transparent hover:border-gray-300'
+                  }`}
+                >
+                  <img
+                    src={getPublicUrl(file.thumbnail_url || file.url)}
+                    alt={file.original_filename}
+                    className="w-full h-full object-cover"
+                  />
+                  {selectedFile?.id === file.id && (
+                    <div className="absolute top-2 right-2 bg-blue-500 text-white rounded-full p-1">
+                      <Check className="h-3 w-3" />
+                    </div>
+                  )}
+                  <div className="absolute bottom-0 left-0 right-0 bg-black/60 text-white text-xs p-1 truncate">
+                    {file.original_filename}
+                  </div>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between p-4 border-t bg-gray-50">
+          <div className="text-sm text-gray-500">
+            {selectedFile && (
+              <span>{selectedFile.original_filename} • {formatBytes(selectedFile.size_bytes)}</span>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={onClose}>
+              Отмена
+            </Button>
+            <Button onClick={handleSelect} disabled={!selectedFile}>
+              Выбрать
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}