Implement username search

2026-09-23 03:25:07 +03:00 · 2025-10-17 00:19:47 +03:00
parent 13c258ad95
commit dd946e7466
14 changed files with 582 additions and 44 deletions
@@ -0,0 +1,154 @@
+@use "../../../css/material" as *;
+
+$font-size: 16px;
+
+// Search container
+.search-parent {
+    position: relative;
+    height: 100%;
+    width: 100%;
+}
+
+// SearchBar component styles
+.search-bar-container {
+    position: absolute;
+    z-index: 1001;
+    overflow: hidden;
+    
+    // All properties animate together simultaneously
+    transition: 
+        height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        top 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        left 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        right 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+        background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    
+    // Initial background color for smooth transition
+    background-color: $color-dark-surface-container-high;
+
+    &.collapsed {
+        top: 8px;
+        left: 16px;
+        right: 16px;
+        border-radius: 24px;
+        // Height will be set dynamically by React (48px)
+        // background-color inherited from parent
+    }
+
+    &.expanded {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 0;
+        background-color: $color-dark-surface-container;
+        // Height will be set dynamically by React
+    }
+
+    // Single search bar element
+    .search-bar {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        height: 48px;
+        gap: 12px;
+        cursor: pointer;
+
+        .search-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+
+            mdui-icon {
+                color: $color-dark-on-surface-variant;
+                font-size: 20px;
+                cursor: pointer;
+            }
+        }
+
+        .search-input-container {
+            flex: 1;
+            display: flex;
+            align-items: center;
+
+            .search-placeholder {
+                color: $color-dark-on-surface-variant;
+                font-size: $font-size;
+                pointer-events: none;
+            }
+
+            .search-input {
+                flex: 1;
+                border: none;
+                outline: none;
+                background: transparent;
+                color: $color-dark-on-surface;
+                font-size: $font-size;
+                padding: 8px 0;
+                pointer-events: auto;
+
+                &::placeholder {
+                    color: $color-dark-on-surface-variant;
+                }
+            }
+        }
+
+        .search-clear {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 24px;
+            height: 24px;
+
+            mdui-icon {
+                color: $color-dark-on-surface-variant;
+                font-size: 20px;
+                cursor: pointer;
+            }
+        }
+    }
+
+    // Results section
+    .search-results {
+        flex: 1;
+        overflow-y: auto;
+
+        .search-loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            padding: 32px;
+            color: $color-dark-on-surface-variant;
+
+            mdui-circular-progress {
+                --mdui-circular-progress-color: $color-dark-primary;
+            }
+        }
+
+        .search-empty,
+        .search-hint {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 32px;
+            color: $color-dark-on-surface-variant;
+            text-align: center;
+        }
+
+        // Custom styling for search result images
+        mdui-list-item {
+            img[slot="icon"] {
+                $size: 48px;
+                
+                width: $size;
+                height: $size;
+                border-radius: 50%;
+                object-fit: cover;
+            }
+        }
+    }
+}