feat: Theme studio v2

toju-app/src/app/domains/direct-message/feature/dm-chat/dm-chat.component.html

@@ -1,5 +1,11 @@
-<section class="chat-layout relative h-full bg-background">
-  <header class="flex h-14 shrink-0 items-center gap-3 border-b border-border px-4">
+<section
+  appThemeNode="dmChatSurface"
+  class="chat-layout relative h-full bg-background"
+>
+  <header
+    appThemeNode="dmChatHeader"
+    class="flex h-14 shrink-0 items-center gap-3 border-b border-border px-4"
+  >
     <app-user-avatar
       [name]="peerName()"
       [avatarUrl]="peerUser()?.avatarUrl"
@@ -14,7 +20,10 @@
   </header>
 
   @if (conversation()) {
-    <div class="absolute inset-x-0 bottom-0 top-14">
+    <div
+      appThemeNode="dmMessageRegion"
+      class="absolute inset-x-0 bottom-0 top-14"
+    >
       <app-chat-message-list
         [allMessages]="chatMessages()"
         [channelMessages]="chatMessages()"
@@ -45,7 +54,10 @@
       }
     </div>
 
-    <div class="chat-bottom-bar absolute bottom-0 left-0 right-2 z-10 bg-background/85 backdrop-blur-md">
+    <div
+      appThemeNode="chatComposerBar"
+      class="chat-bottom-bar absolute bottom-0 left-0 right-2 z-10 bg-background/85 backdrop-blur-md"
+    >
       <app-chat-message-composer
         [replyTo]="replyTo()"
         [showKlipyGifPicker]="showGifPicker()"
@@ -72,6 +84,7 @@
 
       <div class="pointer-events-none fixed inset-0 z-[90]">
         <div
+          appThemeNode="chatGifPickerSurface"
           class="pointer-events-auto absolute w-[calc(100vw-2rem)] max-w-5xl sm:w-[34rem] md:w-[42rem] xl:w-[52rem]"
           [style.bottom.px]="composerBottomPadding() + 8"
           [style.right.px]="gifPickerAnchorRight()"