feat: Theme engine

big changes

toju-app/src/app/domains/voice-session/feature/voice-controls/voice-controls.component.html

@@ -1,7 +1,4 @@
-<div
-  class="flex flex-col rounded-md border border-border bg-background px-3 py-2.5"
-  [style.height]="showConnectionError() ? null : 'calc(100px - 0.75rem)'"
->
+<div class="flex flex-col rounded-md border border-border bg-background px-3 py-2.5">
   <!-- Connection Error Banner -->
   @if (showConnectionError()) {
     <div class="mb-3 flex items-center gap-2 rounded-md border border-destructive/30 bg-destructive/10 p-2">
@@ -18,7 +15,7 @@
   }
 
   <!-- User Info -->
-  <div class="mb-2 flex items-center gap-3">
+  <div class="flex items-center gap-3">
     <app-user-avatar
       [name]="currentUser()?.displayName || '?'"
       size="sm"
@@ -56,89 +53,100 @@
   </div>
 
   <!-- Voice Controls -->
-  <div class="mt-auto flex items-center justify-center gap-2">
-    @if (isConnected()) {
-      <!-- Mute Toggle -->
-      <button
-        type="button"
-        (click)="toggleMute()"
-        [class]="getMuteButtonClass()"
-      >
-        @if (isMuted()) {
-          <ng-icon
-            name="lucideMicOff"
-            class="w-5 h-5"
-          />
-        } @else {
-          <ng-icon
-            name="lucideMic"
-            class="w-5 h-5"
-          />
-        }
-      </button>
+  <div
+    class="grid overflow-hidden duration-200 ease-out motion-reduce:transition-none"
+    style="transition-property: grid-template-rows, opacity, margin-top"
+    [style.gridTemplateRows]="isConnected() ? '1fr' : '0fr'"
+    [style.opacity]="isConnected() ? '1' : '0'"
+    [style.marginTop.rem]="isConnected() ? 0.5 : 0"
+    [style.visibility]="isConnected() ? 'visible' : 'hidden'"
+    [class.pointer-events-none]="!isConnected()"
+    [attr.aria-hidden]="isConnected() ? null : 'true'"
+  >
+    <div class="overflow-hidden">
+      <div class="flex items-center justify-center gap-2">
+        <!-- Mute Toggle -->
+        <button
+          type="button"
+          (click)="toggleMute()"
+          [class]="getMuteButtonClass()"
+        >
+          @if (isMuted()) {
+            <ng-icon
+              name="lucideMicOff"
+              class="w-5 h-5"
+            />
+          } @else {
+            <ng-icon
+              name="lucideMic"
+              class="w-5 h-5"
+            />
+          }
+        </button>
 
-      <!-- Deafen Toggle -->
-      <button
-        type="button"
-        (click)="toggleDeafen()"
-        [class]="getDeafenButtonClass()"
-      >
-        <ng-icon
-          name="lucideHeadphones"
-          class="w-5 h-5"
-        />
-      </button>
+        <!-- Deafen Toggle -->
+        <button
+          type="button"
+          (click)="toggleDeafen()"
+          [class]="getDeafenButtonClass()"
+        >
+          <ng-icon
+            name="lucideHeadphones"
+            class="w-5 h-5"
+          />
+        </button>
 
-      <!-- Camera Toggle -->
-      <button
-        type="button"
-        (click)="toggleCamera()"
-        [class]="getCameraButtonClass()"
-      >
-        @if (isCameraEnabled()) {
-          <ng-icon
-            name="lucideVideoOff"
-            class="w-5 h-5"
-          />
-        } @else {
-          <ng-icon
-            name="lucideVideo"
-            class="w-5 h-5"
-          />
-        }
-      </button>
+        <!-- Camera Toggle -->
+        <button
+          type="button"
+          (click)="toggleCamera()"
+          [class]="getCameraButtonClass()"
+        >
+          @if (isCameraEnabled()) {
+            <ng-icon
+              name="lucideVideoOff"
+              class="w-5 h-5"
+            />
+          } @else {
+            <ng-icon
+              name="lucideVideo"
+              class="w-5 h-5"
+            />
+          }
+        </button>
 
-      <!-- Screen Share Toggle -->
-      <button
-        type="button"
-        (click)="toggleScreenShare()"
-        [class]="getScreenShareButtonClass()"
-      >
-        @if (isScreenSharing()) {
-          <ng-icon
-            name="lucideMonitorOff"
-            class="w-5 h-5"
-          />
-        } @else {
-          <ng-icon
-            name="lucideMonitor"
-            class="w-5 h-5"
-          />
-        }
-      </button>
+        <!-- Screen Share Toggle -->
+        <button
+          type="button"
+          (click)="toggleScreenShare()"
+          [class]="getScreenShareButtonClass()"
+        >
+          @if (isScreenSharing()) {
+            <ng-icon
+              name="lucideMonitorOff"
+              class="w-5 h-5"
+            />
+          } @else {
+            <ng-icon
+              name="lucideMonitor"
+              class="w-5 h-5"
+            />
+          }
+        </button>
 
-      <!-- Disconnect -->
-      <button
-        type="button"
-        (click)="disconnect()"
-        class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-destructive/20 bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15"
-      >
-        <ng-icon
-          name="lucidePhoneOff"
-          class="w-5 h-5"
-        />
-      </button>
-    }
+        <!-- Disconnect -->
+        <button
+          type="button"
+          (click)="disconnect()"
+          class="inline-flex h-10 w-10 items-center justify-center rounded-md border border-destructive/20 bg-destructive/10 text-destructive transition-colors hover:bg-destructive/15"
+        >
+          <ng-icon
+            name="lucidePhoneOff"
+            class="w-5 h-5"
+          />
+        </button>
+      </div>
+    </div>
   </div>
 </div>