Initial commit

This commit is contained in:
Lim Chee Aun 2022-12-10 17:14:48 +08:00
commit 2b9390a0a1
53 changed files with 9135 additions and 0 deletions

2
.env Normal file
View file

@ -0,0 +1,2 @@
VITE_CLIENT_NAME=Phanpy
VITE_WEBSITE=https://phanpy.social

27
.gitignore vendored Normal file
View file

@ -0,0 +1,27 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Custom
.env.dev

11
.prettierrc Normal file
View file

@ -0,0 +1,11 @@
{
"tabWidth": 2,
"useTabs": false,
"singleQuote": true,
"trailingComma": "all",
"importOrder": [".css$", "<THIRD_PARTY_MODULES>", "^../", "^[./]"],
"importOrderSeparation": true,
"importOrderSortSpecifiers": true,
"importOrderGroupNamespaceSpecifiers": true,
"importOrderCaseInsensitive": true
}

85
README.md Normal file
View file

@ -0,0 +1,85 @@
<div align="center">
<img src="design/logo-2.svg" width="128" height="128" alt="">
Phanpy
===
**Minimalistic opinionated Mastodon web client.**
</div>
<br>
This is an alternative web client for [Mastodon](https://joinmastodon.org/).
Everything is designed and engineered for my own use case, following my taste and vision. This is a personal side project for me to learn about Mastodon and experiment with new UI/UX ideas.
🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
**🐘 This is an early ALPHA project. Many features are missing, many bugs are present. Please report issues as detailed as possible. Thanks 🙏**
🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧🚧
## Features
- Minimalistic UI
- Accounts switching
- Theme switching (light, dark, auto)
## Design decisions
- **Status actions (reply, boost, favourite, bookmark, etc) are hidden by default**.<br>They only appear in individual status page. This is to reduce clutter and distraction. It may result in lower engagement, but we're not chasing numbers here.
- **Boost is represented with the rocket icon**.<br>The green double arrow icon (retweet for Twitter) doesn't look right for the term "boost". Green rocket looks weird, so I use purple.
- **Short usernames (`@username`) are displayed in timelines, instead of the full account username (`@username@instance`)**.<br>Despite the [guideline](https://docs.joinmastodon.org/api/guidelines/#username) mentioned that "Decentralization must be transparent to the user", I don't think we should shove it to the face every single time. There are also some [screen-reader-related accessibility concerns](https://twitter.com/lifeofablindgrl/status/1595864647554502656) with the full username, though this web app is unfortunately not accessible yet.
- **Hash-based URLs**.<br>This web app is not meant to be a full-fledged replacement to Mastodon's existing front-end. There's no SEO, database, serverless or any long-running servers. I could be wrong one day.
## Development
Prerequisites: Node.js 18+
- `npm install` - Install dependencies
- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview the production build
- `npm run fetch-instances` - Fetch instances list from [instances.social](https://instances.social/), save it to `src/data/instances.json`
- requires `.env.dev` file with `INSTANCES_SOCIAL_SECRET_TOKEN` variable set
## Tech stack
- [Vite](https://vitejs.dev/) - Build tool
- [Preact](https://preactjs.com/) - UI library
- [Valtio](https://valtio.pmnd.rs/) - State management
- [masto.js](https://github.com/neet/masto.js/) - Mastodon API client
- [Iconify](https://iconify.design/) - Icon library
- Vanilla CSS - *Yes, I'm old school.*
Some of these may change in the future. The front-end world is ever-changing.
## Mascot
[Phanpy](https://bulbapedia.bulbagarden.net/wiki/Phanpy_(Pok%C3%A9mon)) is a Ground-type Pokémon.
## Maintainers
- [Chee Aun](https://github.com/cheeaun) ([Mastodon](https://mastodon.social/@cheeaun)) ([Twitter](https://twitter.com/cheeaun))
## Backstory
I am one of the earliest users of Twitter. Twitter was launched on [15 July 2006](https://en.wikipedia.org/wiki/Twitter). I joined on December 2006 and my [first tweet](https://twitter.com/cheeaun/status/1298723) was posted on 18 December 2006.
I know how early Twitter looks like. It was fun.
Back then, I [made a Twitter clone](https://twitter.com/cheeaun/status/789031599) called "Twig" written in Python and Google App Engine. I almost made my own [Twitter desktop client](https://github.com/cheeaun/chidori) written in Appcelerator Titanium. I [gave one of my best talks about the Twitter client](https://www.slideshare.net/cheeaun/story-of-a-thousand-birds) in a mini-conference. I built this thing called "Twitter [Columns](https://twitter.com/columns)", a web app that shows your list of followings, your followings' followings, your followers, your followers' followers and so on. In 2009, I wrote a blog post titled ["How I got started with Twitter"](https://cheeaun.com/blog/2009/04/how-i-got-started-with-twitter/). I created [two](https://twitter.com/cheeaun/status/1273422454) [themes](https://twitter.com/cheeaun/status/1487781343) for DestroyTwitter (a desktop client made with Adobe Air by Jonnie Hallman) and one of them is called ["Vimeo"](https://dribbble.com/shots/31624). In 2013, I wrote [my own tweets backup site](https://github.com/cheeaun/tweets) with a front-end to view my tweets and a [CouchDB backend](https://github.com/cheeaun/tweet-couch) to store them.
It's been **more than 15 years**.
And here I am. Building a Mastodon web client.
## Alternative clients
- [Pinafore](https://pinafore.social/)
- [Elk](https://m.webtoo.ls/@elk)
- [More...](https://github.com/tleb/awesome-mastodon#clients)
## License
[MIT]([LICENSE](https://cheeaun.mit-license.org/)).

BIN
design/logo-2-avatar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

BIN
design/logo-2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

1
design/logo-2.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
design/logo.afdesign Normal file

Binary file not shown.

BIN
design/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 80 KiB

39
design/logo.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 191 KiB

15
index.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Phanpy</title>
<meta name="color-scheme" content="dark light" />
</head>
<body>
<div id="app"></div>
<div id="modal-container"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

3785
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

38
package.json Normal file
View file

@ -0,0 +1,38 @@
{
"name": "phanpy",
"version": "0.1.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"fetch-instances": "env $(cat .env.dev | grep -v \"#\" | xargs) node scripts/fetch-instances-list.js"
},
"dependencies": {
"@github/text-expander-element": "~2.3.0",
"@github/time-elements": "~4.0.0",
"autoprefixer": "~10.4.13",
"fast-blurhash": "~1.1.2",
"history": "~5.3.0",
"iconify-icon": "~1.0.2",
"masto": "~4.9.1",
"mem": "~9.0.2",
"preact": "~10.11.3",
"preact-router": "~4.1.0",
"react-intersection-observer": "~9.4.1",
"valtio": "~1.7.6"
},
"devDependencies": {
"@preact/preset-vite": "~2.4.0",
"@trivago/prettier-plugin-sort-imports": "~4.0.0",
"postcss": "~8.4.19",
"postcss-dark-theme-class": "~0.7.3",
"vite": "3.2.5"
},
"postcss": {
"plugins": {
"postcss-dark-theme-class": {},
"autoprefixer": {}
}
}
}

1
public/favicon.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 8 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="Artboard1" x="0" y="0" width="8" height="8" style="fill:none;"/><g id="Artboard11" serif:id="Artboard1"><path d="M7,2.5c-0.227,-0.681 -0.839,-1.28 -1.5,-1.5c-0.75,-0.25 -2.25,-0.25 -3,0c-0.661,0.22 -1.273,0.819 -1.5,1.5c-0.25,0.75 -0.25,2.25 -0,3c0.227,0.681 0.839,1.28 1.5,1.5c0.75,0.25 2.25,0.25 3,0c0.661,-0.22 1.273,-0.819 1.5,-1.5c0.25,-0.75 0.25,-2.25 0,-3Z" style="fill:#d8e7fe;stroke:#a4bff7;stroke-width:1px;"/><path d="M4.766,3c0.154,0.522 0.292,1.28 0.307,2" style="fill:none;stroke:#6892e2;stroke-width:1px;"/><path d="M3.27,3c-0.154,0.522 -0.292,1.28 -0.307,2" style="fill:none;stroke:#6892e2;stroke-width:1px;"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View file

@ -0,0 +1,23 @@
import fs from 'fs';
const { INSTANCES_SOCIAL_SECRET_TOKEN } = process.env;
const params = new URLSearchParams({
count: 200,
sort_by: 'active_users',
sort_order: 'desc',
});
const url = `https://instances.social/api/1.0/instances/list?${params.toString()}`;
const results = await fetch(url, {
headers: {
Authorization: `Bearer ${INSTANCES_SOCIAL_SECRET_TOKEN}`,
},
});
const json = await results.json();
const names = json.instances.map((instance) => instance.name);
// Write to file
const path = './src/data/instances.json';
fs.writeFileSync(path, JSON.stringify(names, null, '\t'), 'utf8');

433
src/app.css Normal file
View file

@ -0,0 +1,433 @@
html, body {
margin: 0;
padding: 0;
background-color: var(--bg-faded-color);
color: var(--text-color);
overflow: hidden;
}
#app {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.deck-container {
width: 100%;
height: 100vh;
overflow: auto;
transition: opacity 1s ease-in-out;
}
.deck-container[hidden] {
display: block;
position: absolute;
user-select: none;
pointer-events: none;
opacity: 0;
content-visibility: hidden;
}
.deck-container,
.deck.contained {
scroll-padding-top: 4em;
}
.deck {
min-height: 100vh;
margin: auto;
width: 40em;
max-width: 100vw;
border-left: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
background-color: var(--bg-color);
}
.deck.contained {
overflow: auto;
height: 100vh;
}
.deck header {
min-height: 4em;
padding: 0 8px;
position: sticky;
top: 0;
background-color: var(--bg-blur-color);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--divider-color);
z-index: 1;
display: flex;
align-items: center;
cursor: default;
}
.deck header > *:not(button) {
flex-grow: 1;
min-width: 44px;
}
.deck header > .header-side:last-of-type {
text-align: right;
}
.deck header h1 {
margin: 0;
padding: 0;
font-size: 1.2em;
text-align: center;
}
.deck header h1:first-child {
text-align: left;
padding-left: 8px;
}
.deck h2 {
font-size: 1.45em;
}
.deck.padded-bottom .timeline li:last-child {
padding-bottom: 80vh;
}
.timeline {
margin: 0 auto;
padding: 0;
}
.timeline li {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 1px solid var(--divider-color);
}
.timeline.flat li {
border-bottom: none;
}
/* .timeline li.insignificant {
filter: opacity(0.5);
background-color: var(--bg-faded-color);
}
.timeline li.insignificant > * {
opacity: 0.75;
}
.timeline li.insignificant:hover > * {
opacity: 1;
} */
.timeline.contextual li {
--width: 3px;
--left: 40px;
--right: calc(var(--left) + var(--width));
background-image: linear-gradient(to right, transparent, transparent var(--left), var(--comment-line-color) var(--left), var(--comment-line-color) var(--right), transparent var(--right), transparent);
background-repeat: no-repeat;
}
.timeline.contextual li:first-child {
background-position: 0 16px;
}
.timeline.contextual li:last-child {
background-size: 100% 20px;
}
.timeline.contextual li.descendant {
position: relative;
}
.timeline.contextual li.descendant.indirect:before {
--radius: 10px;
--diameter: calc(var(--radius) * 2);
content: '';
position: absolute;
top: 10px;
left: 40px;
width: var(--diameter);
height: var(--diameter);
border-radius: var(--radius);
border-style: solid;
border-width: var(--width);
border-color: transparent transparent var(--comment-line-color) transparent;
transform: rotate(45deg);
}
.timeline.contextual li.descendant.indirect .status-link {
position: relative;
}
.timeline-deck {
padding-bottom: 100px; /* faux nav height */
}
.timeline-deck.compact .status {
max-height: max(25vh, 160px);
overflow: hidden;
mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 80%, transparent 95%);
}
.timeline-deck.compact .status .meta ~ * {
pointer-events: none;
}
.timeline-header {
padding: 0 16px;
opacity: 0.75;
}
.timeline-empty {
color: var(--text-insignificant-color);
padding: 0 16px;
margin-bottom: 3em;
}
.status-loading {
text-align: center;
color: var(--text-insignificant-color);
}
.status-link {
display: block;
text-decoration-line: none;
color: inherit;
transition: background-color 0.2s ease-out;
}
.status-link:hover {
background-color: var(--link-bg-hover-color);
}
.ui-state {
padding: 16px;
text-align: center;
}
.deck-backdrop {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 1000;
display: flex;
background-color: var(--backdrop-color);
}
.deck-backdrop > a {
flex-grow: 1;
backdrop-filter: saturate(.75);
}
@keyframes slide-in {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
.deck-backdrop .deck {
width: 40em;
max-width: 100vw;
border-left: 1px solid var(--divider-color);
background-color: var(--bg-color);
animation: slide-in 0.2s ease-out;
box-shadow: -1px 0 var(--bg-color);
}
.deck-backdrop .deck .status {
max-width: 40em;
}
.decks {
flex-grow: 1;
transition: transform 0.2s ease-in-out;
}
.deck-close {
color: var(--text-insignificant-color) !important;
}
.deck-close:hover {
color: var(--text-color) !important;
}
:is(button, .button).plain.has-badge:after {
content: "";
display: inline-block;
position: absolute;
right: 10px;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: var(--link-color);
opacity: .5;
}
@keyframes fade-from-top {
0% {
transform: translate(-50%, -100%);
opacity: 0;
}
100% {
transform: translate(-50%, 0);
opacity: 1;
}
}
.updates-button {
position: absolute;
animation: fade-from-top 2s ease-out;
left: 50%;
transform: translate(-50%, 0);
}
/* BOX */
.box {
width: 40em;
max-width: 100vw;
text-align: center;
padding: 16px;
margin: 16px;
background-color: var(--bg-color);
border-radius: 8px;
border: 1px solid var(--divider-color);
}
.box-shadow {
box-shadow: 0px 36px 89px rgb(0 0 0 / 4%), 0px 23.3333px 52.1227px rgb(0 0 0 / 3%), 0px 13.8667px 28.3481px rgb(0 0 0 / 2%), 0px 7.2px 14.4625px rgb(0 0 0 / 2%), 0px 2.93333px 7.25185px rgb(0 0 0 / 2%), 0px 0.666667px 3.50231px rgb(0 0 0 / 1%);
}
/* CAROUSEL */
/* use snap, center children, max width viewport */
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
/* scroll-behavior: smooth; */
scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
display: none;
}
.carousel > * {
scroll-snap-align: center;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
.carousel > * :is(img, video) {
width: auto;
max-width: 100vw;
height: auto;
max-height: 100vh;
}
.carousel-controls {
position: fixed;
width: 100%;
bottom: 0;
text-align: center;
padding: 32px;
display: flex;
gap: 8px;
justify-content: space-between;
}
button.carousel-button {
font-weight: bold;
color: var(--link-color);
}
button.carousel-button[hidden] {
display: inline-block;
opacity: 0;
pointer-events: none;
}
.carousel-dots {
border-radius: 999px;
backdrop-filter: blur(12px);
}
button.carousel-dot {
color: var(--text-insignificant-color) !important;
font-weight: bold;
backdrop-filter: none !important;
}
button.carousel-dot:hover,
button.carousel-dot.active {
color: var(--link-color) !important;
}
/* COMPOSE BUTTON */
#compose-button {
position: fixed;
bottom: 16px;
right: 16px;
padding: 16px;
box-shadow: 0 0 32px var(--bg-color);
z-index: 1;
outline: 1px solid var(--bg-color);
opacity: .75;
}
/* SHEET */
@keyframes slide-up {
0% {
transform: translateY(100%);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
.sheet {
align-self: flex-end;
max-height: 90vh;
overflow: auto;
background-color: var(--bg-color);
width: 100%;
max-width: calc(40em - 50px - 16px);
border-radius: 36px 36px 0 0;
padding: 16px;
box-shadow: 0 -1px 32px var(--divider-color);
animation: slide-up 0.2s ease-out;
outline: 1px solid var(--outline-color);
}
/* TAG */
.tag {
font-size: smaller;
color: var(--bg-faded-color);
background-color: var(--text-insignificant-color);
padding: 2px 4px;
border-radius: 4px;
display: inline-block;
margin: 4px;
align-self: center;
}
@media (min-width: 40em) {
#app {
display: flex;
}
.decks:has(~ .deck-backdrop) {
transform: translateX(-5vw);
}
.deck-backdrop .deck {
width: 50%;
min-width: 40em;
}
.timeline-deck {
border: 0;
background-color: transparent;
}
.timeline-deck header {
min-height: 6em;
border-bottom: 0;
background-color: var(--bg-faded-blur-color);
border-bottom: 0;
mask-image: linear-gradient(rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, .7) 80%, rgba(0, 0, 0, .5) 90%, transparent);
}
.deck header h1 {
font-size: 1.5em;
}
.timeline-deck .timeline:not(.flat) li {
border: 1px solid var(--divider-color);
margin: 16px 0;
background-color: var(--bg-color);
border-radius: 16px;
overflow: hidden;
box-shadow: 0px 1px var(--bg-blur-color);
}
.box {
padding: 32px;
}
}

306
src/app.jsx Normal file
View file

@ -0,0 +1,306 @@
import './app.css';
import { createHashHistory } from 'history';
import { login } from 'masto/fetch';
import Router from 'preact-router';
import { useEffect, useLayoutEffect, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
import Account from './components/account';
import Compose from './components/compose';
import Icon from './components/icon';
import Loader from './components/loader';
import Modal from './components/modal';
import Home from './pages/home';
import Login from './pages/login';
import Notifications from './pages/notifications';
import Settings from './pages/settings';
import Status from './pages/status';
import Welcome from './pages/welcome';
import { getAccessToken } from './utils/auth';
import states from './utils/states';
import store from './utils/store';
const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
window._STATES = states;
async function startStream() {
const stream = await masto.stream.streamUser();
console.log('STREAM START', { stream });
stream.on('update', (status) => {
console.log('UPDATE', status);
const inHomeNew = states.homeNew.find((s) => s.id === status.id);
const inHome = states.home.find((s) => s.id === status.id);
if (!inHomeNew && !inHome) {
states.homeNew.unshift({
id: status.id,
reblog: status.reblog?.id,
reply: !!status.inReplyToAccountId,
});
}
states.statuses.set(status.id, status);
if (status.reblog) {
states.statuses.set(status.reblog.id, status.reblog);
}
});
stream.on('status.update', (status) => {
console.log('STATUS.UPDATE', status);
states.statuses.set(status.id, status);
if (status.reblog) {
states.statuses.set(status.reblog.id, status.reblog);
}
});
stream.on('delete', (statusID) => {
console.log('DELETE', statusID);
states.statuses.delete(statusID);
});
stream.on('notification', (notification) => {
console.log('NOTIFICATION', notification);
const inNotificationsNew = states.notificationsNew.find(
(n) => n.id === notification.id,
);
const inNotifications = states.notifications.find(
(n) => n.id === notification.id,
);
if (!inNotificationsNew && !inNotifications) {
states.notificationsNew.unshift(notification);
}
if (notification.status && !states.statuses.has(notification.status.id)) {
states.statuses.set(notification.status.id, notification.status);
if (
notification.status.reblog &&
!states.statuses.has(notification.status.reblog.id)
) {
states.statuses.set(
notification.status.reblog.id,
notification.status.reblog,
);
}
}
});
stream.ws.onclose = () => {
console.log('STREAM CLOSED!');
requestAnimationFrame(() => {
startStream();
});
};
return {
stream,
stopStream: () => {
stream.ws.close();
},
};
}
export function App() {
const snapStates = useSnapshot(states);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [uiState, setUIState] = useState('default');
useLayoutEffect(() => {
const theme = store.local.get('theme');
if (theme) {
document.documentElement.classList.add(`is-${theme}`);
document
.querySelector('meta[name="color-scheme"]')
.setAttribute('content', theme);
}
}, []);
useEffect(() => {
const instanceURL = store.local.get('instanceURL');
const accounts = store.local.getJSON('accounts') || [];
const code = (window.location.search.match(/code=([^&]+)/) || [])[1];
if (code) {
console.log({ code });
// Clear the code from the URL
window.history.replaceState({}, document.title, '/');
const clientID = store.session.get('clientID');
const clientSecret = store.session.get('clientSecret');
(async () => {
setUIState('loading');
const tokenJSON = await getAccessToken({
instanceURL,
client_id: clientID,
client_secret: clientSecret,
code,
});
const { access_token: accessToken } = tokenJSON;
store.session.set('accessToken', accessToken);
window.masto = await login({
url: `https://${instanceURL}`,
accessToken,
});
const mastoAccount = await masto.accounts.verifyCredentials();
console.log({ tokenJSON, mastoAccount });
let account = accounts.find((a) => a.info.id === mastoAccount.id);
if (account) {
account.info = mastoAccount;
account.instanceURL = instanceURL;
account.accessToken = accessToken;
} else {
account = {
info: mastoAccount,
instanceURL,
accessToken,
};
accounts.push(account);
}
store.local.setJSON('accounts', accounts);
store.session.set('currentAccount', account.info.id);
setIsLoggedIn(true);
setUIState('default');
})();
} else if (accounts.length) {
const currentAccount = store.session.get('currentAccount');
const account =
accounts.find((a) => a.info.id === currentAccount) || accounts[0];
const instanceURL = account.instanceURL;
const accessToken = account.accessToken;
store.session.set('currentAccount', account.info.id);
(async () => {
try {
setUIState('loading');
window.masto = await login({
url: `https://${instanceURL}`,
accessToken,
});
setIsLoggedIn(true);
} catch (e) {
setIsLoggedIn(false);
}
setUIState('default');
})();
}
}, []);
const [currentDeck, setCurrentDeck] = useState('home');
useEffect(() => {
// HACK: prevent this from running again due to HMR
if (states.init) return;
if (isLoggedIn) {
requestAnimationFrame(() => {
startStream();
// Collect instance info
(async () => {
const info = await masto.instances.fetch();
console.log(info);
const { uri } = info;
const instances = store.local.getJSON('instances') || {};
instances[uri] = info;
store.local.setJSON('instances', instances);
})();
});
states.init = true;
}
}, [isLoggedIn]);
return (
<>
{isLoggedIn && currentDeck && (
<>
<button
type="button"
id="compose-button"
onClick={() => (states.showCompose = true)}
>
<Icon icon="quill" size="xxl" alt="Compose" />
</button>
<div class="decks">
{/* Home will never be unmounted */}
<Home hidden={currentDeck !== 'home'} />
{/* Notifications can be unmounted */}
{currentDeck === 'notifications' && <Notifications />}
</div>
</>
)}
{!isLoggedIn && uiState === 'loading' && <Loader />}
<Router
history={createHashHistory()}
onChange={(e) => {
// Special handling for Home and Notifications
const { url } = e;
if (/notifications/i.test(url)) {
setCurrentDeck('notifications');
} else if (url === '/') {
setCurrentDeck('home');
document.title = `Home / ${CLIENT_NAME}}`;
} else if (url === '/login' || url === '/welcome') {
setCurrentDeck(null);
}
states.history.push(url);
}}
>
{!isLoggedIn && uiState !== 'loading' && <Welcome path="/" />}
<Welcome path="/welcome" />
{isLoggedIn && <Status path="/s/:id" />}
<Login path="/login" />
</Router>
{!!snapStates.showCompose && (
<Modal>
<Compose
replyToStatus={
typeof snapStates.showCompose !== 'boolean'
? snapStates.showCompose.replyToStatus
: null
}
onClose={(result) => {
states.showCompose = false;
if (result) {
states.reloadStatusPage++;
}
}}
/>
</Modal>
)}
{!!snapStates.showSettings && (
<Modal
onClick={(e) => {
if (e.target === e.currentTarget) {
states.showSettings = false;
}
}}
>
<Settings
onClose={() => {
states.showSettings = false;
}}
/>
</Modal>
)}
{!!snapStates.showAccount && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
states.showAccount = false;
}
}}
>
<Account account={snapStates.showAccount} />
</Modal>
)}
</>
);
}

View file

@ -0,0 +1,30 @@
#account-container.skeleton {
color: var(--outline-color);
}
#account-container header{
display: flex;
align-items: center;
gap: 8px;
}
#account-container .note {
font-size: 95%;
line-height: 1.5;
}
#account-container .stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#account-container .actions {
display: flex;
gap: 8px;
justify-content: space-between;
min-height: 2.5em;
}
#account-container .actions button {
align-self: flex-end;
}

167
src/components/account.jsx Normal file
View file

@ -0,0 +1,167 @@
import './account.css';
import { useEffect, useState } from 'preact/hooks';
import shortenNumber from '../utils/shorten-number';
import Avatar from './avatar';
import NameText from './name-text';
export default ({ account }) => {
const [uiState, setUIState] = useState('default');
const isString = typeof account === 'string';
const [info, setInfo] = useState(isString ? null : account);
useEffect(() => {
if (isString) {
setUIState('loading');
(async () => {
try {
const info = await masto.accounts.lookup({
acct: account,
skip_webfinger: false,
});
setInfo(info);
setUIState('default');
} catch (e) {
alert(e);
setUIState('error');
}
})();
}
}, []);
const {
acct,
avatar,
avatarStatic,
bot,
createdAt,
displayName,
emojis,
fields,
followersCount,
followingCount,
group,
header,
headerStatic,
id,
lastStatusAt,
locked,
note,
statusesCount,
url,
username,
} = info || {};
const [relationshipUIState, setRelationshipUIState] = useState('default');
const [relationship, setRelationship] = useState(null);
useEffect(() => {
if (info) {
setRelationshipUIState('loading');
(async () => {
try {
const relationships = await masto.accounts.fetchRelationships([id]);
console.log('fetched relationship', relationships);
if (relationships.length) {
setRelationship(relationships[0]);
}
setRelationshipUIState('default');
} catch (e) {
console.error(e);
setRelationshipUIState('error');
}
})();
}
}, [info]);
const {
following,
showingReblogs,
notifying,
followedBy,
blocking,
blockedBy,
muting,
mutingNotifications,
requested,
domainBlocking,
endorsed,
} = relationship || {};
return (
<div
id="account-container"
class={`sheet ${uiState === 'loading' ? 'skeleton' : ''}`}
>
{!info || uiState === 'loading' ? (
<>
<header>
<Avatar size="xxl" />
</header>
<div class="note">
<p> </p>
<p> </p>
</div>
<p class="stats">
<span> Posts</span>
<span> Following</span>
<span> Followers</span>
</p>
</>
) : (
<>
<header>
<Avatar url={avatar} size="xxl" />
<NameText account={info} showAcct external />
</header>
<div class="note" dangerouslySetInnerHTML={{ __html: note }} />
<p class="stats">
<span>
<b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts
</span>
<span>
<b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
Following
</span>
<span>
<b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
Followers
</span>
</p>
<p class="actions">
{followedBy ? <span class="tag">Following you</span> : <span />}{' '}
{relationshipUIState !== 'loading' && relationship && (
<button
type="button"
class={following ? 'light' : ''}
disabled={relationshipUIState === 'loading'}
onClick={() => {
setRelationshipUIState('loading');
(async () => {
try {
let newRelationship;
if (following) {
newRelationship = await masto.accounts.unfollow(id);
} else {
newRelationship = await masto.accounts.follow(id);
}
setRelationship(newRelationship);
setRelationshipUIState('default');
} catch (e) {
alert(e);
setRelationshipUIState('error');
}
})();
}}
>
{following ? 'Unfollow' : 'Follow'}
</button>
)}
</p>
</>
)}
</div>
);
};

17
src/components/avatar.css Normal file
View file

@ -0,0 +1,17 @@
.avatar {
display: inline-block;
line-height: 0;
aspect-ratio: 1/1;
border-radius: 50%;
overflow: hidden;
background-color: var(--bg-faded-color);
outline: 1px solid var(--outline-color);
flex-shrink: 0;
}
.avatar img {
width: 100%;
height: 100%;
object-fit: cover;
background-color: var(--img-bg-color);
}

26
src/components/avatar.jsx Normal file
View file

@ -0,0 +1,26 @@
import './avatar.css';
const SIZES = {
s: 16,
m: 20,
l: 24,
xl: 32,
xxl: 50,
};
export default ({ url, size, alt = '' }) => {
size = SIZES[size] || size || SIZES.m;
return (
<span
class="avatar"
style={{
width: size,
height: size,
}}
>
{!!url && (
<img src={url} width={size} height={size} alt={alt} loading="lazy" />
)}
</span>
);
};

232
src/components/compose.css Normal file
View file

@ -0,0 +1,232 @@
#compose-container {
width: 40em;
max-width: 100vw;
align-self: stretch;
animation: fade-in 0.2s ease-out;
max-height: 100vh;
overflow: auto;
}
#compose-container .compose-top {
text-align: right;
display: flex;
justify-content: space-between;
gap: 8px;
align-items: center;
padding: 16px;
position: sticky;
top: 0;
z-index: 100;
}
#compose-container .close-button {
padding: 6px;
color: var(--text-insignificant-color);
}
#compose-container textarea{
width: 100%;
max-width: 100%;
height: 3em;
min-height: 3em;
max-height: 10em;
resize: vertical;
}
@keyframes appear-up {
0% {
opacity: 0;
transform: translateY(10px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
#compose-container .reply-to {
border-radius: 8px 8px 0 0;
max-height: 160px;
pointer-events: none;
filter: saturate(0.25) opacity(0.75);
background-color: var(--bg-blur-color);
margin: 0 12px;
border: 1px solid var(--outline-color);
border-bottom: 0;
/* box-shadow: 0 0 12px var(--divider-color); */
/* mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 90%, transparent); */
animation: appear-up 1s ease-in-out;
}
@keyframes appear-down {
0% {
transform: translateY(-2em);
}
100% {
transform: translateY(0);
}
}
#compose-container form {
border-radius: 8px;
padding: 4px 12px;
background-image: linear-gradient(var(--bg-color) 75%, transparent);
/* outline: 1px solid var(--outline-color); */
/* box-shadow: 0 0 12px var(--divider-color); */
position: relative;
z-index: 1;
}
#compose-container .reply-to ~ form {
animation: appear-down 1s ease-in-out;
box-shadow: 0 -12px 12px -12px var(--divider-color);
}
#compose-container .toolbar {
display: flex;
justify-content: space-between;
padding: 8px 0;
gap: 8px;
}
#compose-container .toolbar.stretch {
justify-content: stretch;
}
#compose-container .toolbar .spoiler-text-field {
flex: 1;
min-width: 0;
}
#compose-container .toolbar-button {
cursor: pointer;
display: inline-block;
background-color: var(--bg-faded-color);
padding: 0 8px;
border-radius: 8px;
min-height: 2.5em;
line-height: 2.5em;
min-width: 2.5em;
text-align: center;
overflow: hidden;
position: relative;
white-space: nowrap;
}
#compose-container .toolbar-button > * {
vertical-align: middle;
cursor: inherit;
}
#compose-container .toolbar-button:has([disabled]) {
cursor: not-allowed;
}
#compose-container .toolbar-button:has([disabled]) > * {
filter: opacity(0.3);
}
#compose-container .toolbar-button:not(.show-field) :is(input[type="checkbox"], select, input[type="file"]) {
opacity: 0;
position: absolute;
left: 0;
height: 100%;
}
#compose-container .toolbar-button input[type="file"] {
/* Move this out of the way, to fix cursor: pointer bug */
left: -100vw !important;
}
#compose-container .toolbar-button select {
background-color: transparent;
border: 0;
outline: 0;
padding: 0 0 0 8px;
}
#compose-container .toolbar-button:not(.show-field) select {
right: 0;
left: auto !important;
}
#compose-container .toolbar-button:hover {
outline: 2px solid var(--divider-color);
}
#compose-container .toolbar-button:active {
filter: brightness(0.8);
}
#compose-container text-expander {
position: relative;
}
#compose-container .text-expander-menu {
color: var(--text-color);
background-color: var(--bg-color);
position: absolute;
margin: 0 0 0 -8px;
padding: 0;
list-style: none;
outline: 1px solid var(--outline-color);
/* box-shadow: 0 0 12px var(--outline-color); */
border-radius: 8px;
overflow: hidden;
top: 0 !important;
z-index: 100;
min-width: 50vw;
}
#compose-container .text-expander-menu li {
white-space: nowrap;
padding: 8px;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
display: flex;
gap: 8px;
align-items: center;
font-size: 90%;
}
#compose-container .text-expander-menu li img {
/* The shortcode emojis */
width: 1em;
height: 1em;
}
#compose-container .text-expander-menu li .avatar {
width: 2.2em;
height: 2.2em;
}
#compose-container .text-expander-menu li:hover {
color: var(--bg-color);
background-color: var(--link-color);
}
#compose-container .media-attachments {
background-color: var(--bg-faded-color);
padding: 8px;
border-radius: 8px;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
#compose-container .media-attachment {
display: flex;
gap: 8px;
align-items: stretch;
}
#compose-container .media-preview {
flex-shrink: 1;
}
#compose-container .media-preview > *{
min-width: 80px;
width: 80px !important;
height: 80px;
object-fit: contain;
background-color: var(--img-bg-color);
border-radius: 8px;
outline: 1px solid var(--outline-color);
}
#compose-container .media-attachment textarea {
height: 80px;
flex-grow: 1;
resize: none;
}
#compose-container .media-aside {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
#compose-container .media-aside .close-button {
padding: 4px;
align-self: flex-start;
color: var(--text-insignificant-color);
}
#compose-container .media-aside .uploaded {
color: var(--green-color);
margin-bottom: 4px;
}

527
src/components/compose.jsx Normal file
View file

@ -0,0 +1,527 @@
import './compose.css';
import '@github/text-expander-element';
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
import emojifyText from '../utils/emojify-text';
import store from '../utils/store';
import visibilityIconsMap from '../utils/visibility-icons-map';
import Avatar from './avatar';
import Icon from './icon';
import Loader from './loader';
import Status from './status';
/* NOTES:
- Max character limit includes BOTH status text and Content Warning text
*/
export default ({ onClose, replyToStatus }) => {
const [uiState, setUIState] = useState('default');
const accounts = store.local.getJSON('accounts');
const currentAccount = store.session.get('currentAccount');
const currentAccountInfo = accounts.find(
(a) => a.info.id === currentAccount,
).info;
const configuration = useMemo(() => {
const instances = store.local.getJSON('instances');
const currentInstance = accounts.find(
(a) => a.info.id === currentAccount,
).instanceURL;
const config = instances[currentInstance].configuration;
console.log(config);
return config;
}, []);
const {
statuses: { maxCharacters, maxMediaAttachments, charactersReservedPerUrl },
mediaAttachments: {
supportedMimeTypes,
imageSizeLimit,
imageMatrixLimit,
videoSizeLimit,
videoMatrixLimit,
videoFrameRateLimit,
},
polls: { maxOptions, maxCharactersPerOption, maxExpiration, minExpiration },
} = configuration;
const textareaRef = useRef();
const [visibility, setVisibility] = useState(
replyToStatus?.visibility || 'public',
);
const [sensitive, setSensitive] = useState(replyToStatus?.sensitive || false);
const spoilerTextRef = useRef();
useEffect(() => {
let timer = setTimeout(() => {
const spoilerText = replyToStatus?.spoilerText;
if (spoilerText && spoilerTextRef.current) {
spoilerTextRef.current.value = spoilerText;
spoilerTextRef.current.focus();
} else {
textareaRef.current?.focus();
}
}, 0);
return () => clearTimeout(timer);
}, []);
const textExpanderRef = useRef();
const textExpanderTextRef = useRef('');
useEffect(() => {
if (textExpanderRef.current) {
const handleChange = (e) => {
console.log('text-expander-change', e);
const { key, provide, text } = e.detail;
textExpanderTextRef.current = text;
if (text === '') {
provide(
Promise.resolve({
matched: false,
}),
);
return;
}
const type = {
'@': 'accounts',
'#': 'hashtags',
}[key];
provide(
new Promise((resolve) => {
const resultsIterator = masto.search({
type,
q: text,
limit: 5,
});
resultsIterator.next().then(({ value }) => {
if (text !== textExpanderTextRef.current) {
return;
}
const results = value[type];
console.log('RESULTS', value, results);
const menu = document.createElement('ul');
menu.role = 'listbox';
menu.className = 'text-expander-menu';
results.forEach((result) => {
const {
name,
avatarStatic,
displayName,
username,
acct,
emojis,
} = result;
const displayNameWithEmoji = emojifyText(displayName, emojis);
const item = document.createElement('li');
item.setAttribute('role', 'option');
if (acct) {
item.dataset.value = acct;
// Want to use <Avatar /> here, but will need to render to string 😅
item.innerHTML = `
<span class="avatar">
<img src="${avatarStatic}" width="16" height="16" alt="" loading="lazy" />
</span>
<span>
<b>${displayNameWithEmoji || username}</b>
<br>@${acct}
</span>
`;
} else {
item.dataset.value = name;
item.innerHTML = `
<span>#<b>${name}</b></span>
`;
}
menu.appendChild(item);
});
console.log('MENU', results, menu);
resolve({
matched: results.length > 0,
fragment: menu,
});
});
}),
);
};
textExpanderRef.current.addEventListener(
'text-expander-change',
handleChange,
);
textExpanderRef.current.addEventListener('text-expander-value', (e) => {
const { key, item } = e.detail;
e.detail.value = key + item.dataset.value;
});
}
}, []);
const [mediaAttachments, setMediaAttachments] = useState([]);
const formRef = useRef();
const beforeUnloadCopy =
'You have unsaved changes. Are you sure you want to discard this post?';
const canClose = () => {
// check for status or mediaAttachments
if (textareaRef.current.value || mediaAttachments.length > 0) {
const yes = confirm(beforeUnloadCopy);
return yes;
}
return true;
};
useEffect(() => {
// Show warning if user tries to close window with unsaved changes
const handleBeforeUnload = (e) => {
if (!canClose()) {
e.preventDefault();
e.returnValue = beforeUnloadCopy;
}
};
window.addEventListener('beforeunload', handleBeforeUnload, {
capture: true,
});
return () =>
window.removeEventListener('beforeunload', handleBeforeUnload, {
capture: true,
});
}, []);
return (
<div id="compose-container">
<div class="compose-top">
{currentAccountInfo?.avatarStatic && (
<Avatar
url={currentAccountInfo.avatarStatic}
size="l"
alt={currentAccountInfo.username}
/>
)}
<button
type="button"
class="light close-button"
onClick={() => {
if (canClose()) {
onClose();
}
}}
>
<Icon icon="x" />
</button>
</div>
{!!replyToStatus && (
<div class="reply-to">
<Status status={replyToStatus} size="s" />
</div>
)}
<form
ref={formRef}
style={{
pointerEvents: uiState === 'loading' ? 'none' : 'auto',
opacity: uiState === 'loading' ? 0.5 : 1,
}}
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.target);
const entries = Object.fromEntries(formData.entries());
console.log('ENTRIES', entries);
let { status, visibility, sensitive, spoilerText } = entries;
// Pre-cleanup
sensitive = sensitive === 'on'; // checkboxes return "on" if checked
// Validation
if (status.length > maxCharacters) {
alert(`Status is too long! Max characters: ${maxCharacters}`);
return;
}
if (sensitive && status.length + spoilerText.length > maxCharacters) {
alert(
`Status and content warning is too long! Max characters: ${maxCharacters}`,
);
return;
}
// TODO: check for URLs and use `charactersReservedPerUrl` to calculate max characters
// Post-cleanup
spoilerText = (sensitive && spoilerText) || undefined;
status = status === '' ? undefined : status;
setUIState('loading');
(async () => {
try {
console.log('MEDIA ATTACHMENTS', mediaAttachments);
if (mediaAttachments.length > 0) {
// Upload media attachments first
const mediaPromises = mediaAttachments.map((attachment) => {
const params = {
file: attachment.file,
description: attachment.description || undefined,
};
return masto.mediaAttachments.create(params).then((res) => {
// Update media attachment with ID
if (res.id) {
attachment.id = res.id;
}
return res;
});
});
const results = await Promise.allSettled(mediaPromises);
// If any failed, return
if (
results.some(
(result) =>
result.status === 'rejected' || !result.value.id,
)
) {
setUIState('error');
// Alert all the reasons
results.forEach((result) => {
if (result.status === 'rejected') {
alert(result.reason || `Attachment #${i} failed`);
}
});
return;
}
console.log({ results, mediaAttachments });
}
const params = {
status,
visibility,
sensitive,
spoilerText,
inReplyToId: replyToStatus?.id || undefined,
mediaIds: mediaAttachments.map((attachment) => attachment.id),
};
console.log('POST', params);
const newStatus = await masto.statuses.create(params);
setUIState('default');
// Close
onClose({
newStatus,
});
} catch (e) {
alert(e);
setUIState('error');
}
})();
}}
>
<div class="toolbar stretch">
<input
ref={spoilerTextRef}
type="text"
name="spoilerText"
placeholder="Spoiler text"
disabled={uiState === 'loading'}
class="spoiler-text-field"
style={{
opacity: sensitive ? 1 : 0,
pointerEvents: sensitive ? 'auto' : 'none',
}}
/>
<label
class="toolbar-button"
title="Content warning or sensitive media"
>
<input
name="sensitive"
type="checkbox"
disabled={uiState === 'loading'}
onChange={(e) => {
const sensitive = e.target.checked;
setSensitive(sensitive);
if (sensitive) {
spoilerTextRef.current?.focus();
} else {
textareaRef.current?.focus();
}
}}
/>
<Icon icon={`eye-${sensitive ? 'close' : 'open'}`} />
</label>{' '}
<label
class={`toolbar-button ${
visibility !== 'public' && !sensitive ? 'show-field' : ''
}`}
title={`Visibility: ${visibility}`}
>
<Icon icon={visibilityIconsMap[visibility]} alt={visibility} />
<select
name="visibility"
value={visibility}
onChange={(e) => {
setVisibility(e.target.value);
}}
disabled={uiState === 'loading'}
>
<option value="public">
Public <Icon icon="earth" />
</option>
<option value="unlisted">Unlisted</option>
<option value="private">Followers only</option>
<option value="direct">Direct</option>
</select>
</label>{' '}
</div>
<text-expander ref={textExpanderRef} keys="@ #">
<textarea
class="large"
ref={textareaRef}
placeholder={
replyToStatus ? 'Post your reply' : 'What are you doing?'
}
required={mediaAttachments.length === 0}
autoCapitalize="sentences"
autoComplete="on"
autoCorrect="on"
spellCheck="true"
dir="auto"
rows="6"
cols="50"
name="status"
disabled={uiState === 'loading'}
onInput={(e) => {
const { scrollHeight, offsetHeight, clientHeight, value } =
e.target;
const offset = offsetHeight - clientHeight;
e.target.style.height = value
? scrollHeight + offset + 'px'
: null;
}}
style={{
maxHeight: `${maxCharacters / 50}em`,
}}
></textarea>
</text-expander>
{mediaAttachments.length > 0 && (
<div class="media-attachments">
{mediaAttachments.map((attachment, i) => {
const { url, type, id } = attachment;
const suffixType = type.split('/')[0];
return (
<div class="media-attachment" key={i + id}>
<div class="media-preview">
{suffixType === 'image' ? (
<img src={url} alt="" />
) : suffixType === 'video' ? (
<video src={url} playsinline muted />
) : suffixType === 'audio' ? (
<audio src={url} controls />
) : null}
</div>
<textarea
placeholder={
{
image: 'Image description',
video: 'Video description',
audio: 'Audio description',
}[suffixType]
}
autoCapitalize="sentences"
autoComplete="on"
autoCorrect="on"
spellCheck="true"
dir="auto"
disabled={uiState === 'loading'}
maxlength="1500"
// TODO: Un-hard-code this maxlength, ref: https://github.com/mastodon/mastodon/blob/b59fb28e90bc21d6fd1a6bafd13cfbd81ab5be54/app/models/media_attachment.rb#L39
onInput={(e) => {
const { value } = e.target;
// Modify `description` in media attachment
setMediaAttachments((attachments) => {
const newAttachments = [...attachments];
newAttachments[i].description = value;
return newAttachments;
});
}}
></textarea>
<div class="media-aside">
<button
type="button"
class="plain close-button"
disabled={uiState === 'loading'}
onClick={() => {
setMediaAttachments((attachments) => {
return attachments.filter((_, j) => j !== i);
});
}}
>
<Icon icon="x" />
</button>
{!!id && (
<Icon icon="upload" title="Uploaded" class="uploaded" />
)}
</div>
</div>
);
})}
</div>
)}
<div class="toolbar">
<div>
<label class="toolbar-button">
<input
type="file"
accept={supportedMimeTypes.join(',')}
multiple={mediaAttachments.length < maxMediaAttachments - 1}
disabled={
uiState === 'loading' ||
mediaAttachments.length >= maxMediaAttachments
}
onChange={(e) => {
const files = e.target.files;
if (!files) return;
const mediaFiles = Array.from(files).map((file) => ({
file,
type: file.type,
size: file.size,
url: URL.createObjectURL(file),
id: null, // indicate uploaded state
description: null,
}));
console.log('MEDIA ATTACHMENTS', files, mediaFiles);
// Validate max media attachments
if (
mediaAttachments.length + mediaFiles.length >
maxMediaAttachments
) {
alert(
`You can only attach up to ${maxMediaAttachments} files.`,
);
} else {
setMediaAttachments((attachments) => {
return attachments.concat(mediaFiles);
});
}
}}
/>
<Icon icon="attachment" />
</label>
</div>
<div>
{uiState === 'loading' && <Loader />}{' '}
<button
type="submit"
class="large"
disabled={uiState === 'loading'}
>
{replyToStatus ? 'Reply' : 'Post'}
</button>
</div>
</div>
</form>
</div>
);
};

59
src/components/icon.jsx Normal file
View file

@ -0,0 +1,59 @@
const SIZES = {
s: 12,
m: 16,
l: 20,
xl: 24,
xxl: 32,
};
const ICONS = {
x: 'mingcute:close-line',
heart: 'mingcute:heart-line',
bookmark: 'mingcute:bookmark-line',
'check-circle': 'mingcute:check-circle-line',
transfer: 'mingcute:transfer-4-line',
rocket: 'mingcute:rocket-line',
'arrow-left': 'mingcute:arrow-left-line',
'arrow-right': 'mingcute:arrow-right-line',
'arrow-up': 'mingcute:arrow-up-line',
earth: 'mingcute:earth-line',
lock: 'mingcute:lock-line',
unlock: 'mingcute:unlock-line',
'eye-close': 'mingcute:eye-close-line',
'eye-open': 'mingcute:eye-2-line',
message: 'mingcute:mail-line',
comment: 'mingcute:chat-3-line',
home: 'mingcute:home-5-line',
notification: 'mingcute:notification-line',
follow: 'mingcute:user-follow-line',
'follow-add': 'mingcute:user-add-line',
poll: 'mingcute:chart-bar-line',
pencil: 'mingcute:pencil-line',
quill: 'mingcute:quill-pen-line',
at: 'mingcute:at-line',
attachment: 'mingcute:attachment-line',
upload: 'mingcute:upload-3-line',
gear: 'mingcute:settings-3-line',
};
export default ({ icon, size = 'm', alt, title, class: className = '' }) => {
const iconSize = SIZES[size];
const iconName = ICONS[icon];
return (
<div
class={`icon ${className}`}
title={title || alt}
style={{
width: `${iconSize}px`,
height: `${iconSize}px`,
display: 'inline-block',
overflow: 'hidden',
lineHeight: 0,
}}
>
<iconify-icon width={iconSize} height={iconSize} icon={iconName}>
{alt}
</iconify-icon>
</div>
);
};

43
src/components/loader.css Normal file
View file

@ -0,0 +1,43 @@
.loader-container {
display: inline-block;
width: 16px;
height: 16px;
pointer-events: none;
animation: slow-appear .3s ease-in-out 1s both;
vertical-align: middle;
}
@keyframes slow-appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.loader-container.abrupt {
animation: none;
}
.loader-container.hidden {
visibility: hidden;
}
.loader {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2.5px solid;
border-color: var(--loader-color) var(--loader-color) transparent transparent;
animation: loader 1s infinite linear;
}
@keyframes loader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.loader-container.hidden .loader {
animation: none;
}

11
src/components/loader.jsx Normal file
View file

@ -0,0 +1,11 @@
import './loader.css';
export default ({ abrupt, hidden }) => (
<div
class={`loader-container ${abrupt ? 'abrupt' : ''} ${
hidden ? 'hidden' : ''
}`}
>
<div class="loader" />
</div>
);

17
src/components/modal.css Normal file
View file

@ -0,0 +1,17 @@
#modal-container > div {
position: fixed;
top: 0;
right: 0;
height: 100%;
width: 100%;
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--backdrop-color);
backdrop-filter: blur(24px);
}
#modal-container > .light {
backdrop-filter: saturate(.75);
}

20
src/components/modal.jsx Normal file
View file

@ -0,0 +1,20 @@
import './modal.css';
import { createPortal } from 'preact/compat';
import { useEffect } from 'preact/hooks';
const $modalContainer = document.getElementById('modal-container');
export default ({ children, onClick, class: className }) => {
if (!children) return null;
const Modal = (
<div className={className} onClick={onClick}>
{children}
</div>
);
return createPortal(Modal, $modalContainer);
// return createPortal(children, $modalContainer);
};

View file

@ -0,0 +1,19 @@
.name-text {
color: inherit;
text-decoration: none;
display: inline-block;
}
a.name-text:hover b,
a.name-text.short:hover i {
text-decoration: underline;
text-decoration-color: var(--text-insignificant-color);
}
.name-text i {
font-style: normal;
opacity: 0.75;
}
.name-text .avatar {
vertical-align: middle;
margin-right: 4px;
}

View file

@ -0,0 +1,58 @@
import './name-text.css';
import emojifyText from '../utils/emojify-text';
import states from '../utils/states';
import Avatar from './avatar';
export default ({ account, showAvatar, showAcct, short, external }) => {
const { acct, avatar, avatarStatic, id, url, displayName, username, emojis } =
account;
const displayNameWithEmoji = emojifyText(displayName, emojis);
return (
<a
class={`name-text ${short ? 'short' : ''}`}
href={url}
target="_blank"
title={`@${acct}`}
onClick={(e) => {
if (external) return;
e.preventDefault();
states.showAccount = account;
}}
>
{showAvatar && (
<>
<Avatar url={avatar} />{' '}
</>
)}
{displayName && !short ? (
<>
<b
dangerouslySetInnerHTML={{
__html: displayNameWithEmoji,
}}
/>
{!showAcct && (
<>
{' '}
<i>@{username}</i>
</>
)}
</>
) : short ? (
<i>@{username}</i>
) : (
<b>@{username}</b>
)}
{showAcct && (
<>
<br />
<i>@{acct}</i>
</>
)}
</a>
);
};

438
src/components/status.css Normal file
View file

@ -0,0 +1,438 @@
/* REBLOG + REPLY-TO */
.status-reblog {
background: linear-gradient(to bottom right, var(
--reblog-faded-color
), transparent 160px);
}
.status-reply-to {
background: linear-gradient(to bottom right, var(
--reply-to-faded-color
), transparent 160px);
}
.status-reblog .status-reply-to {
background: linear-gradient(to top left, var(
--reply-to-faded-color
), transparent 160px);
}
/* STATUS PRE META */
.status-pre-meta {
line-height: 1.5;
padding: 8px 16px 0;
opacity: 0.75;
font-size: smaller;
vertical-align: middle;
}
.status-pre-meta .icon {
color: var(--reblog-color);
vertical-align: middle;
margin-right: 4px;
}
/* STATUS */
.status {
display: flex;
padding: 16px 16px 20px;
line-height: 1.5;
align-items: flex-start;
}
.status.large {
padding-bottom: 8px;
}
.status-pre-meta + .status {
padding-top: 8px;
}
.status.small {
font-size: 95%;
}
.status.skeleton {
color: var(--outline-color);
}
.status.skeleton > .avatar {
background-color: var(--outline-color);
}
.indirect .status {
padding-left: 57px;
}
.indirect .status > .avatar {
width: 25px !important;
height: 25px !important;
}
.status:not(.small) .container {
padding-left: 16px;
flex-grow: 1;
min-width: 0;
}
.status.large > .container > .meta {
display: flex;
gap: 8px;
min-height: 50px;
justify-content: space-between;
}
.status > .container > .meta .arrow {
color: var(--reply-to-color);
vertical-align: middle;
}
.status > .container > .meta .time {
color: inherit;
text-align: end;
opacity: 0.5;
text-decoration: none;
flex-shrink: 0;
margin-left: 4px;
white-space: nowrap;
}
.status > .container > .meta a.time:hover {
text-decoration: underline;
}
.status > .container > .meta .reply-to {
opacity: 0.5;
font-size: smaller;
}
.status.large .content-container {
margin-left: calc(-50px - 16px);
background-image: linear-gradient(to bottom, transparent, var(--bg-color) 10px, var(--bg-color));
padding-top: 10px;
padding-bottom: 10px;
}
.status .content-container.has-spoiler .spoiler {
margin: 8px 0;
font-size: 90%;
outline: 1px dashed var(--button-bg-color);
display: flex;
gap: 8px;
align-items: center;
}
.status .content-container.has-spoiler .spoiler ~ * {
filter: blur(6px) invert(.5);
pointer-events: none;
transition: filter .5s;
user-select: none;
}
.status .content-container.has-spoiler .spoiler ~ .content ~ * {
opacity: .5;
}
.status .content-container.show-spoiler .spoiler {
outline-style: dotted;
}
.status .content-container.show-spoiler .spoiler ~ * {
filter: none;
pointer-events: auto;
user-select: auto;
}
.status .content-container.has-spoiler .spoiler ~ .content ~ * {
opacity: 1;
}
.status .content {
margin-top: 8px;
}
.status .content p {
margin-block: .75em;
}
.status .content p:first-child {
margin-block-start: 0;
}
.status .content p:last-child {
margin-block-end: 0;
}
.status .content .invisible {
display: none;
}
.status .content .ellipsis::after {
content: '…';
}
.status:hover .content a {
text-decoration-line: underline;
}
.status .content a.mention {
text-decoration-line: none;
}
.status .content a.mention span {
text-decoration-line: underline;
text-decoration-color: inherit;
}
.status .content a.hashtag {
color: var(--link-light-color);
}
.status .content a.hashtag span{
color: var(--text-color);
}
.status .content a.u-url span{
color: var(--text-color);
}
.status.large .content {
font-size: 150%;
}
.status.large .poll,
.status.large .actions {
font-size: 125%;
}
/* MEDIA */
.status .media-container {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
flex-direction: row;
}
.status .media {
flex-grow: 1;
flex-basis: calc(50% - 8px);
border-radius: 8px;
overflow: hidden;
max-height: 160px;
outline: 1px solid var(--outline-color);
}
.status .media:hover {
outline-color: var(--outline-hover-color);
}
.status .media.block {
flex-basis: 100%;
max-height: auto;
}
.status .media :is(img, video) {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
}
@keyframes position-object {
0% {
object-position: 50% 50%;
}
25% {
object-position: 0% 0%;
}
75% {
object-position: 100% 100%;
}
100% {
object-position: 50% 50%;
}
}
.status .media img:hover {
animation: position-object 5s ease-in-out 1s infinite;
}
.status .media video {
width: 100%;
height: 100%;
object-fit: contain;
}
.status .media-video {
position: relative;
}
.status .media-video:after {
/* show play icon */
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 26.0px;
border-color: transparent transparent transparent var(--text-color);
pointer-events: none;
filter: drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color)) drop-shadow(0 0 10px var(--bg-color));
opacity: 0.75;
}
.status .media-video:hover:after {
opacity: 1;
}
.status .media-gif video {
object-fit: cover;
}
.status .media-audio {
outline: 0;
}
.status .media-audio audio {
width: 100%;
}
/* CARD */
.card {
display: flex;
margin-top: 8px;
border-radius: 8px;
outline: 1px solid var(--outline-color);
overflow: hidden;
gap: 8px;
color: inherit;
align-items: center;
background: var(--bg-color);
}
.card .image {
min-width: 120px;
max-width: 160px;
height: auto;
min-height: 120px;
max-height: 160px;
object-fit: cover;
outline: 1px solid var(--outline-color);
}
.card:hover .image {
animation: position-object 5s ease-in-out 1s infinite;
}
.card p {
margin: 0;
}
.card .meta-container {
padding: 4px;
}
.card .title {
font-weight: normal;
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
display: box;
-webkit-box-orient: vertical;
box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.card .meta {
font-size: smaller;
opacity: 0.75;
margin: 0;
}
.card .meta.domain {
opacity: 1;
color: var(--link-color);
}
a.card {
text-decoration: none;
transition: opacity 0.2s ease-in-out;
}
a.card:hover {
outline: 1px solid var(--outline-hover-color);
}
.card.video {
max-width: 320px;
max-height: 320px;
}
.card.video iframe {
width: 100%;
height: 100%;
}
/* POLLS */
.poll-option {
margin-top: 8px;
padding: 8px;
display: flex;
gap: 8px;
justify-content: space-between;
background-image: linear-gradient(to right, var(--link-faded-color), var(--link-faded-color) var(--percentage), transparent var(--percentage), transparent);
border-radius: 8px;
outline: 1px solid rgba(128, 128, 128, .1);
align-items: center;
}
.poll-label {
width: 100%;
display: flex;
gap: 8px;
cursor: pointer;
}
.poll-vote-button {
margin-top: 8px;
}
.poll-meta {
margin: 8px 0;
}
/* ACTIONS */
.status .actions {
margin-left: -8px; /* visual balance */
padding-top: 16px;
display: flex;
gap: 8px;
justify-content: space-between;
}
.status.large .actions {
/* margin-left: -12px; */
padding-top: 8px;
padding-bottom: 16px;
margin-left: calc(-50px - 16px);
background-image: linear-gradient(to bottom, var(--bg-color), var(--bg-color) calc(100% - 10px), transparent);
}
.status .actions > * {
opacity: .5;
transition: opacity 0.2s ease-in-out;
}
.status:hover .actions > * {
opacity: 1;
}
.status .actions > button {
min-height: 40px;
min-width: 40px;
padding: 0 8px;
}
.status .actions > button.plain {
color: var(--text-insignificant-color);
}
.status .actions > button.plain:hover {
color: var(--link-color);
background-color: var(--button-plain-bg-hover-color);
}
.status .actions > button.plain.reblog-button:hover {
color: var(--reblog-color);
}
.status .actions > button.plain.reblog-button.reblogged {
color: var(--reblog-color);
outline: 1.5px solid var(--reblog-color);
}
.status .actions > button.plain.favourite-button:hover {
color: var(--favourite-color);
}
.status .actions > button.plain.favourite-button.favourited {
color: var(--favourite-color);
outline: 1.5px solid var(--favourite-color);
}
.status .actions > button.plain.bookmark-button.bookmarked {
color: var(--link-color);
outline: 1.5px solid var(--link-color);
}
/* ENHANCED CONTENT */
.status .content pre {
border-radius: 8px;
padding: 8px;
margin: 8px 0;
overflow: auto;
width: 100%;
font-size: 90%;
outline: 1px solid var(--outline-color);
background: linear-gradient(to bottom right, var(
--bg-faded-color
), transparent 160px);
}
/* MISC */
.status-aside {
padding: 0 16px 16px 80px;
color: var(--text-insignificant-color);
}
.shortcode-emoji {
width: 1.2em;
height: 1.2em;
vertical-align: middle;
object-fit: contain;
}

835
src/components/status.jsx Normal file
View file

@ -0,0 +1,835 @@
import './status.css';
import { getBlurHashAverageColor } from 'fast-blurhash';
import mem from 'mem';
import { useEffect, useRef, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
import Modal from '../components/modal';
import NameText from '../components/name-text';
import enhanceContent from '../utils/enhance-content';
import shortenNumber from '../utils/shorten-number';
import states from '../utils/states';
import visibilityIconsMap from '../utils/visibility-icons-map';
import Avatar from './avatar';
import Icon from './icon';
/*
Media type
===
unknown = unsupported or unrecognized file type
image = Static image
gifv = Looping, soundless animation
video = Video clip
audio = Audio track
*/
function Media({ media, showOriginal, onClick }) {
const { blurhash, description, meta, previewUrl, remoteUrl, url, type } =
media;
const { original, small, focus } = meta || {};
const width = showOriginal ? original?.width : small?.width;
const height = showOriginal ? original?.height : small?.height;
const mediaURL = showOriginal ? url : previewUrl;
const rgbAverageColor = blurhash ? getBlurHashAverageColor(blurhash) : null;
const videoRef = useRef();
let focalBackgroundPosition;
if (focus) {
// Convert focal point to CSS background position
// Formula from jquery-focuspoint
// x = -1, y = 1 => 0% 0%
// x = 0, y = 0 => 50% 50%
// x = 1, y = -1 => 100% 100%
const x = ((focus.x + 1) / 2) * 100;
const y = ((1 - focus.y) / 2) * 100;
focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
}
if (type === 'image') {
return (
<div
class={`media media-image`}
onClick={onClick}
style={
showOriginal && {
backgroundImage: `url(${previewUrl})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
backgroundPosition: focalBackgroundPosition || 'center',
aspectRatio: `${width}/${height}`,
width,
height,
maxWidth: '100%',
maxHeight: '100%',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}
}
>
<img
src={mediaURL}
alt={description}
width={width}
height={height}
style={
!showOriginal && {
backgroundColor: `rgb(${rgbAverageColor.join(',')})`,
backgroundPosition: focalBackgroundPosition || 'center',
}
}
/>
</div>
);
} else if (type === 'gifv' || type === 'video') {
// 20 seconds, treat as a gif
const isGIF = type === 'gifv' && original.duration <= 20;
return (
<div
class={`media media-${isGIF ? 'gif' : 'video'}`}
style={{
backgroundColor: `rgb(${rgbAverageColor.join(',')})`,
}}
onClick={onClick}
onMouseEnter={() => {
if (isGIF) {
try {
videoRef.current?.play();
} catch (e) {}
}
}}
onMouseLeave={() => {
if (isGIF) {
try {
videoRef.current?.pause();
} catch (e) {}
}
}}
>
{showOriginal ? (
<video
src={url}
poster={previewUrl}
width={width}
height={height}
preload
autoplay
controls={!isGIF}
playsinline
loop
></video>
) : isGIF ? (
<video
ref={videoRef}
src={url}
poster={previewUrl}
width={width}
height={height}
preload
// controls
playsinline
loop
muted
/>
) : (
<img
src={previewUrl}
alt={description}
width={width}
height={height}
/>
)}
</div>
);
} else if (type === 'audio') {
return (
<div class="media media-audio">
<audio src={remoteUrl || url} preload="none" controls />
</div>
);
}
}
function Card({ card }) {
const {
blurhash,
title,
description,
html,
providerName,
authorName,
width,
height,
image,
url,
type,
embedUrl,
} = card;
/* type
link = Link OEmbed
photo = Photo OEmbed
video = Video OEmbed
rich = iframe OEmbed. Not currently accepted, so wont show up in practice.
*/
const hasText = title || providerName || authorName;
if (hasText && image) {
const domain = new URL(url).hostname;
return (
<a
href={url}
target="_blank"
rel="nofollow noopener noreferrer"
class="card link"
>
<img
class="image"
src={image}
width={width}
height={height}
alt=""
onError={() => {
this.style.display = 'none';
}}
/>
<div class="meta-container">
<p
class="title"
dangerouslySetInnerHTML={{
__html: title,
}}
/>
<p class="meta">{providerName || authorName}</p>
<p class="meta domain">{domain}</p>
</div>
</a>
);
} else if (type === 'photo') {
return (
<a
href={url}
target="_blank"
rel="nofollow noopener noreferrer"
class="card photo"
>
<img
src={embedUrl}
width={width}
height={height}
alt={title || description}
style={{
height: 'auto',
aspectRatio: `${width}/${height}`,
}}
/>
</a>
);
} else if (type === 'video') {
return (
<div
class="card video"
style={{
aspectRatio: `${width}/${height}`,
}}
dangerouslySetInnerHTML={{ __html: html }}
/>
);
}
}
function Poll({ poll }) {
const [pollSnapshot, setPollSnapshot] = useState(poll);
const [uiState, setUIState] = useState('default');
const {
expired,
expiresAt,
id,
multiple,
options,
ownVotes,
voted,
votersCount,
votesCount,
} = pollSnapshot;
const expiresAtDate = new Date(expiresAt);
return (
<div class="poll">
{voted || expired ? (
options.map((option, i) => {
const { title, votesCount: optionVotesCount } = option;
const percentage = Math.round((optionVotesCount / votesCount) * 100);
return (
<div
class="poll-option"
style={{
'--percentage': `${percentage}%`,
}}
>
<div class="poll-option-title">
{title}
{voted && ownVotes.includes(i) && (
<>
{' '}
<Icon icon="check" size="s" />
</>
)}
</div>
<div
class="poll-option-votes"
title={`${optionVotesCount} vote${
optionVotesCount === 1 ? '' : 's'
}`}
>
{percentage}%
</div>
</div>
);
})
) : (
<form
onSubmit={async (e) => {
e.preventDefault();
const form = e.target;
const formData = new FormData(form);
const votes = [];
formData.forEach((value, key) => {
if (key === 'poll') {
votes.push(value);
}
});
console.log(votes);
setUIState('loading');
const pollResponse = await masto.poll.vote(id, {
choices: votes,
});
console.log(pollResponse);
setPollSnapshot(pollResponse);
setUIState('default');
}}
style={{
pointerEvents: uiState === 'loading' ? 'none' : 'auto',
opacity: uiState === 'loading' ? 0.5 : 1,
}}
>
{options.map((option, i) => {
const { title } = option;
return (
<div class="poll-option">
<label class="poll-label">
<input
type={multiple ? 'checkbox' : 'radio'}
name="poll"
value={i}
disabled={uiState === 'loading'}
/>
<span class="poll-option-title">{title}</span>
</label>
</div>
);
})}
<button
class="poll-vote-button"
type="submit"
disabled={uiState === 'loading'}
>
Vote
</button>
</form>
)}
<p class="poll-meta">
<span title={votersCount}>{shortenNumber(votersCount)}</span>{' '}
{votersCount === 1 ? 'voter' : 'voters'}
{votersCount !== votesCount && (
<>
{' '}
&bull; <span title={votesCount}>
{shortenNumber(votesCount)}
</span>{' '}
vote
{votesCount === 1 ? '' : 's'}
</>
)}{' '}
&bull; {expired ? 'Ended' : 'Ending'}{' '}
<relative-time datetime={expiresAtDate.toISOString()} />
</p>
</div>
);
}
function fetchAccount(id) {
return masto.accounts.fetch(id);
}
const memFetchAccount = mem(fetchAccount);
function Status({ statusID, status, withinContext, size = 'm', skeleton }) {
if (skeleton) {
return (
<div class="status skeleton">
<Avatar size="xxl" />
<div class="container">
<div class="meta"> </div>
<div class="content-container">
<div class="content">
<p> </p>
</div>
</div>
</div>
</div>
);
}
const snapStates = useSnapshot(states);
if (!status) {
status = snapStates.statuses.get(statusID);
}
if (!status) {
return null;
}
const {
account: {
acct,
avatar,
avatarStatic,
id: accountId,
url,
displayName,
username,
emojis: accountEmojis,
},
id,
repliesCount,
reblogged,
reblogsCount,
favourited,
favouritesCount,
bookmarked,
poll,
muted,
sensitive,
spoilerText,
visibility, // public, unlisted, private, direct
language,
editedAt,
filtered,
card,
createdAt,
inReplyToAccountId,
content,
mentions,
mediaAttachments,
reblog,
uri,
emojis,
} = status;
const createdAtDate = new Date(createdAt);
let inReplyToAccountRef = mentions.find(
(mention) => mention.id === inReplyToAccountId,
);
if (!inReplyToAccountRef && inReplyToAccountId === id) {
inReplyToAccountRef = { url, username, displayName };
}
const [inReplyToAccount, setInReplyToAccount] = useState(inReplyToAccountRef);
if (!withinContext && !inReplyToAccount && inReplyToAccountId) {
const account = states.accounts.get(inReplyToAccountId);
if (account) {
setInReplyToAccount(account);
} else {
memFetchAccount(inReplyToAccountId)
.then((account) => {
setInReplyToAccount(account);
states.accounts.set(account.id, account);
})
.catch((e) => {});
}
}
const [showSpoiler, setShowSpoiler] = useState(false);
const debugHover = (e) => {
if (e.shiftKey) {
console.log(status);
}
};
const [showMediaModal, setShowMediaModal] = useState(false);
const carouselFocusItem = useRef(null);
const prevShowMediaModal = useRef(showMediaModal);
useEffect(() => {
if (showMediaModal !== false) {
carouselFocusItem.current?.scrollIntoView({
behavior: prevShowMediaModal.current === false ? 'auto' : 'smooth',
});
}
prevShowMediaModal.current = showMediaModal;
}, [showMediaModal]);
if (reblog) {
return (
<div class="status-reblog" onMouseEnter={debugHover}>
<div class="status-pre-meta">
<Icon icon="rocket" size="l" />{' '}
<NameText account={status.account} showAvatar /> boosted
</div>
<Status status={reblog} size={size} />
</div>
);
}
return (
<div
class={`status ${
!withinContext && inReplyToAccount ? 'status-reply-to' : ''
} ${
{
s: 'small',
m: 'medium',
l: 'large',
}[size]
}`}
onMouseEnter={debugHover}
>
{size !== 's' && (
<a
href={url}
target="_blank"
title={`@${acct}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
states.showAccount = status.account;
}}
>
<Avatar url={avatarStatic} size="xxl" />
</a>
)}
<div class="container">
<div class="meta">
<span>
<NameText
account={status.account}
showAvatar={size === 's'}
showAcct={size === 'l'}
/>
{inReplyToAccount && !withinContext && size !== 's' && (
<>
{' '}
<span class="ib">
<Icon icon="arrow-right" class="arrow" />{' '}
<NameText account={inReplyToAccount} short />
</span>
</>
)}
</span>{' '}
<a href={uri} target="_blank" class="time">
<Icon
icon={visibilityIconsMap[visibility]}
alt={visibility}
size="s"
/>{' '}
<relative-time
datetime={createdAtDate.toISOString()}
format="micro"
threshold="P1D"
prefix=""
>
{createdAtDate.toLocaleString()}
</relative-time>
</a>
</div>
<div
class={`content-container ${
sensitive || spoilerText ? 'has-spoiler' : ''
} ${showSpoiler ? 'show-spoiler' : ''}`}
>
{!!spoilerText && sensitive && (
<>
<div class="content">
<p>{spoilerText}</p>
</div>
<button
class="light spoiler"
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowSpoiler(!showSpoiler);
}}
>
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
{showSpoiler ? 'Show less' : 'Show more'}
</button>
</>
)}
<div
class="content"
onClick={(e) => {
let { target } = e;
if (target.parentNode.tagName.toLowerCase() === 'a') {
target = target.parentNode;
}
console.log('click', target, e);
if (
target.tagName.toLowerCase() === 'a' &&
target.classList.contains('mention')
) {
e.preventDefault();
e.stopPropagation();
const username = target.querySelector('span');
const mention = mentions.find(
(mention) => mention.username === username?.innerText.trim(),
);
if (mention) {
states.showAccount = mention.acct;
} else {
const href = target.getAttribute('href');
states.showAccount = href;
}
}
}}
dangerouslySetInnerHTML={{
__html: enhanceContent(content, {
emojis,
}),
}}
/>
{!!poll && <Poll poll={poll} />}
{!spoilerText && sensitive && !!mediaAttachments.length && (
<button
class="plain spoiler"
type="button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowSpoiler(!showSpoiler);
}}
>
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
content
</button>
)}
{!!mediaAttachments.length && size !== 's' && (
<div class="media-container">
{mediaAttachments.map((media, i) => (
<Media
media={media}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMediaModal(i);
}}
/>
))}
</div>
)}
{!!card &&
(size === 'l' ||
(size === 'm' && !poll && !mediaAttachments.length)) && (
<Card card={card} />
)}
</div>
{size === 'l' && (
<div class="actions">
<button
type="button"
title="Comment"
class="plain reply-button"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
states.showCompose = {
replyToStatus: status,
};
}}
>
<Icon icon="comment" size="l" alt="Reply" />
{!!repliesCount && (
<>
{' '}
<small>{shortenNumber(repliesCount)}</small>
</>
)}
</button>
{/* TODO: if visibility = private, only can reblog own statuses */}
{visibility !== 'direct' && (
<button
type="button"
title={reblogged ? 'Unboost' : 'Boost'}
class={`plain reblog-button ${reblogged ? 'reblogged' : ''}`}
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
const yes = confirm(
reblogged ? 'Unboost this status?' : 'Boost this status?',
);
if (!yes) return;
if (reblogged) {
const newStatus = await masto.statuses.unreblog(id);
states.statuses.set(newStatus.id, newStatus);
} else {
const newStatus = await masto.statuses.reblog(id);
states.statuses.set(newStatus.id, newStatus);
states.statuses.set(newStatus.reblog.id, newStatus.reblog);
}
}}
>
<Icon
icon="rocket"
size="l"
alt={reblogged ? 'Boosted' : 'Boost'}
/>
{!!reblogsCount && (
<>
{' '}
<small>{shortenNumber(reblogsCount)}</small>
</>
)}
</button>
)}
<button
type="button"
title={favourited ? 'Unfavourite' : 'Favourite'}
class={`plain favourite-button ${favourited ? 'favourited' : ''}`}
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
try {
if (favourited) {
const newStatus = await masto.statuses.unfavourite(id);
states.statuses.set(newStatus.id, newStatus);
} else {
const newStatus = await masto.statuses.favourite(id);
states.statuses.set(newStatus.id, newStatus);
}
} catch (e) {}
}}
>
<Icon
icon="heart"
size="l"
alt={favourited ? 'Favourited' : 'Favourite'}
/>
{!!favouritesCount && (
<>
{' '}
<small>{shortenNumber(favouritesCount)}</small>
</>
)}
</button>
<button
type="button"
title={bookmarked ? 'Unbookmark' : 'Bookmark'}
class={`plain bookmark-button ${bookmarked ? 'bookmarked' : ''}`}
onClick={async (e) => {
e.preventDefault();
e.stopPropagation();
try {
if (bookmarked) {
const newStatus = await masto.statuses.unbookmark(id);
states.statuses.set(newStatus.id, newStatus);
} else {
const newStatus = await masto.statuses.bookmark(id);
states.statuses.set(newStatus.id, newStatus);
}
} catch (e) {}
}}
>
<Icon
icon="bookmark"
size="l"
alt={bookmarked ? 'Bookmarked' : 'Bookmark'}
/>
</button>
</div>
)}
</div>
{showMediaModal !== false && (
<Modal>
<div
class="carousel"
onClick={() => {
setShowMediaModal(false);
}}
tabindex="0"
>
{mediaAttachments?.map((media, i) => (
<div
class="carousel-item"
tabindex="0"
key={media.id}
ref={i === showMediaModal ? carouselFocusItem : null}
>
<Media media={media} showOriginal />
</div>
))}
</div>
{mediaAttachments?.length > 1 && (
<div class="carousel-controls">
<button
type="button"
class="carousel-button plain"
hidden={showMediaModal === 0}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMediaModal(
(showMediaModal - 1 + mediaAttachments.length) %
mediaAttachments.length,
);
}}
>
<Icon icon="arrow-left" />
</button>
<span class="carousel-dots">
{mediaAttachments?.map((media, i) => (
<button
key={media.id}
type="button"
class={`plain carousel-dot ${
i === showMediaModal ? 'active' : ''
}`}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMediaModal(i);
}}
>
&bull;
</button>
))}
</span>
<button
type="button"
class="carousel-button plain"
hidden={showMediaModal === mediaAttachments.length - 1}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setShowMediaModal(
(showMediaModal + 1) % mediaAttachments.length,
);
}}
>
<Icon icon="arrow-right" />
</button>
</div>
)}
</Modal>
)}
</div>
);
}
export default Status;

202
src/data/instances.json Normal file
View file

@ -0,0 +1,202 @@
[
"mastodon.social",
"mastodon.world",
"mas.to",
"pawoo.net",
"mastodon.online",
"mstdn.jp",
"universeodon.com",
"mastodon.lol",
"mastodonapp.uk",
"infosec.exchange",
"mastodon.uno",
"techhub.social",
"mastodon.sdf.org",
"fosstodon.org",
"troet.cafe",
"masto.ai",
"mstdn.party",
"c.im",
"hachyderm.io",
"m.cmx.im",
"mstdn.ca",
"sfba.social",
"kolektiva.social",
"mastodon.scot",
"ohai.social",
"fedibird.com",
"piaille.fr",
"home.social",
"mindly.social",
"mastodon.nl",
"toot.community",
"aus.social",
"thu.closed.social",
"mastodon.gamedev.place",
"nerdculture.de",
"mastodon.cloud",
"mastodon.ie",
"det.social",
"mastodon.au",
"nrw.social",
"mastodon.art",
"chaos.social",
"norden.social",
"ioc.exchange",
"alive.bar",
"tkz.one",
"sueden.social",
"mastodon.nu",
"mastodon.top",
"mastouille.fr",
"mastodontech.de",
"o3o.ca",
"social.tchncs.de",
"noagendasocial.com",
"newsie.social",
"masto.es",
"planet.moe",
"social.vivaldi.net",
"ravenation.club",
"wxw.moe",
"mathstodon.xyz",
"social.cologne",
"mastodon.nz",
"qoto.org",
"hessen.social",
"mastodon.com.tr",
"ruhr.social",
"muenchen.social",
"mamot.fr",
"twit.social",
"dice.camp",
"meow.social",
"www.masto.pt",
"social.anoxinon.de",
"www.sociale.network",
"tech.lgbt",
"econtwitter.net",
"masthead.social",
"glasgow.social",
"ieji.de",
"toot.wales",
"ecoevo.social",
"ro-mastodon.puyo.jp",
"noc.social",
"indieweb.social",
"zirk.us",
"twingyeo.kr",
"social.linux.pizza",
"mastodont.cat",
"social.dev-wiki.de",
"mastodonczech.cz",
"climatejustice.social",
"eldritch.cafe",
"g0v.social",
"socel.net",
"dju.social",
"mastodontti.fi",
"101010.pl",
"framapiaf.org",
"wien.rocks",
"botsin.space",
"mastodon.bida.im",
"bildung.social",
"pouet.chapril.org",
"urbanists.social",
"wandering.shop",
"masto.pt",
"union.place",
"metalhead.club",
"ruby.social",
"hiveway.net",
"h4.io",
"genomic.social",
"mastodon-belgium.be",
"mastodon.xyz",
"octodon.social",
"pol.social",
"tooot.im",
"berlin.social",
"sciences.social",
"mstdn.guru",
"qdon.space",
"mastodon.radio",
"lile.cl",
"masto.nu",
"witches.live",
"mastodonners.nl",
"muenster.im",
"lor.sh",
"phpc.social",
"pewtix.com",
"social.librem.one",
"rollenspiel.social",
"peoplemaking.games",
"kinky.business",
"mastodon.fun",
"me.ns.ci",
"mastodon.eus",
"dresden.network",
"hostux.social",
"scholar.social",
"freiburg.social",
"todon.eu",
"writing.exchange",
"toot.aquilenet.fr",
"digitalcourage.social",
"rheinneckar.social",
"discuss.systems",
"defcon.social",
"snabelen.no",
"mastodon.se",
"rubber.social",
"fulda.social",
"vis.social",
"toot.funami.tech",
"mast.dragon-fly.club",
"disabled.social",
"medibubble.org",
"mastodon.technology",
"vmst.io",
"mstdn.io",
"equestria.social",
"vocalodon.net",
"mastodon.ml",
"libretooth.gr",
"tooting.ch",
"dizl.de",
"best-friends.chat",
"romancelandia.club",
"queer.party",
"tilde.zone",
"xarxa.cloud",
"abdl.link",
"bitcoinhackers.org",
"photog.social",
"macaw.social",
"yiff.life",
"sociale.network",
"ursal.zone",
"eupolicy.social",
"gruene.social",
"artisan.chat",
"graz.social",
"social.coop",
"mstdn.id",
"social.sciences.re",
"ludosphere.fr",
"social.politicaconciencia.org",
"oslo.town",
"scicomm.xyz",
"floss.social",
"creators.social",
"tabletop.social",
"bonn.social",
"openbiblio.social",
"mastodon.la",
"halifaxsocial.ca",
"freeradical.zone",
"kfem.cat",
"federated.press"
]

191
src/index.css Normal file
View file

@ -0,0 +1,191 @@
:root {
--blue-color: royalblue;
--purple-color: blueviolet;
--green-color: green;
--orange-color: orange;
--red-color: orangered;
--bg-color: #fff;
--bg-faded-color: #f0f2f5;
--bg-blur-color: #fff9;
--bg-faded-blur-color: #f0f2f599;
--text-color: #1c1e21;
--text-insignificant-color: #1c1e2199;
--link-color: var(--blue-color);
--link-light-color: #4169e199;
--link-faded-color: #4169e122;
--link-bg-hover-color: #f0f2f599;
--button-bg-color: var(--blue-color);
--button-bg-blur-color: #4169e1aa;
--button-text-color: white;
--button-plain-bg-hover-color: rgba(128, 128, 128, 0.1);
--reblog-color: var(--purple-color);
--reblog-faded-color: #892be220;
--reply-to-color: var(--orange-color);
--favourite-color: var(--red-color);
--reply-to-faded-color: #ffa6001a;
--outline-color: rgba(128, 128, 128, .2);
--outline-hover-color: rgba(128, 128, 128, .7);
--divider-color: rgba(0, 0, 0, 0.1);
--backdrop-color: rgba(255, 255, 255, 0.5);
--img-bg-color: rgba(128, 128, 128, 0.2);
--loader-color: #1c1e2199;
--comment-line-color: #e5e5e5;
}
@media (prefers-color-scheme: dark) {
:root {
--blue-color: CornflowerBlue;
--purple-color: mediumpurple;
--green-color: MediumSeaGreen;
--bg-color: #242526;
--bg-faded-color: #18191a;
--bg-blur-color: #0009;
--bg-faded-blur-color: #18191a99;
--text-color: #f0f2f5;
--text-insignificant-color: #f0f2f599;
--link-bg-hover-color: #34353799;
--divider-color: rgba(255, 255, 255, 0.1);
--bg-blur-color: #24252699;
--backdrop-color: rgba(0, 0, 0, 0.5);
--comment-line-color: #565656;
}
}
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', sans-serif;
font-size: 15px;
word-wrap: break-word;
overflow-wrap: break-word;
}
a {
color: var(--link-color);
text-decoration-color: var(--link-faded-color);
text-decoration-thickness: 2px;
text-underline-offset: 2px;
overflow-wrap: anywhere;
}
a:hover {
text-decoration-color: var(--link-color);
}
img {
max-width: 100%;
}
hr {
height: 2px;
border: 0;
padding: 0;
margin: 16px 0;
background-image: linear-gradient(to right, transparent, var(--divider-color), transparent);
}
button, input, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
max-width: 100%;
}
button, .button {
display: inline-block;
margin: 2px;
padding: 8px 12px;
border-radius: 2.5em;
border: 0;
background-color: var(--button-bg-color);
color: var(--button-text-color);
cursor: pointer;
line-height: 1;
vertical-align: middle;
text-decoration: none;
}
button > * {
vertical-align: middle;
}
:is(button, .button):not([disabled]):hover {
filter: brightness(1.2);
}
:is(button, .button):active {
filter: brightness(0.8);
}
:is(button, .button)[disabled] {
cursor: auto;
opacity: 0.5;
}
:is(button, .button).plain {
background-color: transparent;
color: var(--link-color);
backdrop-filter: blur(12px);
}
:is(button, .button).light {
background-color: var(--bg-faded-color);
color: var(--text-color);
outline: 1px solid var(--outline-color);
}
:is(button, .button).block {
display: block;
width: 100%;
padding: 12px;
}
input[type="text"], textarea, select {
color: var(--text-color);
background-color: var(--bg-color);
border: 2px solid var(--divider-color);
padding: 8px;
border-radius: 4px;
}
input[type="text"]:focus, textarea:focus, select:focus {
border-color: var(--outline-color);
}
input[type="text"].large, textarea.large, select.large, button.large {
font-size: 125%;
padding: 12px;
}
button.small {
font-size: 90%;
padding: 4px 8px;
}
select.plain {
border: 0;
background-color: transparent;
}
@media (prefers-color-scheme: dark) {
img, video {
filter: brightness(0.7);
transition: filter 0.3s ease-out;
}
img:hover, video:hover {
filter: brightness(1);
}
}
/* UTILS */
.ib {
display: inline-block;
}
/* KEYFRAMES */
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

9
src/main.jsx Normal file
View file

@ -0,0 +1,9 @@
import { render } from 'preact';
import { App } from './app';
import 'iconify-icon';
import '@github/time-elements';
import './index.css';
render(<App />, document.getElementById('app'));

217
src/pages/home.jsx Normal file
View file

@ -0,0 +1,217 @@
import { Link } from 'preact-router/match';
import { useEffect, useRef, useState } from 'preact/hooks';
import { InView } from 'react-intersection-observer';
import { useSnapshot } from 'valtio';
import Icon from '../components/icon';
import Loader from '../components/loader';
import Status from '../components/status';
import states from '../utils/states';
import store from '../utils/store';
const LIMIT = 20;
export default ({ hidden }) => {
const snapStates = useSnapshot(states);
const [uiState, setUIState] = useState('default');
const [showMore, setShowMore] = useState(false);
const statusIterator = useRef(
masto.timelines.getHomeIterable({
limit: LIMIT,
}),
).current;
async function fetchStatuses(firstLoad) {
const allStatuses = await statusIterator.next(
firstLoad
? {
limit: LIMIT,
}
: undefined,
);
if (allStatuses.value <= 0) {
return { done: true };
}
const homeValues = allStatuses.value.map((status) => {
states.statuses.set(status.id, status);
if (status.reblog) {
states.statuses.set(status.reblog.id, status.reblog);
}
return {
id: status.id,
reblog: status.reblog?.id,
reply: !!status.inReplyToAccountId,
};
});
if (firstLoad) {
states.home = homeValues;
} else {
states.home.push(...homeValues);
}
states.homeLastFetchTime = Date.now();
console.log(allStatuses);
return allStatuses;
}
const loadStatuses = (firstLoad) => {
setUIState('loading');
(async () => {
try {
const { done } = await fetchStatuses(firstLoad);
setShowMore(!done);
setUIState('default');
} catch (e) {
console.warn(e);
setUIState('error');
}
})();
};
useEffect(() => {
loadStatuses(true);
}, []);
useEffect(() => {
const handleVisibilityChange = () => {
if (document.hidden) {
const timestamp = Date.now();
store.session.set('lastHidden', timestamp);
console.log('hidden', timestamp);
} else {
const timestamp = Date.now();
const lastHidden = store.session.get('lastHidden');
const diff = timestamp - lastHidden;
const diffMins = Math.round(diff / 1000 / 60);
console.log('visible', { timestamp, diff, diffMins });
if (diffMins > 1) {
setTimeout(() => {
loadStatuses(true);
states.homeNew = [];
}, 100);
}
}
};
document.addEventListener('visibilitychange', handleVisibilityChange);
return () => {
document.removeEventListener('visibilitychange', handleVisibilityChange);
};
}, []);
const scrollableRef = useRef();
return (
<div class="deck-container" hidden={hidden} ref={scrollableRef}>
<div class="timeline-deck deck">
<header
onClick={() => {
scrollableRef.current?.scrollTo({ top: 0, behavior: 'smooth' });
}}
>
<div class="header-side">
<button
type="button"
class="plain"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
states.showSettings = true;
}}
>
<Icon icon="gear" size="l" alt="Settings" />
</button>
</div>
<h1>Home</h1>
<div class="header-side">
<Loader hidden={uiState !== 'loading'} />{' '}
<a
href="#/notifications"
class={`button plain ${
snapStates.notificationsNew.length > 0 ? 'has-badge' : ''
}`}
>
<Icon icon="notification" size="l" alt="Notifications" />
</a>
</div>
{snapStates.homeNew.length > 1 && (
<button
class="updates-button"
type="button"
onClick={() => {
const uniqueHomeNew = snapStates.homeNew.filter(
(status) => !states.home.some((s) => s.id === status.id),
);
states.home.unshift(...uniqueHomeNew);
loadStatuses(true);
states.homeNew = [];
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New posts
</button>
)}
</header>
{snapStates.home.length ? (
<>
<ul class="timeline">
{snapStates.home.map(({ id: statusID, reblog }) => {
const actualStatusID = reblog || statusID;
return (
<li key={statusID}>
<Link
activeClassName="active"
class="status-link"
href={`#/s/${actualStatusID}`}
>
<Status statusID={statusID} />
</Link>
</li>
);
})}
{showMore && (
<InView
onChange={(inView) => {
if (inView) loadStatuses();
}}
>
<li
style={{
height: '25vh',
}}
>
<Status skeleton />
</li>
<li
style={{
height: '25vh',
}}
>
<Status skeleton />
</li>
</InView>
)}
</ul>
</>
) : (
<>
{uiState === 'loading' && (
<ul class="timeline">
{Array.from({ length: 5 }).map((_, i) => (
<li key={i}>
<Status skeleton />
</li>
))}
</ul>
)}
{uiState === 'error' && (
<p class="ui-state">Error loading statuses</p>
)}
</>
)}
</div>
</div>
);
};

99
src/pages/login.jsx Normal file
View file

@ -0,0 +1,99 @@
import { useEffect, useRef, useState } from 'preact/hooks';
import Loader from '../components/loader';
import instancesList from '../data/instances.json';
import { getAuthorizationURL, registerApplication } from '../utils/auth';
import store from '../utils/store';
import useTitle from '../utils/useTitle';
export default () => {
useTitle('Log in');
const instanceURLRef = useRef();
const cachedInstanceURL = store.local.get('instanceURL');
const [uiState, setUIState] = useState('default');
useEffect(() => {
if (cachedInstanceURL) {
instanceURLRef.current.value = cachedInstanceURL;
}
}, []);
const onSubmit = (e) => {
e.preventDefault();
const { elements } = e.target;
let instanceURL = elements.instanceURL.value;
// Remove protocol from instance URL
instanceURL = instanceURL.replace(/(^\w+:|^)\/\//, '');
store.local.set('instanceURL', instanceURL);
(async () => {
setUIState('loading');
try {
const { client_id, client_secret } = await registerApplication({
instanceURL,
});
if (client_id && client_secret) {
store.session.set('clientID', client_id);
store.session.set('clientSecret', client_secret);
location.href = await getAuthorizationURL({
instanceURL,
client_id,
});
} else {
alert('Failed to register application');
}
setUIState('default');
} catch (e) {
console.error(e);
setUIState('error');
}
})();
};
return (
<main class="box">
<form onSubmit={onSubmit}>
<h1>Log in</h1>
<label>
<p>Instance</p>
<input
required
type="text"
class="large"
id="instanceURL"
ref={instanceURLRef}
disabled={uiState === 'loading'}
list="instances-list"
/>
<datalist id="instances-list">
{instancesList.map((instance) => (
<option value={instance} />
))}
</datalist>
</label>
{uiState === 'error' && (
<p class="error">
Failed to log in. Please try again or another instance.
</p>
)}
<p>
<button class="large" disabled={uiState === 'loading'}>
Log in
</button>{' '}
<Loader hidden={uiState !== 'loading'} />
</p>
<hr />
<p>
<a href="https://joinmastodon.org/servers" target="_blank">
Don't have an account? Create one!
</a>
</p>
<p>
<a href="/#">Go home</a>
</p>
</form>
</main>
);
};

View file

@ -0,0 +1,49 @@
.notification {
display: flex;
padding: 16px !important;
gap: 16px;
}
.notification.skeleton {
color: var(--outline-color);
}
.notification-type {
width: 24px;
flex-shrink: 0;
opacity: 0.75;
color: var(--text-insignificant-color);
}
.notification-type.favourite {
color: var(--favourite-color);
}
.notification-type.reblog {
color: var(--reblog-color);
}
.notification-type.poll,
.notification-type.mention {
color: var(--link-color);
}
.notification .status-link {
border-radius: 8px 8px 0 0;
border: 1px solid var(--divider-color);
max-height: 160px;
overflow: hidden;
/* fade out mask gradient bottom */
mask-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 50%, transparent);
filter: saturate(0.25);
}
.notification .status-link:hover {
background-color: var(--bg-blur-color);
filter: saturate(1);
}
.notification .status-link > * {
pointer-events: none;
}
.notification-content {
flex-grow: 1;
}
.notification-content p:first-child {
margin-top: 0;
}

292
src/pages/notifications.jsx Normal file
View file

@ -0,0 +1,292 @@
import './notifications.css';
import { Link } from 'preact-router/match';
import { useEffect, useRef, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
import Icon from '../components/icon';
import Loader from '../components/loader';
import NameText from '../components/name-text';
import Status from '../components/status';
import states from '../utils/states';
import useTitle from '../utils/useTitle';
/*
Notification types
==================
mention = Someone mentioned you in their status
status = Someone you enabled notifications for has posted a status
reblog = Someone boosted one of your statuses
follow = Someone followed you
follow_request = Someone requested to follow you
favourite = Someone favourited one of your statuses
poll = A poll you have voted in or created has ended
update = A status you interacted with has been edited
admin.sign_up = Someone signed up (optionally sent to admins)
admin.report = A new report has been filed
*/
const contentText = {
mention: 'mentioned you in their status.',
status: 'posted a status.',
reblog: 'boosted your status.',
follow: 'followed you.',
follow_request: 'requested to follow you.',
favourite: 'favourited your status.',
poll: 'A poll you have voted in or created has ended.',
update: 'A status you interacted with has been edited.',
};
const LIMIT = 20;
function Notification({ notification }) {
const { id, type, status, account } = notification;
// status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
const actualStatusID = status?.reblog?.id || status?.id;
return (
<>
<div
class={`notification-type ${type}`}
title={new Date(notification.createdAt).toLocaleString()}
>
<Icon
icon={
{
mention: 'comment',
status: 'notification',
reblog: 'reblog',
follow: 'follow',
follow_request: 'follow-add',
favourite: 'heart',
poll: 'poll',
update: 'pencil',
}[type] || 'notification'
}
size="xl"
alt={type}
/>
</div>
<div class="notification-content">
<p>
{!/poll|update/i.test(type) && (
<>
<NameText account={account} showAvatar />{' '}
</>
)}
{contentText[type]}
</p>
{status && (
<Link class="status-link" href={`#/s/${actualStatusID}`}>
<Status status={status} size="s" />
</Link>
)}
</div>
</>
);
}
function NotificationsList({ notifications, emptyCopy }) {
if (!notifications.length && emptyCopy) {
return <p class="timeline-empty">{emptyCopy}</p>;
}
return (
<ul class="timeline flat">
{notifications.map((notification) => {
const { id, type } = notification;
return (
<li key={id} class={`notification ${type}`}>
<Notification notification={notification} />
</li>
);
})}
</ul>
);
}
export default () => {
useTitle('Notifications');
const snapStates = useSnapshot(states);
const [uiState, setUIState] = useState('default');
const [showMore, setShowMore] = useState(false);
const notificationsIterator = useRef(
masto.notifications.getIterator({
limit: LIMIT,
}),
).current;
async function fetchNotifications(firstLoad) {
const allNotifications = await notificationsIterator.next(
firstLoad
? {
limit: LIMIT,
}
: undefined,
);
if (allNotifications.value <= 0) {
return { done: true };
}
const notificationsValues = allNotifications.value.map((notification) => {
if (notification.status) {
states.statuses.set(notification.status.id, notification.status);
}
return notification;
});
if (firstLoad) {
states.notifications = notificationsValues;
} else {
states.notifications.push(...notificationsValues);
}
states.notificationsLastFetchTime = Date.now();
console.log(allNotifications);
return allNotifications;
}
const loadNotifications = (firstLoad) => {
setUIState('loading');
(async () => {
try {
const { done } = await fetchNotifications(firstLoad);
setShowMore(!done);
setUIState('default');
} catch (e) {
setUIState('error');
}
})();
};
useEffect(() => {
loadNotifications(true);
}, []);
const scrollableRef = useRef();
// Group notifications by today, yesterday, and older
const groupedNotifications = snapStates.notifications.reduce(
(acc, notification) => {
const date = new Date(notification.created_at);
const today = new Date();
const yesterday = new Date();
yesterday.setDate(today.getDate() - 1);
if (
date.getDate() === today.getDate() &&
date.getMonth() === today.getMonth() &&
date.getFullYear() === today.getFullYear()
) {
acc.today.push(notification);
} else if (
date.getDate() === yesterday.getDate() &&
date.getMonth() === yesterday.getMonth() &&
date.getFullYear() === yesterday.getFullYear()
) {
acc.yesterday.push(notification);
} else {
acc.older.push(notification);
}
return acc;
},
{ today: [], yesterday: [], older: [] },
);
console.log(groupedNotifications);
return (
<div class="deck-container" ref={scrollableRef}>
<div class="timeline-deck deck">
<header>
<div class="header-side">
<a href="#" class="button plain">
<Icon icon="home" size="l" />
</a>
</div>
<h1>Notifications</h1>
<div class="header-side">
<Loader hidden={uiState !== 'loading'} />
</div>
{snapStates.notificationsNew.length > 0 && (
<button
class="updates-button"
type="button"
onClick={() => {
const uniqueNotificationsNew =
snapStates.notificationsNew.filter(
(notification) =>
!snapStates.notifications.some(
(n) => n.id === notification.id,
),
);
states.notifications.unshift(...uniqueNotificationsNew);
loadNotifications(true);
states.notificationsNew = [];
scrollableRef.current?.scrollTo({
top: 0,
behavior: 'smooth',
});
}}
>
<Icon icon="arrow-up" /> New notifications
</button>
)}
</header>
{snapStates.notifications.length ? (
<>
<h2 class="timeline-header">Today</h2>
<NotificationsList
notifications={groupedNotifications.today}
emptyCopy="You're all caught up."
/>
{groupedNotifications.yesterday.length > 0 && (
<>
<h2 class="timeline-header">Yesterday</h2>
<NotificationsList
notifications={groupedNotifications.yesterday}
/>
</>
)}
{groupedNotifications.older.length > 0 && (
<>
<h2 class="timeline-header">Older</h2>
<NotificationsList notifications={groupedNotifications.older} />
</>
)}
{showMore && (
<button
type="button"
class="plain block"
disabled={uiState === 'loading'}
onClick={() => loadNotifications()}
>
{uiState === 'loading' ? <Loader /> : <>Show more&hellip;</>}
</button>
)}
</>
) : (
<>
{uiState === 'loading' && (
<>
<h2 class="timeline-header">Today</h2>
<ul class="timeline flat">
{Array.from({ length: 5 }).map((_, i) => (
<li class="notification skeleton">
<div class="notification-type">
<Icon icon="notification" size="xl" />
</div>
<div class="notification-content">
<p> </p>
</div>
</li>
))}
</ul>
</>
)}
{uiState === 'error' && (
<p class="ui-state">Error loading notifications</p>
)}
</>
)}
</div>
</div>
);
};

95
src/pages/settings.css Normal file
View file

@ -0,0 +1,95 @@
#settings-container {
text-align: left;
padding-bottom: 3em;
animation: fade-in 0.2s ease-out;
max-height: 100vh;
overflow: auto;
}
#settings-container .close-button {
float: right;
}
#settings-container h2 {
margin: 3em 0 1em;
font-size: .9em;
text-transform: uppercase;
color: var(--text-insignificant-color);
}
#settings-container ul {
margin: 0;
padding: 0;
list-style: none;
}
#settings-container ul li {
padding: 8px 0;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
#settings-container ul li .current {
margin-right: 8px;
color: var(--green-color);
opacity: 0.1;
}
#settings-container ul li .current.is-current {
opacity: 1;
}
#settings-container ul li .current.is-current + .avatar {
outline-color: var(--green-color);
outline-width: 2px;
}
#settings-container ul li > div {
flex-grow: 1;
max-width: 100%;
}
#settings-container ul li > div.actions {
flex-basis: min-content;
margin-top: 8px;
}
#settings-container ul li > div:last-child {
text-align: right;
}
#settings-container div,
#settings-container div > *{
vertical-align: middle;
}
#settings-container .avatar {
margin-right: 8px;
}
#settings-container .radio-group {
display: inline-flex;
align-items: center;
border-radius: 999px;
border: 1px solid var(--button-bg-color);
overflow: hidden;
padding: 1px;
}
#settings-container .radio-group input[type="radio"] {
opacity: 0;
position: absolute;
pointer-events: none;
}
#settings-container .radio-group label {
display: inline-block;
padding: 6px 12px;
cursor: pointer;
}
#settings-container .radio-group label input:checked + span {
color: var(--link-color);
font-weight: bold;
}
#settings-container .radio-group label:hover {
color: var(--button-bg-color);
}
#settings-container .radio-group label:has(input:checked) {
border-radius: 999px;
color: var(--button-text-color);
background-color: var(--button-bg-color);
}
#settings-container .radio-group label:has(input:checked) input:checked + span {
color: inherit;
}

186
src/pages/settings.jsx Normal file
View file

@ -0,0 +1,186 @@
import './settings.css';
import { useRef, useState } from 'preact/hooks';
import Avatar from '../components/avatar';
import Icon from '../components/icon';
import NameText from '../components/name-text';
import store from '../utils/store';
/*
Settings component that shows these settings:
- Accounts list for switching
- Dark/light/auto theme switch (done with adding/removing 'is-light' or 'is-dark' class on the body)
*/
export default ({ onClose }) => {
// Accounts
const accounts = store.local.getJSON('accounts');
const currentAccount = store.session.get('currentAccount');
const currentTheme = store.local.get('theme') || 'auto';
const themeFormRef = useRef();
const moreThanOneAccount = accounts.length > 1;
const [currentDefault, setCurrentDefault] = useState(0);
return (
<div id="settings-container" class="box">
<div>
<button type="button" class="close-button plain" onClick={onClose}>
<Icon icon="x" alt="Close" />
</button>
</div>
<div>
<h2>Accounts</h2>
<ul class="accounts-list">
{accounts.map((account, i) => {
const isCurrent = account.info.id === currentAccount;
const isDefault = i === (currentDefault || 0);
return (
<li>
<div>
{moreThanOneAccount && (
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
<Icon icon="check-circle" alt="Current" />
</span>
)}
<Avatar url={account.info.avatarStatic} size="xxl" />
<NameText account={account.info} showAcct />
</div>
<div class="actions">
{isDefault && moreThanOneAccount && (
<>
<span class="tag">Default</span>{' '}
</>
)}
{!isCurrent && (
<button
type="button"
class="light"
onClick={() => {
store.session.set('currentAccount', account.info.id);
location.reload();
}}
>
<Icon icon="transfer" /> Switch
</button>
)}
<div>
{!isDefault && moreThanOneAccount && (
<button
type="button"
class="plain small"
onClick={() => {
// Move account to the top of the list
accounts.splice(i, 1);
accounts.unshift(account);
store.local.setJSON('accounts', accounts);
setCurrentDefault(i);
}}
>
Set as default
</button>
)}
{isCurrent && (
<>
{' '}
<button
type="button"
class="plain small"
onClick={() => {
const yes = confirm(
'Are you sure you want to log out?',
);
if (!yes) return;
accounts.splice(i, 1);
store.local.setJSON('accounts', accounts);
location.reload();
}}
>
Log out
</button>
</>
)}
</div>
</div>
</li>
);
})}
</ul>
{moreThanOneAccount && (
<p>
<small>
Note: <i>Default</i> account will always be used for first load.
Switched accounts will persist during the session.
</small>
</p>
)}
<p style={{ textAlign: 'end' }}>
<a href="/#/login" class="button" onClick={onClose}>
Add new account
</a>
</p>
</div>
<div>
<h2>Theme</h2>
<form
ref={themeFormRef}
onInput={(e) => {
console.log(e);
e.preventDefault();
const formData = new FormData(themeFormRef.current);
const theme = formData.get('theme');
const html = document.documentElement;
if (theme === 'auto') {
html.classList.remove('is-light', 'is-dark');
} else {
html.classList.toggle('is-light', theme === 'light');
html.classList.toggle('is-dark', theme === 'dark');
}
document
.querySelector('meta[name="color-scheme"]')
.setAttribute('content', theme);
if (theme === 'auto') {
store.local.del('theme');
} else {
store.local.set('theme', theme);
}
}}
>
<div class="radio-group">
<label>
<input
type="radio"
name="theme"
value="light"
defaultChecked={currentTheme === 'light'}
/>
<span>Light</span>
</label>
<label>
<input
type="radio"
name="theme"
value="dark"
defaultChecked={currentTheme === 'dark'}
/>
<span>Dark</span>
</label>
<label>
<input
type="radio"
name="theme"
value="auto"
defaultChecked={
currentTheme !== 'light' && currentTheme !== 'dark'
}
/>
<span>Auto</span>
</label>
</div>
</form>
</div>
</div>
);
};

210
src/pages/status.jsx Normal file
View file

@ -0,0 +1,210 @@
import { Link } from 'preact-router/match';
import {
useEffect,
useLayoutEffect,
useMemo,
useRef,
useState,
} from 'preact/hooks';
import { useSnapshot } from 'valtio';
import Icon from '../components/icon';
import Loader from '../components/loader';
import Status from '../components/status';
import states from '../utils/states';
import useTitle from '../utils/useTitle';
export default ({ id }) => {
const snapStates = useSnapshot(states);
const [statuses, setStatuses] = useState([{ id }]);
const [uiState, setUIState] = useState('default');
const heroStatusRef = useRef();
useEffect(async () => {
// If id is completely new, reset the whole list
if (!statuses.find((s) => s.id === id)) {
setStatuses([{ id }]);
}
setUIState('loading');
if (!states.statuses.has(id)) {
try {
const status = await masto.statuses.fetch(id);
states.statuses.set(id, status);
} catch (e) {
setUIState('error');
alert('Error fetching status');
return;
}
}
try {
const context = await masto.statuses.fetchContext(id);
const { ancestors, descendants } = context;
ancestors.forEach((status) => {
states.statuses.set(status.id, status);
});
const directReplies = [];
descendants.forEach((status) => {
states.statuses.set(status.id, status);
if (status.inReplyToId === id) {
directReplies.push(status);
}
});
console.log({ ancestors, descendants, directReplies });
if (directReplies.length) {
const heroStatus = states.statuses.get(id);
const heroStatusRepliesCount = heroStatus.repliesCount;
if (heroStatusRepliesCount != directReplies.length) {
// If replies count doesn't match, refetch the status
const status = await masto.statuses.fetch(id);
states.statuses.set(id, status);
}
}
const allStatuses = [
...ancestors.map((s) => ({ id: s.id, ancestor: true })),
{ id },
...descendants.map((s) => ({
id: s.id,
descendant: true,
directReply:
s.inReplyToId === id || s.inReplyToAccountId === s.account.id,
// I can assume if the reply is to the same account, it's a direct reply. In other words, it's a thread?!?
})),
];
setStatuses(allStatuses);
} catch (e) {
setUIState('error');
}
setUIState('default');
}, [id, snapStates.reloadStatusPage]);
useLayoutEffect(() => {
if (heroStatusRef.current && statuses.length > 1) {
heroStatusRef.current.scrollIntoView({
behavior: 'smooth',
block: 'start',
});
}
}, [id]);
useLayoutEffect(() => {
heroStatusRef.current?.scrollIntoView({
// behavior: 'smooth',
block: 'start',
});
}, [statuses]);
const heroStatus = states.statuses.get(id);
const heroDisplayName = useMemo(() => {
// Remove shortcodes from display name
if (!heroStatus) return '';
const { account } = heroStatus;
const div = document.createElement('div');
div.innerHTML = account.displayName;
return div.innerText.trim();
}, [heroStatus]);
const heroContentText = useMemo(() => {
if (!heroStatus) return '';
const { content } = heroStatus;
const div = document.createElement('div');
div.innerHTML = content;
let text = div.innerText.trim();
if (text.length > 64) {
text = text.slice(0, 64) + '…';
}
return text;
}, [heroStatus]);
useTitle(
heroDisplayName && heroContentText
? `${heroDisplayName}: ${heroContentText}`
: 'Status',
);
const comments = statuses.filter((s) => s.descendant);
const replies = comments.filter((s) => s.directReply);
const prevRoute = states.history.findLast((h) => {
return h === '/' || /notifications/i.test(h);
});
const closeLink = `#${prevRoute || '/'}`;
return (
<div class="deck-backdrop">
<Link href={closeLink}></Link>
<div
class={`status-deck deck contained ${
statuses.length > 1 ? 'padded-bottom' : ''
}`}
>
<header>
<h1>Status</h1>
<div class="header-side">
<Loader hidden={uiState !== 'loading'} />
<Link class="button plain deck-close" href={closeLink}>
<Icon icon="x" size="xl" />
</Link>
</div>
</header>
<ul class="timeline flat contextual">
{statuses.map((status) => {
const { id: statusID, ancestor, descendant, directReply } = status;
const isHero = statusID === id;
return (
<li
key={statusID}
ref={isHero ? heroStatusRef : null}
class={`${isHero ? '' : 'insignificant'} ${
ancestor ? 'ancestor' : ''
} ${descendant ? 'descendant' : ''} ${
descendant && !directReply ? 'indirect' : ''
}`}
>
{isHero ? (
<Status statusID={statusID} withinContext size="l" />
) : (
<Link
class="
status-link
"
href={`#/s/${statusID}`}
>
<Status statusID={statusID} withinContext />
</Link>
)}
{uiState === 'loading' &&
isHero &&
!!heroStatus?.repliesCount && (
<div class="status-loading">
<Loader />{' '}
<span>
{!!replies.length &&
replies.length !== comments.length && (
<>
{replies.length} repl
{replies.length > 1 ? 'ies' : 'y'}
</>
)}
{!!comments.length && (
<>
{' '}
&bull; {comments.length} comment
{comments.length > 1 ? 's' : ''}
</>
)}
</span>
</div>
)}
</li>
);
})}
</ul>
</div>
</div>
);
};

40
src/pages/welcome.css Normal file
View file

@ -0,0 +1,40 @@
#welcome {
overflow: auto;
max-height: 90vh;
}
#welcome img {
margin-top: 16px;
height: auto;
}
@keyframes dance {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(5deg);
}
40% {
transform: rotate(-5deg);
}
60% {
transform: rotate(5deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
#welcome:hover img {
animation: dance 2s infinite 15s linear;
}
#welcome .warning {
font-weight: bold;
padding: 16px;
background: lemonchiffon;
color: chocolate;
border-radius: 16px;
}

35
src/pages/welcome.jsx Normal file
View file

@ -0,0 +1,35 @@
import './welcome.css';
import useTitle from '../utils/useTitle';
export default () => {
useTitle();
return (
<main id="welcome" class="box">
<img
src="../design/logo-2.svg"
alt=""
width="140"
height="140"
style={{
aspectRatio: '1/1',
}}
/>
<h1>Welcome</h1>
<p>Phanpy is a minimalistic opinionated Mastodon web client.</p>
<p class="warning">
🚧 This is an early ALPHA project. Many features are missing, many bugs
are present. Please report issues as detailed as possible. Thanks 🙏
</p>
<p>
<big>
<b>
<a href="#/login" class="button">
Log in
</a>
</b>
</big>
</p>
</main>
);
};

62
src/utils/auth.js Normal file
View file

@ -0,0 +1,62 @@
const { VITE_CLIENT_NAME: CLIENT_NAME, VITE_WEBSITE: WEBSITE } = import.meta
.env;
export async function registerApplication({ instanceURL }) {
const registrationParams = new URLSearchParams({
client_name: CLIENT_NAME,
redirect_uris: location.origin,
scopes: 'read write follow',
website: WEBSITE,
});
const registrationResponse = await fetch(
`https://${instanceURL}/api/v1/apps`,
{
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: registrationParams.toString(),
},
);
const registrationJSON = await registrationResponse.json();
console.log({ registrationJSON });
return registrationJSON;
}
export async function getAuthorizationURL({ instanceURL, client_id }) {
const authorizationParams = new URLSearchParams({
client_id,
scope: 'read write follow',
redirect_uri: location.origin,
// redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',
response_type: 'code',
});
const authorizationURL = `https://${instanceURL}/oauth/authorize?${authorizationParams.toString()}`;
return authorizationURL;
}
export async function getAccessToken({
instanceURL,
client_id,
client_secret,
code,
}) {
const params = new URLSearchParams({
client_id,
client_secret,
redirect_uri: location.origin,
grant_type: 'authorization_code',
code,
scope: 'read write follow',
});
const tokenResponse = await fetch(`https://${instanceURL}/oauth/token`, {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: params.toString(),
});
const tokenJSON = await tokenResponse.json();
console.log({ tokenJSON });
return tokenJSON;
}

16
src/utils/emojify-text.js Normal file
View file

@ -0,0 +1,16 @@
function emojifyText(text, emojis = []) {
if (!emojis.length) return text;
// Replace shortcodes in text with emoji
// emojis = [{ shortcode: 'smile', url: 'https://example.com/emoji.png' }]
emojis.forEach((emoji) => {
const { shortcode, staticUrl, url } = emoji;
text = text.replace(
new RegExp(`:${shortcode}:`, 'g'),
`<img class="shortcode-emoji emoji" src="${url}" alt=":${shortcode}:" width="12" height="12" loading="lazy" />`,
);
});
// console.log(text, emojis);
return text;
}
export default emojifyText;

View file

@ -0,0 +1,34 @@
import emojifyText from './emojify-text';
export default (content, { emojis }) => {
// 1. Emojis
let enhancedContent = content;
if (emojis) {
enhancedContent = emojifyText(enhancedContent, emojis);
}
// 2. Code blocks
const dom = document.createElement('div');
dom.innerHTML = enhancedContent;
// Check for <p> with markdown-like content "```"
const blocks = Array.from(dom.querySelectorAll('p')).filter((p) =>
/^```[^]+```$/g.test(p.innerText.trim()),
);
blocks.forEach((block) => {
const pre = document.createElement('pre');
const code = document.createElement('code');
const breaks = block.querySelectorAll('br');
Array.from(breaks).forEach((br) => br.replaceWith('\n'));
code.innerHTML = block.innerText
.trim()
// .replace(/^```/g, '')
// .replace(/```$/g, '')
.replace(/^[\n\r]+/, '');
pre.appendChild(code);
block.replaceWith(pre);
});
enhancedContent = dom.innerHTML;
return enhancedContent;
};

View file

@ -0,0 +1,5 @@
export default function shortenNumber(num) {
return Intl.NumberFormat('en-US', {
notation: 'compact',
}).format(num);
}

19
src/utils/states.js Normal file
View file

@ -0,0 +1,19 @@
import { proxy } from 'valtio';
import { proxyMap } from 'valtio/utils';
export default proxy({
history: [],
statuses: proxyMap([]),
home: [],
homeNew: [],
homeLastFetchTime: null,
notifications: [],
notificationsNew: [],
notificationsLastFetchTime: null,
accounts: new WeakMap(),
reloadStatusPage: 0,
// Modals
showCompose: false,
showSettings: false,
showAccount: false,
});

87
src/utils/store.js Normal file
View file

@ -0,0 +1,87 @@
const local = {
get: (key) => {
try {
return localStorage.getItem(key);
} catch (e) {
console.warn(e);
return null;
}
},
getJSON: (key) => {
try {
return JSON.parse(local.get(key));
} catch (e) {
console.warn(e);
return null;
}
},
set: (key, value) => {
try {
return localStorage.setItem(key, value);
} catch (e) {
console.warn(e);
return null;
}
},
setJSON: (key, value) => {
try {
return local.set(key, JSON.stringify(value));
} catch (e) {
console.warn(e);
return null;
}
},
del: (key) => {
try {
return localStorage.removeItem(key);
} catch (e) {
console.warn(e);
return null;
}
},
};
const session = {
get: (key) => {
try {
return sessionStorage.getItem(key);
} catch (e) {
console.warn(e);
return null;
}
},
getJSON: (key) => {
try {
return JSON.parse(session.get(key));
} catch (e) {
console.warn(e);
return null;
}
},
set: (key, value) => {
try {
return sessionStorage.setItem(key, value);
} catch (e) {
console.warn(e);
return null;
}
},
setJSON: (key, value) => {
try {
return session.set(key, JSON.stringify(value));
} catch (e) {
console.warn(e);
return null;
}
},
del: (key) => {
try {
return sessionStorage.removeItem(key);
} catch (e) {
console.warn(e);
return null;
}
},
};
export default { local, session };

9
src/utils/useTitle.js Normal file
View file

@ -0,0 +1,9 @@
import { useEffect } from 'preact/hooks';
const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
export default (title) => {
useEffect(() => {
document.title = title ? `${title} - ${CLIENT_NAME}` : CLIENT_NAME;
}, [title]);
};

View file

@ -0,0 +1,6 @@
export default {
public: 'earth',
unlisted: 'unlock',
private: 'lock',
direct: 'at',
};

7
vite.config.js Normal file
View file

@ -0,0 +1,7 @@
import preact from '@preact/preset-vite';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [preact()],
});