feat: Custom tab renaming

src/components/EditorTabs.d.ts

@@ -1,5 +1,6 @@
 export type Tab = {
   label: string;
+  title?: string;
   text: string;
   persistent?: boolean;
 };

src/components/EditorTabs.svelte

@@ -73,6 +73,7 @@
          aria-selected={ndx === selected}
          aria-controls={`${ns}-tabpanel`}
          class:active={ndx === active}
+         title={tab.title}
          onclick={() => selectTab(ndx)}>
       <span class="tab-label">{tab.label}</span>
     </button>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import * as YAML from "js-yaml";
+  import { toRelativeUri } from "@hyperjump/uri";
 
   import { setShouldValidateFormat } from "$lib/json-schema.ts";
   import {
@@ -30,6 +31,19 @@
 
   let format: "json" | "yaml" = $state("json");
 
+  const generateTabLabel = (uri: string, baseUri: string) => {
+    if (uri === baseUri) return { label: "Schema", title: uri };
+
+    let label = toRelativeUri(baseUri, uri);
+
+    label = label.replace(/(\.schema)?(\.(json|yaml|yml))?$/i, "");
+
+    if (label.length > 20) {
+      label = "\u2026" + label.slice(-20);
+    }
+
+    return { label: label || "Schema", title: uri };
+  };
   const newSchema = (function () {
     let sequence = 1;
 
@@ -83,9 +97,17 @@ $id: '${id}'`
         schemaRegistry[schemaUrl] = await schemaDocuments[0];
       } catch (_error) {
       }
-      for (const schemaDocument of schemaDocuments) {
+      for (let i = 0; i < schemaDocuments.length; i++) {
         try {
-          schemaRegistry[(await schemaDocument).baseUri] = await schemaDocument;
+          const doc = await schemaDocuments[i];
+          schemaRegistry[doc.baseUri] = doc;
+
+          const mainUri = (await schemaDocuments[0].catch(() => undefined))?.baseUri ?? schemaUrl;
+          const { label, title } = generateTabLabel(doc.baseUri, mainUri);
+          if (schemas[i].label !== label || schemas[i].title !== title) {
+            schemas[i].label = label;
+            schemas[i].title = title;
+          }
         } catch (_error) {
         }
       }
@@ -112,7 +134,7 @@ $id: '${id}'`
     }());
   });
 
-  const onSchemaTabClose = (index: number) => {
+  const onSchemaTabClose = (closedIndex: number) => {
     schemaDocuments = [];
     schemas.forEach((tab, index) => {
       // eslint-disable-next-line @typescript-eslint/require-await
@@ -123,7 +145,7 @@ $id: '${id}'`
       }());
     });
 
-    if (selectedSchema !== index) {
+    if (selectedSchema !== closedIndex) {
       triggerSchemaValidation++;
     }
   };