commit 959ab6cf951030523d7f6b64151fdce91426e82c
parent d767b60c58a3664034b1c3bc7d1226f122c31469
Author: finwo <finwo@pm.me>
Date: Sat, 13 Sep 2025 21:29:27 +0200
Made top buttons clickable for accessibility tools
Diffstat:
6 files changed, 110 insertions(+), 27 deletions(-)
diff --git a/packages/app/src/component/app.tsx b/packages/app/src/component/app.tsx
@@ -1,9 +0,0 @@
-export default {
- view() {
- return (
- <div>
- Hello World
- </div>
- );
- },
-};
diff --git a/packages/app/src/component/screen-account-select.tsx b/packages/app/src/component/screen-account-select.tsx
@@ -1,7 +1,7 @@
import { Vnode } from 'mithril';
import { AccountCreateScreen } from './screen-account-create.tsx';
-import Trash from 'lucide/dist/esm/icons/trash-2.js';
+import TrashIcon from 'lucide/dist/esm/icons/trash-2.js';
import { getDirectoryHandle, getFileHandle } from '../util/opfs';
import {HomeScreen} from './screen-home.js';
@@ -55,15 +55,15 @@ export const AccountSelectScreen = {
view(vnode: _Vnode) {
return (
<div class="main">
+ <h3>Select account</h3>
<div id="accountSelectList">
- <center style="padding:1em;">Select account</center>
{vnode.state.accounts.map(account => (
- <div style="padding:1em" onclick={vnode.state.handler.selectAccount(account)}>
+ <a style="display:block;padding:1em" onclick={vnode.state.handler.selectAccount(account)}>
{account.displayName}
<svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;" class="accountListDeleteButton" onclick={vnode.state.handler.deleteAccount(vnode, account)}>
- {Trash.map(el => m(...el))}
+ {TrashIcon.map(el => m(...el))}
</svg>
- </div>
+ </a>
))}
</div>
<center>
diff --git a/packages/app/src/component/screen-home.tsx b/packages/app/src/component/screen-home.tsx
@@ -1,9 +1,21 @@
+import {getFileHandle} from "../util/opfs";
import { AccountSelectScreen } from "./screen-account-select";
+import SettingsIcon from 'lucide/dist/esm/icons/settings.js';
+import {SettingsScreen} from "./screen-settings";
+
+type _Vnode = Vnode<{}, typeof HomeScreen>;
+
+type Contact = {
+ accountId: string;
+ displayName: string;
+};
+
export const HomeScreen = {
routePath: '/',
+ contacts: [] as Contact[],
- oninit() {
+ async oninit(vnode: _Vnode) {
// Redirect to account selection if not there
if (!localStorage.selectedAccount) {
@@ -11,12 +23,57 @@ export const HomeScreen = {
return;
}
- console.log("INIT HOME");
+ // Fetch contacts/follows
+ const contactsHandle = await getFileHandle(`/local/accounts/${vnode.state.accountId}/contacts.json`, { create: true })
+ vnode.state.contacts = [];
+ try {
+ vnode.state.contacts = JSON.parse(Buffer.from(await (await contactsHandle.getFile()).bytes()));
+ } catch {
+ vnode.state.contacts = [];
+ }
+
+
+
+
+ // const accountConfigHandle = await getFileHandle(`/local/accounts/${accountId}/config.json`)
+ // const accountConfig = JSON.parse(Buffer.from(await (await accountConfigHandle.getFile()).bytes()));
+
+ // const deviceKeyWritable = await deviceKeyHandle.createWritable();
+ // await deviceKeyWritable.write(JSON.stringify(deviceKey.toJSON(), null, 2));
+ // await deviceKeyWritable.close();
},
- view() {
+ view(vnode: _Vnode) {
return (
- <a href="#!/app">Enter!</a>
+ <div class="main">
+ <h3>Chats</h3>
+ <button onclick={() => document.location.href=`#!${SettingsScreen.routePath}`} style="position:absolute;right:0;top:-1.2em;background:none;border:none;">
+ <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+ {SettingsIcon.map(el => m(...el))}
+ </svg>
+ </button>
+
+ <div class="entry-list">
+ {vnode.state.contacts.map((contact: Contact) => (
+ <div>
+ <label>{contact.displayName}</label>
+ <small>Some old message here</small>
+ </div>
+ ))}
+ <div>
+ <b>Nikola Tesla</b><br/>
+ <small>Some old message here</small>
+ </div>
+ <div>
+ <b>Charlie</b><br/>
+ <small>Some old message here</small>
+ </div>
+ <div>
+ <b>Alice</b><br/>
+ <small>Some old message here</small>
+ </div>
+ </div>
+ </div>
);
},
};
diff --git a/packages/app/src/component/screen-settings.tsx b/packages/app/src/component/screen-settings.tsx
@@ -0,0 +1,26 @@
+type _Vnode = Vnode<{}, typeof SettingsScreen>;
+
+import BackIcon from 'lucide/dist/esm/icons/arrow-left.js';
+import {HomeScreen} from './screen-home';
+
+export const SettingsScreen = {
+ routePath: '/settings',
+
+ async oninit(vnode: _Vnode) {
+ },
+
+ view(vnode: _Vnode) {
+ return (
+ <div class="main">
+ <h3>Settings</h3>
+ <button onclick={() => document.location.href=`#!${HomeScreen.routePath}`} style="position:absolute;right:0;top:-1.2em;background:none;border:none;">
+ <svg ns="http://www.w3.org/2000/svg" fill="transparent" style="vertical-align:bottom;width:1em;height:1em;">
+ {BackIcon.map(el => m(...el))}
+ </svg>
+ </button>
+
+ <div></div>
+ </div>
+ );
+ },
+};
diff --git a/packages/app/src/global.css b/packages/app/src/global.css
@@ -52,35 +52,43 @@ button {
}
}
+svg {
+ stroke: #FFF;
+}
+
.main {
max-width: 640px;
margin: 0 auto;
+ position: relative;
> * {
margin: 1rem;
}
}
+.entry-list > * {
+ padding: 1em;
+ border-top: 1px solid #FFF8;
+ &:hover {
+ background: #FFF2;
+ }
+}
+
.accountListDeleteButton {
display: none;
cursor: pointer;
float: right;
- stroke: #FFF;
&:hover {
stroke: #F00 !important;
}
}
#accountSelectList > * {
padding: 1em;
- &:not(:first-child) {
- border-top: 1px solid #FFF8;
- cursor: pointer;
- }
- &:hover:not(:first-child) {
+ border-top: 1px solid #FFF8;
+ cursor: pointer;
+ &:hover {
background: #FFF2;
> .accountListDeleteButton {
display: inline-block;
}
}
}
-
-
diff --git a/packages/app/src/main.ts b/packages/app/src/main.ts
@@ -3,10 +3,11 @@ globalThis.m = require('mithril');
import { AccountCreateScreen } from './component/screen-account-create.tsx';
import { AccountSelectScreen } from './component/screen-account-select.tsx';
import { HomeScreen } from './component/screen-home.js';
+import {SettingsScreen} from './component/screen-settings.js';
m.route(document.body, "/", {
- "/app" : require('./component/app.tsx' ).default,
[HomeScreen.routePath ]: HomeScreen,
[AccountSelectScreen.routePath]: AccountSelectScreen,
[AccountCreateScreen.routePath]: AccountCreateScreen,
+ [SettingsScreen.routePath ]: SettingsScreen,
});
