fix: Cards

src/lib/components/Actions.svelte

@@ -184,7 +184,7 @@ ${svgString}`);
   });
 </script>
 
-<Card title="Actions" isOpen={false}>
+<Card title="Actions" isOpen={false} icon="fas fa-share-nodes">
   <div class="m-2 flex flex-wrap gap-2">
     {#if isClipboardAvailable()}
       <button class="action-btn w-full" onclick={onCopyClipboard}

src/lib/components/Card/Card.svelte

@@ -10,6 +10,7 @@
     tabs?: Tab[];
     activeTabID?: string;
     title?: string;
+    icon?: string;
     onselect?: (tab: Tab) => void;
     actions?: Snippet;
     children?: Snippet;
@@ -21,6 +22,7 @@
     tabs = [],
     activeTabID = '',
     title,
+    icon,
     onselect,
     actions,
     children
@@ -36,7 +38,11 @@
 </script>
 
 <div
-  class="card flex h-fit {isOpen ? 'flex-grow' : ''} flex-col overflow-hidden rounded-2xl border-2">
+  class="card flex h-fit {isOpen
+    ? 'flex-grow'
+    : isClosable
+      ? 'w-1/2'
+      : ''} flex-col overflow-hidden rounded-2xl border-2">
   <div
     role="toolbar"
     tabindex="0"
@@ -44,10 +50,26 @@
     onclick={toggleCardOpen}
     onkeypress={toggleCardOpen}>
     <div class="flex justify-between">
-      <Tabs {onselect} {tabs} bind:isOpen {title} {isClosable} {activeTabID} />
-      <div class="flex items-center gap-x-4 {isTabsShown ? '-mt-2' : ''}">
-        {@render actions?.()}
-      </div>
+      {#if icon || title}
+        <span role="menubar" tabindex="0" class="d flex w-fit items-center gap-2 font-semibold">
+          {#if icon}
+            <i class={icon}></i>
+          {/if}
+          {title}
+        </span>
+      {/if}
+      {#if isOpen && tabs && tabs.length > 0}
+        <Tabs {onselect} {tabs} {activeTabID} />
+      {/if}
+
+      {@render actions?.()}
+
+      <!-- {#if isClosable && isOpen}
+        <div class="ml-auto flex h-8 flex-col gap-0 p-1">
+          <i class="fas fa-chevron-down size-full"></i>
+          <i class="fas fa-chevron-up size-full"></i>
+        </div>
+      {/if} -->
     </div>
   </div>
   {#if isOpen}

src/lib/components/Card/Tabs.svelte

@@ -1,19 +1,15 @@
 <script lang="ts">
+  import { Separator } from '$lib/components/ui/separator';
   import type { Tab } from '$lib/types';
   import { fade } from 'svelte/transition';
+  import { Button } from '../ui/button';
 
   let {
-    isClosable = true,
     tabs,
-    title,
-    isOpen = $bindable(false),
     activeTabID = $bindable(),
     onselect
   }: {
-    isClosable?: boolean;
     tabs: Tab[];
-    title?: string;
-    isOpen?: boolean;
     activeTabID: string;
     onselect?: (tab: Tab) => void;
   } = $props();
@@ -31,28 +27,26 @@
   };
 </script>
 
-<div class="flex cursor-default">
-  <span role="menubar" tabindex="0" class="mr-2 font-semibold">
-    {#if isClosable}
-      <i class="fas fa-chevron-right icon mr-1" class:isOpen></i>
-    {/if}
-    {title}
-  </span>
-  {#if isOpen && tabs}
-    <ul class="tabs" transition:fade>
-      {#each tabs as tab}
-        <div
-          role="tab"
-          tabindex="0"
-          class="tab tab-lifted {activeTabID === tab.id ? 'tab-active' : 'text-primary-content'}"
-          onclick={toggleTabs(tab)}
-          onkeypress={toggleTabs(tab)}>
-          <i class="mr-1 {tab.icon}"></i>
-          {tab.title}
+<div class="flex w-fit cursor-default items-center gap-2">
+  <ul class="flex gap-2 align-middle" transition:fade>
+    {#each tabs as tab, index}
+      <Button
+        role="tab"
+        variant="ghost"
+        class={activeTabID === tab.id ? 'rounded-b-none border-b-2 border-b-secondary/50' : ''}
+        onclick={toggleTabs(tab)}
+        onkeypress={toggleTabs(tab)}>
+        <i class={tab.icon}></i>
+        {tab.title}
+      </Button>
+
+      {#if index < tabs.length - 1}
+        <div class="my-2">
+          <Separator orientation="vertical" class="w-0.5 bg-slate-300" />
         </div>
-      {/each}
-    </ul>
-  {/if}
+      {/if}
+    {/each}
+  </ul>
 </div>
 
 <style>

src/lib/components/Editor.svelte

@@ -132,7 +132,7 @@
   });
 </script>
 
-<div class="flex h-full flex-col">
+<div class="flex h-full flex-col pt-1">
   <div bind:this={divElement} id="editor" class="h-full flex-grow overflow-hidden"></div>
   {#if $stateStore.error instanceof Error}
     <div class="flex flex-col text-sm text-neutral-100">

src/lib/components/Preset.svelte

@@ -220,7 +220,7 @@ packet-beta
   ];
 </script>
 
-<Card title="Sample Diagrams" isOpen={false}>
+<Card title="Sample Diagrams" isOpen={false} icon="fas fa-shapes">
   <div class="flex flex-wrap gap-2 p-2">
     {#each diagramOrder as sample}
       <button

src/routes/edit/+page.svelte

@@ -2,14 +2,14 @@
   import Actions from '$lib/components/Actions.svelte';
   import Card from '$lib/components/Card/Card.svelte';
   import Editor from '$lib/components/Editor.svelte';
-  import History from '$lib/components/History/History.svelte';
   import Navbar from '$lib/components/Navbar.svelte';
   import Preset from '$lib/components/Preset.svelte';
+  import { Button } from '$lib/components/ui/button';
   import * as Resizable from '$lib/components/ui/resizable/index.js';
   import View from '$lib/components/View.svelte';
   import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
-  import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
-  import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
+  import { stateStore, updateCodeStore } from '$lib/util/state';
+  import { initHandler } from '$lib/util/util';
   import { onMount } from 'svelte';
 
   const docURLBase = 'https://mermaid.js.org';
@@ -108,7 +108,7 @@
     {
       id: 'config',
       title: 'Config',
-      icon: 'fas fa-cogs'
+      icon: 'fas fa-gear'
     }
   ];
 
@@ -126,7 +126,7 @@
           <Card onselect={tabSelectHandler} {tabs} isClosable={false} {activeTabID}>
             {#snippet actions()}
               <div class="flex flex-row items-center">
-                <div class="form-control flex-row items-center">
+                <!-- <div class="form-control flex-row items-center">
                   <label class="label cursor-pointer" for="autoSync">
                     <span> Auto sync</span>
                     <input
@@ -137,7 +137,7 @@
                       id="autoSync"
                       bind:checked={$inputStateStore.autoSync} />
                   </label>
-                </div>
+                </div> 
 
                 {#if !$stateStore.autoSync}
                   <button
@@ -147,23 +147,26 @@
                     data-cy="sync"
                     onclick={syncDiagram}><i class="fas fa-sync"></i></button>
                 {/if}
+-->
 
-                <button
-                  class="btn btn-secondary btn-xs"
+                <Button
+                  variant="ghost"
+                  href={docURL}
                   title="View documentation for {docKey.replace('Diagram', '')} diagram">
-                  <a target="_blank" href={docURL} data-cy="docs">
-                    <i class="fas fa-book mr-1"></i>Docs
-                  </a>
-                </button>
+                  <i class="fas fa-book mr-1"></i>
+                  Docs
+                </Button>
               </div>
             {/snippet}
 
             <Editor />
           </Card>
 
-          <Preset />
-          <History />
-          <Actions />
+          <div class="flex w-full flex-wrap">
+            <Preset />
+            <!-- <History /> -->
+            <Actions />
+          </div>
         </div>
       </Resizable.Pane>
       <Resizable.Handle class="opacity-0" />