Move FontIndex to page/transformation controls

ui/src/components/Popup.svelte

@@ -13,7 +13,7 @@
 
 <span use:clickOutside={{ enabled: opened, cb: () => opened.set(false) }}>
     <span on:click={toogle}>
-        <slot name="trigger" />
+        <slot name="trigger" opened={$opened} />
     </span>
 
     {#if $opened}

ui/src/debug/DebugView.svelte

@@ -8,13 +8,13 @@
     import type Debugger from '@core/Debugger';
 
     import slideH from '../svelte/slideH';
-    import FontIndex from './FontIndex.svelte';
     import Popup from '../components/Popup.svelte';
     import PageSelectionPopup from './PageSelectionPopup.svelte';
     import Checkbox from '../components/Checkbox.svelte';
     import ItemTable from './ItemTable.svelte';
     import TransformerSelectionPopup from './TransformerSelectionPopup.svelte';
     import { debugStage } from '../config';
+    import FontEntry from './FontEntry.svelte';
 
     export let debug: Debugger;
 
@@ -22,7 +22,6 @@
     let pinnedPage: number;
     let onlyRelevantItems = true;
     let groupingEnabled = true;
-    let showFonts = false;
 
     $: canNext = $debugStage + 1 < stageNames.length;
     $: canPrev = $debugStage > 0;
@@ -50,8 +49,8 @@
             {/if}
             <span>
                 <Popup>
-                    <span slot="trigger">
+                    <span slot="trigger" let:opened>
-                        <BookOpen size="1x" class="hover:text-select cursor-pointer" />
+                        <BookOpen size="1x" class="hover:text-select cursor-pointer {opened && 'text-select'}" />
                     </span>
                     <span slot="content">
                         <PageSelectionPopup
@@ -63,6 +62,29 @@
                     </span>
                 </Popup>
             </span>
+            <span>
+                <Popup>
+                    <span slot="trigger" let:opened>
+                        <div
+                            class="hover:text-select cursor-pointer {opened && 'text-select'}"
+                            style="font-family: AmericanTypewriter, verdana">
+                            F
+                        </div>
+                    </span>
+                    <span slot="content">
+                        <div class="absolute mt-1 py-2 px-2 bg-gray-200 rounded-br">
+                            <div
+                                class=" overflow-y-scroll "
+                                style="max-height: 65vh"
+                                transition:slide={{ duration: 400 }}>
+                                {#each [...debug.fontMap.keys()] as fontName}
+                                    <FontEntry fontMap={debug.fontMap} {fontName} />
+                                {/each}
+                            </div>
+                        </div>
+                    </span>
+                </Popup>
+            </span>
 
             <div>|</div>
             <div>Transformation:</div>
@@ -112,11 +134,6 @@
         {/each}
     </ul>
 
-    <!-- Fonts Index -->
-    <div class="fixed left-0 top-40 z-50">
-        <FontIndex bind:showFonts fontMap={debug.fontMap} />
-    </div>
-
     <!-- Items -->
     {#if visiblePages.find((page) => page.itemGroups.length > 0)}
         <ItemTable
@@ -126,6 +143,7 @@
             {pageIsPinned}
             changes={stageResult.changes} />
     {:else}
+        <!-- No items visible -->
         <div class="flex space-x-1 items-center justify-center text-xl">
             <div>No visible changes from the transformation.</div>
             {#if supportsRelevanceFiltering && onlyRelevantItems}

ui/src/debug/FontEntry.svelte

@@ -9,7 +9,7 @@
 
 <div class="pb-1 rounded shadow bg-gray-300 min-w-max">
     <div
-        class="twoColumned header bg-gray-400 py-1 px-2 rounded-t cursor-pointer"
+        class="twoColumned header py-1 px-2 text-sm bg-gray-400 rounded-t cursor-pointer"
         class:opened={!collapsed}
         on:click={() => (collapsed = !collapsed)}>
         <div class="font-semibold">{fontName}</div>

ui/src/debug/FontIndex.svelte

@@ -1,26 +0,0 @@
-<script>
-    import { clickOutside } from '../actions/clickOutside';
-    import slideH from '../svelte/slideH';
-    import FontEntry from './FontEntry.svelte';
-
-    export let showFonts = false;
-    export let fontMap: Map<string, object>;
-</script>
-
-<div class="flex items-start" use:clickOutside={{ enabled: showFonts, cb: () => (showFonts = false) }}>
-    {#if showFonts}
-        <div class="py-2 px-2 bg-gray-200 rounded-br">
-            <div class=" overflow-y-scroll " style="max-height: 65vh" transition:slideH={{ duration: 400 }}>
-                {#each [...fontMap.keys()] as fontName}
-                    <FontEntry {fontMap} {fontName} />
-                {/each}
-            </div>
-        </div>
-    {/if}
-    <div
-        class=" px-1.5 py-0.5 bg-gray-200 text-lg font-mono font-bold rounded-r {showFonts ? '' : 'shadow'} cursor-pointer hover:text-select"
-        style="font-family: AmericanTypewriter, verdana"
-        on:click={() => (showFonts = !showFonts)}>
-        {showFonts ? 'X' : 'F'}
-    </div>
-</div>