Move toju-app into own its folder

toju-app/src/app/features/shell/title-bar.component.html

@@ -0,0 +1,171 @@
+<div
+  class="fixed top-0 left-16 right-0 h-10 bg-card border-b border-border flex items-center justify-between px-4 z-50 select-none"
+  style="-webkit-app-region: drag"
+>
+  <div
+    class="flex items-center gap-2 min-w-0 relative"
+    style="-webkit-app-region: no-drag"
+  >
+    @if (inRoom()) {
+      <ng-icon
+        name="lucideHash"
+        class="w-5 h-5 text-muted-foreground"
+      />
+      <span class="text-sm font-semibold text-foreground truncate">{{ roomName() }}</span>
+
+      @if (showRoomCompatibilityNotice()) {
+        <span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
+          {{ signalServerCompatibilityError() }}
+        </span>
+      }
+
+      @if (showRoomReconnectNotice()) {
+        <span class="inline-flex items-center gap-1 rounded bg-destructive/15 px-2 py-0.5 text-xs text-destructive">
+          <ng-icon
+            name="lucideRefreshCw"
+            class="h-3.5 w-3.5 animate-spin"
+          />
+          Reconnecting to signal server…
+        </span>
+      }
+
+      @if (roomDescription()) {
+        <span class="hidden md:inline text-sm text-muted-foreground border-l border-border pl-2 truncate">
+          {{ roomDescription() }}
+        </span>
+      }
+    } @else {
+      <div class="flex items-center gap-2 min-w-0">
+        <span class="text-sm text-muted-foreground truncate">{{ username() }} | {{ serverName() }}</span>
+        <span
+          class="text-xs px-2 py-0.5 rounded bg-destructive/15 text-destructive"
+          [class.hidden]="!isReconnecting()"
+          >Reconnecting…</span
+        >
+      </div>
+    }
+  </div>
+  <div
+    class="flex items-center gap-2"
+    style="-webkit-app-region: no-drag"
+  >
+    <button
+      type="button"
+      class="px-3 h-8 grid place-items-center hover:bg-secondary rounded text-sm text-foreground"
+      [class.hidden]="isAuthed()"
+      (click)="goLogin()"
+      title="Login"
+    >
+      Login
+    </button>
+
+    <button
+      type="button"
+      (click)="toggleMenu()"
+      class="ml-2 p-2 hover:bg-secondary rounded"
+      title="Menu"
+    >
+      <ng-icon
+        name="lucideMenu"
+        class="w-5 h-5 text-muted-foreground"
+      />
+    </button>
+    <!-- Anchored dropdown under the menu button -->
+    @if (showMenu()) {
+      <div class="absolute right-0 top-full mt-1 z-50 w-64 rounded-lg border border-border bg-card shadow-lg">
+        @if (inRoom()) {
+          <button
+            type="button"
+            (click)="createInviteLink()"
+            [disabled]="creatingInvite()"
+            class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground disabled:cursor-not-allowed disabled:opacity-60"
+          >
+            @if (creatingInvite()) {
+              Creating Invite Link…
+            } @else {
+              Create Invite Link
+            }
+          </button>
+          <button
+            type="button"
+            (click)="leaveServer()"
+            class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground"
+          >
+            Leave Server
+          </button>
+        }
+        <div
+          class="border-t border-border px-3 py-2 text-xs leading-5 text-muted-foreground"
+          [class.hidden]="!inviteStatus()"
+        >
+          {{ inviteStatus() }}
+        </div>
+        <div class="border-t border-border"></div>
+        <button
+          type="button"
+          (click)="logout()"
+          class="w-full text-left px-3 py-2 text-sm hover:bg-secondary transition-colors text-foreground"
+        >
+          Logout
+        </button>
+      </div>
+    }
+    @if (isElectron()) {
+      <button
+        type="button"
+        class="w-8 h-8 grid place-items-center hover:bg-secondary rounded"
+        title="Minimize"
+        (click)="minimize()"
+      >
+        <ng-icon
+          name="lucideMinus"
+          class="w-4 h-4"
+        />
+      </button>
+      <button
+        type="button"
+        class="w-8 h-8 grid place-items-center hover:bg-secondary rounded"
+        title="Maximize"
+        (click)="maximize()"
+      >
+        <ng-icon
+          name="lucideSquare"
+          class="w-4 h-4"
+        />
+      </button>
+      <button
+        type="button"
+        class="w-8 h-8 grid place-items-center hover:bg-destructive/10 rounded"
+        title="Close"
+        (click)="close()"
+      >
+        <ng-icon
+          name="lucideX"
+          class="w-4 h-4 text-destructive"
+        />
+      </button>
+    }
+  </div>
+</div>
+<!-- Click-away overlay to close dropdown -->
+@if (showMenu()) {
+  <div
+    class="fixed inset-0 z-40"
+    (click)="closeMenu()"
+    (keydown.enter)="closeMenu()"
+    (keydown.space)="closeMenu()"
+    tabindex="0"
+    role="button"
+    aria-label="Close menu overlay"
+    style="-webkit-app-region: no-drag"
+  ></div>
+}
+
+@if (showLeaveConfirm() && currentRoom()) {
+  <app-leave-server-dialog
+    [room]="currentRoom()!"
+    [currentUser]="currentUser() ?? null"
+    (confirmed)="confirmLeave($event)"
+    (cancelled)="cancelLeave()"
+  />
+}