Merge pull request #30 from getditto/cx-538-system-config

CX-538:  Flutter Tools - System Configuration

Author: biozal

CLAUDE.md

@@ -136,4 +136,18 @@ Repository: https://github.com/getditto/ditto_flutter_tools
 - the claude\designs directory is used for all design related files and should not be used for any other purpose.
 
 # Code Style
-- Always recommend dart code vs trying to use native code in Swift or Kotlin, etc.   If required, look for 3rd party libraries that might be available that publish solutions that work in all platforms (mac, linux, windows, android, ios, web).
+- Always recommend dart code vs trying to use native code in Swift or Kotlin, etc.   If required, look for 3rd party libraries that might be available that publish solutions that work in all platforms (mac, linux, windows, android, ios, web).
+
+- If you're rendering a list of items, use ListView even if you only have one string you want to display: ListView(title: Text(string))
+   - If you have multiple, use subtitle as well 
+   - If you need the option for lots of text, use ExpansionTile
+   - NO hardcoding theme stuff, since Flutter users expect to be able to override these values via Theme
+
+- In general, pulling larger chunks of UI out into getters really helps readability, e.g.
+
+class MyState extends State<MyWidget> {
+  // ...
+
+  Widget get something => ListTile(/* ... */ );
+}
+Flutter has an insane problem with rightward drift, and this is one of the few tools we have to combat it

README.md

@@ -112,6 +112,71 @@ Both export features now use the **native platform Share API** for a seamless us
 - The `share_plus` package handles all platform-specific sharing requirements automatically
 - Users can share to any compatible app (email, cloud storage, messaging, etc.) through the native platform dialogs
 
+## `SystemSettingsView`
+
+The `SystemSettingsView` provides a comprehensive interface for viewing and inspecting all Ditto system configuration settings. This diagnostic tool helps developers understand the current runtime configuration of their Ditto instance by displaying all system parameters retrieved using the `SHOW ALL` DQL statement.
+
+### Usage
+
+The `SystemSettingsView` can be used as a standalone widget in your Flutter application:
+
+```dart
+import 'package:ditto_flutter_tools/ditto_flutter_tools.dart';
+
+// In your widget build method
+Scaffold(
+  appBar: AppBar(title: Text('System Settings')),
+  body: SystemSettingsView(ditto: myDittoInstance),
+)
+```
+
+### Features
+
+The system settings view provides:
+
+1. **Dynamic Settings Display** - Automatically displays all available system settings without hardcoded keys, adapting to different Ditto SDK versions
+2. **Search Functionality** - Real-time search/filter to quickly find specific settings by key or value
+3. **Smart Value Formatting** - Intelligent display of different data types (boolean, number, string, array, object)
+4. **Detailed View** - Expandable detail dialog for complex values (arrays, objects, long strings)
+5. **Copy to Clipboard** - Easy copying of setting key-value pairs for debugging or documentation
+6. **Live Refresh** - Manual refresh button to reload settings and see configuration changes
+
+### Settings Information Displayed
+
+The view displays all system configuration parameters including but not limited to:
+- **Replication Settings** - Parameters controlling data synchronization behavior
+- **Network Settings** - Configuration for mesh networking, routing, and transports
+- **Storage Settings** - Database and blob store configuration
+- **Performance Settings** - Timeout values, batch sizes, and optimization parameters
+- **Feature Flags** - Enabled/disabled features and experimental options
+
+### Value Visualization
+
+Different data types are displayed with appropriate formatting:
+- **Booleans** - Color-coded badges (green for true, grey for false)
+- **Numbers** - Monospace font for easy reading
+- **Strings** - Truncated with full view on tap for long values
+- **Arrays/Objects** - Compact badge showing type and item count, expandable for full JSON view
+- **Empty Values** - Clear indication of empty arrays, objects, or strings
+
+### Real-time Search
+
+The search feature allows filtering by:
+- Setting key names (e.g., searching for "replication" shows all replication-related settings)
+- Setting values (e.g., searching for "true" shows all boolean settings that are enabled)
+- Case-insensitive matching for convenience
+
+### Platform Support
+- ✅ **iOS**: Full support
+- ✅ **Android**: Full support
+- ✅ **macOS**: Full support
+- ✅ **Linux**: Full support
+- ✅ **Web**: Full support (when Ditto Web SDK supports DQL execution)
+
+### Documentation Reference
+
+For more information about system settings and the `SHOW ALL` DQL statement, see the [Ditto documentation on retrieving system values](https://docs.ditto.live/sdk/latest/sync/using-alter-system#retrieving-values).
+
 ## `SyncStatusHelper` and `SyncStatusView`
 
 These tools are intended to provide insights into the status of your subscriptions.

example/lib/main.dart

@@ -287,11 +287,7 @@ class _MainListView extends StatelessWidget {
                     );
                   },
                 ),
-                Divider(
-                    height: 1,
-                    color:
-                        Theme.of(context).colorScheme.outline.withOpacity(0.3),
-                    indent: 56),
+                const Divider(),
                 ListTile(
                   leading: Container(
                     width: 32,
@@ -410,11 +406,7 @@ class _MainListView extends StatelessWidget {
                     );
                   },
                 ),
-                Divider(
-                    height: 1,
-                    color:
-                        Theme.of(context).colorScheme.outline.withOpacity(0.3),
-                    indent: 56),
+                const Divider(),
                 ListTile(
                   leading: Container(
                     width: 32,
@@ -456,6 +448,50 @@ class _MainListView extends StatelessWidget {
                     );
                   },
                 ),
+                const Divider(),
+                ListTile(
+                  leading: Container(
+                    width: 32,
+                    height: 32,
+                    decoration: BoxDecoration(
+                      color: Colors.orange,
+                      borderRadius: BorderRadius.circular(8),
+                    ),
+                    child: const Icon(
+                      Icons.settings,
+                      color: Colors.white,
+                      size: 20,
+                    ),
+                  ),
+                  title: const Text("System Settings"),
+                  trailing: Icon(Icons.chevron_right,
+                      color: Theme.of(context).colorScheme.onSurfaceVariant),
+                  onTap: () {
+                    Navigator.of(context).push(
+                      PageRouteBuilder(
+                        pageBuilder: (context, animation, secondaryAnimation) =>
+                            Material(
+                          child: Scaffold(
+                            appBar:
+                                AppBar(title: const Text("System Settings")),
+                            body:
+                                SystemSettingsView(ditto: dittoService.ditto!),
+                          ),
+                        ),
+                        transitionsBuilder:
+                            (context, animation, secondaryAnimation, child) {
+                          return SlideTransition(
+                            position: Tween<Offset>(
+                              begin: const Offset(1.0, 0.0),
+                              end: Offset.zero,
+                            ).animate(animation),
+                            child: child,
+                          );
+                        },
+                      ),
+                    );
+                  },
+                ),
               ],
             ),
           ),

lib/ditto_flutter_tools.dart

@@ -13,3 +13,4 @@ export "src/permissions_health/wifi_permissions_cross_platform.dart"
 export "src/sync_status_view.dart" show SyncStatusView;
 export "src/sync_status_helper.dart" show SyncStatusHelper, SyncStatus;
 export "src/peer_list.dart" show PeerListView;
+export "src/system_settings_view.dart" show SystemSettingsView;