Add branch name to screenshot (#241)

Author: aparlato

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Shorten URLs by reducing map state kept in the hash to the minimum
 - Don't set RTL text plugin if already in progress
+- Add branch name to screenshots if looking at branch pattern
 
 ## 0.17.0
 

dist/bundle.css

@@ -12,7 +12,7 @@
     mapObj = state?.[index];
   });
 
-  const { customJs } = $configStore;
+  const { customJs = [] } = $configStore;
 
   $: validActions = customJs.filter(js => js.mapIds.includes(mapId));
 

dist/bundle.js

@@ -146,10 +146,21 @@
   $: setMapComponent(mapRenderer);
 
   $: mapStateProps = getMapStateProps($$restProps);
+
+  $: console.log(map);
 </script>
 
 <div class="map-container">
-  <div class="screenshot-label-transparent">{map.name ?? map.id}</div>
+  <div class="screenshot-label-transparent">
+    {#if map?.branch}
+      <div class="screenshot-text">
+        {map.screenshotName ?? map.name ?? map.id}
+        <span class="screenshot-label-bold">&nbsp;{map.branch}</span>
+      </div>
+    {:else}
+      {map.name ?? map.id}
+    {/if}
+  </div>
   {#key mapRenderer}
     <div class="map" class:highlight-diff={highlightDifferences}>
       <svelte:component
@@ -226,6 +237,14 @@
     align-items: center;
   }
 
+  .screenshot-text {
+    text-align: center;
+  }
+
+  .screenshot-label-bold {
+    font-weight: bold;
+  }
+
   .screenshot-label-transparent {
     display: none;
   }

dist/bundle.js.map

@@ -161,6 +161,7 @@
         if (pattern?.styles?.length) {
           const branchValues = pattern?.styles.map(s => {
             return {
+              screenshotName: `${pattern.name ?? pattern.id}: ${s} on`,
               name: `${pattern.name ?? pattern.id}: ${s} on...`,
               branchId: pattern?.id,
               id: s,