updated visualization panel ui and added outer click

app/src/styles/layout/sidebar.scss

@@ -70,6 +70,67 @@
       position: relative;
       overflow: auto;
 
+      .template-list {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        padding: 1rem;
+        min-height: 50vh;
+        max-height: 60vh;
+      }
+      
+      .template-item {
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 1rem;
+        transition: box-shadow 0.3s ease;
+      }
+      
+      .template-image-container {
+        position: relative;
+        padding-bottom: 56.25%; // 16:9 aspect ratio
+      }
+      
+      .template-image {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: transform 0.3s ease;
+      }
+      
+      .template-details {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 0.5rem;
+      }
+      
+      .template-name {
+        cursor: pointer;
+        font-weight: 500;
+      }
+      
+      .delete-button {
+        padding: 0.25rem 0.5rem;
+        background: #ff4444;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: opacity 0.3s ease;
+      }
+      
+      .no-templates {
+        text-align: center;
+        color: #666;
+        padding: 2rem;
+        grid-column: 1 / -1;
+      }
+      
+
       .widget-left-sideBar {
         min-height: 50vh;
         max-height: 60vh;