#110: Group Unicode symbols into browsable categories

package.json

@@ -85,10 +85,12 @@
         "dexie": "^4.0.1-alpha.25",
         "firebase": "^10.7",
         "firebase-functions": "^4.6",
+        "fuzzysort": "^2.0.4",
         "graphemer": "^1.4.0",
         "matter-js": "^0.19.0",
         "pitchy": "^4.1.0",
         "recoverable-random": "^1.0.3",
+        "svelte-tiny-virtual-list": "^2.0.5",
         "uuid": "^9",
         "zod": "^3.22.4"
     },

src/components/editor/GlyphChooser.svelte

@@ -1,110 +1,129 @@
 <script lang="ts">
-    import { tokenize } from '../../parser/Tokenizer';
-    import { getUnicodeNamed as getUnicodeWithNameText } from '../../unicode/Unicode';
-    import { IdleKind, getEditors } from '../project/Contexts';
-    import Button from '../widgets/Button.svelte';
-    import TextField from '../widgets/TextField.svelte';
-    import TokenView from './TokenView.svelte';
     import { locales } from '../../db/Database';
     import Commands, { Category } from './util/Commands';
     import CommandButton from '../widgets/CommandButton.svelte';
-    import concretize from '../../locale/concretize';
     import Toggle from '../widgets/Toggle.svelte';
+    import Label from '@components/widgets/Label.svelte';
+    import DropdownButton, { type MenuItem } from '@components/widgets/DropdownButton.svelte';
+    import GlyphSearchArea from './GlyphSearchArea.svelte';
+    import type { WordplayCategories } from '../../unicode/Unicode';
 
     export let sourceID: string;
 
     const Defaults = Commands.filter(
         (command) => command.category === Category.Insert
     );
+
+    const categories: MenuItem<WordplayCategories>[] =  [
+        {
+            label: "Emojis",
+            value: "emojis"
+        }, 
+        {
+            label: "Arrows",
+            value: "arrows"
+        }, 
+        {
+            label: "Shapes",
+            value: "shapes"
+        }, 
+        {
+            label: "Other",
+            value: "other"
+        }, 
+    ]
+    let dropdownLabel = 'Symbols';
+    let dropdownValue: WordplayCategories | undefined = undefined;
     // [
     //     CHANGE_SYMBOL,
     //     DEGREE_SYMBOL,
     //     EXAMPLE_OPEN_SYMBOL,
     //     EXAMPLE_CLOSE_SYMBOL,
     // ];
 
-    const editors = getEditors();
-
     let expanded = false;
-    let query = '';
-    $: results =
-        query.length < 3
-            ? []
-            : getUnicodeWithNameText(query).map((entry) =>
-                  String.fromCodePoint(entry.hex)
-              );
-
-    function insert(glyph: string) {
-        const editor = $editors?.get(sourceID);
-        if (editor) {
-            editor.edit(editor.caret.insert(glyph), IdleKind.Typed, true);
-        }
-    }
 </script>
 
-<section class:expanded class="directory" data-uiid="directory">
-    <TextField
-        placeholder="🔍"
-        description={$locales.get((l) => l.ui.source.cursor.search)}
-        bind:text={query}
-    />
-    <div class="matches">
-        {#if query === ''}
-            {#each Defaults as command}<CommandButton
-                    {sourceID}
-                    {command}
-                    token
-                    focusAfter
-                />{/each}
-        {:else}
-            {#each results as glyph}<Button
-                    tip={concretize(
-                        $locales,
-                        $locales.get((l) => l.ui.source.cursor.insertSymbol),
-                        glyph
-                    ).toText()}
-                    action={() => insert(glyph)}
-                    ><TokenView node={tokenize(glyph).getTokens()[0]} /></Button
-                >{:else}&mdash;{/each}
-        {/if}
+<section class="directory" data-uiid="directory">
+    <div class="top-bar">
+        <div class="left-bar">
+            <div class="operators">
+                <Label>Operators</Label>
+                {#each Defaults as command}<CommandButton
+                                {sourceID}
+                                {command}
+                                token
+                                focusAfter
+                            />{/each}
+            </div>
+            <DropdownButton
+                menuItems={categories}
+                direction="up"
+                onSelect={(item) => {
+                    dropdownLabel = item.label;
+                    expanded = true;
+                }}
+                bind:value={dropdownValue}
+            > {dropdownLabel} </DropdownButton> 
+        </div>
+        <div class="toggleWrapper">
+            <Toggle
+                tips={$locales.get((l) => l.ui.source.toggle.glyphs)}
+                on={expanded}
+                toggle={() => {
+                    expanded = !expanded;
+                    dropdownLabel = 'Symbols';
+                    }}>{expanded ? '–' : '+'}</Toggle
+            >
+        </div>
+    </div>
+    <div class:expanded class="search-area">
+        <GlyphSearchArea {sourceID} category={dropdownValue} {expanded}/>
     </div>
-    <Toggle
-        tips={$locales.get((l) => l.ui.source.toggle.glyphs)}
-        on={expanded}
-        toggle={() => (expanded = !expanded)}>{expanded ? '–' : '+'}</Toggle
-    >
 </section>
 
 <style>
-    section {
+
+    .top-bar {
+        padding: var(--wordplay-spacing);
         display: flex;
         flex-direction: row;
         gap: var(--wordplay-spacing);
-        padding-left: var(--wordplay-spacing);
-        padding-right: var(--wordplay-spacing);
         background-color: var(--wordplay-background);
-        align-items: center;
+        align-items: start;
+        justify-content: space-between;
+        width:100%;
+        overflow: none;
         border-top: var(--wordplay-border-color) solid 1px;
+        border-bottom: var(--wordplay-border-color) solid 1px;
+    }
+
+    .left-bar {
+        display: flex;
+        flex-direction: row;
+        gap: var(--wordplay-spacing);
+        align-items: center;
+        justify-content: start;
+        min-width: 95%;
     }
 
-    .matches {
-        flex-grow: 1;
+    .operators {
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
         gap: var(--wordplay-spacing);
-        overflow-x: auto;
+        align-items: center;
+        overflow: hidden;
+    }
+
+    .search-area {
+        display: none;
         padding: var(--wordplay-spacing);
+        padding-bottom: 0;
     }
 
-    section.expanded {
-        height: 10em;
+    .expanded {
+        display: block;
     }
 
-    .expanded .matches {
-        overflow-x: none;
-        overflow-y: auto;
-        flex-wrap: wrap;
-        height: 100%;
-    }
 </style>