From 27188643e0cc24a623184b0458d6704f93c06a00 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Mon, 17 May 2021 01:11:35 +0530
Subject: [PATCH] Multi Collapse

---
 src/lib/components/card.svelte            | 10 ++++-
 src/lib/components/history/history.svelte | 21 ++++-------
 src/lib/components/preset.svelte          | 21 ++++++-----
 src/lib/components/tabs.svelte            | 45 ++++++++++++-----------
 src/routes/edit.svelte                    | 43 +++++++++-------------
 5 files changed, 71 insertions(+), 69 deletions(-)

diff --git a/src/lib/components/card.svelte b/src/lib/components/card.svelte
index 09cb8472..6b5e5458 100644
--- a/src/lib/components/card.svelte
+++ b/src/lib/components/card.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
+	import Tabs from '$lib/components/tabs.svelte';
 	export let isOpen: boolean = true;
+	export let tabs: Tab[] = [];
+	export let title: string;
 </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 class="flex justify-between">
+			<Tabs on:select {tabs} bind:isOpen {title} />
+			<div class="flex gap-x-4 text-white">
+				<slot name="actions" />
+			</div>
+		</div>
 	</div>
 	{#if isOpen}
 		<div class="flex-grow overflow-auto" transition:slide>
diff --git a/src/lib/components/history/history.svelte b/src/lib/components/history/history.svelte
index 6e08c835..ea218b5a 100644
--- a/src/lib/components/history/history.svelte
+++ b/src/lib/components/history/history.svelte
@@ -69,19 +69,14 @@
 	let isOpen = true;
 </script>
 
-<Card {isOpen}>
-	<div slot="title" class="flex justify-between">
-		<div class="flex">
-			<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()}
-				>💾</button
-			>
-			<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => clearHistory()}
-				>❌</button
-			>
-		</div>
+<Card on:select={tabSelectHandler} bind:isOpen {tabs} title="History">
+	<div slot="actions">
+		<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => saveHistory()}
+			>💾</button
+		>
+		<button class="bg-yellow-500 hover:bg-yellow-700 rounded px-1" on:click={() => clearHistory()}
+			>❌</button
+		>
 	</div>
 	<ul class="p-2 space-y-2 overflow-auto h-56">
 		{#each $historyStore as { state, time, name }}
diff --git a/src/lib/components/preset.svelte b/src/lib/components/preset.svelte
index 7a3f8475..6f5a84a9 100644
--- a/src/lib/components/preset.svelte
+++ b/src/lib/components/preset.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { updateCode, updateCodeStore } from '$lib/util/state';
+	import { updateCode } from '$lib/util/state';
+	import Card from '$lib/components/card.svelte';
 
 	const samples = {
 		'Flow Chart': `graph TD
@@ -76,11 +77,13 @@
 	};
 </script>
 
-<div class="flex gap-2 flex-wrap p-2">
-	{#each Object.keys(samples) as sample}
-		<button
-			class="rounded p-2 bg-blue-400 shadow flex-auto text-white hover:bg-blue-500"
-			on:click={() => loadSampleDiagram(sample)}>{sample}</button
-		>
-	{/each}
-</div>
+<Card title="Presets" isOpen={false}>
+	<div class="flex gap-2 flex-wrap p-2">
+		{#each Object.keys(samples) as sample}
+			<button
+				class="rounded p-2 bg-blue-400 shadow flex-auto text-white hover:bg-blue-500"
+				on:click={() => loadSampleDiagram(sample)}>{sample}</button
+			>
+		{/each}
+	</div>
+</Card>
diff --git a/src/lib/components/tabs.svelte b/src/lib/components/tabs.svelte
index 81a880b0..70715f99 100644
--- a/src/lib/components/tabs.svelte
+++ b/src/lib/components/tabs.svelte
@@ -3,10 +3,11 @@
 	import { fade } from 'svelte/transition';
 
 	export let tabs: Tab[] = [];
-	export let activeTabID: string = tabs[0].id;
 	export let title: string;
-
 	export let isOpen = false;
+
+	let activeTabID: string = tabs[0]?.id;
+
 	const dispatch = createEventDispatcher<TabEvents>();
 	const toggleTabs = (tab: Tab) => {
 		activeTabID = tab.id;
@@ -14,22 +15,24 @@
 	};
 </script>
 
-<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}
+<div class="flex">
+	<span class="text-white mr-2" on:click={() => (isOpen = !isOpen)}>{title}</span>
+	{#if isOpen && tabs}
+		<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}
+</div>
diff --git a/src/routes/edit.svelte b/src/routes/edit.svelte
index 681eaf4e..0a6a19e7 100644
--- a/src/routes/edit.svelte
+++ b/src/routes/edit.svelte
@@ -4,7 +4,6 @@
 	import Preset from '$lib/components/preset.svelte';
 	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/history.svelte';
 	import {
 		initURLSubscription,
@@ -111,22 +110,17 @@
 	<Navbar />
 	<div class="flex-1 flex overflow-hidden">
 		<div class="w-2/5 flex flex-col">
-			<Card>
-				<div slot="title" class="flex justify-between">
-					<div class="flex">
-						<Tabs on:select={tabSelectHandler} {tabs} isOpen={true} title="Mermaid" />
-					</div>
-					<div class="flex gap-x-4 text-white">
-						{#if !$codeStore.autoSync}
-							<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
-								>🔄</button
-							>
-						{/if}
-						<label for="autoSync">
-							<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
-							Auto sync
-						</label>
-					</div>
+			<Card on:select={tabSelectHandler} {tabs} isOpen={true} title="Mermaid">
+				<div slot="actions">
+					{#if !$codeStore.autoSync}
+						<button class="bg-blue-500 hover:bg-blue-700 rounded px-1" on:click={syncDiagram}
+							>🔄</button
+						>
+					{/if}
+					<label for="autoSync">
+						<input type="checkbox" name="autoSync" bind:checked={$codeStore.autoSync} />
+						Auto sync
+					</label>
 				</div>
 
 				<Editor on:update={updateHandler} {language} {text} {errorMarkers} />
@@ -140,14 +134,13 @@
 		</div>
 
 		<div class="flex-1 flex flex-col  overflow-hidden">
-			<Card>
-				<div slot="title" class="text-white  flex justify-between">
-					<div>Diagram</div>
-					<button
-						class="rounded shadow px-2 bg-blue-500 hover:bg-blue-700"
-						on:click={() => viewDiagram()}>View</button
-					>
-				</div>
+			<Card title="Diagram">
+				<button
+					slot="actions"
+					class="rounded shadow px-2 bg-blue-500 hover:bg-blue-700"
+					on:click={() => viewDiagram()}>View</button
+				>
+
 				<div class="flex-1 overflow-auto">
 					<View />
 				</div>