uhh, lots of things in frontend

frontend-reactive/app/components/note.hbs

@@ -0,0 +1,14 @@
+<div class="note">
+  {{!-- TODO: figure out how to make the entire note clickable for opening with something like {{on "click" (fn this.openFullView)}} --}}
+  <Note::UserHeader
+    @displayname="{{@displayname}}"
+    @handle="@{{@username}}@{{@serverdomain}}"
+  />
+  <Note::Content @content="{{@content}}" />
+  <div class="note-timestamps-container">
+    <p class="note-timestamp" id="note-edited-timestamp">Edited: At some time in
+      the future</p>
+    <p class="note-timestamp" id="note-created-timestamp">Posted: Before the Big
+      Bang</p>
+  </div>
+</div>

frontend-reactive/app/components/note.ts

@@ -0,0 +1,26 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+
+export interface NoteSignature {
+  // The arguments accepted by the component
+  Args: {
+    isInTimeline: 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 Note extends Component<NoteSignature> {
+  @action
+  openFullView() {
+    if (this.args.isInTimeline) {
+      alert("Would have opened note's own view");
+    } else {
+      console.log("Alread in note specific view, can't open it again");
+    }
+  }
+}

frontend-reactive/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}}
+    >Expand</div>
+  {{else}}
+    <div
+      type="button"
+      class="note-content-toggle"
+      {{on "click" this.collapse}}
+    >Collapse</div>
+  {{/if}}
+
+  {{/if}}
+  </div>

frontend-reactive/app/components/note/content.ts

@@ -0,0 +1,57 @@
+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;
+  };
+  // 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-reactive/app/components/note/user-header.hbs

@@ -0,0 +1,9 @@
+<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}}</p>
+    <p class="note-user-handle">{{@handle}}</p>
+  </div>
+</div>

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

@@ -1,4 +0,0 @@
-<div class="timeline-note">
-  <h3>{{@username}}</h3>
-  <p>{{@content}}</p>
-</div>