web: add dummy timeline

src/web/app.ts

@@ -5,11 +5,13 @@ import {msg, str} from "@lit/localize";
 import {aboutURL, sourceURL, version} from "./config";
 import withSharedStyles from "./theme";
 
-import "./components/header-bar";
+import "./components/nav-bar";
 import "./features/compose-form";
+import "./features/timed-line";
 import "./layout/column-layout";
 import "./layout/scroll-list";
 import "./layout/side-panel";
+import {Account, Note} from "./data/types";
 
 @customElement("nyano-blog")
 export default class NyanoBlog extends LitElement {
@@ -30,8 +32,10 @@ export default class NyanoBlog extends LitElement {
                     </p>
                 </footer>
 
-                <div slot="main">
+                <div id="main-container" slot="main">
-                    <header-bar></header-bar>
+                    <nav-bar id="nav"></nav-bar>
+                    <timed-line id="tl" .notes=${testNotes}></timed-line>
+                    <div class="flex-spacer"></div>
                 </div>
 
                 <side-panel slot="right" headline="${msg("Notifications")}">
@@ -66,6 +70,78 @@ export default class NyanoBlog extends LitElement {
             footer a, footer a:visited {
                 color: var(--text-faint-color);
             }
+
+            #main-container {
+                display: block;
+                max-width: 600px;
+                margin: auto;
+            }
+
+            @media(min-width: 1400px) {
+                .flex-spacer, #nav {
+                    flex: 1;
+                }
+                #main-container {
+                    display: flex;
+                    flex-direction: row;
+                    max-width: unset;
+                }
+                #tl {
+                    width: 600px;
+                    margin-left: 20px;
+                }
+            }
         `);
     }
 }
+
+const testAccount: Account = {
+    id: "1",
+    name: "fef",
+    domain: "localhost",
+    created_at: new Date(),
+    updated_at: new Date(),
+};
+
+const testNotes: Note[] = [
+    {
+        id: "1",
+        account: testAccount,
+        content: "Lorem ipsum dolor sit amet",
+        sensitive: false,
+        created_at: new Date(),
+        updated_at: new Date(),
+    },
+    {
+        id: "2",
+        account: testAccount,
+        content: "The quick brown fox jumped over the lazy dog.",
+        sensitive: false,
+        created_at: new Date(),
+        updated_at: new Date(),
+    },
+    {
+        id: "3",
+        account: testAccount,
+        content: "hi i'm gay uwu",
+        sensitive: false,
+        created_at: new Date(),
+        updated_at: new Date(),
+    },
+    {
+        id: "4",
+        account: testAccount,
+        content: "are there any #Homosexuals #OnHere?",
+        sensitive: false,
+        created_at: new Date(),
+        updated_at: new Date(),
+    },
+    {
+        id: "5",
+        account: testAccount,
+        content: "test note 1",
+        sensitive: false,
+        created_at: new Date(),
+        updated_at: new Date(),
+    },
+];

src/web/components/nav-bar.ts

@@ -6,46 +6,46 @@ import withSharedStyles from "../theme";
 
 import "./svg-icon";
 
-@customElement("header-bar")
+@customElement("nav-bar")
-export default class HeaderBar extends LitElement {
+export default class NavBar extends LitElement {
     protected render() {
         return html`
             <nav>
                 <ul>
                     <li aria-current="page">
                         <a href="#">
-                            <svg-icon size="20" icon="house-fill" role="none"></svg-icon>
                             <span class="name">${msg("Home")}</span>
+                            <svg-icon size="20" icon="house-fill" role="none"></svg-icon>
                         </a>
                     </li>
                     <li>
                         <a href="#">
-                            <svg-icon size="20" icon="people-fill" role="none"></svg-icon>
                             <span class="name">${msg("Local")}</span>
+                            <svg-icon size="20" icon="people-fill" role="none"></svg-icon>
                         </a>
                     </li>
                     <li>
                         <a href="#">
-                            <svg-icon size="20" icon="${this.getGlobeIconName()}" role="none"></svg-icon>
                             <span class="name">${msg("Federated")}</span>
+                            <svg-icon size="20" icon="${this.getGlobeIconName()}" role="none"></svg-icon>
                         </a>
                     </li>
                     <li>
                         <a href="#">
-                            <svg-icon size="20" icon="star-fill" role="none"></svg-icon>
                             <span class="name">${msg("Favourites")}</span>
+                            <svg-icon size="20" icon="star-fill" role="none"></svg-icon>
                         </a>
                     </li>
                     <li>
                         <a href="#">
-                            <svg-icon size="20" icon="bookmark-fill" role="none"></svg-icon>
                             <span class="name">${msg("Bookmarks")}</span>
+                            <svg-icon size="20" icon="bookmark-fill" role="none"></svg-icon>
                         </a>
                     </li>
                     <li>
                         <a href="#">
-                            <svg-icon size="20" icon="gear-fill" role="none"></svg-icon>
                             <span class="name">${msg("Settings")}</span>
+                            <svg-icon size="20" icon="gear-fill" role="none"></svg-icon>
                         </a>
                     </li>
                 </ul>
@@ -69,7 +69,7 @@ export default class HeaderBar extends LitElement {
     static get styles() {
         return withSharedStyles(css`
             :host {
-                font-size: 1rem;
+                font-size: 1.15rem;
             }
 
             nav {
@@ -104,16 +104,30 @@ export default class HeaderBar extends LitElement {
             }
 
             svg-icon {
-                transform: translateY(4px);
+                transform: translateY(3px);
             }
 
             .name {
-                margin-left: 8px;
+                display: none;
             }
 
-            @media(max-width: 1600px) {
+            @media(min-width: 1400px) {
+                ul {
+                    border-bottom: none;
+                    border-right: 1px solid rgba(255, 255, 255, 0.2);
+                    padding: 0 20px;
+                    text-align: right;
+                }
+                li {
+                    display: block;
+                    padding: 12px 0;
+                }
+            }
+
+            @media(min-width: 1700px) {
                 .name {
-                    display: none;
+                    display: inline;
+                    margin-right: 8px;
                 }
             }
         `);

src/web/components/tl-note.ts

@@ -0,0 +1,27 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+
+import {Note} from "../data/types";
+import withSharedStyles from "../theme";
+
+import "./account-header";
+
+/** single note on the timed line */
+@customElement("tl-note")
+export default class TlNote extends LitElement {
+    @property()
+    public note: Note;
+
+    protected render() {
+        return html`
+            <account-header .account=${this.note.account}></account-header>
+            <div>${this.note.content}</div>
+        `;
+    }
+
+    static get styles() {
+        return withSharedStyles(css`
+
+        `);
+    }
+}

src/web/data/types.ts

@@ -0,0 +1,18 @@
+export interface Account {
+    id: string,
+    name: string,
+    domain: string,
+    display_name?: string,
+    created_at: Date,
+    updated_at: Date,
+}
+
+export interface Note {
+    id: string,
+    account: Account,
+    content: string,
+    summary?: string,
+    sensitive: boolean,
+    created_at: Date,
+    updated_at: Date,
+}

src/web/features/timed-line.ts

@@ -0,0 +1,32 @@
+import {LitElement, html, css} from "lit";
+import {customElement, property} from "lit/decorators.js";
+
+import {Note} from "../data/types";
+import withSharedStyles from "../theme";
+
+import "../components/tl-note";
+import "../layout/scroll-list";
+
+@customElement("timed-line")
+export default class TimedLine extends LitElement {
+    @property()
+    public notes: Note[] = [];
+
+    protected render() {
+        return html`
+            <scroll-list>
+                ${this.notes.map(note => html`<tl-note .note=${note}></tl-note>`)}
+            </scroll-list>
+        `;
+    }
+
+    static get styles() {
+        return withSharedStyles(css`
+            :host {
+                display: block;
+                max-width: 600px;
+                margin: 0 auto;
+            }
+        `);
+    }
+}

src/web/layout/scroll-list.ts

@@ -1,13 +1,10 @@
 import {LitElement, html, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
+import {customElement} from "lit/decorators.js";
 
 import withSharedStyles from "../theme";
 
 @customElement("scroll-list")
 export default class ScrollList extends LitElement {
-    @property({type: Function})
-    public onLoadMore: () => Promise<HTMLElement[]>;
-
     protected render() {
         return html`
             <slot/>