✨ Site file edit

lib/pods/site_files.dart

@@ -35,7 +35,24 @@ Future<SnFileContent> siteFileContent(
   final resp = await apiClient.get(
     '/zone/sites/$siteId/files/content/$relativePath',
   );
-  return SnFileContent.fromJson(resp.data);
+  final content =
+      resp.data is String
+          ? resp.data
+          : SnFileContent.fromJson(resp.data).content;
+  return SnFileContent(content: content);
+}
+
+@riverpod
+Future<String> siteFileContentRaw(
+  Ref ref, {
+  required String siteId,
+  required String relativePath,
+}) async {
+  final apiClient = ref.watch(apiClientProvider);
+  final resp = await apiClient.get(
+    '/zone/sites/$siteId/files/content/$relativePath',
+  );
+  return resp.data is String ? resp.data : resp.data['content'] as String;
 }
 
 class SiteFilesNotifier

lib/pods/sites.dart

@@ -45,7 +45,7 @@ class SiteNotifier
       final response =
           site.id.isEmpty
               ? await client.post(url, data: site.toJson())
-              : await client.patch('${url}/${site.id}', data: site.toJson());
+              : await client.patch('$url/${site.id}', data: site.toJson());
 
       state = AsyncValue.data(SnPublicationSite.fromJson(response.data));
     } catch (error, stackTrace) {

lib/widgets/sites/file_item.dart

@@ -1,18 +1,110 @@
+import 'dart:io';
 import 'package:flutter/material.dart';
+import 'package:flutter_code_editor/flutter_code_editor.dart';
+import 'package:flutter_highlight/themes/monokai-sublime.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/models/site_file.dart';
 import 'package:island/models/publication_site.dart';
 import 'package:island/pods/site_files.dart';
+import 'package:island/pods/network.dart';
 import 'package:island/widgets/alert.dart';
+import 'package:island/widgets/content/sheet.dart';
 import 'package:material_symbols_icons/symbols.dart';
+import 'package:path_provider/path_provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 
 class FileItem extends HookConsumerWidget {
   final SnSiteFileEntry file;
   final SnPublicationSite site;
+  final void Function(String path)? onNavigateDirectory;
 
-  const FileItem({super.key, required this.file, required this.site});
+  const FileItem({
+    super.key,
+    required this.file,
+    required this.site,
+    this.onNavigateDirectory,
+  });
+
+  Future<void> _downloadFile(BuildContext context, WidgetRef ref) async {
+    try {
+      final apiClient = ref.read(apiClientProvider);
+
+      // Get downloads directory
+      Directory? directory;
+      if (Platform.isAndroid) {
+        directory = await getExternalStorageDirectory();
+        if (directory != null) {
+          directory = Directory('${directory.path}/Download');
+        }
+      } else {
+        directory = await getDownloadsDirectory();
+      }
+
+      if (directory == null) {
+        throw Exception('Unable to access downloads directory');
+      }
+
+      // Create directory if it doesn't exist
+      await directory.create(recursive: true);
+
+      // Generate file path
+      final fileName = file.relativePath.split('/').last;
+      final filePath = '${directory.path}/$fileName';
+
+      // Use Dio's download method to directly stream from server to file
+      await apiClient.download(
+        '/zone/sites/${site.id}/files/content/${file.relativePath}',
+        filePath,
+      );
+
+      if (context.mounted) {
+        ScaffoldMessenger.of(
+          context,
+        ).showSnackBar(SnackBar(content: Text('Downloaded to $filePath')));
+      }
+    } catch (e) {
+      if (context.mounted) {
+        ScaffoldMessenger.of(
+          context,
+        ).showSnackBar(SnackBar(content: Text('Failed to download file: $e')));
+      }
+    }
+  }
+
+  Future<void> _showEditSheet(BuildContext context, WidgetRef ref) async {
+    try {
+      final fileContent = await ref.read(
+        siteFileContentProvider(
+          siteId: site.id,
+          relativePath: file.relativePath,
+        ).future,
+      );
+
+      if (context.mounted) {
+        await showModalBottomSheet(
+          context: context,
+          isScrollControlled: true,
+          useSafeArea: false,
+          constraints: BoxConstraints(
+            maxHeight: MediaQuery.of(context).size.height,
+          ),
+          barrierColor: Theme.of(context).colorScheme.surfaceContainerLow,
+          backgroundColor: Theme.of(context).colorScheme.surfaceContainerLow,
+          builder: (BuildContext context) {
+            return FileEditorSheet(
+              file: file,
+              site: site,
+              initialContent: fileContent.content,
+            );
+          },
+        );
+      }
+    } catch (e) {
+      showErrorAlert(e);
+    }
+  }
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -74,16 +166,10 @@ class FileItem extends HookConsumerWidget {
           onSelected: (value) async {
             switch (value) {
               case 'download':
-                // TODO: Implement file download
+                await _downloadFile(context, ref);
-                ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(content: Text('Downloading ${file.relativePath}')),
-                );
                 break;
               case 'edit':
-                // TODO: Implement file editing
+                await _showEditSheet(context, ref);
-                ScaffoldMessenger.of(context).showSnackBar(
-                  SnackBar(content: Text('Editing ${file.relativePath}')),
-                );
                 break;
               case 'delete':
                 final confirmed = await showDialog<bool>(
@@ -128,20 +214,91 @@ class FileItem extends HookConsumerWidget {
         ),
         onTap: () {
           if (file.isDirectory) {
-            // TODO: Navigate into directory
+            onNavigateDirectory?.call(file.relativePath);
-            ScaffoldMessenger.of(context).showSnackBar(
-              SnackBar(
-                content: Text('Opening directory: ${file.relativePath}'),
-              ),
-            );
           } else {
-            // TODO: Open file preview/editor
+            _showEditSheet(context, ref);
-            ScaffoldMessenger.of(context).showSnackBar(
-              SnackBar(content: Text('Opening file: ${file.relativePath}')),
-            );
           }
         },
       ),
     );
   }
 }
+
+class FileEditorSheet extends HookConsumerWidget {
+  final SnSiteFileEntry file;
+  final SnPublicationSite site;
+  final String initialContent;
+
+  const FileEditorSheet({
+    super.key,
+    required this.file,
+    required this.site,
+    required this.initialContent,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final codeController = useMemoized(
+      () => CodeController(
+        text: initialContent,
+        language: null, // Let the editor auto-detect or use plain text
+      ),
+    );
+    final isSaving = useState(false);
+
+    final saveFile = useCallback(() async {
+      if (codeController.text.trim().isEmpty) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          const SnackBar(content: Text('Content cannot be empty')),
+        );
+        return;
+      }
+
+      isSaving.value = true;
+      try {
+        await ref
+            .read(
+              siteFilesNotifierProvider((siteId: site.id, path: null)).notifier,
+            )
+            .updateFileContent(file.relativePath, codeController.text);
+
+        if (context.mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('File saved successfully')),
+          );
+          Navigator.of(context).pop();
+        }
+      } catch (e) {
+        if (context.mounted) {
+          ScaffoldMessenger.of(
+            context,
+          ).showSnackBar(SnackBar(content: Text('Failed to save file: $e')));
+        }
+      } finally {
+        isSaving.value = false;
+      }
+    }, [codeController, ref, site.id, file.relativePath, context, isSaving]);
+
+    return SheetScaffold(
+      heightFactor: 1,
+      titleText: 'Edit ${file.relativePath}',
+      actions: [
+        FilledButton(
+          onPressed: isSaving.value ? null : saveFile,
+          child: Text(isSaving.value ? 'Saving...' : 'Save'),
+        ),
+      ],
+      child: SingleChildScrollView(
+        padding: EdgeInsets.zero,
+        child: CodeTheme(
+          data: CodeThemeData(styles: monokaiSublimeTheme),
+          child: CodeField(
+            controller: codeController,
+            minLines: 20,
+            maxLines: null,
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/widgets/sites/file_management_section.dart

@@ -1,10 +1,12 @@
 import 'dart:io';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:gap/gap.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/models/publication_site.dart';
 import 'package:island/pods/site_files.dart';
+import 'package:island/widgets/alert.dart';
 import 'package:island/widgets/sites/file_upload_dialog.dart';
 import 'package:island/widgets/sites/file_item.dart';
 import 'package:material_symbols_icons/symbols.dart';
@@ -21,177 +23,268 @@ class FileManagementSection extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final filesAsync = ref.watch(siteFilesProvider(siteId: site.id));
+    final currentPath = useState<String?>(null);
+    final filesAsync = ref.watch(
+      siteFilesProvider(siteId: site.id, path: currentPath.value),
+    );
     final theme = Theme.of(context);
 
     return Card(
-      child: Padding(
+      child: Column(
-        padding: const EdgeInsets.all(16),
+        children: [
-        child: Column(
+          Padding(
-          crossAxisAlignment: CrossAxisAlignment.start,
+            padding: const EdgeInsets.all(16),
-          children: [
+            child: Column(
-            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Icon(Symbols.folder, size: 20),
+                Row(
-                const Gap(8),
+                  children: [
-                Text(
+                    Icon(Symbols.folder, size: 20),
-                  'File Management',
+                    const Gap(8),
-                  style: theme.textTheme.titleMedium?.copyWith(
+                    Text(
-                    fontWeight: FontWeight.bold,
+                      'File Management',
-                  ),
+                      style: theme.textTheme.titleMedium?.copyWith(
-                ),
+                        fontWeight: FontWeight.bold,
-                const Spacer(),
+                      ),
-                PopupMenuButton<String>(
+                    ),
-                  icon: const Icon(Symbols.upload),
+                    const Spacer(),
-                  onSelected: (String choice) async {
+                    PopupMenuButton<String>(
-                    List<File> files = [];
+                      icon: const Icon(Symbols.upload),
-                    List<Map<String, dynamic>>? results;
+                      onSelected: (String choice) async {
-                    if (choice == 'files') {
+                        List<File> files = [];
-                      final selectedFiles = await FilePicker.platform.pickFiles(
+                        List<Map<String, dynamic>>? results;
-                        allowMultiple: true,
+                        if (choice == 'files') {
-                        type: FileType.any,
+                          final selectedFiles = await FilePicker.platform
-                      );
+                              .pickFiles(
-                      if (selectedFiles == null ||
+                                allowMultiple: true,
-                          selectedFiles.files.isEmpty) {
+                                type: FileType.any,
-                        return; // User canceled
-                      }
-                      files =
-                          selectedFiles.files
-                              .map((f) => File(f.path!))
-                              .toList();
-                    } else if (choice == 'folder') {
-                      final dirPath =
-                          await FilePicker.platform.getDirectoryPath();
-                      if (dirPath == null) return;
-                      results = await _getFilesRecursive(dirPath);
-                      files = results.map((m) => m['file'] as File).toList();
-                      if (files.isEmpty) {
-                        ScaffoldMessenger.of(context).showSnackBar(
-                          const SnackBar(
-                            content: Text(
-                              'No files found in the selected folder',
-                            ),
-                          ),
-                        );
-                        return;
-                      }
-                    }
-
-                    if (!context.mounted) return;
-
-                    // Show upload dialog for path specification
-                    showModalBottomSheet(
-                      context: context,
-                      isScrollControlled: true,
-                      builder:
-                          (context) => FileUploadDialog(
-                            selectedFiles: files,
-                            site: site,
-                            relativePaths:
-                                results
-                                    ?.map((m) => m['relativePath'] as String)
-                                    .toList(),
-                            onUploadComplete: () {
-                              // Refresh file list
-                              ref.invalidate(
-                                siteFilesProvider(siteId: site.id),
                               );
-                            },
+                          if (selectedFiles == null ||
-                          ),
+                              selectedFiles.files.isEmpty) {
-                    );
+                            return; // User canceled
-                  },
+                          }
-                  itemBuilder:
+                          files =
-                      (BuildContext context) => [
+                              selectedFiles.files
-                        const PopupMenuItem<String>(
+                                  .map((f) => File(f.path!))
-                          value: 'files',
+                                  .toList();
-                          child: Row(
+                        } else if (choice == 'folder') {
-                            children: [
+                          final dirPath =
-                              Icon(Symbols.file_copy),
+                              await FilePicker.platform.getDirectoryPath();
-                              Gap(12),
+                          if (dirPath == null) return;
-                              Text('Files'),
+                          results = await _getFilesRecursive(dirPath);
-                            ],
+                          files =
+                              results.map((m) => m['file'] as File).toList();
+                          if (files.isEmpty) {
+                            showSnackBar(
+                              'No files found in the selected folder',
+                            );
+                            return;
+                          }
+                        }
+
+                        if (!context.mounted) return;
+
+                        // Show upload dialog for path specification
+                        showModalBottomSheet(
+                          context: context,
+                          isScrollControlled: true,
+                          builder:
+                              (context) => FileUploadDialog(
+                                selectedFiles: files,
+                                site: site,
+                                relativePaths:
+                                    results
+                                        ?.map(
+                                          (m) => m['relativePath'] as String,
+                                        )
+                                        .toList(),
+                                onUploadComplete: () {
+                                  // Refresh file list
+                                  ref.invalidate(
+                                    siteFilesProvider(
+                                      siteId: site.id,
+                                      path: currentPath.value,
+                                    ),
+                                  );
+                                },
+                              ),
+                        );
+                      },
+                      itemBuilder:
+                          (BuildContext context) => [
+                            const PopupMenuItem<String>(
+                              value: 'files',
+                              child: Row(
+                                children: [
+                                  Icon(Symbols.file_copy),
+                                  Gap(12),
+                                  Text('Files'),
+                                ],
+                              ),
+                            ),
+                            const PopupMenuItem<String>(
+                              value: 'folder',
+                              child: Row(
+                                children: [
+                                  Icon(Symbols.folder),
+                                  Gap(12),
+                                  Text('Folder'),
+                                ],
+                              ),
+                            ),
+                          ],
+                      style: ButtonStyle(
+                        visualDensity: const VisualDensity(
+                          horizontal: -4,
+                          vertical: -4,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                const Gap(8),
+                if (currentPath.value != null && currentPath.value!.isNotEmpty)
+                  Container(
+                    margin: const EdgeInsets.only(top: 4),
+                    decoration: BoxDecoration(
+                      color: theme.colorScheme.surfaceContainerHigh,
+                      borderRadius: BorderRadius.circular(16),
+                    ),
+                    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                    child: Row(
+                      children: [
+                        IconButton(
+                          icon: Icon(Symbols.arrow_back),
+                          onPressed: () {
+                            final pathParts =
+                                currentPath.value!
+                                    .split('/')
+                                    .where((part) => part.isNotEmpty)
+                                    .toList();
+                            if (pathParts.isEmpty) {
+                              currentPath.value = null;
+                            } else {
+                              pathParts.removeLast();
+                              currentPath.value =
+                                  pathParts.isEmpty
+                                      ? null
+                                      : pathParts.join('/');
+                            }
+                          },
+                          visualDensity: const VisualDensity(
+                            horizontal: -4,
+                            vertical: -4,
                           ),
                         ),
-                        const PopupMenuItem<String>(
+                        Expanded(
-                          value: 'folder',
+                          child: Wrap(
-                          child: Row(
+                            crossAxisAlignment: WrapCrossAlignment.center,
                             children: [
-                              Icon(Symbols.folder),
+                              InkWell(
-                              Gap(12),
+                                onTap: () => currentPath.value = null,
-                              Text('Folder'),
+                                child: const Text('Root'),
+                              ),
+                              ...() {
+                                final parts =
+                                    currentPath.value!
+                                        .split('/')
+                                        .where((part) => part.isNotEmpty)
+                                        .toList();
+                                final widgets = <Widget>[];
+                                String currentBuilder = '';
+                                for (final part in parts) {
+                                  currentBuilder +=
+                                      (currentBuilder.isEmpty ? '' : '/') +
+                                      part;
+                                  final pathToSet = currentBuilder;
+                                  widgets.addAll([
+                                    const Text(' / '),
+                                    InkWell(
+                                      onTap:
+                                          () => currentPath.value = pathToSet,
+                                      child: Text(part),
+                                    ),
+                                  ]);
+                                }
+                                return widgets;
+                              }(),
                             ],
                           ),
                         ),
                       ],
-                  style: ButtonStyle(
-                    visualDensity: const VisualDensity(
-                      horizontal: -4,
-                      vertical: -4,
                     ),
                   ),
+                const Gap(8),
+                filesAsync.when(
+                  data: (files) {
+                    if (files.isEmpty) {
+                      return Center(
+                        child: Padding(
+                          padding: const EdgeInsets.all(32),
+                          child: Column(
+                            children: [
+                              Icon(
+                                Symbols.folder,
+                                size: 48,
+                                color: theme.colorScheme.outline,
+                              ),
+                              const Gap(16),
+                              Text(
+                                'No files uploaded yet',
+                                style: theme.textTheme.bodyLarge,
+                              ),
+                              const Gap(8),
+                              Text(
+                                'Upload your first file to get started',
+                                style: theme.textTheme.bodySmall,
+                              ),
+                            ],
+                          ),
+                        ),
+                      );
+                    }
+
+                    return ListView.builder(
+                      shrinkWrap: true,
+                      padding: EdgeInsets.zero,
+                      itemCount: files.length,
+                      itemBuilder: (context, index) {
+                        final file = files[index];
+                        return FileItem(
+                          file: file,
+                          site: site,
+                          onNavigateDirectory:
+                              (path) => currentPath.value = path,
+                        );
+                      },
+                    );
+                  },
+                  loading:
+                      () => const Center(child: CircularProgressIndicator()),
+                  error:
+                      (error, stack) => Center(
+                        child: Column(
+                          children: [
+                            Text('Failed to load files'),
+                            const Gap(8),
+                            ElevatedButton(
+                              onPressed:
+                                  () => ref.invalidate(
+                                    siteFilesProvider(
+                                      siteId: site.id,
+                                      path: currentPath.value,
+                                    ),
+                                  ),
+                              child: const Text('Retry'),
+                            ),
+                          ],
+                        ),
+                      ),
                 ),
               ],
             ),
-            const Gap(16),
+          ),
-            filesAsync.when(
+        ],
-              data: (files) {
-                if (files.isEmpty) {
-                  return Center(
-                    child: Padding(
-                      padding: const EdgeInsets.all(32),
-                      child: Column(
-                        children: [
-                          Icon(
-                            Symbols.folder,
-                            size: 48,
-                            color: theme.colorScheme.outline,
-                          ),
-                          const Gap(16),
-                          Text(
-                            'No files uploaded yet',
-                            style: theme.textTheme.bodyLarge,
-                          ),
-                          const Gap(8),
-                          Text(
-                            'Upload your first file to get started',
-                            style: theme.textTheme.bodySmall,
-                          ),
-                        ],
-                      ),
-                    ),
-                  );
-                }
-
-                return ListView.builder(
-                  shrinkWrap: true,
-                  padding: EdgeInsets.zero,
-                  itemCount: files.length,
-                  itemBuilder: (context, index) {
-                    final file = files[index];
-                    return FileItem(file: file, site: site);
-                  },
-                );
-              },
-              loading: () => const Center(child: CircularProgressIndicator()),
-              error:
-                  (error, stack) => Center(
-                    child: Column(
-                      children: [
-                        Text('Failed to load files'),
-                        const Gap(8),
-                        ElevatedButton(
-                          onPressed:
-                              () => ref.invalidate(
-                                siteFilesProvider(siteId: site.id),
-                              ),
-                          child: const Text('Retry'),
-                        ),
-                      ],
-                    ),
-                  ),
-            ),
-          ],
-        ),
       ),
     );
   }

pubspec.lock

@@ -73,6 +73,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.13.0"
+  autotrie:
+    dependency: transitive
+    description:
+      name: autotrie
+      sha256: "55da6faefb53cfcb0abb2f2ca8636123fb40e35286bb57440d2cf467568188f8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
   avatar_stack:
     dependency: "direct main"
     description:
@@ -766,6 +774,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "7.2.0"
+  flutter_code_editor:
+    dependency: "direct main"
+    description:
+      name: flutter_code_editor
+      sha256: "9af48ba8e3558b6ea4bb98b84c5eb1649702acf53e61a84d88383eeb79b239b0"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.5"
   flutter_colorpicker:
     dependency: "direct main"
     description:
@@ -1253,6 +1269,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.7.0"
+  hive:
+    dependency: transitive
+    description:
+      name: hive
+      sha256: "8dcf6db979d7933da8217edcec84e9df1bdb4e4edc7fc77dbd5aa74356d6d941"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.3"
   hooks_riverpod:
     dependency: "direct main"
     description:
@@ -1461,6 +1485,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.2"
+  linked_scroll_controller:
+    dependency: transitive
+    description:
+      name: linked_scroll_controller
+      sha256: e6020062bcf4ffc907ee7fd090fa971e65d8dfaac3c62baf601a3ced0b37986a
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.0"
   lint:
     dependency: transitive
     description:
@@ -1685,6 +1717,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.1"
+  mocktail:
+    dependency: transitive
+    description:
+      name: mocktail
+      sha256: "890df3f9688106f25755f26b1c60589a92b3ab91a22b8b224947ad041bf172d8"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.4"
   modal_bottom_sheet:
     dependency: "direct main"
     description:
@@ -2246,6 +2286,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.1"
+  scrollable_positioned_list:
+    dependency: transitive
+    description:
+      name: scrollable_positioned_list
+      sha256: "1b54d5f1329a1e263269abc9e2543d90806131aa14fe7c6062a8054d57249287"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.8"
   sdp_transform:
     dependency: transitive
     description:

pubspec.yaml

@@ -170,6 +170,7 @@ dependencies:
   desktop_drop: ^0.7.0
   flutter_animate: ^4.5.2
   http_parser: ^4.1.2
+  flutter_code_editor: ^0.3.5
 
 dev_dependencies:
   flutter_test: