feat: post-composer drag and drop

src/app/components/navigation/post-composer/post-composer.component.html

···
+@let mediaEmbed = postService.postCompose().mediaEmbed();
+@let recordEmbed = postService.postCompose().recordEmbed();
+@let reply = postService.postCompose().reply();
+@let suggestion = embedSuggestions().length ? (embedSuggestions() | slice : 0 : 1)[0] : undefined;
+
 <div
-  class="flex w-full border-b border-primary box-border"
+  class="flex relative flex-col w-full border-b border-primary"
 >
-  <div
-    class="relative flex-1"
-  >
+  @if (showDragOver()) {
     <div
-      #text autofocus
-      contenteditable="plaintext-only"
-      spellcheck="false"
-      class="absolute top-0 left-0 z-1 w-full h-full p-2 bg-transparent text-transparent outline-0 caret-black"
-      (input)="formatText($event)"
-      (paste)="postService.attachMedia($any($event.clipboardData.files))"
-      (keydown.control.enter)="postBtn.click()"
-      [mention]="mentionItems"
-      [mentionConfig]="{
-        triggerChar: '@',
-        labelKey: 'value',
-        disableSearch: true,
-        dropUp: true
-      }"
-      (searchTerm)="searchMentions($event)"
-    ></div>
+      class="absolute top-0 left-0 flex items-center justify-center w-full h-full bg-primary/5 z-1 backdrop-blur-[1px]"
+    >
+      <span
+        class="text-xl underline text-primary/70"
+      >Drop here</span>
+    </div>
+  }
+
+  @if (reply) {
     <div
-      [innerHTML]="text.textContent.length ? formattedText : undefined"
-      class="w-full h-full p-2 bg-white text-black empty:text-primary/50 outline-0 break-words whitespace-pre-wrap empty:before:content-['user@consolesky:/$_\_']"
-    ></div>
-  </div>
+      class="relative w-full h-7 flex items-center px-2 bg-primary text-bg font-semibold cursor-default"
+    >
+      <span
+      >Replying to</span>
+
+      <span
+        class="ml-2"
+      >{{reply.author | displayName}}</span>
+
+      <span
+        class="ml-auto font-semibold cursor-pointer hover:underline"
+        (click)="showReply.set(!showReply())"
+      >{{ showReply() ? 'hide post' : 'view post' }}</span>
+
+      <span
+        class="ml-6 font-semibold cursor-pointer hover:underline"
+        (click)="showReply.set(false); postService.postCompose().reply.set(undefined)"
+      >cancel</span>
+
+      @if (showReply()) {
+        <div
+          class="absolute bg-bg border border-primary bottom-7 right-[-1px]"
+        >
+          <post-card
+            [post]="reply"
+            class="block  w-[30rem] text-primary font-normal"
+          />
+        </div>
+      }
+    </div>
+  }
 
   <div
-    class="flex items-end shrink-0 p-[0.35rem]"
+    class="flex w-full"
   >
-    <button
-      class="btn-secondary h-22 w-22 flex flex-col justify-center items-center"
+    <div
+      class="flex-1 min-w-0"
+      [class.relative]="!showDragOver()"
     >
       <div
-        class="flex items-center justify-center h-10"
+        #text autofocus
+        contenteditable="plaintext-only"
+        spellcheck="false"
+        class="absolute top-0 left-0 z-1 w-full h-full p-2 bg-transparent text-transparent outline-0 caret-black"
+        (input)="formatText($event)"
+        (paste)="postService.attachMedia($any($event.clipboardData.files))"
+        (keydown.control.enter)="postBtn.click()"
+        [mention]="mentionItems"
+        [mentionConfig]="{
+          triggerChar: '@',
+          labelKey: 'value',
+          disableSearch: true,
+          dropUp: true
+        }"
+        (searchTerm)="searchMentions($event)"
+      ></div>
+      <div
+        [innerHTML]="text.textContent.length ? formattedText : undefined"
+        class="w-full h-full p-2 bg-white text-black empty:text-primary/50 outline-0 break-words whitespace-pre-wrap empty:before:content-['user@consolesky:/$_\_']"
+      ></div>
+
+
+      <div
+        class="relative w-full"
       >
         <span
-          class="material-icons !text-6xl"
-        >format_quote</span>
+          class="absolute bottom-1 right-2 text-primary/50"
+          [class.text-repost]="(300 - text.textContent.length) > 50"
+        >{{300 - text.textContent.length}}</span>
       </div>
+    </div>
 
-      Quote
-    </button>
-  </div>
+    <div
+      class="flex items-end shrink-0 p-[0.35rem] empty:hidden"
+    >
+
+      @if (mediaEmbed) {
+        <button
+          class="btn-secondary h-22 w-22 flex flex-col justify-center items-center"
+        >
+          <div
+            class="flex items-center justify-center h-10"
+          >
+            <span
+              class="material-icons !text-5xl -translate-y-0.5"
+            >attachment</span>
+          </div>
+
+          @if (mediaEmbed | isMediaEmbedImage) {
+            images
+          }
+          @else if (mediaEmbed | isMediaEmbedVideo) {
+            video
+          }
+          @else if (mediaEmbed | isMediaEmbedExternal) {
+            link
+          }
+        </button>
+      } @else if (suggestion | isMediaEmbedExternal) {
+        <button
+          class="btn-secondary h-22 w-22 flex flex-col justify-center items-center border-dashed"
+          (click)="embedLink()"
+        >
+          <div
+            class="flex items-center justify-center h-8"
+          >
+            <span
+              class="material-icons !text-5xl"
+            >attachment</span>
+          </div>
+
+          add link?
+        </button>
+      }
 
-  <div
-    class="w-28 flex flex-col shrink-0 justify-end"
-  >
+      @if (recordEmbed) {
+        <button
+          class="btn-secondary h-22 w-22 ml-2 flex flex-col justify-center items-center"
+        >
+          <div
+            class="flex items-center justify-center h-10"
+          >
+            <span
+              class="material-icons !text-6xl"
+            >format_quote</span>
+          </div>
+
+          quote
+        </button>
+      } @else if (suggestion | isRecordEmbed) {
+        <button
+          class="btn-secondary h-22 w-22 flex flex-col justify-center items-center border-dashed"
+          (click)="embedRecord()"
+        >
+          <div
+            class="flex items-center justify-center h-10"
+          >
+            <span
+              class="material-icons !text-6xl"
+            >format_quote</span>
+          </div>
+
+          add quote?
+        </button>
+      }
+    </div>
+
     <div
-      class="flex h-fit w-full border-primary"
-      [class.border-t]="text | postComposerHeight"
+      class="w-28 flex flex-col shrink-0 justify-end"
     >
-      <button
-        class="btn-secondary h-9 flex-1 border-r-0 border-t-0 p-0 flex items-center justify-center"
+      <div
+        class="flex h-fit w-full border-primary border-l border-b"
+        [class.border-t]="text | postComposerHeight"
       >
-        <span
-          class="material-icons-outlined"
-        >mode_comment</span>
-      </button>
+        <button
+          class="btn-secondary h-9 flex-1 border-0 p-0 flex items-center justify-center"
+          (click)="uploader.click()"
+        >
+          <span
+            class="material-icons-outlined !text-xl"
+          >image</span>
+
+          <input
+            #uploader
+            type="file"
+            class="hidden"
+            (change)="postService.attachMedia($any(uploader.files))"
+          />
+        </button>
 
-      <button
-        class="btn-secondary h-9 flex-1 border-r-0 border-t-0 p-0 flex items-center justify-center"
-      >
-        <span
-          class="material-icons-outlined"
-        >mode_comment</span>
-      </button>
+        <div
+          class="h-full border-l border-primary"
+        ></div>
+
+        <button
+          disabled
+          class="btn-secondary h-9 flex-1 border-0 p-0 flex items-center justify-center"
+        >
+          <span
+            class="material-icons-outlined !text-xl"
+          >sentiment_satisfied_alt</span>
+        </button>
+
+        <div
+          class="h-full border-l border-primary"
+        ></div>
+
+        <button
+          disabled
+          class="btn-secondary h-9 flex-1 border-0 p-0 flex items-center justify-center"
+        >
+          <span
+            class="material-icons-outlined !text-[2em]"
+          >gif</span>
+        </button>
+      </div>
 
       <button
-        class="btn-secondary h-9 flex-1 border-r-0 border-t-0 p-0 flex items-center justify-center"
-      >
-        <span
-          class="material-icons-outlined"
-        >mode_comment</span>
-      </button>
+        #postBtn
+        class="btn-primary font-semibold h-16 w-full border-0 border-l"
+        [disabled]="loading || text.innerText.length > 300 || (!text.innerText.length && !mediaEmbed && !recordEmbed)"
+        (click)="publishPost()"
+      >post</button>
     </div>
-    <button
-      #postBtn
-      class="btn-primary h-16 w-full border-r-0 border-b-0"
-      (click)="publishPost()"
-    >Post</button>
   </div>
 </div>

src/app/components/navigation/post-composer/post-composer.component.ts

···
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, signal, WritableSignal} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component, ElementRef,
+  HostListener,
+  signal,
+  WritableSignal
+} from '@angular/core';
 import {$Typed, AppBskyFeedDefs, AppBskyGraphDefs, RichText} from '@atproto/api';
-import {ExternalEmbed, ImageEmbed, RecordEmbed} from '@models/embed';
+import {ExternalEmbed, ImageEmbed, RecordEmbed, RecordEmbedType} from '@models/embed';
 import {EmbedUtils} from '@shared/utils/embed-utils';
 import {PostService} from '@services/post.service';
 import {EmbedService} from '@services/embed.service';
···
 import {SnippetUtils} from '@shared/utils/snippet-utils';
 import {MentionModule} from 'angular-mentions';
 import {PostComposerHeightPipe} from '@shared/pipes/post-composer-height.pipe';
+import {DisplayNamePipe} from '@shared/pipes/display-name.pipe';
+import {PostCardComponent} from '@components/cards/post-card/post-card.component';
+import {IsMediaEmbedImagePipe} from '@shared/pipes/type-guards/is-media-embed-image';
+import {IsMediaEmbedVideoPipe} from '@shared/pipes/type-guards/is-media-embed-video';
+import {IsMediaEmbedExternalPipe} from '@shared/pipes/type-guards/is-media-embed-external';
+import {SlicePipe} from '@angular/common';
+import {IsRecordEmbedPipe} from '@shared/pipes/type-guards/is-record-embed';
 
 @Component({
   selector: 'post-composer',
   imports: [
     MentionModule,
-    PostComposerHeightPipe
+    PostComposerHeightPipe,
+    DisplayNamePipe,
+    PostCardComponent,
+    IsMediaEmbedImagePipe,
+    IsMediaEmbedVideoPipe,
+    IsMediaEmbedExternalPipe,
+    SlicePipe,
+    IsRecordEmbedPipe
   ],
   templateUrl: './post-composer.component.html',
   styles: `
···
   mentionItems = [];
   loading = false;
   embedSuggestions = signal<Array<RecordEmbed | ExternalEmbed>>([]);
+  showReply = signal(false);
+  showMedia = signal(false);
+  showRecord = signal(false);
+  showDragOver = signal(false);
 
   constructor(
     protected postService: PostService,
     private embedService: EmbedService,
+    private elementRef: ElementRef,
     private cdRef: ChangeDetectorRef
   ) {}
 
···
     }
   }
 
+  embedRecord() {
+    const embed = this.embedSuggestions()[0] as RecordEmbed;
+    switch (embed.recordType) {
+      case RecordEmbedType.POST:
+        this.embedQuote();
+        break;
+      case RecordEmbedType.FEED:
+        this.embedFeed();
+        break;
+      case RecordEmbedType.LIST:
+        this.embedList();
+        break;
+      case RecordEmbedType.STARTER_PACK:
+        this.embedStarterPack();
+        break;
+    }
+  }
+
   embedQuote() {
     const embed = this.embedSuggestions()[0] as RecordEmbed;
     agent.resolveHandle({
···
       //TODO: MessageService
       err => console.log(err.message)
     ).finally(() => this.loading = false);
+  }
+
+  @HostListener('dragenter', ['$event'])
+  onDragEnter(event: Event) {
+    event.preventDefault();
+
+    if (this.elementRef.nativeElement.contains((event as any).currentTarget)) {
+      this.showDragOver.set(true);
+    }
+  }
+
+  @HostListener('dragleave', ['$event'])
+  onDragLeave(event: Event) {
+    event.preventDefault();
+
+    if (!this.elementRef.nativeElement.contains((event as any).relatedTarget)) {
+      this.showDragOver.set(false);
+    }
+  }
+
+  @HostListener('drop', ['$event'])
+  onDrop(event: Event) {
+    event.preventDefault();
+
+    this.showDragOver.set(false);
+    this.postService.attachMedia((event as any).dataTransfer.files);
   }
 }

src/app/components/navigation/sidebar/sidebar.component.html

···
   >
     {{ postService.postCompose() ? 'X' : '>_' }}
   </span>
-    {{ postService.postCompose() ? 'Cancel post' : 'Write post' }}
+    {{ postService.postCompose() ? 'cancel post' : 'write post' }}
   </button>
 </div>

src/app/shared/pipes/type-guards/is-record-embed.ts

···
+import {Pipe, PipeTransform} from '@angular/core';
+import {EmbedType, RecordEmbed} from "@models/embed";
+
+@Pipe({
+  name: 'isRecordEmbed'
+})
+export class IsRecordEmbedPipe implements PipeTransform {
+  transform(value: unknown): value is RecordEmbed {
+    return (value as RecordEmbed)?.type == EmbedType.RECORD;
+  }
+}

src/styles.css

···
 @layer components {
   .btn-primary {
     box-sizing: border-box;
-    border: 1px solid var(--color-primary);
+    border: 1px solid;
+    border-color: var(--color-primary);
     background-color: var(--color-primary);
     color: var(--color-bg);
     width: fit-content;
···
       background-color: var(--color-bg);
       color: var(--color-primary);
     }
+
+    &:disabled {
+      pointer-events: none;
+      opacity: 0.3;
+    }
   }
 
   .btn-secondary {
     box-sizing: border-box;
-    border: 1px solid var(--color-primary);
+    border: 1px solid;
+    border-color: var(--color-primary);
     background-color: var(--color-bg);
     color: var(--color-primary);
     width: fit-content;
···
     min-height: 2em;
 
     &:hover {
-      background-color: color-mix(in oklab, var(--color-primary) /* #000 = #000000 */ 15%, transparent);
+      background-color: color-mix(in oklab, var(--color-primary) /* #000 = #000000 */ 10%, transparent);
       color: var(--color-primary);
+    }
+
+    &:disabled {
+      pointer-events: none;
+      opacity: 0.3;
     }
   }
 
···
     &:hover {
       background-color: var(--color-primary);
       color: var(--color-bg);
+    }
+
+    &:disabled {
+      pointer-events: none;
     }
   }
 }