feat(admin-ui): introduce view layer and refactor admin UI to use view components, consolidate demos, and update interfaces

ts_web/elements/upladmin-statuspage-config/upladmin-statuspage-config.ts

@@ -33,7 +33,7 @@ export class UpladminStatuspageConfig extends DeesElement {
   @state()
   accessor formData: IStatusPageConfig = {};
 
-  @state()
+  @property({ type: String })
   accessor activeSection: string = 'branding';
 
   @state()
@@ -49,67 +49,10 @@ export class UpladminStatuspageConfig extends DeesElement {
       }
 
       .config-container {
-        display: grid;
-        grid-template-columns: 220px 1fr;
-        gap: ${unsafeCSS(sharedStyles.spacing.lg)};
+        display: block;
         min-height: 500px;
       }
 
-      @media (max-width: 768px) {
-        .config-container {
-          grid-template-columns: 1fr;
-        }
-      }
-
-      .config-nav {
-        background: ${sharedStyles.colors.background.secondary};
-        border: 1px solid ${sharedStyles.colors.border.default};
-        border-radius: ${unsafeCSS(sharedStyles.borderRadius.lg)};
-        padding: ${unsafeCSS(sharedStyles.spacing.sm)};
-        height: fit-content;
-      }
-
-      .nav-item {
-        display: flex;
-        align-items: center;
-        gap: 12px;
-        width: 100%;
-        padding: 14px 16px;
-        font-size: 14px;
-        font-weight: 500;
-        font-family: ${unsafeCSS(sharedStyles.fonts.base)};
-        color: ${sharedStyles.colors.text.secondary};
-        background: transparent;
-        border: none;
-        border-radius: ${unsafeCSS(sharedStyles.borderRadius.base)};
-        cursor: pointer;
-        text-align: left;
-        transition: all ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
-      }
-
-      .nav-item:hover {
-        background: ${sharedStyles.colors.background.muted};
-        color: ${sharedStyles.colors.text.primary};
-      }
-
-      .nav-item.active {
-        background: ${sharedStyles.colors.accent.primary};
-        color: white;
-      }
-
-      .nav-item.active dees-icon {
-        --icon-color: white;
-      }
-
-      .nav-item dees-icon {
-        --icon-color: ${sharedStyles.colors.text.muted};
-        transition: color ${unsafeCSS(sharedStyles.durations.fast)} ${unsafeCSS(sharedStyles.easings.default)};
-      }
-
-      .nav-item:hover dees-icon {
-        --icon-color: ${sharedStyles.colors.text.primary};
-      }
-
       .config-content {
         background: ${sharedStyles.colors.background.secondary};
         border: 1px solid ${sharedStyles.colors.border.default};
@@ -343,18 +286,6 @@ export class UpladminStatuspageConfig extends DeesElement {
 
     return html`
       <div class="config-container">
-        <nav class="config-nav">
-          ${sections.map(section => html`
-            <button
-              class="nav-item ${this.activeSection === section.id ? 'active' : ''}"
-              @click="${() => this.activeSection = section.id}"
-            >
-              <dees-icon .icon=${section.icon} .iconSize=${18}></dees-icon>
-              <span>${section.label}</span>
-            </button>
-          `)}
-        </nav>
-
         <div class="config-content">
           <div class="content-header">
             <div>