Compare commits
156 commits
e8a4bf58b1
...
7fa08d4b6d
Author | SHA1 | Date | |
---|---|---|---|
Natsu Kagami | 7fa08d4b6d | ||
Natsu Kagami | 97790d929e | ||
Natsu Kagami | 394bcb9cf8 | ||
Natsu Kagami | 2f3adec3ea | ||
Natsu Kagami | d25ab5b38f | ||
Natsu Kagami | 5324b69bc5 | ||
Natsu Kagami | f51b94f56b | ||
Natsu Kagami | b3d419b38a | ||
Natsu Kagami | 56fdd902f7 | ||
6976191113 | |||
d4a0a080b5 | |||
bc4e3b0f72 | |||
ac760265da | |||
98b0ccf032 | |||
90f06c511a | |||
e7aad03279 | |||
e224bdc8c3 | |||
1c6b0aa0d7 | |||
3e1b9ff53d | |||
5c9a47c31e | |||
65a4c3441c | |||
77bc06545c | |||
11e64a2cc4 | |||
5433e4e119 | |||
c8dc32b884 | |||
1f29aee26e | |||
daae055f4d | |||
044f754d7e | |||
5ae2058c07 | |||
51457302f8 | |||
b6cf53c221 | |||
65d51b077f | |||
ecd308ce39 | |||
8fc5e10be9 | |||
c7c764a4f0 | |||
e73ae563e6 | |||
d34cce6d18 | |||
aed84226a1 | |||
6827a3811e | |||
83f9498b79 | |||
77818d3ac8 | |||
35a31e1613 | |||
247ed4a7e1 | |||
98e6a6e42e | |||
fe91c13703 | |||
e791ea8015 | |||
dbef125ee3 | |||
32c53b8c6e | |||
bd112f19b1 | |||
adf0b351c1 | |||
8aa05422b1 | |||
1e21f519f3 | |||
19da64a787 | |||
efca016d81 | |||
1d9d22a214 | |||
e4dd76cb11 | |||
0f537667d8 | |||
3f575142f1 | |||
11407d0f3c | |||
84b6368253 | |||
a75b214999 | |||
33c3b63b6e | |||
74991c326d | |||
f558a8cd32 | |||
87f1d17ce3 | |||
0cf7d683ee | |||
cb80057f21 | |||
bf6ee572fb | |||
7b049385f7 | |||
6feb2e7b41 | |||
4ea8e2c145 | |||
cd68aee186 | |||
5ba2af0970 | |||
9b1800dc56 | |||
2e97f19133 | |||
3f23d42966 | |||
e9c5025d31 | |||
eb013645e7 | |||
d5a3b48f0f | |||
b8d92bceb2 | |||
def1e8d099 | |||
8e2099daa7 | |||
ba81352844 | |||
650b71e9cc | |||
a6e369b1a8 | |||
f479feba65 | |||
38680aa6e7 | |||
d1d606fa10 | |||
375da8d173 | |||
2c31e8e04c | |||
534c4c97cd | |||
482a64cfac | |||
2dc1343f54 | |||
5e52fa87e0 | |||
6b03ae1fee | |||
c763d8b954 | |||
0a5d7267d5 | |||
5ee926481a | |||
0cd9a2db6e | |||
69f9b750c2 | |||
f5955ef258 | |||
27a999f733 | |||
54271101c1 | |||
d0cbb0812d | |||
ad45bf9d19 | |||
982f7b3ec4 | |||
4e50f227d8 | |||
546e77d3e1 | |||
e29f14bbcf | |||
05e87e084a | |||
01f10d3daa | |||
fc615e0c0d | |||
25e9771754 | |||
5e916559b3 | |||
883fe39b6c | |||
9933d83846 | |||
7d806301f2 | |||
faf9cbf23d | |||
a0f79e7eea | |||
0b1974e94b | |||
b4a4615b9a | |||
dda14587c0 | |||
ed9289d8c6 | |||
6274f2f24f | |||
b4e8ba820c | |||
29896dfe0e | |||
69c3f1a082 | |||
451dc57a69 | |||
4fbee9168d | |||
6ecc015199 | |||
a7a3d5605b | |||
ad4ed66cd6 | |||
4277992773 | |||
6bcf6b143c | |||
9e9f7a6ea1 | |||
f0014cb26a | |||
b0e118fcab | |||
f51201a787 | |||
5a035089ab | |||
206f00af40 | |||
13de3d9263 | |||
eb41ddf2de | |||
940e8f5376 | |||
77ba42dba9 | |||
95e204c439 | |||
82770e8035 | |||
818c8e61cd | |||
3b8592e946 | |||
c0c7d65034 | |||
5631126e8d | |||
bd2ed53f32 | |||
694fa22942 | |||
15c3979815 | |||
ab5f53273f | |||
19c2f9b048 | |||
a45250ac96 |
|
@ -244,6 +244,8 @@ And here I am. Building a Mastodon web client.
|
||||||
|
|
||||||
## Alternative web clients
|
## Alternative web clients
|
||||||
|
|
||||||
|
- Phanpy forks ↓
|
||||||
|
- [Agora](https://agorasocial.app/)
|
||||||
- [Pinafore](https://pinafore.social/) ([retired](https://nolanlawson.com/2023/01/09/retiring-pinafore/)) - forks ↓
|
- [Pinafore](https://pinafore.social/) ([retired](https://nolanlawson.com/2023/01/09/retiring-pinafore/)) - forks ↓
|
||||||
- [Semaphore](https://semaphore.social/)
|
- [Semaphore](https://semaphore.social/)
|
||||||
- [Enafore](https://enafore.social/)
|
- [Enafore](https://enafore.social/)
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
src = lib.cleanSource ./.;
|
src = lib.cleanSource ./.;
|
||||||
|
|
||||||
npmFlags = [ "--legacy-peer-deps" ];
|
npmFlags = [ "--legacy-peer-deps" ];
|
||||||
npmDepsHash = "sha256-9tcZ3jQg+mHeI2K/dNFs0C1k7CfHwxbx+/+I8pdO/wQ=";
|
npmDepsHash = "sha256-pL/bqTNMtekD5GzTCNPOy60OD2MC36zlg1A6MP0Fn2M=";
|
||||||
# npmDepsHash = lib.fakeHash;
|
# npmDepsHash = lib.fakeHash;
|
||||||
|
|
||||||
# DTTH-specific env variables
|
# DTTH-specific env variables
|
||||||
|
|
3074
package-lock.json
generated
3074
package-lock.json
generated
File diff suppressed because it is too large
Load diff
29
package.json
29
package.json
|
@ -12,33 +12,34 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@formatjs/intl-localematcher": "~0.5.4",
|
"@formatjs/intl-localematcher": "~0.5.4",
|
||||||
"@formatjs/intl-segmenter": "~11.5.5",
|
"@formatjs/intl-segmenter": "~11.5.5",
|
||||||
"@formkit/auto-animate": "~0.8.1",
|
"@formkit/auto-animate": "~0.8.2",
|
||||||
"@github/text-expander-element": "~2.6.1",
|
"@github/text-expander-element": "~2.6.1",
|
||||||
"@iconify-icons/mingcute": "~1.2.9",
|
"@iconify-icons/mingcute": "~1.2.9",
|
||||||
"@justinribeiro/lite-youtube": "~1.5.0",
|
"@justinribeiro/lite-youtube": "~1.5.0",
|
||||||
"@szhsin/react-menu": "~4.1.0",
|
"@szhsin/react-menu": "~4.1.0",
|
||||||
"@uidotdev/usehooks": "~2.4.1",
|
"@uidotdev/usehooks": "~2.4.1",
|
||||||
"compare-versions": "~6.1.0",
|
"compare-versions": "~6.1.0",
|
||||||
"dayjs": "~1.11.10",
|
"dayjs": "~1.11.11",
|
||||||
"dayjs-twitter": "~0.5.0",
|
"dayjs-twitter": "~0.5.0",
|
||||||
"fast-blurhash": "~1.1.2",
|
"fast-blurhash": "~1.1.2",
|
||||||
"fast-equals": "~5.0.1",
|
"fast-equals": "~5.0.1",
|
||||||
|
"fuse.js": "~7.0.0",
|
||||||
"html-prettify": "^1.0.7",
|
"html-prettify": "^1.0.7",
|
||||||
"idb-keyval": "~6.2.1",
|
"idb-keyval": "~6.2.1",
|
||||||
"just-debounce-it": "~3.2.0",
|
"just-debounce-it": "~3.2.0",
|
||||||
"lz-string": "~1.5.0",
|
"lz-string": "~1.5.0",
|
||||||
"masto": "~6.7.0",
|
"masto": "~6.7.7",
|
||||||
"moize": "~6.1.6",
|
"moize": "~6.1.6",
|
||||||
"p-retry": "~6.2.0",
|
"p-retry": "~6.2.0",
|
||||||
"p-throttle": "~6.1.0",
|
"p-throttle": "~6.1.0",
|
||||||
"preact": "~10.20.1",
|
"preact": "~10.21.0",
|
||||||
"punycode": "~2.3.1",
|
"punycode": "~2.3.1",
|
||||||
"react-hotkeys-hook": "~4.5.0",
|
"react-hotkeys-hook": "~4.5.0",
|
||||||
"react-intersection-observer": "~9.8.1",
|
"react-intersection-observer": "~9.10.2",
|
||||||
"react-quick-pinch-zoom": "~5.1.0",
|
"react-quick-pinch-zoom": "~5.1.0",
|
||||||
"react-router-dom": "6.6.2",
|
"react-router-dom": "6.6.2",
|
||||||
"string-length": "6.0.0",
|
"string-length": "6.0.0",
|
||||||
"swiped-events": "~1.1.9",
|
"swiped-events": "~1.2.0",
|
||||||
"toastify-js": "~1.12.0",
|
"toastify-js": "~1.12.0",
|
||||||
"uid": "~2.0.2",
|
"uid": "~2.0.2",
|
||||||
"use-debounce": "~10.0.0",
|
"use-debounce": "~10.0.0",
|
||||||
|
@ -50,18 +51,18 @@
|
||||||
"@preact/preset-vite": "~2.8.2",
|
"@preact/preset-vite": "~2.8.2",
|
||||||
"@trivago/prettier-plugin-sort-imports": "~4.3.0",
|
"@trivago/prettier-plugin-sort-imports": "~4.3.0",
|
||||||
"postcss": "~8.4.38",
|
"postcss": "~8.4.38",
|
||||||
"postcss-dark-theme-class": "~1.2.1",
|
"postcss-dark-theme-class": "~1.3.0",
|
||||||
"postcss-preset-env": "~9.5.4",
|
"postcss-preset-env": "~9.5.11",
|
||||||
"twitter-text": "~3.1.0",
|
"twitter-text": "~3.1.0",
|
||||||
"vite": "~5.2.8",
|
"vite": "~5.2.11",
|
||||||
"vite-plugin-generate-file": "~0.1.1",
|
"vite-plugin-generate-file": "~0.1.1",
|
||||||
"vite-plugin-html-config": "~1.0.11",
|
"vite-plugin-html-config": "~1.0.11",
|
||||||
"vite-plugin-pwa": "~0.19.7",
|
"vite-plugin-pwa": "~0.20.0",
|
||||||
"vite-plugin-remove-console": "~2.2.0",
|
"vite-plugin-remove-console": "~2.2.0",
|
||||||
"workbox-cacheable-response": "~7.0.0",
|
"workbox-cacheable-response": "~7.1.0",
|
||||||
"workbox-expiration": "~7.0.0",
|
"workbox-expiration": "~7.1.0",
|
||||||
"workbox-routing": "~7.0.0",
|
"workbox-routing": "~7.1.0",
|
||||||
"workbox-strategies": "~7.0.0"
|
"workbox-strategies": "~7.1.0"
|
||||||
},
|
},
|
||||||
"postcss": {
|
"postcss": {
|
||||||
"plugins": {
|
"plugins": {
|
||||||
|
|
|
@ -62,7 +62,7 @@ const iconsRoute = new Route(
|
||||||
cacheName: 'icons',
|
cacheName: 'icons',
|
||||||
plugins: [
|
plugins: [
|
||||||
new ExpirationPlugin({
|
new ExpirationPlugin({
|
||||||
maxEntries: 50,
|
maxEntries: 300,
|
||||||
maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
|
maxAgeSeconds: 3 * 24 * 60 * 60, // 3 days
|
||||||
purgeOnQuotaError: true,
|
purgeOnQuotaError: true,
|
||||||
}),
|
}),
|
||||||
|
|
|
@ -1966,6 +1966,10 @@ body > .szh-menu-container {
|
||||||
.szh-menu
|
.szh-menu
|
||||||
.szh-menu__item.danger:not(.szh-menu__item--disabled).szh-menu__item--hover {
|
.szh-menu__item.danger:not(.szh-menu__item--disabled).szh-menu__item--hover {
|
||||||
background-color: var(--red-text-color);
|
background-color: var(--red-text-color);
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
background-color: var(--red-color);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.szh-menu
|
.szh-menu
|
||||||
.szh-menu__item:not(.szh-menu__item--disabled):not(
|
.szh-menu__item:not(.szh-menu__item--disabled):not(
|
||||||
|
|
|
@ -597,41 +597,123 @@
|
||||||
#custom-emojis-sheet {
|
#custom-emojis-sheet {
|
||||||
max-height: 50vh;
|
max-height: 50vh;
|
||||||
max-height: 50dvh;
|
max-height: 50dvh;
|
||||||
}
|
|
||||||
#custom-emojis-sheet main {
|
header {
|
||||||
|
.loader-container {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin: 8px 0 0;
|
||||||
|
|
||||||
|
input {
|
||||||
|
width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
mask-image: none;
|
mask-image: none;
|
||||||
}
|
min-height: 40vh;
|
||||||
#custom-emojis-sheet .custom-emojis-list .section-header {
|
padding-bottom: 88px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-emojis-matches {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-emojis-list {
|
||||||
|
.section-header {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: var(--text-insignificant-color);
|
color: var(--text-insignificant-color);
|
||||||
padding: 8px 0 4px;
|
padding: 8px 0 4px;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: var(--bg-blur-color);
|
background-color: var(--bg-color);
|
||||||
backdrop-filter: blur(1px);
|
z-index: 1;
|
||||||
}
|
}
|
||||||
#custom-emojis-sheet .custom-emojis-list section {
|
section {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
#custom-emojis-sheet .custom-emojis-list button {
|
button {
|
||||||
|
color: var(--text-color);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-image: radial-gradient(
|
background-image: radial-gradient(
|
||||||
closest-side,
|
closest-side,
|
||||||
var(--img-bg-color),
|
var(--img-bg-color),
|
||||||
transparent
|
transparent
|
||||||
);
|
);
|
||||||
}
|
text-shadow: 0 1px 0 var(--bg-color);
|
||||||
#custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) {
|
position: relative;
|
||||||
|
min-width: 44px;
|
||||||
|
min-height: 44px;
|
||||||
|
font-variant-numeric: slashed-zero;
|
||||||
|
font-feature-settings: 'ss01';
|
||||||
|
|
||||||
|
&[data-title]:after {
|
||||||
|
max-width: 50vw;
|
||||||
|
pointer-events: none;
|
||||||
|
position: absolute;
|
||||||
|
content: attr(data-title);
|
||||||
|
left: 50%;
|
||||||
|
top: 0;
|
||||||
|
background-color: var(--bg-color);
|
||||||
|
padding: 2px 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
border: 1px solid var(--text-color);
|
||||||
|
transform: translate(-50%, -110%);
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.1s ease-out 0.1s;
|
||||||
|
font-family: var(--monospace-font);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
&.edge-left[data-title]:after {
|
||||||
|
left: 0;
|
||||||
|
transform: translate(0, -110%);
|
||||||
|
}
|
||||||
|
&.edge-right[data-title]:after {
|
||||||
|
left: 100%;
|
||||||
|
transform: translate(-100%, -110%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:is(:hover, :focus) {
|
||||||
|
z-index: 1;
|
||||||
filter: none;
|
filter: none;
|
||||||
background-color: var(--bg-faded-color);
|
background-color: var(--bg-faded-color);
|
||||||
}
|
|
||||||
#custom-emojis-sheet .custom-emojis-list button img {
|
&[data-title]:after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
transition: transform 0.1s ease-out;
|
transition: transform 0.1s ease-out;
|
||||||
}
|
}
|
||||||
#custom-emojis-sheet .custom-emojis-list button:is(:hover, :focus) img {
|
|
||||||
transform: scale(1.5);
|
&:is(:hover, :focus) img {
|
||||||
|
transform: scale(2);
|
||||||
|
}
|
||||||
|
&.edge-left img {
|
||||||
|
transform-origin: left center;
|
||||||
|
}
|
||||||
|
&.edge-right img {
|
||||||
|
transform-origin: right center;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.compose-field-container {
|
.compose-field-container {
|
||||||
|
|
|
@ -3,8 +3,16 @@ import './compose.css';
|
||||||
import '@github/text-expander-element';
|
import '@github/text-expander-element';
|
||||||
import { MenuItem } from '@szhsin/react-menu';
|
import { MenuItem } from '@szhsin/react-menu';
|
||||||
import { deepEqual } from 'fast-equals';
|
import { deepEqual } from 'fast-equals';
|
||||||
|
import Fuse from 'fuse.js';
|
||||||
|
import { memo } from 'preact/compat';
|
||||||
import { forwardRef } from 'preact/compat';
|
import { forwardRef } from 'preact/compat';
|
||||||
import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
|
import {
|
||||||
|
useCallback,
|
||||||
|
useEffect,
|
||||||
|
useMemo,
|
||||||
|
useRef,
|
||||||
|
useState,
|
||||||
|
} from 'preact/hooks';
|
||||||
import { useHotkeys } from 'react-hotkeys-hook';
|
import { useHotkeys } from 'react-hotkeys-hook';
|
||||||
import stringLength from 'string-length';
|
import stringLength from 'string-length';
|
||||||
import { uid } from 'uid/single';
|
import { uid } from 'uid/single';
|
||||||
|
@ -21,6 +29,7 @@ import db from '../utils/db';
|
||||||
import emojifyText from '../utils/emojify-text';
|
import emojifyText from '../utils/emojify-text';
|
||||||
import localeMatch from '../utils/locale-match';
|
import localeMatch from '../utils/locale-match';
|
||||||
import openCompose from '../utils/open-compose';
|
import openCompose from '../utils/open-compose';
|
||||||
|
import pmem from '../utils/pmem';
|
||||||
import shortenNumber from '../utils/shorten-number';
|
import shortenNumber from '../utils/shorten-number';
|
||||||
import showToast from '../utils/show-toast';
|
import showToast from '../utils/show-toast';
|
||||||
import states, { saveStatus } from '../utils/states';
|
import states, { saveStatus } from '../utils/states';
|
||||||
|
@ -181,6 +190,8 @@ function highlightText(text, { maxCharacters = Infinity }) {
|
||||||
|
|
||||||
const rtf = new Intl.RelativeTimeFormat();
|
const rtf = new Intl.RelativeTimeFormat();
|
||||||
|
|
||||||
|
const CUSTOM_EMOJIS_COUNT = 100;
|
||||||
|
|
||||||
function Compose({
|
function Compose({
|
||||||
onClose,
|
onClose,
|
||||||
replyToStatus,
|
replyToStatus,
|
||||||
|
@ -1423,25 +1434,40 @@ function autoResizeTextarea(textarea) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function _getCustomEmojis(instance, masto) {
|
||||||
|
const emojis = await masto.v1.customEmojis.list();
|
||||||
|
const visibleEmojis = emojis.filter((e) => e.visibleInPicker);
|
||||||
|
const searcher = new Fuse(visibleEmojis, {
|
||||||
|
keys: ['shortcode'],
|
||||||
|
findAllMatches: true,
|
||||||
|
});
|
||||||
|
return [visibleEmojis, searcher];
|
||||||
|
}
|
||||||
|
const getCustomEmojis = pmem(_getCustomEmojis, {
|
||||||
|
// Limit by time to reduce memory usage
|
||||||
|
// Cached by instance
|
||||||
|
matchesArg: (cacheKeyArg, keyArg) => cacheKeyArg.instance === keyArg.instance,
|
||||||
|
maxAge: 30 * 60 * 1000, // 30 minutes
|
||||||
|
});
|
||||||
|
|
||||||
const Textarea = forwardRef((props, ref) => {
|
const Textarea = forwardRef((props, ref) => {
|
||||||
const { masto } = api();
|
const { masto, instance } = api();
|
||||||
const [text, setText] = useState(ref.current?.value || '');
|
const [text, setText] = useState(ref.current?.value || '');
|
||||||
const { maxCharacters, performSearch = () => {}, ...textareaProps } = props;
|
const { maxCharacters, performSearch = () => {}, ...textareaProps } = props;
|
||||||
// const snapStates = useSnapshot(states);
|
// const snapStates = useSnapshot(states);
|
||||||
// const charCount = snapStates.composerCharacterCount;
|
// const charCount = snapStates.composerCharacterCount;
|
||||||
|
|
||||||
const customEmojis = useRef();
|
// const customEmojis = useRef();
|
||||||
|
const searcherRef = useRef();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
getCustomEmojis(instance, masto)
|
||||||
try {
|
.then((r) => {
|
||||||
const emojis = await masto.v1.customEmojis.list();
|
const [emojis, searcher] = r;
|
||||||
console.log({ emojis });
|
searcherRef.current = searcher;
|
||||||
customEmojis.current = emojis;
|
})
|
||||||
} catch (e) {
|
.catch((e) => {
|
||||||
// silent fail
|
|
||||||
console.error(e);
|
console.error(e);
|
||||||
}
|
});
|
||||||
})();
|
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const textExpanderRef = useRef();
|
const textExpanderRef = useRef();
|
||||||
|
@ -1467,23 +1493,26 @@ const Textarea = forwardRef((props, ref) => {
|
||||||
// const emojis = customEmojis.current.filter((emoji) =>
|
// const emojis = customEmojis.current.filter((emoji) =>
|
||||||
// emoji.shortcode.startsWith(text),
|
// emoji.shortcode.startsWith(text),
|
||||||
// );
|
// );
|
||||||
const emojis = filterShortcodes(customEmojis.current, text);
|
// const emojis = filterShortcodes(customEmojis.current, text);
|
||||||
|
const results = searcherRef.current?.search(text, {
|
||||||
|
limit: 5,
|
||||||
|
});
|
||||||
let html = '';
|
let html = '';
|
||||||
emojis.forEach((emoji) => {
|
results.forEach(({ item: emoji }) => {
|
||||||
const { shortcode, url } = emoji;
|
const { shortcode, url } = emoji;
|
||||||
html += `
|
html += `
|
||||||
<li role="option" data-value="${encodeHTML(shortcode)}">
|
<li role="option" data-value="${encodeHTML(shortcode)}">
|
||||||
<img src="${encodeHTML(
|
<img src="${encodeHTML(
|
||||||
url,
|
url,
|
||||||
)}" width="16" height="16" alt="" loading="lazy" />
|
)}" width="16" height="16" alt="" loading="lazy" />
|
||||||
:${encodeHTML(shortcode)}:
|
${encodeHTML(shortcode)}
|
||||||
</li>`;
|
</li>`;
|
||||||
});
|
});
|
||||||
// console.log({ emojis, html });
|
// console.log({ emojis, html });
|
||||||
menu.innerHTML = html;
|
menu.innerHTML = html;
|
||||||
provide(
|
provide(
|
||||||
Promise.resolve({
|
Promise.resolve({
|
||||||
matched: emojis.length > 0,
|
matched: results.length > 0,
|
||||||
fragment: menu,
|
fragment: menu,
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
@ -2185,24 +2214,36 @@ function CustomEmojisModal({
|
||||||
}) {
|
}) {
|
||||||
const [uiState, setUIState] = useState('default');
|
const [uiState, setUIState] = useState('default');
|
||||||
const customEmojisList = useRef([]);
|
const customEmojisList = useRef([]);
|
||||||
const [customEmojis, setCustomEmojis] = useState({});
|
const [customEmojis, setCustomEmojis] = useState([]);
|
||||||
const recentlyUsedCustomEmojis = useMemo(
|
const recentlyUsedCustomEmojis = useMemo(
|
||||||
() => store.account.get('recentlyUsedCustomEmojis') || [],
|
() => store.account.get('recentlyUsedCustomEmojis') || [],
|
||||||
);
|
);
|
||||||
|
const searcherRef = useRef();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setUIState('loading');
|
setUIState('loading');
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const emojis = await masto.v1.customEmojis.list();
|
const [emojis, searcher] = await getCustomEmojis(instance, masto);
|
||||||
|
console.log('emojis', emojis);
|
||||||
|
searcherRef.current = searcher;
|
||||||
|
setCustomEmojis(emojis);
|
||||||
|
setUIState('default');
|
||||||
|
} catch (e) {
|
||||||
|
setUIState('error');
|
||||||
|
console.error(e);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const customEmojisCatList = useMemo(() => {
|
||||||
// Group emojis by category
|
// Group emojis by category
|
||||||
const emojisCat = {
|
const emojisCat = {
|
||||||
'--recent--': recentlyUsedCustomEmojis.filter((emoji) =>
|
'--recent--': recentlyUsedCustomEmojis.filter((emoji) =>
|
||||||
emojis.find((e) => e.shortcode === emoji.shortcode),
|
customEmojis.find((e) => e.shortcode === emoji.shortcode),
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
const othersCat = [];
|
const othersCat = [];
|
||||||
emojis.forEach((emoji) => {
|
customEmojis.forEach((emoji) => {
|
||||||
if (!emoji.visibleInPicker) return;
|
|
||||||
customEmojisList.current?.push?.(emoji);
|
customEmojisList.current?.push?.(emoji);
|
||||||
if (!emoji.category) {
|
if (!emoji.category) {
|
||||||
othersCat.push(emoji);
|
othersCat.push(emoji);
|
||||||
|
@ -2216,14 +2257,60 @@ function CustomEmojisModal({
|
||||||
if (othersCat.length) {
|
if (othersCat.length) {
|
||||||
emojisCat['--others--'] = othersCat;
|
emojisCat['--others--'] = othersCat;
|
||||||
}
|
}
|
||||||
setCustomEmojis(emojisCat);
|
return emojisCat;
|
||||||
setUIState('default');
|
}, [customEmojis]);
|
||||||
} catch (e) {
|
|
||||||
setUIState('error');
|
const scrollableRef = useRef();
|
||||||
console.error(e);
|
const [matches, setMatches] = useState(null);
|
||||||
|
const onFind = useCallback(
|
||||||
|
(e) => {
|
||||||
|
const { value } = e.target;
|
||||||
|
if (value) {
|
||||||
|
const results = searcherRef.current?.search(value, {
|
||||||
|
limit: CUSTOM_EMOJIS_COUNT,
|
||||||
|
});
|
||||||
|
setMatches(results.map((r) => r.item));
|
||||||
|
scrollableRef.current?.scrollTo?.(0, 0);
|
||||||
|
} else {
|
||||||
|
setMatches(null);
|
||||||
}
|
}
|
||||||
})();
|
},
|
||||||
}, []);
|
[customEmojis],
|
||||||
|
);
|
||||||
|
|
||||||
|
const onSelectEmoji = useCallback(
|
||||||
|
(emoji) => {
|
||||||
|
onSelect?.(emoji);
|
||||||
|
onClose?.();
|
||||||
|
|
||||||
|
queueMicrotask(() => {
|
||||||
|
let recentlyUsedCustomEmojis =
|
||||||
|
store.account.get('recentlyUsedCustomEmojis') || [];
|
||||||
|
const recentlyUsedEmojiIndex = recentlyUsedCustomEmojis.findIndex(
|
||||||
|
(e) => e.shortcode === emoji.shortcode,
|
||||||
|
);
|
||||||
|
if (recentlyUsedEmojiIndex !== -1) {
|
||||||
|
// Move emoji to index 0
|
||||||
|
recentlyUsedCustomEmojis.splice(recentlyUsedEmojiIndex, 1);
|
||||||
|
recentlyUsedCustomEmojis.unshift(emoji);
|
||||||
|
} else {
|
||||||
|
recentlyUsedCustomEmojis.unshift(emoji);
|
||||||
|
// Remove unavailable ones
|
||||||
|
recentlyUsedCustomEmojis = recentlyUsedCustomEmojis.filter((e) =>
|
||||||
|
customEmojisList.current?.find?.(
|
||||||
|
(emoji) => emoji.shortcode === e.shortcode,
|
||||||
|
),
|
||||||
|
);
|
||||||
|
// Limit to 10
|
||||||
|
recentlyUsedCustomEmojis = recentlyUsedCustomEmojis.slice(0, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Store back
|
||||||
|
store.account.set('recentlyUsedCustomEmojis', recentlyUsedCustomEmojis);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
[onSelect],
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id="custom-emojis-sheet" class="sheet">
|
<div id="custom-emojis-sheet" class="sheet">
|
||||||
|
@ -2233,14 +2320,51 @@ function CustomEmojisModal({
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
<header>
|
<header>
|
||||||
|
<div>
|
||||||
<b>Custom emojis</b>{' '}
|
<b>Custom emojis</b>{' '}
|
||||||
{uiState === 'loading' ? (
|
{uiState === 'loading' ? (
|
||||||
<Loader />
|
<Loader />
|
||||||
) : (
|
) : (
|
||||||
<small class="insignificant"> • {instance}</small>
|
<small class="insignificant"> • {instance}</small>
|
||||||
)}
|
)}
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const emoji = matches[0];
|
||||||
|
if (emoji) {
|
||||||
|
onSelectEmoji(`:${emoji.shortcode}:`);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
placeholder="Search emoji"
|
||||||
|
onInput={onFind}
|
||||||
|
autocomplete="off"
|
||||||
|
autocorrect="off"
|
||||||
|
autocapitalize="off"
|
||||||
|
spellCheck="false"
|
||||||
|
dir="auto"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main ref={scrollableRef}>
|
||||||
|
{matches !== null ? (
|
||||||
|
<ul class="custom-emojis-matches custom-emojis-list">
|
||||||
|
{matches.map((emoji) => (
|
||||||
|
<li key={emoji.shortcode} class="custom-emojis-match">
|
||||||
|
<CustomEmojiButton
|
||||||
|
emoji={emoji}
|
||||||
|
onClick={() => {
|
||||||
|
onSelectEmoji(`:${emoji.shortcode}:`);
|
||||||
|
}}
|
||||||
|
showCode
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
) : (
|
||||||
<div class="custom-emojis-list">
|
<div class="custom-emojis-list">
|
||||||
{uiState === 'error' && (
|
{uiState === 'error' && (
|
||||||
<div class="ui-state">
|
<div class="ui-state">
|
||||||
|
@ -2248,7 +2372,7 @@ function CustomEmojisModal({
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{uiState === 'default' &&
|
{uiState === 'default' &&
|
||||||
Object.entries(customEmojis).map(
|
Object.entries(customEmojisCatList).map(
|
||||||
([category, emojis]) =>
|
([category, emojis]) =>
|
||||||
!!emojis?.length && (
|
!!emojis?.length && (
|
||||||
<>
|
<>
|
||||||
|
@ -2258,82 +2382,105 @@ function CustomEmojisModal({
|
||||||
'--others--': 'Others',
|
'--others--': 'Others',
|
||||||
}[category] || category}
|
}[category] || category}
|
||||||
</div>
|
</div>
|
||||||
<section>
|
<CustomEmojisList
|
||||||
{emojis.map((emoji) => (
|
emojis={emojis}
|
||||||
<button
|
onSelect={onSelectEmoji}
|
||||||
key={emoji}
|
|
||||||
type="button"
|
|
||||||
class="plain4"
|
|
||||||
onClick={() => {
|
|
||||||
onClose();
|
|
||||||
requestAnimationFrame(() => {
|
|
||||||
onSelect(`:${emoji.shortcode}:`);
|
|
||||||
});
|
|
||||||
let recentlyUsedCustomEmojis =
|
|
||||||
store.account.get('recentlyUsedCustomEmojis') ||
|
|
||||||
[];
|
|
||||||
const recentlyUsedEmojiIndex =
|
|
||||||
recentlyUsedCustomEmojis.findIndex(
|
|
||||||
(e) => e.shortcode === emoji.shortcode,
|
|
||||||
);
|
|
||||||
if (recentlyUsedEmojiIndex !== -1) {
|
|
||||||
// Move emoji to index 0
|
|
||||||
recentlyUsedCustomEmojis.splice(
|
|
||||||
recentlyUsedEmojiIndex,
|
|
||||||
1,
|
|
||||||
);
|
|
||||||
recentlyUsedCustomEmojis.unshift(emoji);
|
|
||||||
} else {
|
|
||||||
recentlyUsedCustomEmojis.unshift(emoji);
|
|
||||||
// Remove unavailable ones
|
|
||||||
recentlyUsedCustomEmojis =
|
|
||||||
recentlyUsedCustomEmojis.filter((e) =>
|
|
||||||
customEmojisList.current?.find?.(
|
|
||||||
(emoji) => emoji.shortcode === e.shortcode,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
// Limit to 10
|
|
||||||
recentlyUsedCustomEmojis =
|
|
||||||
recentlyUsedCustomEmojis.slice(0, 10);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Store back
|
|
||||||
store.account.set(
|
|
||||||
'recentlyUsedCustomEmojis',
|
|
||||||
recentlyUsedCustomEmojis,
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
title={`:${emoji.shortcode}:`}
|
|
||||||
>
|
|
||||||
<picture>
|
|
||||||
{!!emoji.staticUrl && (
|
|
||||||
<source
|
|
||||||
srcset={emoji.staticUrl}
|
|
||||||
media="(prefers-reduced-motion: reduce)"
|
|
||||||
/>
|
/>
|
||||||
)}
|
|
||||||
<img
|
|
||||||
class="shortcode-emoji"
|
|
||||||
src={emoji.url || emoji.staticUrl}
|
|
||||||
alt={emoji.shortcode}
|
|
||||||
width="16"
|
|
||||||
height="16"
|
|
||||||
loading="lazy"
|
|
||||||
decoding="async"
|
|
||||||
/>
|
|
||||||
</picture>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const CustomEmojisList = memo(({ emojis, onSelect }) => {
|
||||||
|
const [max, setMax] = useState(CUSTOM_EMOJIS_COUNT);
|
||||||
|
const showMore = emojis.length > max;
|
||||||
|
return (
|
||||||
|
<section>
|
||||||
|
{emojis.slice(0, max).map((emoji) => (
|
||||||
|
<CustomEmojiButton
|
||||||
|
key={emoji.shortcode}
|
||||||
|
emoji={emoji}
|
||||||
|
onClick={() => {
|
||||||
|
onSelect(`:${emoji.shortcode}:`);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{showMore && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="plain small"
|
||||||
|
onClick={() => setMax(max + CUSTOM_EMOJIS_COUNT)}
|
||||||
|
>
|
||||||
|
{(emojis.length - max).toLocaleString()} more…
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const CustomEmojiButton = memo(({ emoji, onClick, showCode }) => {
|
||||||
|
const addEdges = (e) => {
|
||||||
|
// Add edge-left or edge-right class based on self position relative to scrollable parent
|
||||||
|
// If near left edge, add edge-left, if near right edge, add edge-right
|
||||||
|
const buffer = 88;
|
||||||
|
const parent = e.currentTarget.closest('main');
|
||||||
|
if (parent) {
|
||||||
|
const rect = parent.getBoundingClientRect();
|
||||||
|
const selfRect = e.currentTarget.getBoundingClientRect();
|
||||||
|
const targetClassList = e.currentTarget.classList;
|
||||||
|
if (selfRect.left < rect.left + buffer) {
|
||||||
|
targetClassList.add('edge-left');
|
||||||
|
targetClassList.remove('edge-right');
|
||||||
|
} else if (selfRect.right > rect.right - buffer) {
|
||||||
|
targetClassList.add('edge-right');
|
||||||
|
targetClassList.remove('edge-left');
|
||||||
|
} else {
|
||||||
|
targetClassList.remove('edge-left', 'edge-right');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="plain4"
|
||||||
|
onClick={onClick}
|
||||||
|
data-title={showCode ? undefined : emoji.shortcode}
|
||||||
|
onPointerEnter={addEdges}
|
||||||
|
onFocus={addEdges}
|
||||||
|
>
|
||||||
|
<picture>
|
||||||
|
{!!emoji.staticUrl && (
|
||||||
|
<source
|
||||||
|
srcSet={emoji.staticUrl}
|
||||||
|
media="(prefers-reduced-motion: reduce)"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<img
|
||||||
|
className="shortcode-emoji"
|
||||||
|
src={emoji.url || emoji.staticUrl}
|
||||||
|
alt={emoji.shortcode}
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
/>
|
||||||
|
</picture>
|
||||||
|
{showCode && (
|
||||||
|
<>
|
||||||
|
{' '}
|
||||||
|
<code>{emoji.shortcode}</code>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
const GIFS_PER_PAGE = 20;
|
const GIFS_PER_PAGE = 20;
|
||||||
function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
|
function GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {
|
||||||
const [uiState, setUIState] = useState('default');
|
const [uiState, setUIState] = useState('default');
|
||||||
|
|
|
@ -17,6 +17,21 @@
|
||||||
);
|
);
|
||||||
filter: saturate(0.5);
|
filter: saturate(0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:is(a) {
|
||||||
|
pointer-events: auto;
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--outline-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.accounts-list {
|
.accounts-list {
|
||||||
|
|
|
@ -11,6 +11,7 @@ import useLocationChange from '../utils/useLocationChange';
|
||||||
|
|
||||||
import AccountBlock from './account-block';
|
import AccountBlock from './account-block';
|
||||||
import Icon from './icon';
|
import Icon from './icon';
|
||||||
|
import Link from './link';
|
||||||
import Loader from './loader';
|
import Loader from './loader';
|
||||||
import Status from './status';
|
import Status from './status';
|
||||||
|
|
||||||
|
@ -143,9 +144,12 @@ export default function GenericAccounts({
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
{post && (
|
{post && (
|
||||||
<div class="post-preview">
|
<Link
|
||||||
|
to={`/${instance || currentInstance}/s/${post.id}`}
|
||||||
|
class="post-preview"
|
||||||
|
>
|
||||||
<Status status={post} size="s" readOnly />
|
<Status status={post} size="s" readOnly />
|
||||||
</div>
|
</Link>
|
||||||
)}
|
)}
|
||||||
{accounts.length > 0 ? (
|
{accounts.length > 0 ? (
|
||||||
<>
|
<>
|
||||||
|
|
|
@ -7,10 +7,13 @@ import { useInView } from 'react-intersection-observer';
|
||||||
// The sticky header, usually at the top
|
// The sticky header, usually at the top
|
||||||
const TOP = 48;
|
const TOP = 48;
|
||||||
|
|
||||||
export default function LazyShazam({ children }) {
|
const shazamIDs = {};
|
||||||
|
|
||||||
|
export default function LazyShazam({ id, children }) {
|
||||||
const containerRef = useRef();
|
const containerRef = useRef();
|
||||||
|
const hasID = !!shazamIDs[id];
|
||||||
const [visible, setVisible] = useState(false);
|
const [visible, setVisible] = useState(false);
|
||||||
const [visibleStart, setVisibleStart] = useState(false);
|
const [visibleStart, setVisibleStart] = useState(hasID || false);
|
||||||
|
|
||||||
const { ref } = useInView({
|
const { ref } = useInView({
|
||||||
root: null,
|
root: null,
|
||||||
|
@ -20,6 +23,7 @@ export default function LazyShazam({ children }) {
|
||||||
onChange: (inView) => {
|
onChange: (inView) => {
|
||||||
if (inView) {
|
if (inView) {
|
||||||
setVisible(true);
|
setVisible(true);
|
||||||
|
if (id) shazamIDs[id] = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
triggerOnce: true,
|
triggerOnce: true,
|
||||||
|
@ -35,6 +39,7 @@ export default function LazyShazam({ children }) {
|
||||||
} else {
|
} else {
|
||||||
setVisibleStart(true);
|
setVisibleStart(true);
|
||||||
}
|
}
|
||||||
|
if (id) shazamIDs[id] = true;
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
@ -28,6 +28,7 @@ const NOTIFICATION_ICONS = {
|
||||||
'admin.signup': 'account-edit',
|
'admin.signup': 'account-edit',
|
||||||
'admin.report': 'account-warning',
|
'admin.report': 'account-warning',
|
||||||
severed_relationships: 'heart-break',
|
severed_relationships: 'heart-break',
|
||||||
|
moderation_warning: 'alert',
|
||||||
emoji_reaction: 'emoji2',
|
emoji_reaction: 'emoji2',
|
||||||
'pleroma:emoji_reaction': 'emoji2',
|
'pleroma:emoji_reaction': 'emoji2',
|
||||||
};
|
};
|
||||||
|
@ -45,6 +46,8 @@ poll = A poll you have voted in or created has ended
|
||||||
update = A status you interacted with has been edited
|
update = A status you interacted with has been edited
|
||||||
admin.sign_up = Someone signed up (optionally sent to admins)
|
admin.sign_up = Someone signed up (optionally sent to admins)
|
||||||
admin.report = A new report has been filed
|
admin.report = A new report has been filed
|
||||||
|
severed_relationships = Severed relationships
|
||||||
|
moderation_warning = Moderation warning
|
||||||
*/
|
*/
|
||||||
|
|
||||||
function emojiText(emoji, emoji_url) {
|
function emojiText(emoji, emoji_url) {
|
||||||
|
@ -91,6 +94,7 @@ const contentText = {
|
||||||
Lost connections with <i>{name}</i>.
|
Lost connections with <i>{name}</i>.
|
||||||
</>
|
</>
|
||||||
),
|
),
|
||||||
|
moderation_warning: <b>Moderation warning</b>,
|
||||||
emoji_reaction: emojiText,
|
emoji_reaction: emojiText,
|
||||||
'pleroma:emoji_reaction': emojiText,
|
'pleroma:emoji_reaction': emojiText,
|
||||||
};
|
};
|
||||||
|
@ -117,6 +121,17 @@ const SEVERED_RELATIONSHIPS_TEXT = {
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const MODERATION_WARNING_TEXT = {
|
||||||
|
none: 'Your account has received a moderation warning.',
|
||||||
|
disable: 'Your account has been disabled.',
|
||||||
|
mark_statuses_as_sensitive:
|
||||||
|
'Some of your posts have been marked as sensitive.',
|
||||||
|
delete_statuses: 'Some of your posts have been deleted.',
|
||||||
|
sensitive: 'Your posts will be marked as sensitive from now on.',
|
||||||
|
silence: 'Your account has been limited.',
|
||||||
|
suspend: 'Your account has been suspended.',
|
||||||
|
};
|
||||||
|
|
||||||
const AVATARS_LIMIT = 50;
|
const AVATARS_LIMIT = 50;
|
||||||
|
|
||||||
function Notification({
|
function Notification({
|
||||||
|
@ -125,8 +140,16 @@ function Notification({
|
||||||
isStatic,
|
isStatic,
|
||||||
disableContextMenu,
|
disableContextMenu,
|
||||||
}) {
|
}) {
|
||||||
const { id, status, account, report, event, _accounts, _statuses } =
|
const {
|
||||||
notification;
|
id,
|
||||||
|
status,
|
||||||
|
account,
|
||||||
|
report,
|
||||||
|
event,
|
||||||
|
moderation_warning,
|
||||||
|
_accounts,
|
||||||
|
_statuses,
|
||||||
|
} = notification;
|
||||||
let { type } = notification;
|
let { type } = notification;
|
||||||
|
|
||||||
// status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
|
// status = Attached when type of the notification is favourite, reblog, status, mention, poll, or update
|
||||||
|
@ -314,6 +337,20 @@ function Notification({
|
||||||
.
|
.
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{type === 'moderation_warning' && !!moderation_warning && (
|
||||||
|
<div>
|
||||||
|
{MODERATION_WARNING_TEXT[moderation_warning.action]}
|
||||||
|
<br />
|
||||||
|
<a
|
||||||
|
href={`/disputes/strikes/${moderation_warning.id}`}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Learn more <Icon icon="external" size="s" />
|
||||||
|
</a>
|
||||||
|
.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
{_accounts?.length > 1 && (
|
{_accounts?.length > 1 && (
|
||||||
|
|
|
@ -569,8 +569,15 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
|
&.horizontal {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.status-filtered-badge.badge-meta {
|
.status-filtered-badge:not(.horizontal).badge-meta {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -584,10 +591,10 @@
|
||||||
border-color: var(--text-color);
|
border-color: var(--text-color);
|
||||||
background: var(--bg-color);
|
background: var(--bg-color);
|
||||||
}
|
}
|
||||||
.status-filtered-badge.badge-meta > span:first-child {
|
.status-filtered-badge:not(.horizontal).badge-meta > span:first-child {
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
.status-filtered-badge.badge-meta > span + span {
|
.status-filtered-badge:not(.horizontal).badge-meta > span + span {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 9px;
|
font-size: 9px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
|
@ -601,6 +608,10 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
.status-filtered-badge.horizontal.badge-meta > span + span {
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
.status.large > .container > .content-container {
|
.status.large > .container > .content-container {
|
||||||
margin-left: calc(-50px - 16px);
|
margin-left: calc(-50px - 16px);
|
||||||
|
@ -825,6 +836,12 @@
|
||||||
.timeline-deck .status .content.truncated ~ .card {
|
.timeline-deck .status .content.truncated ~ .card {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.status .content .inner-content {
|
||||||
|
> img[height] {
|
||||||
|
height: auto;
|
||||||
|
aspect-ratio: var(--original-aspect-ratio);
|
||||||
|
}
|
||||||
|
}
|
||||||
.status .content .inner-content a:not(.mention, .has-url-text) {
|
.status .content .inner-content a:not(.mention, .has-url-text) {
|
||||||
color: var(--link-text-color);
|
color: var(--link-text-color);
|
||||||
}
|
}
|
||||||
|
@ -2380,8 +2397,8 @@ a.card:is(:hover, :focus):visited {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
object-fit: cover;
|
object-fit: contain;
|
||||||
object-position: left;
|
/* object-position: left; */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* EDIT HISTORY */
|
/* EDIT HISTORY */
|
||||||
|
|
|
@ -3337,7 +3337,7 @@ const QuoteStatuses = memo(({ id, instance, level = 0 }) => {
|
||||||
|
|
||||||
return uniqueQuotes.map((q) => {
|
return uniqueQuotes.map((q) => {
|
||||||
return (
|
return (
|
||||||
<LazyShazam>
|
<LazyShazam id={q.instance + q.id}>
|
||||||
<Link
|
<Link
|
||||||
key={q.instance + q.id}
|
key={q.instance + q.id}
|
||||||
to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}
|
to={`${q.instance ? `/${q.instance}` : ''}/s/${q.id}`}
|
||||||
|
|
|
@ -209,8 +209,8 @@ function Timeline({
|
||||||
|
|
||||||
const oRef = useHotkeys(['enter', 'o'], () => {
|
const oRef = useHotkeys(['enter', 'o'], () => {
|
||||||
// open active status
|
// open active status
|
||||||
const activeItem = document.activeElement.closest(itemsSelector);
|
const activeItem = document.activeElement;
|
||||||
if (activeItem) {
|
if (activeItem?.matches(itemsSelector)) {
|
||||||
activeItem.click();
|
activeItem.click();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -646,7 +646,11 @@ const TimelineItem = memo(
|
||||||
>
|
>
|
||||||
<Link class="status-link timeline-item" to={url}>
|
<Link class="status-link timeline-item" to={url}>
|
||||||
{showCompact ? (
|
{showCompact ? (
|
||||||
<TimelineStatusCompact status={item} instance={instance} />
|
<TimelineStatusCompact
|
||||||
|
status={item}
|
||||||
|
instance={instance}
|
||||||
|
filterContext={filterContext}
|
||||||
|
/>
|
||||||
) : useItemID ? (
|
) : useItemID ? (
|
||||||
<Status
|
<Status
|
||||||
statusID={statusID}
|
statusID={statusID}
|
||||||
|
@ -820,11 +824,12 @@ function StatusCarousel({ title, class: className, children }) {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function TimelineStatusCompact({ status, instance }) {
|
function TimelineStatusCompact({ status, instance, filterContext }) {
|
||||||
const snapStates = useSnapshot(states);
|
const snapStates = useSnapshot(states);
|
||||||
const { id, visibility, language } = status;
|
const { id, visibility, language } = status;
|
||||||
const statusPeekText = statusPeek(status);
|
const statusPeekText = statusPeek(status);
|
||||||
const sKey = statusKey(id, instance);
|
const sKey = statusKey(id, instance);
|
||||||
|
const filterInfo = isFiltered(status.filtered, filterContext);
|
||||||
return (
|
return (
|
||||||
<article
|
<article
|
||||||
class={`status compact-thread ${
|
class={`status compact-thread ${
|
||||||
|
@ -850,6 +855,15 @@ function TimelineStatusCompact({ status, instance }) {
|
||||||
lang={language}
|
lang={language}
|
||||||
dir="auto"
|
dir="auto"
|
||||||
>
|
>
|
||||||
|
{!!filterInfo ? (
|
||||||
|
<b
|
||||||
|
class="status-filtered-badge badge-meta horizontal"
|
||||||
|
title={filterInfo?.titlesStr || ''}
|
||||||
|
>
|
||||||
|
<span>Filtered</span>: <span>{filterInfo?.titlesStr || ''}</span>
|
||||||
|
</b>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
{statusPeekText}
|
{statusPeekText}
|
||||||
{status.sensitive && status.spoilerText && (
|
{status.sensitive && status.spoilerText && (
|
||||||
<>
|
<>
|
||||||
|
@ -859,6 +873,8 @@ function TimelineStatusCompact({ status, instance }) {
|
||||||
</span>
|
</span>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
);
|
);
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { lazy } from 'preact/compat';
|
||||||
import { useEffect, useState } from 'preact/hooks';
|
import { useEffect, useState } from 'preact/hooks';
|
||||||
|
|
||||||
import IntlSegmenterSuspense from './components/intl-segmenter-suspense';
|
import IntlSegmenterSuspense from './components/intl-segmenter-suspense';
|
||||||
|
import { initStates } from './utils/states';
|
||||||
// import Compose from './components/compose';
|
// import Compose from './components/compose';
|
||||||
import useTitle from './utils/useTitle';
|
import useTitle from './utils/useTitle';
|
||||||
|
|
||||||
|
@ -31,6 +32,10 @@ function App() {
|
||||||
: 'Compose',
|
: 'Compose',
|
||||||
);
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initStates();
|
||||||
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (uiState === 'closed') {
|
if (uiState === 'closed') {
|
||||||
try {
|
try {
|
||||||
|
|
|
@ -286,7 +286,13 @@ function FiltersAddEdit({ filter, onClose }) {
|
||||||
// Preserve existing expiry if not specified
|
// Preserve existing expiry if not specified
|
||||||
// Seconds from now to expiresAtDate
|
// Seconds from now to expiresAtDate
|
||||||
// Other clients don't do this
|
// Other clients don't do this
|
||||||
expiresIn = Math.floor((expiresAtDate - new Date()) / 1000);
|
if (hasExpiry) {
|
||||||
|
expiresIn = Math.floor(
|
||||||
|
(expiresAtDate - new Date()) / 1000,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
expiresIn = null;
|
||||||
|
}
|
||||||
} else if (expiresIn === '0' || expiresIn === 0) {
|
} else if (expiresIn === '0' || expiresIn === 0) {
|
||||||
// 0 = Never
|
// 0 = Never
|
||||||
expiresIn = null;
|
expiresIn = null;
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import './login.css';
|
import './login.css';
|
||||||
|
|
||||||
|
import Fuse from 'fuse.js';
|
||||||
import { useEffect, useRef, useState } from 'preact/hooks';
|
import { useEffect, useRef, useState } from 'preact/hooks';
|
||||||
import { useSearchParams } from 'react-router-dom';
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
|
||||||
|
@ -28,12 +29,14 @@ function Login() {
|
||||||
);
|
);
|
||||||
|
|
||||||
const [instancesList, setInstancesList] = useState([]);
|
const [instancesList, setInstancesList] = useState([]);
|
||||||
|
const searcher = useRef();
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
const res = await fetch(instancesListURL);
|
const res = await fetch(instancesListURL);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
setInstancesList(data);
|
setInstancesList(data);
|
||||||
|
searcher.current = new Fuse(data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Silently fail
|
// Silently fail
|
||||||
console.error(e);
|
console.error(e);
|
||||||
|
@ -91,21 +94,11 @@ function Login() {
|
||||||
!/[\s\/\\@]/.test(cleanInstanceText);
|
!/[\s\/\\@]/.test(cleanInstanceText);
|
||||||
|
|
||||||
const instancesSuggestions = cleanInstanceText
|
const instancesSuggestions = cleanInstanceText
|
||||||
? instancesList
|
? searcher.current
|
||||||
.filter((instance) => instance.includes(instanceText))
|
?.search(cleanInstanceText, {
|
||||||
.sort((a, b) => {
|
limit: 10,
|
||||||
// Move text that starts with instanceText to the start
|
|
||||||
const aStartsWith = a
|
|
||||||
.toLowerCase()
|
|
||||||
.startsWith(instanceText.toLowerCase());
|
|
||||||
const bStartsWith = b
|
|
||||||
.toLowerCase()
|
|
||||||
.startsWith(instanceText.toLowerCase());
|
|
||||||
if (aStartsWith && !bStartsWith) return -1;
|
|
||||||
if (!aStartsWith && bStartsWith) return 1;
|
|
||||||
return 0;
|
|
||||||
})
|
})
|
||||||
.slice(0, 10)
|
?.map((match) => match.item)
|
||||||
: [];
|
: [];
|
||||||
|
|
||||||
const selectedInstanceText = instanceTextLooksLikeDomain
|
const selectedInstanceText = instanceTextLooksLikeDomain
|
||||||
|
|
|
@ -102,6 +102,17 @@ function Notifications({ columnMode }) {
|
||||||
// },
|
// },
|
||||||
// });
|
// });
|
||||||
|
|
||||||
|
// TEST: Slot in a fake notification to test 'moderation_warning'
|
||||||
|
// notifications.unshift({
|
||||||
|
// id: '123123',
|
||||||
|
// type: 'moderation_warning',
|
||||||
|
// createdAt: new Date().toISOString(),
|
||||||
|
// moderation_warning: {
|
||||||
|
// id: '1231234',
|
||||||
|
// action: 'mark_statuses_as_sensitive',
|
||||||
|
// },
|
||||||
|
// });
|
||||||
|
|
||||||
// console.log({ notifications });
|
// console.log({ notifications });
|
||||||
|
|
||||||
const groupedNotifications = groupNotifications(notifications);
|
const groupedNotifications = groupNotifications(notifications);
|
||||||
|
|
|
@ -242,6 +242,17 @@ function _enhanceContent(content, opts = {}) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ADD ASPECT RATIO TO ALL IMAGES
|
||||||
|
if (enhancedContent.includes('<img')) {
|
||||||
|
dom.querySelectorAll('img').forEach((img) => {
|
||||||
|
const width = img.getAttribute('width') || img.naturalWidth;
|
||||||
|
const height = img.getAttribute('height') || img.naturalHeight;
|
||||||
|
if (width && height) {
|
||||||
|
img.style.setProperty('--original-aspect-ratio', `${width}/${height}`);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (postEnhanceDOM) {
|
if (postEnhanceDOM) {
|
||||||
queueMicrotask(() => postEnhanceDOM(dom));
|
queueMicrotask(() => postEnhanceDOM(dom));
|
||||||
// postEnhanceDOM(dom); // mutate dom
|
// postEnhanceDOM(dom); // mutate dom
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
const { locale } = Intl.NumberFormat().resolvedOptions();
|
const { locale } = Intl.NumberFormat().resolvedOptions();
|
||||||
const shortenNumber = Intl.NumberFormat(locale, {
|
const shortenNumber = Intl.NumberFormat(locale, {
|
||||||
notation: 'compact',
|
notation: 'compact',
|
||||||
|
roundingMode: 'floor',
|
||||||
}).format;
|
}).format;
|
||||||
export default shortenNumber;
|
export default shortenNumber;
|
||||||
|
|
Loading…
Reference in a new issue