Better sorting of presentations and session files. Slight style changes.

src/lib/element_websocket_v2.svelte

@@ -14,6 +14,9 @@ export let msg: null|string = null;
 export let type: null|string = null; // msg, cmd, json, hello, bye
 export let trigger_send: any = null;
 export let classes: string = 'container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 sm:mb-12 md:mb-8';
+export let hide__ws_form: boolean = true;
+export let hide__ws_messages: boolean = false;
+export let hide__ws_commands: boolean = false;
 
 // *** Set initial variables
 const dispatch = createEventDispatcher();
@@ -227,12 +230,63 @@ function handle_send_ws_data() {
 </script>
 
 
-<section class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mb-20 ">
+<section class="ae_element__websocket container p-1 bg-pink-100 text-xs mx-auto pb-16 mt-32 mb-32 relative">
+
+<span class="absolute top-0 right-0 flex flex-col gap-1">
+    <button
+        type="button"
+        on:click={() => {
+            hide__ws_form = !hide__ws_form;
+        }}
+        class="btn btn-sm text-xs hover:variant-filled-tertiary"
+        class:variant-soft-tertiary={hide__ws_form}
+        class:variant-filled-tertiary={!hide__ws_form}
+        >
+        {#if hide__ws_form}
+            Show Form
+        {:else}
+            Hide Form?
+        {/if}
+    </button>
+    <button
+        type="button"
+        on:click={() => {
+            hide__ws_messages = !hide__ws_messages;
+        }}
+        class="btn btn-sm text-xs hover:variant-filled-tertiary"
+        class:variant-soft-tertiary={hide__ws_messages}
+        class:variant-filled-tertiary={!hide__ws_messages}
+        >
+        {#if hide__ws_messages}
+            Show Messages
+        {:else}
+            Hide Messages?
+        {/if}
+    </button>
+    <button
+        type="button"
+        on:click={() => {
+            hide__ws_commands = !hide__ws_commands;
+        }}
+        class="btn btn-sm text-xs hover:variant-filled-tertiary"
+        class:variant-soft-tertiary={hide__ws_commands}
+        class:variant-filled-tertiary={!hide__ws_commands}
+        >
+        {#if hide__ws_commands}
+            Show Commands
+        {:else}
+            Hide Commands?
+        {/if}
+    </button>
+</span>
 
 <header>
-    <h1 class="font-bold text-center">Websocket Messages &amp; Commands</h1>
+
+    <h1 class="h6 text-center">Websocket Messages &amp; Commands</h1>
+
 </header>
 
+
 <!-- <form on:submit|preventDefault={handle_send_message}>
     <select bind:value={type}>
         <option value="">None</option>
@@ -255,17 +309,22 @@ function handle_send_ws_data() {
     <button>Send</button>
 </form> -->
 
-{#if 1==1}
-<form on:submit|preventDefault={handle_send_ws_data}>
-    <!-- <select bind:value={type}>
+{#if !hide__ws_form}
+<form
+    on:submit|preventDefault={handle_send_ws_data}
+    >
+    <select
+        bind:value={ws_data.type}
+        class="input text-sm w-24"
+        >
         <option value="">None</option>
         <option value="echo">Echo</option>
         <option value="dm">Direct Message</option>
         <option value="group">Group Message</option>
         <option value="all">Broadcast to All</option>
         <option value="cmd">Command</option>
-    </select> -->
-
+    </select>
+    <input type="text" bind:value={group_id} placeholder="Group ID" class="input text-sm w-36" />
     <!-- <select bind:value={group_id}>
         <option value="">None</option>
         <option value="test_grp_123">123</option>
@@ -281,7 +340,7 @@ function handle_send_ws_data() {
     <button
         type="submit"
         class="btn btn-sm variant-soft-warning"
-        >Send Example Group</button>
+        >Send Group</button>
 </form>
 {/if}
 
@@ -293,6 +352,9 @@ ae_open:event_file=Kljq0uiTlXt (video)
 
 <!-- <hr> -->
 
+<section
+    class:hidden={hide__ws_messages}
+    >
 <h2 class="text-center underline">Messages [grp, client, target, type]</h2>
 
 <ol class="list-decimal list-outside max-h-24 overflow-y-auto messages">
@@ -320,9 +382,13 @@ ae_open:event_file=Kljq0uiTlXt (video)
         </li>
     {/each}
 </ol>
+</section> <!-- End Messages -->
 
 <hr>
 
+<section
+    class:hidden={hide__ws_commands}
+    >
 <h2 class="text-center underline">Commands</h2>
 
 <ol class="list-decimal list-outside max-h-24 overflow-y-auto commands">
@@ -349,6 +415,8 @@ ae_open:event_file=Kljq0uiTlXt (video)
         </li>
     {/each}
 </ol>
+</section> <!-- End Commands -->
+
 
 </section>