Collapse

src/lib/components/card.svelte

@@ -1,8 +1,15 @@
-<div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col ${$$props.class}`}>
+<script lang="ts">
+	import { slide } from 'svelte/transition';
+	export let isOpen: boolean = true;
+</script>
+
+<div class={`bg-white rounded overflow-hidden shadow m-2 flex-grow flex flex-col `}>
 	<div class="bg-blue-400 border-gray-400 p-2 flex-none">
 		<slot name="title" />
 	</div>
-	<div class="flex-grow overflow-auto">
-		<slot />
-	</div>
+	{#if isOpen}
+		<div class="flex-grow overflow-auto" transition:slide>
+			<slot />
+		</div>
+	{/if}
 </div>

src/lib/components/editor/editor.svelte

@@ -63,7 +63,7 @@
 		});
 		editor.layout({
 			height: divEl.parentElement.offsetHeight,
-			width: divEl.offsetWidth
+			width: divEl.parentElement.offsetWidth
 		});
 		const resizeObserver = new ResizeObserver((entries) => {
 			editor.layout({
@@ -71,7 +71,8 @@
 				width: entries[0].contentRect.width
 			});
 		});
-		resizeObserver.observe(divEl);
+
+		resizeObserver.observe(divEl.parentElement.parentElement);
 		return () => {
 			editor.dispose();
 		};

src/lib/components/history/history.svelte

@@ -13,7 +13,7 @@
 	import { onMount } from 'svelte';
 	import moment from 'moment';
 
-	const HISTORY_SAVE_INTERVAL: number = 1000;
+	const HISTORY_SAVE_INTERVAL: number = 5000;
 
 	const tabSelectHandler = (message: CustomEvent<Tab>) => {
 		autoHistoryMode.set('timeline' === message.detail.id);
@@ -65,12 +65,14 @@
 			saveHistory(true);
 		}, HISTORY_SAVE_INTERVAL);
 	});
+
+	let isOpen = false;
 </script>
 
-<Card class="h-52">
+<Card {isOpen}>
 	<div slot="title" class="flex justify-between">
 		<div class="flex">
-			<Tabs on:select={tabSelectHandler} {tabs} title="History" />
+			<Tabs on:select={tabSelectHandler} bind:isOpen {tabs} title="History" />
 		</div>
 		<div class="flex gap-x-4 text-white">
 			<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
@@ -81,7 +83,7 @@
 			>
 		</div>
 	</div>
-	<ul class="p-2 space-y-2 overflow-auto">
+	<ul class="p-2 space-y-2 overflow-auto h-56">
 		{#each $historyStore as { state, time, name }}
 			<li class="rounded p-2 shadow flex-col">
 				<div class="flex">

src/lib/components/tabs.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
+	import { fade } from 'svelte/transition';
 
 	export let tabs: Tab[] = [];
 	export let activeTabID: string = tabs[0].id;
 	export let title: string;
+
+	export let isOpen = false;
 	const dispatch = createEventDispatcher<TabEvents>();
 	const toggleTabs = (tab: Tab) => {
 		activeTabID = tab.id;
@@ -11,20 +14,22 @@
 	};
 </script>
 
-<span class="text-white mr-2">{title}</span>
-<ul class="flex list-none flex-wrap flex-row">
-	{#each tabs as tab}
-		<li class="mr-2 last:mr-0 flex-auto text-center">
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<a
-				class="text font-bold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
-				tab.id
-					? 'text-blue-500 bg-white border-white'
-					: 'text-white bg-blue-500 border-blue-500'}"
-				on:click={() => toggleTabs(tab)}
-			>
-				{tab.title}
-			</a>
-		</li>
-	{/each}
-</ul>
+<span class="text-white mr-2" on:click={() => (isOpen = !isOpen)}>{title}</span>
+{#if isOpen}
+	<ul class="flex list-none flex-wrap flex-row" transition:fade>
+		{#each tabs as tab}
+			<li class="mr-2 last:mr-0 flex-auto text-center">
+				<!-- svelte-ignore a11y-missing-attribute -->
+				<a
+					class="text font-bold min-w-16 w-auto px-2 py-1 -mb-4 rounded-t  block leading-normal {activeTabID ===
+					tab.id
+						? 'text-blue-500 bg-white border-white'
+						: 'text-white bg-blue-500 border-blue-500'}"
+					on:click={() => toggleTabs(tab)}
+				>
+					{tab.title}
+				</a>
+			</li>
+		{/each}
+	</ul>
+{/if}

src/routes/edit.svelte

@@ -5,7 +5,7 @@
 	import View from '$lib/components/view.svelte';
 	import Card from '$lib/components/card.svelte';
 	import Tabs from '$lib/components/tabs.svelte';
-	import History from '$lib/components/history/index.svelte';
+	import History from '$lib/components/history/history.svelte';
 	import {
 		initURLSubscription,
 		updateCode,
@@ -127,7 +127,7 @@
 					</div>
 				</div>
 
-				<div class="h-full flex-grow flex flex-col">
+				<div class="h-full flex-grow flex-shrink-0 flex flex-col">
 					<div class="flex-1">
 						<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
 					</div>