From 12957d774054ec73d2875e5b159b4f617993b3f3 Mon Sep 17 00:00:00 2001
From: Steven Hugg <hugg@fasterlight.com>
Date: Tue, 14 Nov 2023 10:57:19 -0600
Subject: [PATCH] changed file selector to <optgroup>

---
 src/ide/ui.ts | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/ide/ui.ts b/src/ide/ui.ts
index 6711cedd..804d925f 100644
--- a/src/ide/ui.ts
+++ b/src/ide/ui.ts
@@ -1220,13 +1220,13 @@ async function _downloadAllFilesZipFile(e) {
 }
 
 function populateExamples(sel) {
-  var files = {};
-  sel.append($("<option />").text("--------- Examples ---------").attr('disabled','true'));
+  let files = {};
+  let optgroup = $("<optgroup />").attr('label','Examples').appendTo(sel);
   for (var i=0; i<PRESETS.length; i++) {
     var preset = PRESETS[i];
     var name = preset.chapter ? (preset.chapter + ". " + preset.name) : preset.name;
     var isCurrentPreset = preset.id==current_project.mainPath;
-    sel.append($("<option />").val(preset.id).text(name).attr('selected',isCurrentPreset?'selected':null));
+    optgroup.append($("<option />").val(preset.id).text(name).attr('selected',isCurrentPreset?'selected':null));
     if (isCurrentPreset) current_preset = preset;
     files[preset.id] = name;
   }
@@ -1238,12 +1238,11 @@ function populateRepos(sel) {
     var n = 0;
     var repos = getRepos();
     if (repos) {
+      let optgroup = $("<optgroup />").attr('label','Repositories').appendTo(sel);
       for (let repopath in repos) {
         var repo = repos[repopath];
         if (repo.platform_id && getBasePlatform(repo.platform_id) == getBasePlatform(platform_id)) {
-          if (n++ == 0)
-            sel.append($("<option />").text("------ Repositories ------").attr('disabled','true'));
-          sel.append($("<option />").val(repo.url).text(repo.url.substring(repo.url.indexOf('/'))));
+          optgroup.append($("<option />").val(repo.url).text(repo.url.substring(repo.url.indexOf('/'))));
         }
       }
     }
@@ -1251,16 +1250,15 @@ function populateRepos(sel) {
 }
 
 async function populateFiles(sel:JQuery, category:string, prefix:string, foundFiles:{}) {
-  var keys = await store.keys();
-  var numFound = 0;
+  let keys = await store.keys();
   if (!keys) keys = [];
+  let optgroup;
   for (var i = 0; i < keys.length; i++) {
-    var key = keys[i];
+    let key = keys[i];
     if (key.startsWith(prefix) && !foundFiles[key]) {
-      if (numFound++ == 0)
-        sel.append($("<option />").text("------- " + category + " -------").attr('disabled','true'));
-      var name = key.substring(prefix.length);
-      sel.append($("<option />").val(key).text(name).attr('selected',(key==current_project.mainPath)?'selected':null));
+      if (!optgroup) optgroup = $("<optgroup />").attr('label',category).appendTo(sel);
+      let name = key.substring(prefix.length);
+      optgroup.append($("<option />").val(key).text(name).attr('selected',(key==current_project.mainPath)?'selected':null));
     }
   }
 }