commit
15c3979815
|
@ -11,8 +11,8 @@ Phanpy
|
|||
|
||||
This is an alternative web client for [Mastodon](https://joinmastodon.org/).
|
||||
|
||||
🔗 **Production**: https://phanpy.social <br>
|
||||
🔗 **Development**: https://dev.phanpy.social
|
||||
🔗 **Production**: https://phanpy.social (`production` branch)<br>
|
||||
🔗 **Development**: https://dev.phanpy.social (`main` branch, may break more often)
|
||||
|
||||
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.
|
||||
|
||||
|
|
|
@ -143,6 +143,7 @@ export function App() {
|
|||
window.masto = await login({
|
||||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
disableVersionCheck: true,
|
||||
});
|
||||
|
||||
const mastoAccount = await masto.accounts.verifyCredentials();
|
||||
|
@ -183,6 +184,7 @@ export function App() {
|
|||
window.masto = await login({
|
||||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
disableVersionCheck: true,
|
||||
});
|
||||
setIsLoggedIn(true);
|
||||
} catch (e) {
|
||||
|
|
|
@ -662,7 +662,8 @@ function Status({
|
|||
</>
|
||||
)}
|
||||
</span>{' '}
|
||||
{size !== 'l' && uri ? (
|
||||
{size !== 'l' &&
|
||||
(uri ? (
|
||||
<a href={uri} target="_blank" class="time">
|
||||
<Icon
|
||||
icon={visibilityIconsMap[visibility]}
|
||||
|
@ -694,7 +695,7 @@ function Status({
|
|||
{createdAtDate.toLocaleString()}
|
||||
</relative-time>
|
||||
</span>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
<div
|
||||
class={`content-container ${
|
||||
|
|
|
@ -9,6 +9,7 @@ import { useEffect, useState } from 'preact/hooks';
|
|||
|
||||
import Compose from './components/compose';
|
||||
import store from './utils/store';
|
||||
import useTitle from './utils/useTitle';
|
||||
|
||||
if (window.opener) {
|
||||
console = window.opener.console;
|
||||
|
@ -27,6 +28,7 @@ if (window.opener) {
|
|||
window.masto = await login({
|
||||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
disableVersionCheck: true,
|
||||
});
|
||||
console.info('Logged in successfully.');
|
||||
} catch (e) {
|
||||
|
@ -40,11 +42,15 @@ function App() {
|
|||
|
||||
const { editStatus, replyToStatus, draftStatus } = window.__COMPOSE__ || {};
|
||||
|
||||
useEffect(() => {
|
||||
if (uiState === 'closed') {
|
||||
window.close();
|
||||
}
|
||||
}, [uiState]);
|
||||
useTitle(
|
||||
editStatus
|
||||
? 'Editing source status'
|
||||
: replyToStatus
|
||||
? `Replying to @${
|
||||
replyToStatus.account?.acct || replyToStatus.account?.username
|
||||
}`
|
||||
: 'Compose',
|
||||
);
|
||||
|
||||
if (uiState === 'closed') {
|
||||
return (
|
||||
|
|
|
@ -338,6 +338,7 @@ export default () => {
|
|||
class="plain block"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => loadNotifications()}
|
||||
style={{ marginBlockEnd: '6em' }}
|
||||
>
|
||||
{uiState === 'loading' ? <Loader /> : <>Show more…</>}
|
||||
</button>
|
||||
|
|
|
@ -111,18 +111,25 @@ export default ({ id }) => {
|
|||
}, [heroStatus]);
|
||||
const heroContentText = useMemo(() => {
|
||||
if (!heroStatus) return '';
|
||||
const { content } = heroStatus;
|
||||
const { spoilerText, content } = heroStatus;
|
||||
let text;
|
||||
if (spoilerText) {
|
||||
text = spoilerText;
|
||||
} else {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = content;
|
||||
let text = div.innerText.trim();
|
||||
text = div.innerText.trim();
|
||||
}
|
||||
if (text.length > 64) {
|
||||
// "The title should ideally be less than 64 characters in length"
|
||||
// https://www.w3.org/Provider/Style/TITLE.html
|
||||
text = text.slice(0, 64) + '…';
|
||||
}
|
||||
return text;
|
||||
}, [heroStatus]);
|
||||
useTitle(
|
||||
heroDisplayName && heroContentText
|
||||
? `${heroDisplayName}: ${heroContentText}`
|
||||
? `${heroDisplayName}: "${heroContentText}"`
|
||||
: 'Status',
|
||||
);
|
||||
|
||||
|
|
|
@ -4,6 +4,6 @@ const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
|
|||
|
||||
export default (title) => {
|
||||
useEffect(() => {
|
||||
document.title = title ? `${title} - ${CLIENT_NAME}` : CLIENT_NAME;
|
||||
document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
|
||||
}, [title]);
|
||||
};
|
||||
|
|
Loading…
Reference in a new issue