From dd7c2084fa477aee09f2c1bba983d6de1e0465f3 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Sun, 3 Nov 2024 15:43:33 +0200
Subject: [PATCH] client: apply grouping to the MIME type list

---
 .../options/code_notes/code_mime_types.js         | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js b/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
index 18cc30b75..909b62a86 100644
--- a/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
+++ b/src/public/app/widgets/type_widgets/options/code_notes/code_mime_types.js
@@ -19,9 +19,24 @@ export default class CodeMimeTypesOptions extends OptionsWidget {
 
     async optionsLoaded(options) {
         this.$mimeTypes.empty();
+        let index = -1;
+        let prevInitial = "";
 
         for (const mimeType of mimeTypesService.getMimeTypes()) {
             const id = "code-mime-type-" + (idCtr++);
+            index++;
+            
+            // Append a heading to group items by the first letter, excepting for the
+            // first item ("Plain Text"). Note: this code assumes the items are already
+            // in alphabetical ordered.
+            if (index > 0) {
+                const initial = mimeType.title.charAt(0).toUpperCase();
+                
+                if (initial !== prevInitial) {
+                    this.$mimeTypes.append($("<h5>").text(initial));
+                    prevInitial = initial;
+                }
+            }
 
             this.$mimeTypes.append($("<li>")
                 .append($('<input type="checkbox" class="form-check-input">')