feat: Android APP V1 - Experimental Alpha

toju-app/src/app/domains/custom-emoji/feature/custom-emoji-picker/custom-emoji-picker.component.html

@@ -36,23 +36,34 @@
   }
 
   @if (!compact() || modalOpen()) {
-    <div class="absolute bottom-full right-0 z-20 mb-2 w-72 rounded-lg border border-border bg-card p-3 shadow-xl">
-      <div class="mb-2 flex items-center justify-between gap-2">
-        <p class="text-sm font-semibold text-foreground">Emoji</p>
-        @if (compact()) {
-          <button
-            type="button"
-            class="grid h-7 w-7 place-items-center rounded hover:bg-secondary"
-            aria-label="Close emoji selector"
-            (click)="closeModal()"
-          >
-            <ng-icon
-              name="lucideX"
-              class="h-4 w-4 text-muted-foreground"
-            />
-          </button>
-        }
-      </div>
+    <div
+      class="rounded-lg border border-border bg-card p-3 shadow-xl"
+      [class.absolute]="!inline()"
+      [class.bottom-full]="!inline()"
+      [class.right-0]="!inline()"
+      [class.z-20]="!inline()"
+      [class.mb-2]="!inline()"
+      [class.w-72]="!inline()"
+      [class.w-full]="inline()"
+    >
+      @if (!inline()) {
+        <div class="mb-2 flex items-center justify-between gap-2">
+          <p class="text-sm font-semibold text-foreground">Emoji</p>
+          @if (compact()) {
+            <button
+              type="button"
+              class="grid h-7 w-7 place-items-center rounded hover:bg-secondary"
+              aria-label="Close emoji selector"
+              (click)="closeModal()"
+            >
+              <ng-icon
+                name="lucideX"
+                class="h-4 w-4 text-muted-foreground"
+              />
+            </button>
+          }
+        </div>
+      }
 
       <label class="relative mb-3 block">
         <ng-icon

toju-app/src/app/domains/custom-emoji/feature/custom-emoji-picker/custom-emoji-picker.component.spec.ts

@@ -148,4 +148,10 @@ describe('CustomEmojiPickerComponent', () => {
     expect(component.searchQuery()).toBe('');
   });
 
+  it('defaults inline mode to false for floating popover embedding', () => {
+    const component = createComponent(true);
+
+    expect(component.inline()).toBe(false);
+  });
+
 });

toju-app/src/app/domains/custom-emoji/feature/custom-emoji-picker/custom-emoji-picker.component.ts

@@ -43,6 +43,8 @@ export class CustomEmojiPickerComponent {
 
   readonly currentUserId = input<string | null>(null);
   readonly compact = input(true);
+  /** Render the picker panel in normal document flow for bottom-sheet embedding. */
+  readonly inline = input(false);
 
   readonly emojiSelected = output<string>();
   readonly dismissed = output();