commit
77ba42dba9
|
@ -2,7 +2,10 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, viewport-fit=cover"
|
||||
/>
|
||||
<title>Phanpy</title>
|
||||
<meta
|
||||
name="description"
|
||||
|
|
11
package-lock.json
generated
11
package-lock.json
generated
|
@ -13,6 +13,7 @@
|
|||
"fast-blurhash": "~1.1.2",
|
||||
"history": "~5.3.0",
|
||||
"iconify-icon": "~1.0.2",
|
||||
"just-debounce-it": "^3.2.0",
|
||||
"masto": "~4.10.1",
|
||||
"mem": "~9.0.2",
|
||||
"preact": "~10.11.3",
|
||||
|
@ -4046,6 +4047,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/just-debounce-it": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz",
|
||||
"integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ=="
|
||||
},
|
||||
"node_modules/kolorist": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.6.0.tgz",
|
||||
|
@ -8562,6 +8568,11 @@
|
|||
"integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
|
||||
"dev": true
|
||||
},
|
||||
"just-debounce-it": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/just-debounce-it/-/just-debounce-it-3.2.0.tgz",
|
||||
"integrity": "sha512-WXzwLL0745uNuedrCsCs3rpmfD6DBaf7uuVwaq98/8dafURfgQaBsSpjiPp5+CW6Vjltwy9cOGI6qE71b3T8iQ=="
|
||||
},
|
||||
"kolorist": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/kolorist/-/kolorist-1.6.0.tgz",
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
"fast-blurhash": "~1.1.2",
|
||||
"history": "~5.3.0",
|
||||
"iconify-icon": "~1.0.2",
|
||||
"just-debounce-it": "^3.2.0",
|
||||
"masto": "~4.10.1",
|
||||
"mem": "~9.0.2",
|
||||
"preact": "~10.11.3",
|
||||
|
|
BIN
public/logo-maskable-512.png
Normal file
BIN
public/logo-maskable-512.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 5.3 KiB |
|
@ -5,12 +5,17 @@ import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
|
|||
|
||||
const imageRoute = new Route(
|
||||
({ request, sameOrigin }) => {
|
||||
return !sameOrigin && request.destination === 'image';
|
||||
const isRemote = !sameOrigin;
|
||||
const isImage = request.destination === 'image';
|
||||
const isAvatar = request.url.includes('/avatars/');
|
||||
const isEmoji = request.url.includes('/emoji/');
|
||||
return isRemote && isImage && (isAvatar || isEmoji);
|
||||
},
|
||||
new CacheFirst({
|
||||
cacheName: 'remote-images',
|
||||
plugins: [
|
||||
new ExpirationPlugin({
|
||||
maxEntries: 100,
|
||||
maxAgeSeconds: 7 * 24 * 60 * 60, // 7 days
|
||||
purgeOnQuotaError: true,
|
||||
}),
|
||||
|
|
55
src/app.css
55
src/app.css
|
@ -137,6 +137,7 @@ a.mention span {
|
|||
transparent
|
||||
);
|
||||
background-repeat: no-repeat;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
.timeline.contextual > li:first-child {
|
||||
background-position: 0 16px;
|
||||
|
@ -273,6 +274,14 @@ a.mention span {
|
|||
.timeline.contextual > li.thread .replies li:before {
|
||||
left: calc(50px + 16px + 16px);
|
||||
}
|
||||
.timeline.contextual.loading > li:not(.hero) {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
/* background-image: none !important; */
|
||||
}
|
||||
/* .timeline.contextual.loading > li:not(.hero):before {
|
||||
content: none !important;
|
||||
} */
|
||||
|
||||
.timeline-deck.compact .status {
|
||||
max-height: max(25vh, 160px);
|
||||
|
@ -334,12 +343,12 @@ a.mention span {
|
|||
}
|
||||
@keyframes slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
opacity: 0.5;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
.deck-backdrop .deck {
|
||||
|
@ -347,7 +356,7 @@ a.mention span {
|
|||
max-width: 100vw;
|
||||
border-left: 1px solid var(--divider-color);
|
||||
background-color: var(--bg-color);
|
||||
animation: slide-in 0.2s ease-out;
|
||||
animation: slide-in 0.5s var(--timing-function);
|
||||
box-shadow: -1px 0 var(--bg-color);
|
||||
}
|
||||
.deck-backdrop .deck .status {
|
||||
|
@ -356,7 +365,7 @@ a.mention span {
|
|||
|
||||
.decks {
|
||||
flex-grow: 1;
|
||||
transition: transform 0.2s ease-in-out;
|
||||
transition: transform 0.5s var(--timing-function);
|
||||
}
|
||||
|
||||
.deck-close {
|
||||
|
@ -405,31 +414,6 @@ a.mention span {
|
|||
width: 40em;
|
||||
max-width: 100vw;
|
||||
padding: 16px;
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--divider-color);
|
||||
overflow: auto;
|
||||
max-height: 90vh;
|
||||
max-height: 90dvh;
|
||||
position: relative;
|
||||
}
|
||||
.box > :is(h1, h2, h3):first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
.box .close-button {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
float: right;
|
||||
margin: -16px -8px 0 0;
|
||||
transform: translate(0, -8px);
|
||||
}
|
||||
|
||||
.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 */
|
||||
|
@ -463,6 +447,9 @@ a.mention span {
|
|||
max-height: 100vh;
|
||||
max-height: 100dvh;
|
||||
}
|
||||
.carousel > * video {
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.carousel-top-controls {
|
||||
top: 0;
|
||||
|
@ -587,7 +574,7 @@ button.carousel-dot[disabled].active {
|
|||
padding-right: max(16px, env(safe-area-inset-right));
|
||||
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -1px 32px var(--divider-color);
|
||||
animation: slide-up 0.2s ease-out;
|
||||
animation: slide-up 0.2s var(--timing-function);
|
||||
border: 1px solid var(--outline-color);
|
||||
}
|
||||
|
||||
|
@ -632,13 +619,15 @@ button.carousel-dot[disabled].active {
|
|||
border: 1px solid var(--outline-color);
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
box-shadow: 0 0 8px var(--bg-faded-color), 0 4px 8px var(--bg-faded-color),
|
||||
0 2px 4px var(--bg-faded-color);
|
||||
}
|
||||
.menu-container menu li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.menu-container > button:is(:active, :focus) + menu,
|
||||
.menu-container > button:is(:hover, :active, :focus) + menu,
|
||||
.menu-container menu:is(:hover, :active) {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
@ -663,7 +652,7 @@ button.carousel-dot[disabled].active {
|
|||
display: flex;
|
||||
}
|
||||
.decks:has(~ .deck-backdrop) {
|
||||
transform: translateX(-5vw);
|
||||
transform: translate3d(-5vw, 0, 0);
|
||||
}
|
||||
.deck-backdrop .deck {
|
||||
width: 50%;
|
||||
|
|
|
@ -104,7 +104,7 @@ async function startStream() {
|
|||
export function App() {
|
||||
const snapStates = useSnapshot(states);
|
||||
const [isLoggedIn, setIsLoggedIn] = useState(false);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const [uiState, setUIState] = useState('loading');
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const theme = store.local.get('theme');
|
||||
|
@ -144,6 +144,7 @@ export function App() {
|
|||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
disableVersionCheck: true,
|
||||
timeout: 30_000,
|
||||
});
|
||||
|
||||
const mastoAccount = await masto.accounts.verifyCredentials();
|
||||
|
@ -185,6 +186,7 @@ export function App() {
|
|||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
disableVersionCheck: true,
|
||||
timeout: 30_000,
|
||||
});
|
||||
setIsLoggedIn(true);
|
||||
} catch (e) {
|
||||
|
@ -192,6 +194,8 @@ export function App() {
|
|||
}
|
||||
setUIState('default');
|
||||
})();
|
||||
} else {
|
||||
setUIState('default');
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
|
|
@ -78,6 +78,7 @@
|
|||
text-shadow: 0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
|
||||
0 1px 10px var(--bg-color), 0 1px 10px var(--bg-color),
|
||||
0 1px 10px var(--bg-color);
|
||||
z-index: 2;
|
||||
}
|
||||
#_compose-container .status-preview-legend.reply-to {
|
||||
color: var(--reply-to-color);
|
||||
|
@ -359,3 +360,10 @@
|
|||
width: 100%;
|
||||
color: var(--red-color);
|
||||
}
|
||||
|
||||
@media (display-mode: standalone) {
|
||||
/* No popping in standalone mode */
|
||||
#compose-container .pop-button {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -256,6 +256,12 @@ function Compose({
|
|||
const canClose = () => {
|
||||
const { value, dataset } = textareaRef.current;
|
||||
|
||||
// check if loading
|
||||
if (uiState === 'loading') {
|
||||
console.log('canClose', { uiState });
|
||||
return false;
|
||||
}
|
||||
|
||||
// check for status and media attachments
|
||||
const hasMediaAttachments = mediaAttachments.length > 0;
|
||||
if (!value && !hasMediaAttachments) {
|
||||
|
@ -297,6 +303,7 @@ function Compose({
|
|||
isSelf,
|
||||
hasOnlyAcct,
|
||||
sameWithSource,
|
||||
uiState,
|
||||
});
|
||||
|
||||
return false;
|
||||
|
@ -341,7 +348,8 @@ function Compose({
|
|||
<span>
|
||||
<button
|
||||
type="button"
|
||||
class="light"
|
||||
class="light pop-button"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => {
|
||||
// If there are non-ID media attachments (not yet uploaded), show confirmation dialog because they are not going to be passed to the new window
|
||||
const containNonIDMediaAttachments =
|
||||
|
@ -386,6 +394,7 @@ function Compose({
|
|||
<button
|
||||
type="button"
|
||||
class="light close-button"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => {
|
||||
if (confirmClose()) {
|
||||
onClose();
|
||||
|
@ -399,7 +408,8 @@ function Compose({
|
|||
hasOpener && (
|
||||
<button
|
||||
type="button"
|
||||
class="light"
|
||||
class="light pop-button"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={() => {
|
||||
// If there are non-ID media attachments (not yet uploaded), show confirmation dialog because they are not going to be passed to the new window
|
||||
const containNonIDMediaAttachments =
|
||||
|
@ -532,7 +542,6 @@ function Compose({
|
|||
const params = {
|
||||
file,
|
||||
description,
|
||||
skipPolling: true,
|
||||
};
|
||||
return masto.mediaAttachments.create(params).then((res) => {
|
||||
if (res.id) {
|
||||
|
@ -554,6 +563,7 @@ function Compose({
|
|||
// Alert all the reasons
|
||||
results.forEach((result) => {
|
||||
if (result.status === 'rejected') {
|
||||
console.error(result);
|
||||
alert(result.reason || `Attachment #${i} failed`);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -6,11 +6,18 @@ import states from '../utils/states';
|
|||
import Avatar from './avatar';
|
||||
|
||||
function NameText({ account, showAvatar, showAcct, short, external }) {
|
||||
const { acct, avatar, avatarStatic, id, url, displayName, username, emojis } =
|
||||
account;
|
||||
const { acct, avatar, avatarStatic, id, url, displayName, emojis } = account;
|
||||
let { username } = account;
|
||||
|
||||
const displayNameWithEmoji = emojifyText(displayName, emojis);
|
||||
|
||||
if (
|
||||
!short &&
|
||||
username.toLowerCase().trim() === (displayName || '').toLowerCase().trim()
|
||||
) {
|
||||
username = null;
|
||||
}
|
||||
|
||||
return (
|
||||
<a
|
||||
class={`name-text ${short ? 'short' : ''}`}
|
||||
|
@ -35,7 +42,7 @@ function NameText({ account, showAvatar, showAcct, short, external }) {
|
|||
__html: displayNameWithEmoji,
|
||||
}}
|
||||
/>
|
||||
{!showAcct && (
|
||||
{!showAcct && username && (
|
||||
<>
|
||||
{' '}
|
||||
<i>@{username}</i>
|
||||
|
|
|
@ -62,6 +62,7 @@
|
|||
padding: 16px 16px 20px;
|
||||
line-height: 1.5;
|
||||
align-items: flex-start;
|
||||
position: relative;
|
||||
}
|
||||
.status.large {
|
||||
--fade-in-out-bg: linear-gradient(
|
||||
|
@ -81,7 +82,7 @@
|
|||
padding-top: 8px;
|
||||
}
|
||||
.status.small {
|
||||
font-size: 95%;
|
||||
/* font-size: 95%; */
|
||||
}
|
||||
.status.skeleton {
|
||||
color: var(--outline-color);
|
||||
|
@ -283,6 +284,7 @@
|
|||
}
|
||||
.status .media-video {
|
||||
position: relative;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
.status .media-video:before {
|
||||
/* draw a circle in the middle */
|
||||
|
@ -408,6 +410,16 @@ a.card:hover {
|
|||
|
||||
/* POLLS */
|
||||
|
||||
.poll {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
.poll.loading {
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
.poll.read-only {
|
||||
pointer-events: none;
|
||||
}
|
||||
.poll-option {
|
||||
margin-top: 8px;
|
||||
padding: 8px;
|
||||
|
@ -607,6 +619,26 @@ a.card:hover {
|
|||
color: var(--green-color);
|
||||
}
|
||||
|
||||
/* BADGE */
|
||||
|
||||
.status-badge {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
line-height: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.status-badge .favourite {
|
||||
color: var(--favourite-color);
|
||||
}
|
||||
.status-badge .reblog {
|
||||
color: var(--reblog-color);
|
||||
}
|
||||
.status-badge .bookmark {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
/* MISC */
|
||||
|
||||
.status-aside {
|
||||
|
|
|
@ -130,7 +130,7 @@ function Status({
|
|||
}
|
||||
}
|
||||
|
||||
const [showSpoiler, setShowSpoiler] = useState(false);
|
||||
const showSpoiler = snapStates.spoilers.has(id) || false;
|
||||
|
||||
const debugHover = (e) => {
|
||||
if (e.shiftKey) {
|
||||
|
@ -197,6 +197,13 @@ function Status({
|
|||
}`}
|
||||
onMouseEnter={debugHover}
|
||||
>
|
||||
{size !== 'l' && (
|
||||
<div class="status-badge">
|
||||
{reblogged && <Icon class="reblog" icon="rocket" size="s" />}
|
||||
{favourited && <Icon class="favourite" icon="heart" size="s" />}
|
||||
{bookmarked && <Icon class="bookmark" icon="bookmark" size="s" />}
|
||||
</div>
|
||||
)}
|
||||
{size !== 's' && (
|
||||
<a
|
||||
href={url}
|
||||
|
@ -293,7 +300,11 @@ function Status({
|
|||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setShowSpoiler(!showSpoiler);
|
||||
if (showSpoiler) {
|
||||
states.spoilers.delete(id);
|
||||
} else {
|
||||
states.spoilers.set(id, true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
|
||||
|
@ -348,7 +359,15 @@ function Status({
|
|||
}),
|
||||
}}
|
||||
/>
|
||||
{!!poll && <Poll poll={poll} readOnly={readOnly} />}
|
||||
{!!poll && (
|
||||
<Poll
|
||||
poll={poll}
|
||||
readOnly={readOnly}
|
||||
onUpdate={(newPoll) => {
|
||||
states.statuses.get(id).poll = newPoll;
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!spoilerText && sensitive && !!mediaAttachments.length && (
|
||||
<button
|
||||
class="plain spoiler"
|
||||
|
@ -356,7 +375,11 @@ function Status({
|
|||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
setShowSpoiler(!showSpoiler);
|
||||
if (showSpoiler) {
|
||||
states.spoilers.delete(id);
|
||||
} else {
|
||||
states.spoilers.add(id);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
|
||||
|
@ -455,6 +478,14 @@ function Status({
|
|||
count={reblogsCount}
|
||||
onClick={async () => {
|
||||
try {
|
||||
if (!reblogged) {
|
||||
const yes = confirm(
|
||||
'Are you sure that you want to boost this post?',
|
||||
);
|
||||
if (!yes) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
// Optimistic
|
||||
states.statuses.set(id, {
|
||||
...status,
|
||||
|
@ -607,7 +638,7 @@ video = Video clip
|
|||
audio = Audio track
|
||||
*/
|
||||
|
||||
function Media({ media, showOriginal, onClick }) {
|
||||
function Media({ media, showOriginal, onClick = () => {} }) {
|
||||
const { blurhash, description, meta, previewUrl, remoteUrl, url, type } =
|
||||
media;
|
||||
const { original, small, focus } = meta || {};
|
||||
|
@ -850,14 +881,9 @@ function Card({ card }) {
|
|||
}
|
||||
}
|
||||
|
||||
function Poll({ poll, readOnly }) {
|
||||
const [pollSnapshot, setPollSnapshot] = useState(poll);
|
||||
function Poll({ poll, readOnly, onUpdate = () => {} }) {
|
||||
const [uiState, setUIState] = useState('default');
|
||||
|
||||
useEffect(() => {
|
||||
setPollSnapshot(poll);
|
||||
}, [poll]);
|
||||
|
||||
const {
|
||||
expired,
|
||||
expiresAt,
|
||||
|
@ -868,12 +894,16 @@ function Poll({ poll, readOnly }) {
|
|||
voted,
|
||||
votersCount,
|
||||
votesCount,
|
||||
} = pollSnapshot;
|
||||
} = poll;
|
||||
|
||||
const expiresAtDate = !!expiresAt && new Date(expiresAt);
|
||||
|
||||
return (
|
||||
<div class="poll">
|
||||
<div
|
||||
class={`poll ${readOnly ? 'read-only' : ''} ${
|
||||
uiState === 'loading' ? 'loading' : ''
|
||||
}`}
|
||||
>
|
||||
{voted || expired ? (
|
||||
options.map((option, i) => {
|
||||
const { title, votesCount: optionVotesCount } = option;
|
||||
|
@ -930,13 +960,9 @@ function Poll({ poll, readOnly }) {
|
|||
choices: votes,
|
||||
});
|
||||
console.log(pollResponse);
|
||||
setPollSnapshot(pollResponse);
|
||||
onUpdate(pollResponse);
|
||||
setUIState('default');
|
||||
}}
|
||||
style={{
|
||||
pointerEvents: uiState === 'loading' || readOnly ? 'none' : 'auto',
|
||||
opacity: uiState === 'loading' ? 0.5 : 1,
|
||||
}}
|
||||
>
|
||||
{options.map((option, i) => {
|
||||
const { title } = option;
|
||||
|
@ -968,6 +994,31 @@ function Poll({ poll, readOnly }) {
|
|||
)}
|
||||
{!readOnly && (
|
||||
<p class="poll-meta">
|
||||
{!expired && (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
class="textual"
|
||||
disabled={uiState === 'loading'}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
setUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
const pollResponse = await masto.poll.fetch(id);
|
||||
onUpdate(pollResponse);
|
||||
} catch (e) {
|
||||
// Silent fail
|
||||
}
|
||||
setUIState('default');
|
||||
})();
|
||||
}}
|
||||
>
|
||||
Refresh
|
||||
</button>{' '}
|
||||
•{' '}
|
||||
</>
|
||||
)}
|
||||
<span title={votersCount}>{shortenNumber(votersCount)}</span>{' '}
|
||||
{votersCount === 1 ? 'voter' : 'voters'}
|
||||
{votersCount !== votesCount && (
|
||||
|
@ -1012,10 +1063,10 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
|
|||
const currentYear = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<div id="edit-history" class="box">
|
||||
<button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<div id="edit-history" class="sheet">
|
||||
{/* <button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<Icon icon="x" alt="Close" />
|
||||
</button>
|
||||
</button> */}
|
||||
<h2>Edit History</h2>
|
||||
{uiState === 'error' && <p>Failed to load history</p>}
|
||||
{uiState === 'loading' && (
|
||||
|
|
|
@ -29,6 +29,7 @@ if (window.opener) {
|
|||
url: `https://${instanceURL}`,
|
||||
accessToken,
|
||||
disableVersionCheck: true,
|
||||
timeout: 30_000,
|
||||
});
|
||||
console.info('Logged in successfully.');
|
||||
} catch (e) {
|
||||
|
|
|
@ -30,6 +30,8 @@
|
|||
--img-bg-color: rgba(128, 128, 128, 0.2);
|
||||
--loader-color: #1c1e2199;
|
||||
--comment-line-color: #e5e5e5;
|
||||
|
||||
--timing-function: cubic-bezier(0.3, 0.5, 0, 1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
@ -118,8 +120,9 @@ button,
|
|||
vertical-align: middle;
|
||||
text-decoration: none;
|
||||
}
|
||||
button > * {
|
||||
:is(button, .button) > * {
|
||||
vertical-align: middle;
|
||||
pointer-events: none;
|
||||
}
|
||||
:is(button, .button):not(:disabled, .disabled):hover {
|
||||
cursor: pointer;
|
||||
|
@ -154,6 +157,15 @@ button > * {
|
|||
padding: 12px;
|
||||
}
|
||||
|
||||
:is(button, .button).textual {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
vertical-align: baseline;
|
||||
color: var(--link-color);
|
||||
background-color: transparent;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
textarea,
|
||||
select {
|
||||
|
|
|
@ -82,6 +82,7 @@ function Home({ hidden }) {
|
|||
const diffMins = Math.round(diff / 1000 / 60);
|
||||
if (diffMins > 1) {
|
||||
console.log('visible', { lastHidden, diffMins });
|
||||
setUIState('loading');
|
||||
setTimeout(() => {
|
||||
(async () => {
|
||||
const newStatus = await masto.timelines.fetchHome({
|
||||
|
@ -91,6 +92,7 @@ function Home({ hidden }) {
|
|||
if (newStatus.length && newStatus[0].id !== states.home[0].id) {
|
||||
states.homeNew = newStatus;
|
||||
}
|
||||
setUIState('default');
|
||||
})();
|
||||
// loadStatuses(true);
|
||||
// states.homeNew = [];
|
||||
|
@ -101,6 +103,7 @@ function Home({ hidden }) {
|
|||
document.addEventListener('visibilitychange', handleVisibilityChange);
|
||||
return () => {
|
||||
document.removeEventListener('visibilitychange', handleVisibilityChange);
|
||||
setUIState('default');
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
|
26
src/pages/login.css
Normal file
26
src/pages/login.css
Normal file
|
@ -0,0 +1,26 @@
|
|||
#login {
|
||||
padding: 16px;
|
||||
background-image: radial-gradient(
|
||||
closest-side at 50% 50%,
|
||||
var(--bg-color),
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
#login .error {
|
||||
color: var(--red-color);
|
||||
}
|
||||
|
||||
#login label p {
|
||||
margin: 0 0 0.25em 0;
|
||||
padding: 0;
|
||||
text-transform: uppercase;
|
||||
font-size: 90%;
|
||||
font-weight: bold;
|
||||
color: var(--text-insignificant-color);
|
||||
}
|
||||
|
||||
#login input {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
|
@ -1,3 +1,5 @@
|
|||
import './login.css';
|
||||
|
||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||
|
||||
import Loader from '../components/loader';
|
||||
|
@ -53,7 +55,7 @@ function Login() {
|
|||
};
|
||||
|
||||
return (
|
||||
<main class="box" style={{ textAlign: 'center' }}>
|
||||
<main id="login" style={{ textAlign: 'center' }}>
|
||||
<form onSubmit={onSubmit}>
|
||||
<h1>Log in</h1>
|
||||
<label>
|
||||
|
@ -82,8 +84,8 @@ function Login() {
|
|||
<button class="large" disabled={uiState === 'loading'}>
|
||||
Log in
|
||||
</button>{' '}
|
||||
<Loader hidden={uiState !== 'loading'} />
|
||||
</p>
|
||||
<Loader hidden={uiState !== 'loading'} />
|
||||
<hr />
|
||||
<p>
|
||||
<a href="https://joinmastodon.org/servers" target="_blank">
|
||||
|
|
|
@ -17,20 +17,20 @@
|
|||
opacity: 0.75;
|
||||
color: var(--text-insignificant-color);
|
||||
}
|
||||
.notification-type.favourite {
|
||||
.notification-type.notification-favourite {
|
||||
color: var(--favourite-color);
|
||||
}
|
||||
.notification-type.reblog {
|
||||
.notification-type.notification-reblog {
|
||||
color: var(--reblog-color);
|
||||
}
|
||||
.notification-type.poll,
|
||||
.notification-type.mention {
|
||||
.notification-type.notification-poll,
|
||||
.notification-type.notification-mention {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.notification .status-link {
|
||||
border-radius: 8px 8px 0 0;
|
||||
border: 1px solid var(--divider-color);
|
||||
border: 1px solid var(--outline-color);
|
||||
max-height: 160px;
|
||||
overflow: hidden;
|
||||
/* fade out mask gradient bottom */
|
||||
|
@ -41,9 +41,16 @@
|
|||
);
|
||||
filter: saturate(0.25);
|
||||
}
|
||||
.notification .status-link.status-type-mention {
|
||||
max-height: 320px;
|
||||
filter: none;
|
||||
background-color: var(--bg-color);
|
||||
margin-top: calc(-16px - 1px);
|
||||
}
|
||||
.notification .status-link:hover {
|
||||
background-color: var(--bg-blur-color);
|
||||
filter: saturate(1);
|
||||
border-color: var(--outline-hover-color);
|
||||
}
|
||||
.notification .status-link > * {
|
||||
pointer-events: none;
|
||||
|
|
|
@ -41,7 +41,7 @@ const contentText = {
|
|||
update: 'A status you interacted with has been edited.',
|
||||
};
|
||||
|
||||
const LIMIT = 20;
|
||||
const LIMIT = 30; // 30 is the maximum limit :(
|
||||
|
||||
function Notification({ notification }) {
|
||||
const { id, type, status, account, _accounts } = notification;
|
||||
|
@ -61,7 +61,7 @@ function Notification({ notification }) {
|
|||
return (
|
||||
<>
|
||||
<div
|
||||
class={`notification-type ${type}`}
|
||||
class={`notification-type notification-${type}`}
|
||||
title={new Date(notification.createdAt).toLocaleString()}
|
||||
>
|
||||
<Icon
|
||||
|
@ -82,34 +82,36 @@ function Notification({ notification }) {
|
|||
/>
|
||||
</div>
|
||||
<div class="notification-content">
|
||||
<p>
|
||||
{!/poll|update/i.test(type) && (
|
||||
<>
|
||||
{_accounts?.length > 1 ? (
|
||||
<>
|
||||
<b>{_accounts.length} people</b>{' '}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NameText account={account} showAvatar />{' '}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{text}
|
||||
{type === 'mention' && (
|
||||
<span class="insignificant">
|
||||
{' '}
|
||||
•{' '}
|
||||
<relative-time
|
||||
datetime={notification.createdAt}
|
||||
format="micro"
|
||||
threshold="P1D"
|
||||
prefix=""
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{type !== 'mention' && (
|
||||
<p>
|
||||
{!/poll|update/i.test(type) && (
|
||||
<>
|
||||
{_accounts?.length > 1 ? (
|
||||
<>
|
||||
<b>{_accounts.length} people</b>{' '}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<NameText account={account} showAvatar />{' '}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{text}
|
||||
{type === 'mention' && (
|
||||
<span class="insignificant">
|
||||
{' '}
|
||||
•{' '}
|
||||
<relative-time
|
||||
datetime={notification.createdAt}
|
||||
format="micro"
|
||||
threshold="P1D"
|
||||
prefix=""
|
||||
/>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
{_accounts?.length > 1 && (
|
||||
<p>
|
||||
{_accounts.map((account, i) => (
|
||||
|
@ -142,7 +144,10 @@ function Notification({ notification }) {
|
|||
</p>
|
||||
)}
|
||||
{status && (
|
||||
<Link class="status-link" href={`#/s/${actualStatusID}`}>
|
||||
<Link
|
||||
class={`status-link status-type-${type}`}
|
||||
href={`#/s/${actualStatusID}`}
|
||||
>
|
||||
<Status status={status} size="s" />
|
||||
</Link>
|
||||
)}
|
||||
|
|
|
@ -1,10 +1,5 @@
|
|||
#settings-container {
|
||||
padding-bottom: 3em;
|
||||
animation: fade-in 0.2s ease-out;
|
||||
}
|
||||
|
||||
#settings-container h2 {
|
||||
font-size: .9em;
|
||||
font-size: 0.9em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-insignificant-color);
|
||||
}
|
||||
|
@ -48,7 +43,7 @@
|
|||
text-align: right;
|
||||
}
|
||||
#settings-container div,
|
||||
#settings-container div > *{
|
||||
#settings-container div > * {
|
||||
vertical-align: middle;
|
||||
}
|
||||
#settings-container .avatar {
|
||||
|
@ -63,7 +58,7 @@
|
|||
overflow: hidden;
|
||||
padding: 1px;
|
||||
}
|
||||
#settings-container .radio-group input[type="radio"] {
|
||||
#settings-container .radio-group input[type='radio'] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
|
@ -87,4 +82,4 @@
|
|||
}
|
||||
#settings-container .radio-group label:has(input:checked) input:checked + span {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,10 +23,10 @@ function Settings({ onClose }) {
|
|||
const [currentDefault, setCurrentDefault] = useState(0);
|
||||
|
||||
return (
|
||||
<div id="settings-container" class="box">
|
||||
<button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<div id="settings-container" class="sheet">
|
||||
{/* <button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<Icon icon="x" alt="Close" />
|
||||
</button>
|
||||
</button> */}
|
||||
<h2>Accounts</h2>
|
||||
<ul class="accounts-list">
|
||||
{accounts.map((account, i) => {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
import debounce from 'just-debounce-it';
|
||||
import { Link } from 'preact-router/match';
|
||||
import {
|
||||
useEffect,
|
||||
|
@ -13,124 +14,168 @@ import Loader from '../components/loader';
|
|||
import Status from '../components/status';
|
||||
import shortenNumber from '../utils/shorten-number';
|
||||
import states from '../utils/states';
|
||||
import store from '../utils/store';
|
||||
import useTitle from '../utils/useTitle';
|
||||
|
||||
function StatusPage({ id }) {
|
||||
const snapStates = useSnapshot(states);
|
||||
const [statuses, setStatuses] = useState([{ id }]);
|
||||
const [statuses, setStatuses] = useState([]);
|
||||
const [uiState, setUIState] = useState('default');
|
||||
const userInitiated = useRef(true); // Initial open is user-initiated
|
||||
const heroStatusRef = useRef();
|
||||
|
||||
useEffect(async () => {
|
||||
const containsStatus = statuses.find((s) => s.id === id);
|
||||
const statusesWithSameAccountID = statuses.filter(
|
||||
(s) => s.accountID === containsStatus?.accountID,
|
||||
);
|
||||
if (statusesWithSameAccountID.length > 1) {
|
||||
setStatuses(
|
||||
statusesWithSameAccountID.map((s) => ({
|
||||
...s,
|
||||
thread: true,
|
||||
descendant: undefined,
|
||||
ancestor: undefined,
|
||||
})),
|
||||
);
|
||||
} else {
|
||||
setStatuses([{ id }]);
|
||||
}
|
||||
const scrollableRef = useRef();
|
||||
useEffect(() => {
|
||||
const onScroll = debounce(() => {
|
||||
// console.log('onScroll');
|
||||
const { scrollTop } = scrollableRef.current;
|
||||
states.scrollPositions.set(id, scrollTop);
|
||||
}, 100);
|
||||
scrollableRef.current.addEventListener('scroll', onScroll, {
|
||||
passive: true,
|
||||
});
|
||||
onScroll();
|
||||
return () => {
|
||||
scrollableRef.current?.removeEventListener('scroll', onScroll);
|
||||
};
|
||||
}, [id]);
|
||||
|
||||
useEffect(() => {
|
||||
setUIState('loading');
|
||||
|
||||
const hasStatus = snapStates.statuses.has(id);
|
||||
let heroStatus = snapStates.statuses.get(id);
|
||||
try {
|
||||
heroStatus = await masto.statuses.fetch(id);
|
||||
states.statuses.set(id, heroStatus);
|
||||
} catch (e) {
|
||||
// Silent fail if status is cached
|
||||
if (!hasStatus) {
|
||||
setUIState('error');
|
||||
alert('Error fetching status');
|
||||
const containsStatus = statuses.find((s) => s.id === id);
|
||||
if (!containsStatus) {
|
||||
// Case 1: On first load, or when navigating to a status that's not cached at all
|
||||
setStatuses([{ id }]);
|
||||
} else {
|
||||
const cachedStatuses = store.session.getJSON('statuses-' + id);
|
||||
if (cachedStatuses) {
|
||||
// Case 2: Looks like we've cached this status before, let's restore them to make it snappy
|
||||
const reallyCachedStatuses = cachedStatuses.filter(
|
||||
(s) => snapStates.statuses.has(s.id),
|
||||
// Some are not cached in the global state, so we need to filter them out
|
||||
);
|
||||
setStatuses(reallyCachedStatuses);
|
||||
} else {
|
||||
// Case 3: Unknown state, could be a sub-comment. Let's slice off all descendant statuses after the hero status to be safe because they are custom-rendered with sub-comments etc
|
||||
const heroIndex = statuses.findIndex((s) => s.id === id);
|
||||
const slicedStatuses = statuses.slice(0, heroIndex + 1);
|
||||
setStatuses(slicedStatuses);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const context = await masto.statuses.fetchContext(id);
|
||||
const { ancestors, descendants } = context;
|
||||
|
||||
ancestors.forEach((status) => {
|
||||
states.statuses.set(status.id, status);
|
||||
});
|
||||
const nestedDescendants = [];
|
||||
descendants.forEach((status) => {
|
||||
states.statuses.set(status.id, status);
|
||||
if (status.inReplyToAccountId === status.account.id) {
|
||||
// If replying to self, it's part of the thread, level 1
|
||||
nestedDescendants.push(status);
|
||||
} else if (status.inReplyToId === heroStatus.id) {
|
||||
// If replying to the hero status, it's a reply, level 1
|
||||
nestedDescendants.push(status);
|
||||
} else {
|
||||
// If replying to someone else, it's a reply to a reply, level 2
|
||||
const parent = descendants.find((s) => s.id === status.inReplyToId);
|
||||
if (parent) {
|
||||
if (!parent.__replies) {
|
||||
parent.__replies = [];
|
||||
}
|
||||
parent.__replies.push(status);
|
||||
} else {
|
||||
// If no parent, it's probably a reply to a reply to a reply, level 3
|
||||
console.warn('[LEVEL 3] No parent found for', status);
|
||||
}
|
||||
(async () => {
|
||||
const hasStatus = snapStates.statuses.has(id);
|
||||
let heroStatus = snapStates.statuses.get(id);
|
||||
try {
|
||||
heroStatus = await masto.statuses.fetch(id);
|
||||
states.statuses.set(id, heroStatus);
|
||||
} catch (e) {
|
||||
// Silent fail if status is cached
|
||||
if (!hasStatus) {
|
||||
setUIState('error');
|
||||
alert('Error fetching status');
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
console.log({ ancestors, descendants, nestedDescendants });
|
||||
try {
|
||||
const context = await masto.statuses.fetchContext(id);
|
||||
const { ancestors, descendants } = context;
|
||||
|
||||
const allStatuses = [
|
||||
...ancestors.map((s) => ({
|
||||
id: s.id,
|
||||
ancestor: true,
|
||||
accountID: s.account.id,
|
||||
})),
|
||||
{ id, accountID: heroStatus.account.id },
|
||||
...nestedDescendants.map((s) => ({
|
||||
id: s.id,
|
||||
accountID: s.account.id,
|
||||
descendant: true,
|
||||
thread: s.account.id === heroStatus.account.id,
|
||||
replies: s.__replies?.map((r) => r.id),
|
||||
})),
|
||||
];
|
||||
console.log({ allStatuses });
|
||||
setStatuses(allStatuses);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUIState('error');
|
||||
}
|
||||
ancestors.forEach((status) => {
|
||||
states.statuses.set(status.id, status);
|
||||
});
|
||||
const nestedDescendants = [];
|
||||
descendants.forEach((status) => {
|
||||
states.statuses.set(status.id, status);
|
||||
if (status.inReplyToAccountId === status.account.id) {
|
||||
// If replying to self, it's part of the thread, level 1
|
||||
nestedDescendants.push(status);
|
||||
} else if (status.inReplyToId === heroStatus.id) {
|
||||
// If replying to the hero status, it's a reply, level 1
|
||||
nestedDescendants.push(status);
|
||||
} else {
|
||||
// If replying to someone else, it's a reply to a reply, level 2
|
||||
const parent = descendants.find((s) => s.id === status.inReplyToId);
|
||||
if (parent) {
|
||||
if (!parent.__replies) {
|
||||
parent.__replies = [];
|
||||
}
|
||||
parent.__replies.push(status);
|
||||
} else {
|
||||
// If no parent, it's probably a reply to a reply to a reply, level 3
|
||||
console.warn('[LEVEL 3] No parent found for', status);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
setUIState('default');
|
||||
console.log({ ancestors, descendants, nestedDescendants });
|
||||
|
||||
const allStatuses = [
|
||||
...ancestors.map((s) => ({
|
||||
id: s.id,
|
||||
ancestor: true,
|
||||
accountID: s.account.id,
|
||||
})),
|
||||
{ id, accountID: heroStatus.account.id },
|
||||
...nestedDescendants.map((s) => ({
|
||||
id: s.id,
|
||||
accountID: s.account.id,
|
||||
descendant: true,
|
||||
thread: s.account.id === heroStatus.account.id,
|
||||
replies: s.__replies?.map((r) => r.id),
|
||||
})),
|
||||
];
|
||||
|
||||
setUIState('default');
|
||||
console.log({ allStatuses });
|
||||
setStatuses(allStatuses);
|
||||
store.session.setJSON('statuses-' + id, allStatuses);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
setUIState('error');
|
||||
}
|
||||
})();
|
||||
}, [id, snapStates.reloadStatusPage]);
|
||||
|
||||
useLayoutEffect(() => {
|
||||
if (heroStatusRef.current && statuses.length > 1) {
|
||||
heroStatusRef.current.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
});
|
||||
if (!statuses.length) return;
|
||||
const isLoading = uiState === 'loading';
|
||||
if (userInitiated.current) {
|
||||
const hasAncestors = statuses.findIndex((s) => s.id === id) > 0; // Cannot use `ancestor` key because the hero state is dynamic
|
||||
if (!isLoading && hasAncestors) {
|
||||
// Case 1: User initiated, has ancestors, after statuses are loaded, SNAP to hero status
|
||||
console.log('Case 1');
|
||||
heroStatusRef.current?.scrollIntoView();
|
||||
} else if (isLoading && statuses.length > 1) {
|
||||
// Case 2: User initiated, while statuses are loading, SMOOTH-SCROLL to hero status
|
||||
console.log('Case 2');
|
||||
heroStatusRef.current?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start',
|
||||
});
|
||||
}
|
||||
} else {
|
||||
const scrollPosition = states.scrollPositions.get(id);
|
||||
if (scrollPosition && scrollableRef.current) {
|
||||
// Case 3: Not user initiated (e.g. back/forward button), restore to saved scroll position
|
||||
console.log('Case 3');
|
||||
scrollableRef.current.scrollTop = scrollPosition;
|
||||
}
|
||||
}
|
||||
}, [id]);
|
||||
console.log('No case', {
|
||||
isLoading,
|
||||
userInitiated: userInitiated.current,
|
||||
statusesLength: statuses.length,
|
||||
// scrollPosition,
|
||||
});
|
||||
|
||||
useLayoutEffect(() => {
|
||||
const hasAncestor = statuses.some((s) => s.ancestor);
|
||||
if (hasAncestor) {
|
||||
heroStatusRef.current?.scrollIntoView({
|
||||
// behavior: 'smooth',
|
||||
block: 'start',
|
||||
});
|
||||
if (!isLoading) {
|
||||
// Reset user initiated flag after statuses are loaded
|
||||
userInitiated.current = false;
|
||||
}
|
||||
}, [statuses]);
|
||||
}, [statuses, uiState]);
|
||||
|
||||
const heroStatus = snapStates.statuses.get(id);
|
||||
const heroDisplayName = useMemo(() => {
|
||||
|
@ -177,11 +222,13 @@ function StatusPage({ id }) {
|
|||
}, [statuses.length, limit]);
|
||||
|
||||
const hasManyStatuses = statuses.length > 40;
|
||||
const hasDescendants = statuses.some((s) => s.descendant);
|
||||
|
||||
return (
|
||||
<div class="deck-backdrop">
|
||||
<Link href={closeLink}></Link>
|
||||
<div
|
||||
ref={scrollableRef}
|
||||
class={`status-deck deck contained ${
|
||||
statuses.length > 1 ? 'padded-bottom' : ''
|
||||
}`}
|
||||
|
@ -200,7 +247,11 @@ function StatusPage({ id }) {
|
|||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="timeline flat contextual">
|
||||
<ul
|
||||
class={`timeline flat contextual ${
|
||||
uiState === 'loading' ? 'loading' : ''
|
||||
}`}
|
||||
>
|
||||
{statuses.slice(0, limit).map((status) => {
|
||||
const {
|
||||
id: statusID,
|
||||
|
@ -216,7 +267,7 @@ function StatusPage({ id }) {
|
|||
ref={isHero ? heroStatusRef : null}
|
||||
class={`${ancestor ? 'ancestor' : ''} ${
|
||||
descendant ? 'descendant' : ''
|
||||
} ${thread ? 'thread' : ''}`}
|
||||
} ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
|
||||
>
|
||||
{isHero ? (
|
||||
<Status statusID={statusID} withinContext size="l" />
|
||||
|
@ -226,6 +277,9 @@ function StatusPage({ id }) {
|
|||
status-link
|
||||
"
|
||||
href={`#/s/${statusID}`}
|
||||
onClick={() => {
|
||||
userInitiated.current = true;
|
||||
}}
|
||||
>
|
||||
<Status
|
||||
statusID={statusID}
|
||||
|
@ -245,7 +299,13 @@ function StatusPage({ id }) {
|
|||
<ul>
|
||||
{replies.map((replyID) => (
|
||||
<li key={replyID}>
|
||||
<Link class="status-link" href={`#/s/${replyID}`}>
|
||||
<Link
|
||||
class="status-link"
|
||||
href={`#/s/${replyID}`}
|
||||
onClick={() => {
|
||||
userInitiated.current = true;
|
||||
}}
|
||||
>
|
||||
<Status statusID={replyID} withinContext size="s" />
|
||||
</Link>
|
||||
</li>
|
||||
|
@ -256,7 +316,7 @@ function StatusPage({ id }) {
|
|||
{uiState === 'loading' &&
|
||||
isHero &&
|
||||
!!heroStatus?.repliesCount &&
|
||||
statuses.length === 1 && (
|
||||
!hasDescendants && (
|
||||
<div class="status-loading">
|
||||
<Loader />
|
||||
</div>
|
||||
|
|
|
@ -1,39 +1,41 @@
|
|||
#welcome {
|
||||
text-align: center;
|
||||
background-image: radial-gradient(
|
||||
closest-side at 50% 50%,
|
||||
var(--bg-faded-color),
|
||||
transparent
|
||||
);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
#welcome img {
|
||||
margin-top: 16px;
|
||||
height: auto;
|
||||
#welcome h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
@keyframes dance {
|
||||
#welcome img {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#welcome h2 {
|
||||
font-size: 3em;
|
||||
letter-spacing: -0.05ex;
|
||||
margin: 16px 0;
|
||||
padding: 0;
|
||||
/* gradiented text */
|
||||
background: linear-gradient(45deg, var(--purple-color), var(--red-color));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@keyframes psychedelic {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
20% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
40% {
|
||||
transform: rotate(-5deg);
|
||||
}
|
||||
60% {
|
||||
transform: rotate(5deg);
|
||||
}
|
||||
80% {
|
||||
transform: rotate(-5deg);
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(0deg);
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
#welcome:hover img {
|
||||
animation: dance 2s infinite 15s linear;
|
||||
#welcome:hover h2 {
|
||||
animation: psychedelic 60s infinite;
|
||||
}
|
||||
|
||||
#welcome .warning {
|
||||
font-weight: bold;
|
||||
padding: 16px;
|
||||
background: lemonchiffon;
|
||||
color: chocolate;
|
||||
border-radius: 16px;
|
||||
}
|
|
@ -6,22 +6,25 @@ import useTitle from '../utils/useTitle';
|
|||
function Welcome() {
|
||||
useTitle();
|
||||
return (
|
||||
<main id="welcome" class="box">
|
||||
<img
|
||||
src={logo}
|
||||
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>
|
||||
<main id="welcome">
|
||||
<h1>
|
||||
<img
|
||||
src={logo}
|
||||
alt=""
|
||||
width="24"
|
||||
height="24"
|
||||
style={{
|
||||
aspectRatio: '1/1',
|
||||
}}
|
||||
/>{' '}
|
||||
Phanpy
|
||||
</h1>
|
||||
<h2>
|
||||
Trunk-tastic
|
||||
<br />
|
||||
Mastodon Experience
|
||||
</h2>
|
||||
<p>A minimalistic opinionated Mastodon web client.</p>
|
||||
<p>
|
||||
<big>
|
||||
<b>
|
||||
|
|
|
@ -10,8 +10,10 @@ export default proxy({
|
|||
notifications: [],
|
||||
notificationsNew: [],
|
||||
notificationsLastFetchTime: null,
|
||||
accounts: new WeakMap(),
|
||||
accounts: new Map(),
|
||||
reloadStatusPage: 0,
|
||||
spoilers: proxyMap([]),
|
||||
scrollPositions: new Map(),
|
||||
// Modals
|
||||
showCompose: false,
|
||||
showSettings: false,
|
||||
|
|
|
@ -35,6 +35,12 @@ export default defineConfig({
|
|||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
},
|
||||
{
|
||||
src: 'logo-maskable-512.png',
|
||||
sizes: '512x512',
|
||||
type: 'image/png',
|
||||
purpose: 'maskable',
|
||||
},
|
||||
],
|
||||
},
|
||||
strategies: 'injectManifest',
|
||||
|
|
Loading…
Reference in a new issue