JS frontend stuff

Move old ember frontend to properly named folder
Add vue based new frontend

frontend-old-ember/app/components/note/content.hbs

@@ -0,0 +1,19 @@
+<div class="note-content">
+  <p class="note-content-text">{{this.visibleContent}}</p>
+  {{#if this.canExpand}}
+  {{#if this.collapsed}}
+    <div
+      type="button"
+      class="note-content-toggle"
+      {{on "click" this.expand}}
+    >{{t "note.expand"}}</div>
+  {{else}}
+    <div
+      type="button"
+      class="note-content-toggle"
+      {{on "click" this.collapse}}
+      >{{t "note.collapse"}}</div>
+  {{/if}}
+
+  {{/if}}
+  </div>

frontend-old-ember/app/components/note/content.ts

@@ -0,0 +1,58 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export interface NoteContentSignature {
+  // The arguments accepted by the component
+  Args: {
+    content: string;
+    preFormatted: boolean;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class NoteContent extends Component<NoteContentSignature> {
+  // Default to collapsed content
+  @tracked visibleContent =
+    this.args.content.length > 200 ? this.cutDownContent() : this.args.content;
+
+  @tracked collapsed = true;
+  @tracked canExpand = this.args.content.length > 200;
+
+  @action
+  expand() {
+    this.visibleContent = this.args.content;
+    this.collapsed = false;
+  }
+
+  @action
+  collapse() {
+    this.visibleContent =
+      this.args.content.length > 200
+        ? this.cutDownContent()
+        : this.args.content;
+    this.collapsed = true;
+  }
+
+  cutDownContent(): string {
+    if (this.args.content.length > 200) {
+      const words = this.args.content.split(' ');
+      let outString = '';
+      for (const word of words) {
+        if (outString.length > 200) {
+          return outString + '...';
+        }
+        outString += word + ' ';
+      }
+    } else {
+      return this.args.content;
+    }
+
+    return '';
+  }
+}

frontend-old-ember/app/components/note/interactions.hbs

@@ -0,0 +1,46 @@
+{{!-- TODO: Add translations --}}
+<div class="resource-preload">
+</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" {{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" 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>

frontend-old-ember/app/components/note/interactions.ts

@@ -0,0 +1,53 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import isLandscape from 'frontend-reactive/helpers/isLandscape';
+
+export interface NoteInteractionsSignature {
+  // The arguments accepted by the component
+  Args: {
+    boostCount: number;
+    totalLikeCount: number;
+    reactions: {
+      [key: string]: number;
+    };
+    hasBoosted: boolean;
+    hasReacted: boolean;
+  };
+  // Any blocks yielded by the component
+  Blocks: {
+    default: [];
+  };
+  // The element to which `...attributes` is applied in the component template
+  Element: null;
+}
+
+export default class NoteInteractions extends Component<NoteInteractionsSignature> {
+  @tracked hasBoosted = this.args.hasBoosted;
+  @tracked hasReacted = this.args.hasReacted;
+  @tracked expandReactions = false;
+
+  @action
+  toggleBoost() {
+    this.hasBoosted = !this.hasBoosted;
+    console.log('boosted', this.hasBoosted);
+  }
+
+  @action
+  toggleDefaultLike() {
+    this.hasReacted = !this.hasReacted;
+    console.log('reacted', this.hasReacted);
+  }
+
+  @action
+  openCustomReactionSelector() {
+    this.hasReacted = !this.hasReacted;
+    console.log('sent custom reaction', this.hasReacted);
+  }
+
+  @action
+  openAllReactions() {
+    console.log('Toggle all reactions overview');
+    this.expandReactions = !this.expandReactions;
+  }
+}

frontend-old-ember/app/components/note/user-header.hbs

@@ -0,0 +1,11 @@
+<div class="note-user-header">
+  <div class="note-user-pfp">
+    <p>Pfp</p>
+  </div>
+  <div class="note-user-name-and-handle">
+    <p class="note-user-displayname">{{@displayname}}:{{@server}}</p>
+    <!--<Util::Formatter @classes="note-user-displayname" @content={{@displayname}} @server={{@server}}/>-->
+    <p class="note-user-displayname"></p>
+    <p class="note-user-handle">{{@handle}}</p>
+  </div>
+</div>