From df5aeaef6cd557fb3a62905bd050a9e165dbd126 Mon Sep 17 00:00:00 2001
From: Mahmoud Emad <mahmmoud.hassanein@gmail.com>
Date: Tue, 13 May 2025 10:10:14 +0300
Subject: [PATCH] feat: Improve IPFS demo in Home component

- Added a button to toggle the visibility of the IPFS demo.
- Improved the layout and styling of the IPFS demo section.
- Removed unnecessary alert in IPFS upload functionality.
- Updated button component to correctly handle click events.
---
 sweb/src/components/Home.svelte               | 62 +++++++++----------
 sweb/src/components/IPFSDemo.svelte           |  1 -
 .../lib/components/ui/button/button.svelte    |  5 +-
 3 files changed, 33 insertions(+), 35 deletions(-)

diff --git a/sweb/src/components/Home.svelte b/sweb/src/components/Home.svelte
index c21da03..c578844 100644
--- a/sweb/src/components/Home.svelte
+++ b/sweb/src/components/Home.svelte
@@ -10,45 +10,43 @@
 
     // Flag to show IPFS demo
     let showIPFSDemo = false;
+
+    function handleDemoButtonClick() {
+        console.log("Hello");
+        showIPFSDemo = !showIPFSDemo;
+    }
 </script>
 
 <div class="">
-    {#if contentPath}
+    <div class="text-center mb-8 sm:mb-12">
+        <h2 class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-text">
+            IPFS Integration
+        </h2>
+        <p class="text-lg sm:text-xl text-text-secondary max-w-3xl mx-auto">
+            Experience the power of decentralized content storage and retrieval
+            with IPFS.
+        </p>
+
+        <div class="mt-6">
+            <Button
+                variant="primary"
+                size="lg"
+                on:click={handleDemoButtonClick}
+            >
+                {showIPFSDemo ? "Hide IPFS Demo" : "Show IPFS Demo"}
+            </Button>
+        </div>
+    </div>
+
+    {#if showIPFSDemo}
+        <section class="mb-12 sm:mb-16 md:mb-20">
+            <IPFSDemo />
+        </section>
+    {:else if contentPath && contentPath.trim() !== ""}
         <div
             class="bg-background-secondary shadow-sm p-4 sm:p-6 overflow-x-auto"
         >
             <MarkdownContent path={actualPath} />
         </div>
-    {:else}
-        <!-- IPFS Demo Section -->
-        <section class="mb-12 sm:mb-16 md:mb-20">
-            <div class="text-center mb-8 sm:mb-12">
-                <h2
-                    class="text-2xl sm:text-3xl font-bold mb-3 sm:mb-4 text-text"
-                >
-                    IPFS Integration
-                </h2>
-                <p
-                    class="text-lg sm:text-xl text-text-secondary max-w-3xl mx-auto"
-                >
-                    Experience the power of decentralized content storage and
-                    retrieval with IPFS.
-                </p>
-
-                <div class="mt-6">
-                    <Button
-                        variant="primary"
-                        size="lg"
-                        on:click={() => (showIPFSDemo = !showIPFSDemo)}
-                    >
-                        {showIPFSDemo ? "Hide IPFS Demo" : "Show IPFS Demo"}
-                    </Button>
-                </div>
-            </div>
-
-            {#if showIPFSDemo}
-                <IPFSDemo />
-            {/if}
-        </section>
     {/if}
 </div>
diff --git a/sweb/src/components/IPFSDemo.svelte b/sweb/src/components/IPFSDemo.svelte
index 5874753..0b0b2a1 100644
--- a/sweb/src/components/IPFSDemo.svelte
+++ b/sweb/src/components/IPFSDemo.svelte
@@ -87,7 +87,6 @@
                 variant="primary"
                 on:click={() => {
                     console.log("Upload button clicked directly");
-                    alert("Upload button clicked!");
                     uploadContent();
                 }}
                 disabled={uploading || !content.trim()}
diff --git a/sweb/src/lib/components/ui/button/button.svelte b/sweb/src/lib/components/ui/button/button.svelte
index b7800bf..3dab614 100644
--- a/sweb/src/lib/components/ui/button/button.svelte
+++ b/sweb/src/lib/components/ui/button/button.svelte
@@ -1,11 +1,11 @@
+<!-- button.svelte -->
 <script lang="ts">
   import { cn } from "../../../utils";
 
   export let variant: "primary" | "secondary" | "ghost" = "primary";
   export let size: "default" | "sm" | "lg" | "icon" = "default";
-
   let className: string | undefined | null = undefined;
-  export { className as class };
+  export { className };
 
   const sizeClasses = {
     default: "h-10 px-4 py-2",
@@ -26,6 +26,7 @@
     sizeClasses[size],
     className,
   )}
+  on:click
   {...$$restProps}
 >
   <slot />