nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #166 from cheeaun/main

Browse source 
Update from main
This commit is contained in:
Chee Aun 2023-06-16 18:21:45 +08:00 committed by GitHub
parent 2dc1343f54 4007c9b2d6
commit 482a64cfac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 70 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -39,7 +39,7 @@
property="og:description" property="og:description"
content="Minimalistic opinionated Mastodon web client" content="Minimalistic opinionated Mastodon web client"
/> />
<meta property="og:image" content="%VITE_WEBSITE%/og-image-2.png" /> <meta property="og:image" content="%VITE_WEBSITE%/og-image-2.jpg" />
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

74
package-lock.json generated
View file

@ -9,7 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@formatjs/intl-localematcher": "~0.4.0", "@formatjs/intl-localematcher": "~0.4.0",
"@github/text-expander-element": "~2.3.0", "@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.5", "@iconify-icons/mingcute": "~1.2.5",
"@justinribeiro/lite-youtube": "~1.5.0", "@justinribeiro/lite-youtube": "~1.5.0",
"@szhsin/react-menu": "~4.0.0", "@szhsin/react-menu": "~4.0.0",
@ -43,7 +43,7 @@
"@trivago/prettier-plugin-sort-imports": "~4.1.1", "@trivago/prettier-plugin-sort-imports": "~4.1.1",
"postcss": "~8.4.24", "postcss": "~8.4.24",
"postcss-dark-theme-class": "~0.7.3", "postcss-dark-theme-class": "~0.7.3",
"postcss-preset-env": "~8.4.2", "postcss-preset-env": "~8.5.0",
"twitter-text": "~3.1.0", "twitter-text": "~3.1.0",
"vite": "~4.3.9", "vite": "~4.3.9",
"vite-plugin-generate-file": "~0.0.4", "vite-plugin-generate-file": "~0.0.4",
@ -2366,9 +2366,9 @@
} }
}, },
"node_modules/@csstools/postcss-relative-color-syntax": { "node_modules/@csstools/postcss-relative-color-syntax": {
"version": "1.0.1", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz",
"integrity": "sha512-IskxdQqAkx/pyyOEW3Lhn3nvOu5zlaZ8wQljFl5zc3ABl+gEFf2G42yWK3+wX+J0F4jm7OikOigXo9fAISFEmg==", "integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -2879,9 +2879,9 @@
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w==" "integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
}, },
"node_modules/@github/text-expander-element": { "node_modules/@github/text-expander-element": {
"version": "2.3.0", "version": "2.5.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz", "resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.5.0.tgz",
"integrity": "sha512-E1KCxTOA/7Y4dP5g7vXbfRDFU6/SjU0TuJxx6JMwvxzI/NlBrXyXsx/fjFskD2T/un6i6CNKnXu1ZwExDLjcqw==", "integrity": "sha512-BjCxTshkUCgNXo/8iXUSK1sJ7kMJqhVsw6LAzIFtgaYrm4q2068WnPKjngfR+/QPhxN1nSvgd7CozblEIYjUZA==",
"dependencies": { "dependencies": {
"@github/combobox-nav": "^2.0.2" "@github/combobox-nav": "^2.0.2"
} }
@ -5911,10 +5911,20 @@
} }
}, },
"node_modules/postcss-nesting": { "node_modules/postcss-nesting": {
"version": "11.2.2", "version": "11.3.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz",
"integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==", "integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==",
"dev": true, "dev": true,
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/csstools"
},
{
"type": "opencollective",
"url": "https://opencollective.com/csstools"
}
],
"dependencies": { "dependencies": {
"@csstools/selector-specificity": "^2.0.0", "@csstools/selector-specificity": "^2.0.0",
"postcss-selector-parser": "^6.0.10" "postcss-selector-parser": "^6.0.10"
@ -5922,10 +5932,6 @@
"engines": { "engines": {
"node": "^14 || ^16 || >=18" "node": "^14 || ^16 || >=18"
}, },
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/csstools"
},
"peerDependencies": { "peerDependencies": {
"postcss": "^8.4" "postcss": "^8.4"
} }
@ -6000,9 +6006,9 @@
} }
}, },
"node_modules/postcss-preset-env": { "node_modules/postcss-preset-env": {
"version": "8.4.2", "version": "8.5.0",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.4.2.tgz", "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.0.tgz",
"integrity": "sha512-Bihxo+FsyVNjsRADiYYnj9Ez0WBSWSSHAe8WvxoMlqrw8H8m6gK9E0MkDd7P6ForoikRIF3I8grGg/pFM6ECRQ==", "integrity": "sha512-aqAbT5dXqYX5ZvicGKQpaW/eDEZFRfnhV6Hn1Jn2bCKEB9L2MgsTdnIsXsZyFUQflIV2wIs9HTEQgkH5duMCNg==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -6032,7 +6038,7 @@
"@csstools/postcss-normalize-display-values": "^2.0.1", "@csstools/postcss-normalize-display-values": "^2.0.1",
"@csstools/postcss-oklab-function": "^2.2.3", "@csstools/postcss-oklab-function": "^2.2.3",
"@csstools/postcss-progressive-custom-properties": "^2.3.0", "@csstools/postcss-progressive-custom-properties": "^2.3.0",
"@csstools/postcss-relative-color-syntax": "^1.0.1", "@csstools/postcss-relative-color-syntax": "^1.0.2",
"@csstools/postcss-scope-pseudo-class": "^2.0.2", "@csstools/postcss-scope-pseudo-class": "^2.0.2",
"@csstools/postcss-stepped-value-functions": "^2.1.1", "@csstools/postcss-stepped-value-functions": "^2.1.1",
"@csstools/postcss-text-decoration-shorthand": "^2.2.4", "@csstools/postcss-text-decoration-shorthand": "^2.2.4",
@ -6062,7 +6068,7 @@
"postcss-initial": "^4.0.1", "postcss-initial": "^4.0.1",
"postcss-lab-function": "^5.2.3", "postcss-lab-function": "^5.2.3",
"postcss-logical": "^6.2.0", "postcss-logical": "^6.2.0",
"postcss-nesting": "^11.2.1", "postcss-nesting": "^11.3.0",
"postcss-opacity-percentage": "^2.0.0", "postcss-opacity-percentage": "^2.0.0",
"postcss-overflow-shorthand": "^4.0.1", "postcss-overflow-shorthand": "^4.0.1",
"postcss-page-break": "^3.0.4", "postcss-page-break": "^3.0.4",
@ -9188,9 +9194,9 @@
} }
}, },
"@csstools/postcss-relative-color-syntax": { "@csstools/postcss-relative-color-syntax": {
"version": "1.0.1", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-1.0.2.tgz",
"integrity": "sha512-IskxdQqAkx/pyyOEW3Lhn3nvOu5zlaZ8wQljFl5zc3ABl+gEFf2G42yWK3+wX+J0F4jm7OikOigXo9fAISFEmg==", "integrity": "sha512-juCoVInkgH2TZPfOhyx6tIal7jW37L/0Tt+Vcl1LoxqQA9sxcg3JWYZ98pl1BonDnki6s/M7nXzFQHWsWMeHgw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@csstools/css-color-parser": "^1.2.0", "@csstools/css-color-parser": "^1.2.0",
@ -9422,9 +9428,9 @@
"integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w==" "integrity": "sha512-dmG1PuppNKHnBBEcfylWDwj9SSxd/E/qd8mC1G/klQC3s7ps5q6JZ034mwkkG0LKfI+Y+UgEua/ROD776N400w=="
}, },
"@github/text-expander-element": { "@github/text-expander-element": {
"version": "2.3.0", "version": "2.5.0",
"resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.3.0.tgz", "resolved": "https://registry.npmjs.org/@github/text-expander-element/-/text-expander-element-2.5.0.tgz",
"integrity": "sha512-E1KCxTOA/7Y4dP5g7vXbfRDFU6/SjU0TuJxx6JMwvxzI/NlBrXyXsx/fjFskD2T/un6i6CNKnXu1ZwExDLjcqw==", "integrity": "sha512-BjCxTshkUCgNXo/8iXUSK1sJ7kMJqhVsw6LAzIFtgaYrm4q2068WnPKjngfR+/QPhxN1nSvgd7CozblEIYjUZA==",
"requires": { "requires": {
"@github/combobox-nav": "^2.0.2" "@github/combobox-nav": "^2.0.2"
} }
@ -11581,9 +11587,9 @@
} }
}, },
"postcss-nesting": { "postcss-nesting": {
"version": "11.2.2", "version": "11.3.0",
"resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.2.2.tgz", "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-11.3.0.tgz",
"integrity": "sha512-aOTiUniAB1bcPE6GGiynWRa6PZFPhOTAm5q3q5cem6QeSijIHHkWr6gs65ukCZMXeak8yXeZVbBJET3VM+HlhA==", "integrity": "sha512-JlS10AQm/RzyrUGgl5irVkAlZYTJ99mNueUl+Qab+TcHhVedLiylWVkKBhRale+rS9yWIJK48JVzQlq3LcSdeA==",
"dev": true, "dev": true,
"requires": { "requires": {
"@csstools/selector-specificity": "^2.0.0", "@csstools/selector-specificity": "^2.0.0",
@ -11623,9 +11629,9 @@
} }
}, },
"postcss-preset-env": { "postcss-preset-env": {
"version": "8.4.2", "version": "8.5.0",
"resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.4.2.tgz", "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-8.5.0.tgz",
"integrity": "sha512-Bihxo+FsyVNjsRADiYYnj9Ez0WBSWSSHAe8WvxoMlqrw8H8m6gK9E0MkDd7P6ForoikRIF3I8grGg/pFM6ECRQ==", "integrity": "sha512-aqAbT5dXqYX5ZvicGKQpaW/eDEZFRfnhV6Hn1Jn2bCKEB9L2MgsTdnIsXsZyFUQflIV2wIs9HTEQgkH5duMCNg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@csstools/postcss-cascade-layers": "^3.0.1", "@csstools/postcss-cascade-layers": "^3.0.1",
@ -11645,7 +11651,7 @@
"@csstools/postcss-normalize-display-values": "^2.0.1", "@csstools/postcss-normalize-display-values": "^2.0.1",
"@csstools/postcss-oklab-function": "^2.2.3", "@csstools/postcss-oklab-function": "^2.2.3",
"@csstools/postcss-progressive-custom-properties": "^2.3.0", "@csstools/postcss-progressive-custom-properties": "^2.3.0",
"@csstools/postcss-relative-color-syntax": "^1.0.1", "@csstools/postcss-relative-color-syntax": "^1.0.2",
"@csstools/postcss-scope-pseudo-class": "^2.0.2", "@csstools/postcss-scope-pseudo-class": "^2.0.2",
"@csstools/postcss-stepped-value-functions": "^2.1.1", "@csstools/postcss-stepped-value-functions": "^2.1.1",
"@csstools/postcss-text-decoration-shorthand": "^2.2.4", "@csstools/postcss-text-decoration-shorthand": "^2.2.4",
@ -11675,7 +11681,7 @@
"postcss-initial": "^4.0.1", "postcss-initial": "^4.0.1",
"postcss-lab-function": "^5.2.3", "postcss-lab-function": "^5.2.3",
"postcss-logical": "^6.2.0", "postcss-logical": "^6.2.0",
"postcss-nesting": "^11.2.1", "postcss-nesting": "^11.3.0",
"postcss-opacity-percentage": "^2.0.0", "postcss-opacity-percentage": "^2.0.0",
"postcss-overflow-shorthand": "^4.0.1", "postcss-overflow-shorthand": "^4.0.1",
"postcss-page-break": "^3.0.4", "postcss-page-break": "^3.0.4",

4
package.json
View file

@ -11,7 +11,7 @@
}, },
"dependencies": { "dependencies": {
"@formatjs/intl-localematcher": "~0.4.0", "@formatjs/intl-localematcher": "~0.4.0",
"@github/text-expander-element": "~2.3.0", "@github/text-expander-element": "~2.5.0",
"@iconify-icons/mingcute": "~1.2.5", "@iconify-icons/mingcute": "~1.2.5",
"@justinribeiro/lite-youtube": "~1.5.0", "@justinribeiro/lite-youtube": "~1.5.0",
"@szhsin/react-menu": "~4.0.0", "@szhsin/react-menu": "~4.0.0",
@ -45,7 +45,7 @@
"@trivago/prettier-plugin-sort-imports": "~4.1.1", "@trivago/prettier-plugin-sort-imports": "~4.1.1",
"postcss": "~8.4.24", "postcss": "~8.4.24",
"postcss-dark-theme-class": "~0.7.3", "postcss-dark-theme-class": "~0.7.3",
"postcss-preset-env": "~8.4.2", "postcss-preset-env": "~8.5.0",
"twitter-text": "~3.1.0", "twitter-text": "~3.1.0",
"vite": "~4.3.9", "vite": "~4.3.9",
"vite-plugin-generate-file": "~0.0.4", "vite-plugin-generate-file": "~0.0.4",

3
src/components/nav-menu.css
View file

@ -1,9 +1,8 @@
@media (min-width: 23em) { @media (min-width: 23em) {
.nav-menu { .nav-menu {
display: flex; display: flex;
width: auto;
padding: 0; padding: 0;
min-width: 22em; width: 22em;
} }
.nav-menu section { .nav-menu section {
padding: 8px 0; padding: 8px 0;

10
src/components/nav-menu.jsx
View file

@ -6,6 +6,7 @@ import { useLongPress } from 'use-long-press';
import { useSnapshot } from 'valtio'; import { useSnapshot } from 'valtio';
import { api } from '../utils/api'; import { api } from '../utils/api';
import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
import states from '../utils/states'; import states from '../utils/states';
import store from '../utils/store'; import store from '../utils/store';
@ -52,6 +53,13 @@ function NavMenu(props) {
const buttonRef = useRef(); const buttonRef = useRef();
const [menuState, setMenuState] = useState(undefined); const [menuState, setMenuState] = useState(undefined);
const boundingBoxPadding = safeBoundingBoxPadding([
0,
0,
snapStates.settings.shortcutsViewMode === 'tab-menu-bar' ? 50 : 0,
0,
]);
return ( return (
<> <>
<button <button
@ -104,7 +112,7 @@ function NavMenu(props) {
viewScroll="close" viewScroll="close"
position="anchor" position="anchor"
align="center" align="center"
boundingBoxPadding="8 8 8 8" boundingBoxPadding={boundingBoxPadding}
unmountOnClose unmountOnClose
> >
<section> <section>

17
src/components/status.jsx
View file

@ -693,9 +693,13 @@ function Status({
x: 0, x: 0,
y: 0, y: 0,
}); });
const bindLongPress = useLongPress( const bindLongPressContext = useLongPress(
(e) => { (e) => {
const { clientX, clientY } = e.touches?.[0] || e; const { clientX, clientY } = e.touches?.[0] || e;
// link detection copied from onContextMenu because here it works
const link = e.target.closest('a');
if (link && /^https?:\/\//.test(link.getAttribute('href'))) return;
e.preventDefault();
setContextMenuAnchorPoint({ setContextMenuAnchorPoint({
x: clientX, x: clientX,
y: clientY, y: clientY,
@ -706,7 +710,7 @@ function Status({
threshold: 600, threshold: 600,
captureEvent: true, captureEvent: true,
detect: 'touch', detect: 'touch',
cancelOnMovement: true, cancelOnMovement: 4, // true allows movement of up to 25 pixels
}, },
); );
@ -727,6 +731,7 @@ function Status({
} ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`} } ${_deleted ? 'status-deleted' : ''} ${quoted ? 'status-card' : ''}`}
onMouseEnter={debugHover} onMouseEnter={debugHover}
onContextMenu={(e) => { onContextMenu={(e) => {
// FIXME: this code isn't getting called on Chrome at all?
if (!showContextMenu) return; if (!showContextMenu) return;
if (e.metaKey) return; if (e.metaKey) return;
// console.log('context menu', e); // console.log('context menu', e);
@ -739,7 +744,7 @@ function Status({
}); });
setIsContextMenuOpen(true); setIsContextMenuOpen(true);
}} }}
{...(showContextMenu ? bindLongPress() : {})} {...(showContextMenu ? bindLongPressContext() : {})}
> >
{showContextMenu && ( {showContextMenu && (
<ControlledMenu <ControlledMenu
@ -1839,7 +1844,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
const statusPeekText = statusPeek(status.reblog || status); const statusPeekText = statusPeek(status.reblog || status);
const [showPeek, setShowPeek] = useState(false); const [showPeek, setShowPeek] = useState(false);
const bindLongPress = useLongPress( const bindLongPressPeek = useLongPress(
() => { () => {
setShowPeek(true); setShowPeek(true);
}, },
@ -1847,7 +1852,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
threshold: 600, threshold: 600,
captureEvent: true, captureEvent: true,
detect: 'touch', detect: 'touch',
cancelOnMovement: true, cancelOnMovement: 4, // true allows movement of up to 25 pixels
}, },
); );
@ -1860,7 +1865,7 @@ function FilteredStatus({ status, filterInfo, instance, containerProps = {} }) {
e.preventDefault(); e.preventDefault();
setShowPeek(true); setShowPeek(true);
}} }}
{...bindLongPress()} {...bindLongPressPeek()}
> >
<article class="status filtered" tabindex="-1"> <article class="status filtered" tabindex="-1">
<b <b

8
src/utils/safe-bounding-box-padding.jsx → src/utils/safe-bounding-box-padding.js
View file

@ -3,7 +3,8 @@ import mem from 'mem';
const root = document.documentElement; const root = document.documentElement;
const style = getComputedStyle(root); const style = getComputedStyle(root);
const defaultBoundingBoxPadding = 8; const defaultBoundingBoxPadding = 8;
function _safeBoundingBoxPadding() { function _safeBoundingBoxPadding(paddings = []) {
// paddings = [top, right, bottom, left]
// Get safe area inset variables from root // Get safe area inset variables from root
const safeAreaInsetTop = style.getPropertyValue('--sai-top'); const safeAreaInsetTop = style.getPropertyValue('--sai-top');
const safeAreaInsetRight = style.getPropertyValue('--sai-right'); const safeAreaInsetRight = style.getPropertyValue('--sai-right');
@ -15,7 +16,10 @@ function _safeBoundingBoxPadding() {
safeAreaInsetBottom, safeAreaInsetBottom,
safeAreaInsetLeft, safeAreaInsetLeft,
] ]
.map((v) => parseInt(v, 10) || defaultBoundingBoxPadding) .map(
(v, i) =>
(parseInt(v, 10) || defaultBoundingBoxPadding) + (paddings[i] || 0),
)
.join(' '); .join(' ');
// console.log(str); // console.log(str);
return str; return str;