feat: Implement version saving functionality and layout comparison feature

- Added `useSaveVersion` store to manage version saving state. - Updated `SideBarLeft` and `SideBarRight` components to conditionally render based on version saving state. - Introduced `CompareLayOut` component for layout comparison with resizing functionality. - Created `ComparePopUp` component to prompt users to save versions before comparing layouts. - Enhanced `Simulations` component to handle version saving and comparison logic. - Updated `Project` page to integrate layout selection and comparison features. - Added styles for the new comparison layout and pop-up components. - Refactored shortcut handling to include version saving state management.
2025-05-15 17:34:46 +05:30
parent 4daed0f09a
commit d187e4cc20
14 changed files with 1129 additions and 199 deletions
--- a/app/src/styles/layout/compareLayout.scss
+++ b/app/src/styles/layout/compareLayout.scss
@@ -0,0 +1,193 @@
+@use "../abstracts/variables" as *;
+@use "../abstracts/mixins" as *;
+
+.initial-selectLayout-wrapper {
+    position: fixed;
+    top: 100px;
+    left: 40px;
+    z-index: 10;
+}
+
+.compareLayOut-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 2;
+    height: 100vh;
+    background: var(--background-color);
+    backdrop-filter: blur(20px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    animation: slideInFromRight 0.4s ease-out forwards;
+    user-select: none;
+
+
+    .selectLayout-wrapper {
+
+        position: absolute;
+        top: 100px;
+        right: 40px;
+    }
+
+    .chooseLayout-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+
+        .resizer {
+            width: 32px;
+            height: 32px;
+            @include flex-center;
+            padding: 6px;
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translate(-50%, -50%);
+            background: var(--background-color);
+            backdrop-filter: blur(20px);
+            box-shadow: $box-shadow-heavy;
+            border-radius: 50%;
+            cursor: ew-resize;
+            transition: transform 0.1s ease;
+            z-index: 10;
+
+
+
+        }
+
+        .chooseLayout-wrapper {
+            background: var(--background-color);
+            backdrop-filter: blur(20px);
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: $box-shadow-medium;
+            max-width: 80%;
+            text-align: center;
+            position: relative;
+
+            .icon {
+                margin-bottom: 15px;
+                text-align: center;
+
+
+            }
+
+            .value {
+                margin-bottom: 15px;
+                font-size: 16px;
+                font-weight: 500;
+                color: var(--text-primary);
+            }
+
+            button {
+                display: block;
+                margin: 0 auto;
+                padding: 8px 16px;
+                background: var(--background-color-button);
+                color: var(--icon-default-color-active);
+                border: none;
+                border-radius: 4px;
+                cursor: pointer;
+                transition: all 0.2s ease;
+
+                &:hover {
+
+                    transform: translateY(-1px);
+                }
+
+
+
+            }
+
+            .displayLayouts-container {
+                max-width: 170px;
+                height: auto;
+                background: var(--background-color);
+                backdrop-filter: blur(20px);
+                padding: 6px;
+                border-radius: 8px;
+                box-shadow: $box-shadow-medium;
+                position: absolute;
+                right: 0;
+                top: 100%;
+                transform: translate(50%, -10px);
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+
+                .header {
+                    text-align: left;
+                    padding-top: 6px;
+                    padding-left: 6px;
+                }
+
+                .search-wrapper {
+                    padding: 6px 0;
+
+                    .search-container {
+                        padding: 0;
+                        border-radius: 6px;
+                    }
+                }
+
+                .layouts-container {
+                    .layout {
+
+                        padding: 6px 0;
+                    }
+
+                    .layout-wrapper {
+                        display: flex;
+                        align-items: center;
+                        gap: 6px;
+                        cursor: pointer;
+                        padding: 0 10px;
+                        background: none;
+                        width: 100%;
+
+                        &:hover {
+                            background-color: var(--highlight-text-color) !important;
+                            border-radius: 4px;
+
+                            svg {
+                                path {
+
+                                    fill: var(--background-color-accent);
+                                }
+                            }
+
+                            .layout {
+
+                                color: var(--background-color-accent);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes slideInFromRight {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+
+body.compare-layout-open {
+    main {
+        padding-right: 10px; // Adjust as needed
+        transition: padding 0.3s ease;
+    }
+}