update

readme.hints.md

@@ -1,5 +1,42 @@
 # Project Hints and Findings
 
+## UI Redesign with Shadcn-like Styles (2025-06-27)
+
+### Changes Made
+Updated the WCC Dashboard UI components (properties and sidebar) to use shadcn-like design patterns:
+
+1. **Color System**: Implemented CSS variables for theming:
+   - `--background`, `--foreground`, `--card`, `--primary`, `--secondary`
+   - `--muted`, `--accent`, `--border`, `--input`, `--ring`
+   - Consistent dark theme with subtle borders and proper contrast
+
+2. **Properties Panel Improvements**:
+   - Changed from fixed 3-column grid to flexible flexbox layout
+   - Properties now wrap and use space more efficiently
+   - Added rounded corners and better spacing
+   - Complex properties (Objects/Arrays) show "Edit" button
+   - Advanced JSON editor appears above properties panel when editing complex types
+   - Dynamic height adjustment (50px when editor is open, 100px normally)
+
+3. **Sidebar Styling**:
+   - Updated with consistent color scheme
+   - Added rounded corners to menu items
+   - Improved hover states with smooth transitions
+   - Better typography with proper font weights
+
+4. **Advanced Property Editor**:
+   - JSON editor for complex types (Objects and Arrays)
+   - Monaco-style monospace font for code editing
+   - Live updates to element properties
+   - Positioned above the properties panel with smooth transitions
+
+### Technical Details
+- Uses system font stack for better native appearance
+- Subtle borders with rgba values for transparency
+- Consistent spacing using CSS variables
+- Smooth transitions (0.15s ease) for interactive elements
+- Custom scrollbar styling for better visual integration
+
 ## Properties Panel Element Detection Issue (Fixed)
 
 ### Problem

ts_web/elements/wcc-sidebar.ts

@@ -20,28 +20,63 @@ export class WccSidebar extends DeesElement {
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
       <style>
         :host {
+          --background: #09090b;
+          --foreground: #fafafa;
+          --card: #0c0c0f;
+          --card-foreground: #fafafa;
+          --primary: #f4f4f5;
+          --primary-foreground: #18181b;
+          --secondary: #27272a;
+          --secondary-foreground: #fafafa;
+          --muted: #27272a;
+          --muted-foreground: #a1a1aa;
+          --accent: #27272a;
+          --accent-foreground: #fafafa;
+          --border: rgba(255, 255, 255, 0.1);
+          --input: #27272a;
+          --ring: #d4d4d8;
+          --radius: 0.5rem;
+
           display: block;
-          border-right: 1px solid #999;
+          border-right: 1px solid var(--border);
-          font-family: 'Roboto', 'Inter', sans-serif;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
-          font-size: 12px;
+          font-size: 14px;
           box-sizing: border-box;
           position: absolute;
           left: 0px;
           width: 200px;
           top: 0px;
           bottom: 0px;
-          overflow-y: scroll;
+          overflow-y: auto;
           overflow-x: hidden;
-          background: #222;
+          background: var(--card);
-          color: #fff;
+          color: var(--foreground);
-          padding: 5px;
+        }
+
+        .menu {
+          padding: 8px 0;
+        }
+
+        h3 {
+          padding: 8px 16px;
+          font-size: 12px;
+          font-weight: 600;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          color: var(--muted-foreground);
+          margin: 0;
+          margin-top: 8px;
+        }
+
+        h3:first-child {
+          margin-top: 0;
         }
 
         .material-symbols-outlined {
           font-family: 'Material Symbols Outlined';
           font-weight: normal;
           font-style: normal;
-          font-size: 24px;  /* Preferred icon size */
+          font-size: 18px;
           display: inline-block;
           line-height: 1;
           text-transform: none;
@@ -49,51 +84,74 @@ export class WccSidebar extends DeesElement {
           word-wrap: normal;
           white-space: nowrap;
           direction: ltr;
-          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
+          font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
+          opacity: 0.7;
         }
 
         .selectOption {
           user-select: none;
           position: relative;
-          line-height: 24px;
+          margin: 2px 8px;
-          padding: 5px;
+          padding: 8px 12px;
-          transition: all 0.2s;
+          transition: all 0.15s ease;
           display: grid;
-          grid-template-columns: 28px auto;
+          grid-template-columns: 24px 1fr;
+          align-items: center;
+          gap: 8px;
+          border-radius: calc(var(--radius) * 0.5);
+          cursor: pointer;
+          font-size: 13px;
+          color: var(--muted-foreground);
         }
+        
         .selectOption:hover {
-          padding: 5px;
+          background: var(--secondary);
-          color: #333;
+          color: var(--foreground);
-          background: #fff;
+        }
+
+        .selectOption:hover .material-symbols-outlined {
+          opacity: 1;
         }
 
         .selectOption.selected {
-          background: #455A64;;
+          background: var(--primary);
-        }
+          color: var(--primary-foreground);
-
-        .selectOption.selected:hover {
-          color: #ffffff;
-          background: #455A64;
-        }
-
-        .selectOption .material-symbols-outlined {
-          color: #666;
-          display: block;
-          transition: all 0.2s;
         }
 
         .selectOption.selected .material-symbols-outlined {
-          color: #000;
+          opacity: 1;
+          font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+
+        .selectOption.selected:hover {
+          background: var(--primary);
+          color: var(--primary-foreground);
         }
 
         .selectOption .text {
           display: block;
-          word-wrap: break-word;
+          overflow: hidden;
-          word-break: break-all;
+          text-overflow: ellipsis;
-          max-width: 100%;
+          white-space: nowrap;
+          font-weight: 500;
         }
 
-        
+        ::-webkit-scrollbar {
+          width: 8px;
+        }
+
+        ::-webkit-scrollbar-track {
+          background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+          background: var(--secondary);
+          border-radius: 4px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+          background: var(--muted);
+        }
       </style>
       <div class="menu">
         <h3>Pages</h3>