Refactor script loading to handle script references and improve error…

… handling; update CSS for line-clue styling

src/App.vue

@@ -50,18 +50,23 @@ const markActive = (script) => {
 
 const script = reactive({});
 
-const loadScript = async (url) => {
-  try {
-    const response = await fetch(url);
-    if (!response.ok) {
-      throw new Error('Network response was not ok');
+const loadScript = async (scriptRef) => {
+  if (!scriptRef) return;
+  if(!scriptRef.script) {
+    try {
+    
+      const response = await fetch(scriptRef.url);
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      scriptRef.script = await response.json();
+      
+    } catch (error) {
+      console.error('Failed to load script data:', error);
     }
-    const data = await response.json();
-    Object.assign(script, data);
-    markActive(script);
-  } catch (error) {
-    console.error('Failed to load script data:', error);
   }
+  Object.assign(script, scriptRef.script);
+  markActive(script);
 };
 
 const loadSelectedScript = async () => {
@@ -70,7 +75,7 @@ const loadSelectedScript = async () => {
     scriptRef = scripts[0];
     selectedScript.value = scriptRef.name;
   }
-  await loadScript(scriptRef.url);
+  await loadScript(scriptRef);
   const newConfig = safeJSONparse(localStorage.getItem(`config.${selectedScript.value}`)) 
                           || {
                             selectedActors: [],

src/style.css

@@ -94,9 +94,8 @@ button:focus-visible {
 }
 
 .line-hide {
-  @apply items-start inline;
+  @apply items-start inline-flex;
   background: inherit !important;
-  /**display: inline;**/
 }
 
 .line-clue {
@@ -134,6 +133,10 @@ button:focus-visible {
     background-color: #1a1a1a;
   }
 
+  .line-clue {
+    color: #a6aafb;
+  }
+
   .scene > :nth-child(even) {
     @apply bg-gray-800; /* Tailwind class for dark gray background */
   }