Design stuff shit

frontend-reactive/app/components/note/interactions.hbs

@@ -0,0 +1,53 @@
+<div class="resource-preload">
+<link rel="preload" type="image" href="assets/svgs/reload-black.svg">
+<link rel="preload" type="image" href="assets/svgs/reload-coloured.svg">
+<link rel="preload" type="image" href="assets/svgs/heart-rainbow.svg">
+<link rel="preload" type="image" href="assets/svgs/heart-black-outline.svg">
+</div>
+<div class="note-interactions-wrapper">
+<div type="button" class="note-interactions-interaction-button" {{on "click" this.toggleBoost}}>
+    {{#if this.hasBoosted}}
+      <Svgs::ReloadOutline @class="note-interactions-interaction-icon"/>
+    {{else}}
+      <Svgs::ReloadColoured @class="note-interactions-interaction-icon"/>
+    {{/if}}
+    <p class="note-interactions-interaction-counter noselect">{{this.args.boostCount}}</p>
+    <EmberTooltip @text="Boost this note" @side="top-start"/>
+  </div>
+  <div class="note-interactions-interaction-button">
+    <div
+      type="button"
+      class="note-interactions-interactions-button-like"
+      aria-label="Like or unlike"
+      aria-description="Send a like reaction or retract the current reaction"
+      {{on "click" this.toggleDefaultLike}}
+    >
+      {{#if this.hasReacted}}
+        <Svgs::HeartOutline @class="note-interactions-interaction-icon"/>
+      {{else}}
+        <Svgs::HeartFilled @class="note-interactions-interaction-icon"/>
+      {{/if}}
+      <p class="note-interactions-interaction-counter noselect">{{this.args.totalLikeCount}}</p>
+      <EmberTooltip @text="Like this note"/>
+    </div>
+    <div
+      class="note-interactions-interactions-button-custom"
+      aria-label="Send a custom reaction"
+      aria-description="Choose an emote and send that as custom reaction"
+      type="button"
+      {{on "click" this.openCustomReactionSelector}}
+    >
+      <Svgs::PlusBlack @class="note-interactions-interaction-icon"/>
+      <EmberTooltip @text="Send a custom reaction"/>
+    </div>
+    <div
+      class="note-interactions-interactions-button-custom"
+      type="button"
+      aria-label="Expand existing reactions"
+      {{on "click" this.openAllReactions}}
+    >
+      <Svgs::ArrowDownBlack @class="note-interactions-interaction-icon"/>
+      <EmberTooltip @text="Expand reactions"/>
+    </div>
+  </div>
+</div>