feat: added tooltip for more info for hidden panel (#2854)

Signed-off-by: Brian <[email protected]>

Author: bmahabirbu

packages/frontend/src/lib/ContentDetailsLayout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 export let detailsTitle: string;
 export let detailsLabel: string;
+export let detailsSummary: string = '';
 let open: boolean = true;
 
 const toggle = (): void => {
@@ -35,7 +36,7 @@ const toggle = (): void => {
           class:block={!open}
           class="bg-[var(--pd-content-card-bg)] mt-5 p-4 rounded-md h-fit max-lg:hidden"
           aria-label={`toggle ${detailsLabel}`}>
-          <button on:click={toggle} aria-label={`show ${detailsLabel}`}
+          <button on:click={toggle} aria-label={`show ${detailsLabel}`} title={detailsSummary}
             ><i class="fas fa-angle-left text-[var(--pd-content-card-icon)]"></i></button>
         </div>
       </div>

packages/frontend/src/lib/ContentDetailsLayoutTest.svelte

@@ -2,7 +2,7 @@
 import ContentDetailsLayout from './ContentDetailsLayout.svelte';
 </script>
 
-<ContentDetailsLayout detailsTitle="a title" detailsLabel="a label">
+<ContentDetailsLayout detailsTitle="a title" detailsLabel="a label" detailsSummary="a summary">
   <svelte:fragment slot="content">A Content</svelte:fragment>
   <svelte:fragment slot="details">Details...</svelte:fragment>
 </ContentDetailsLayout>

packages/frontend/src/pages/Playground.svelte

@@ -212,7 +212,10 @@ function handleOnClick(): void {
       <svelte:fragment slot="content">
         <div class="flex flex-col w-full h-full bg-[var(--pd-content-bg)]">
           <div class="h-full overflow-auto" bind:this={scrollable}>
-            <ContentDetailsLayout detailsTitle="Settings" detailsLabel="settings">
+            <ContentDetailsLayout
+              detailsTitle="Settings"
+              detailsLabel="settings"
+              detailsSummary="Playground Settings: edit model parameters and view metrics">
               <svelte:fragment slot="content">
                 <div class="flex flex-col w-full h-full grow overflow-auto">
                   <div aria-label="conversation" class="w-full h-full">

packages/frontend/src/pages/Recipe.svelte

@@ -65,7 +65,10 @@ function getFilter(items: ApplicationState[]): ApplicationState[] {
   <svelte:fragment slot="content">
     <div class="bg-[var(--pd-content-bg)] h-full overflow-y-auto">
       <Route path="/">
-        <ContentDetailsLayout detailsTitle="AI App Details" detailsLabel="application details">
+        <ContentDetailsLayout
+          detailsTitle="AI App Details"
+          detailsLabel="application details"
+          detailsSummary="AI App Details: view the app repository">
           <svelte:fragment slot="content">
             <MarkdownRenderer source={recipe?.readme} />
           </svelte:fragment>