feat (Editor): Add an option to set the editor font family (#1078)

* feat (Editor): Add an option to set the editor font family

Add the `editorFontFamily` property to the settings storage and implement font family selection functionality on editor-related pages. Also, update all pages that use the editor settings to support the newly added font family option.

* refactor(editor): Optimize the logic for editor font settings
Standardize the method for retrieving font settings on the editor page to avoid redundant calls to the `fetch()` method. Extract the font retrieval logic into variables or anonymous functions to improve code readability and performance.

lib/data/res/github_id.dart

@@ -149,6 +149,7 @@ abstract final class GithubIds {
     'jjyou-github',
     'yeluonight',
     'Yinhono',
+    'kuvaldini',
   };
 }
 

lib/data/store/setting.dart

@@ -78,6 +78,8 @@ class SettingStore extends HiveStore {
 
   late final editorFontSize = propertyDefault('editorFontSize', 12.5);
 
+  late final editorFontFamily = propertyDefault('editorFontFamily', '');
+
   /// Trusted SSH host key fingerprints keyed by `serverId::keyType`.
   late final sshKnownHostFingerprints = propertyDefault<Map<String, String>>(
     'sshKnownHostFingerprints',

lib/view/page/setting/entries/app.dart

@@ -465,6 +465,7 @@ extension _App on _AppSettingsPageState {
 
     /// Encode [map] to String with indent `\t`
     final text = jsonIndentEncoder.convert(mapForEditor);
+    final editorFont = _setting.editorFontFamily.fetch();
     await EditorPage.route.go(
       context,
       args: EditorPageArgs(
@@ -472,9 +473,10 @@ extension _App on _AppSettingsPageState {
         lang: ProgLang.json,
         title: libL10n.setting,
         onSave: onSave,
-        closeAfterSave: SettingStore.instance.closeAfterSave.fetch(),
-        softWrap: SettingStore.instance.editorSoftWrap.fetch(),
-        enableHighlight: SettingStore.instance.editorHighlight.fetch(),
+        closeAfterSave: _setting.closeAfterSave.fetch(),
+        softWrap: _setting.editorSoftWrap.fetch(),
+        enableHighlight: _setting.editorHighlight.fetch(),
+        fontFamily: editorFont.isEmpty ? null : editorFont,
       ),
     );
   }

lib/view/page/setting/entries/editor.dart

@@ -5,6 +5,7 @@ extension _Editor on _AppSettingsPageState {
     return Column(
       children: [
         _buildEditorWrap(),
+        _buildEditorFontFamily(),
         _buildEditorFontSize(),
         _buildEditorTheme(),
         _buildEditorDarkTheme(),
@@ -96,6 +97,43 @@ extension _Editor on _AppSettingsPageState {
     );
   }
 
+  Widget _buildEditorFontFamily() {
+    return ListTile(
+      leading: const Icon(MingCute.font_fill),
+      title: Text(libL10n.font),
+      trailing: ValBuilder(
+        listenable: _setting.editorFontFamily.listenable(),
+        builder: (val) => Text(
+          val.isEmpty ? libL10n.auto.toLowerCase() : val,
+          style: UIs.text15,
+        ),
+      ),
+      onTap: () => _showFontFamilyDialog(_setting.editorFontFamily),
+    );
+  }
+
+  void _showFontFamilyDialog(HiveProp<String> property) {
+    final ctrl = TextEditingController(text: property.fetch());
+    void onSave() {
+      context.pop();
+      property.put(ctrl.text.trim());
+    }
+
+    context.showRoundDialog(
+      title: libL10n.font,
+      child: Input(
+        controller: ctrl,
+        autoFocus: true,
+        type: TextInputType.text,
+        icon: Icons.font_download,
+        hint: 'monospace / Consolas / Fira Code ...',
+        suggestion: false,
+        onSubmitted: (_) => onSave(),
+      ),
+      actions: Btn.ok(onTap: onSave).toList,
+    );
+  }
+
   void _showFontSizeDialog(HiveProp<double> property) {
     final ctrl = TextEditingController(text: property.fetch().toString());
     void onSave() {

lib/view/page/setting/entries/ssh.dart

@@ -69,10 +69,12 @@ extension _SSH on _AppSettingsPageState {
     // iOS can't copy file to app dir, so we need to use the original path
     if (isIOS) {
       _setting.fontPath.put(path);
+      await FontUtils.loadFrom(path);
     } else {
       final fontFile = File(path);
       await fontFile.copy(Paths.font);
       _setting.fontPath.put(Paths.font);
+      await FontUtils.loadFrom(Paths.font);
     }
 
     context.pop();

lib/view/page/storage/local.dart

@@ -11,7 +11,7 @@ import 'package:server_box/data/model/sftp/worker.dart';
 import 'package:server_box/data/provider/server/all.dart';
 import 'package:server_box/data/provider/sftp.dart';
 import 'package:server_box/data/res/misc.dart';
-import 'package:server_box/data/store/setting.dart';
+import 'package:server_box/data/res/store.dart';
 import 'package:server_box/view/page/storage/sftp.dart';
 import 'package:server_box/view/page/storage/sftp_mission.dart';
 
@@ -366,9 +366,13 @@ extension _OnTapFile on _LocalFilePageState {
           context.showSnackBar(libL10n.saved);
           setStateSafe(() {});
         },
-        closeAfterSave: SettingStore.instance.closeAfterSave.fetch(),
-        softWrap: SettingStore.instance.editorSoftWrap.fetch(),
-        enableHighlight: SettingStore.instance.editorHighlight.fetch(),
+        closeAfterSave: Stores.setting.closeAfterSave.fetch(),
+        softWrap: Stores.setting.editorSoftWrap.fetch(),
+        enableHighlight: Stores.setting.editorHighlight.fetch(),
+        fontFamily: () {
+          final font = Stores.setting.editorFontFamily.fetch();
+          return font.isEmpty ? null : font;
+        }(),
       ),
     );
   }

lib/view/page/storage/sftp.dart

@@ -17,7 +17,6 @@ import 'package:server_box/data/provider/server/single.dart';
 import 'package:server_box/data/provider/sftp.dart';
 import 'package:server_box/data/res/misc.dart';
 import 'package:server_box/data/res/store.dart';
-import 'package:server_box/data/store/setting.dart';
 import 'package:server_box/view/page/ssh/page/page.dart';
 import 'package:server_box/view/page/storage/local.dart';
 import 'package:server_box/view/page/storage/sftp_mission.dart';
@@ -360,9 +359,13 @@ extension _Actions on _SftpPageState {
               .add(SftpReq(req.spi, remotePath, localPath, SftpReqType.upload));
           context.showSnackBar(l10n.added2List);
         },
-        closeAfterSave: SettingStore.instance.closeAfterSave.fetch(),
-        softWrap: SettingStore.instance.editorSoftWrap.fetch(),
-        enableHighlight: SettingStore.instance.editorHighlight.fetch(),
+        closeAfterSave: Stores.setting.closeAfterSave.fetch(),
+        softWrap: Stores.setting.editorSoftWrap.fetch(),
+        enableHighlight: Stores.setting.editorHighlight.fetch(),
+        fontFamily: () {
+          final font = Stores.setting.editorFontFamily.fetch();
+          return font.isEmpty ? null : font;
+        }(),
       ),
     );
   }