import React, { useCallback, useEffect, useState } from 'react'; import { Form, Formik } from 'formik'; import { boolean, number, object, string } from 'yup'; import { Button } from '@/components/elements/button/index'; import { Dialog } from '@/components/elements/dialog'; import Input, { Textarea } from '@/components/elements/Input'; import Select from '@/components/elements/Select'; import Spinner from '@/components/elements/Spinner'; import Switch from '@/components/elements/Switch'; import type { DateDisplayMode, TrashCleanupSettings, ViewMode } from '../types'; export interface FileTemplate { id: string; name: string; filename: string; content: string; builtin?: boolean; } const BUILTIN_TEMPLATES: FileTemplate[] = [ { id: 'json', name: 'JSON', filename: 'config.json', content: '{\n \n}\n', builtin: true }, { id: 'yaml', name: 'YAML Config', filename: 'config.yml', content: '# Configuration\n\n', builtin: true }, { id: 'env', name: 'Environment', filename: '.env', content: '# Environment Variables\n\n', builtin: true }, { id: 'dockerfile', name: 'Dockerfile', filename: 'Dockerfile', content: 'FROM node:20-alpine\n\nWORKDIR /app\n\nCOPY . .\n\nRUN npm install\n\nCMD ["node", "index.js"]\n', builtin: true, }, { id: 'shell', name: 'Shell Script', filename: 'script.sh', content: '#!/bin/bash\n\n', builtin: true }, { id: 'python', name: 'Python', filename: 'main.py', content: '#!/usr/bin/env python3\n\n', builtin: true }, { id: 'html', name: 'HTML', filename: 'index.html', content: '\n\n\n \n \n Page\n\n\n \n\n\n', builtin: true, }, ]; export function getTemplates(): FileTemplate[] { try { const stored = localStorage.getItem('bfm-file-templates'); const custom: FileTemplate[] = stored ? JSON.parse(stored) : []; return [...BUILTIN_TEMPLATES, ...custom]; } catch { return [...BUILTIN_TEMPLATES]; } } function saveCustomTemplates(templates: FileTemplate[]) { localStorage.setItem('bfm-file-templates', JSON.stringify(templates.filter((template) => !template.builtin))); } const BROWSE_DOUBLE_CLICK_DIRECTORIES_KEY = 'bfm-browse-double-click-directories'; const DESKTOP_FILE_CHECKBOXES_KEY = 'bfm-desktop-file-checkboxes'; const DESKTOP_FILE_CHECKBOXES_EVENT = 'bfm:desktop-file-checkboxes'; const getBrowseDoubleClickDirectories = () => ( typeof window !== 'undefined' && localStorage.getItem(BROWSE_DOUBLE_CLICK_DIRECTORIES_KEY) === 'true' ); const getDesktopFileCheckboxes = () => ( typeof window === 'undefined' || localStorage.getItem(DESKTOP_FILE_CHECKBOXES_KEY) !== 'false' ); interface SettingsDialogProps { open: boolean; onClose: () => void; viewMode: ViewMode; onViewModeChange: (mode: ViewMode) => void; dateDisplayMode: DateDisplayMode; onDateDisplayModeChange: (mode: DateDisplayMode) => void; canConfigureTrash: boolean; trashCleanupSettings: TrashCleanupSettings | null; onSaveTrashSettings: (settings: TrashCleanupSettings) => Promise; } interface SectionProps { title: string; description?: string; children: React.ReactNode; } const Section: React.FC = ({ title, description, children }) => (

{title}

{description &&

{description}

}
{children}
); interface SwitchRowProps { fieldName: string; title: string; description: string; defaultChecked: boolean; onChange: () => void; } const SwitchRow: React.FC = ({ fieldName, title, description, defaultChecked, onChange }) => (

{title}

{description}

); const TemplatesSection: React.FC = () => { const [templates, setTemplates] = useState(getTemplates); const [editing, setEditing] = useState(null); const [adding, setAdding] = useState(false); const [newName, setNewName] = useState(''); const [newFilename, setNewFilename] = useState(''); const [newContent, setNewContent] = useState(''); const refresh = useCallback(() => setTemplates(getTemplates()), []); const customTemplates = templates.filter((template) => !template.builtin); const handleAdd = () => { if (!newName.trim() || !newFilename.trim()) return; saveCustomTemplates([ ...customTemplates, { id: `custom-${Date.now()}`, name: newName.trim(), filename: newFilename.trim(), content: newContent, }, ]); setAdding(false); setNewName(''); setNewFilename(''); setNewContent(''); refresh(); }; const handleDelete = (id: string) => { saveCustomTemplates(customTemplates.filter((template) => template.id !== id)); refresh(); }; const handleExport = () => { if (customTemplates.length === 0) return; const blob = new Blob([JSON.stringify(customTemplates, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const anchor = document.createElement('a'); anchor.href = url; anchor.download = 'bfm-templates.json'; anchor.click(); URL.revokeObjectURL(url); }; const handleImport = () => { const input = document.createElement('input'); input.type = 'file'; input.accept = '.json'; input.onchange = async (event) => { const file = (event.target as HTMLInputElement).files?.[0]; if (!file) return; try { const text = await file.text(); const imported: FileTemplate[] = JSON.parse(text); if (!Array.isArray(imported)) return; const merged = [...customTemplates]; for (const template of imported) { if (!template.name || !template.filename) continue; if (merged.some((existing) => existing.id === template.id)) continue; merged.push({ ...template, id: template.id || `custom-${Date.now()}-${Math.random().toString(36).slice(2)}`, builtin: false, }); } saveCustomTemplates(merged); refresh(); } catch { // Invalid imports are ignored so the dialog does not trap the user in a failed file picker flow. } }; input.click(); }; const handleSaveEdit = () => { if (!editing || !editing.name.trim() || !editing.filename.trim()) return; saveCustomTemplates(customTemplates.map((template) => (template.id === editing.id ? editing : template))); setEditing(null); refresh(); }; return (
Export Import
{adding && (
) => setNewName(event.target.value)} />
) => setNewFilename(event.target.value)} />