+
- {type === 'favourite+reblog' ? (
+ class="announcement-content"
+ onClick={handleContentLinks({ mentions, instance })}
+ dangerouslySetInnerHTML={{
+ __html: enhanceContent(content, {
+ emojis,
+ }),
+ }}
+ />
+
+
+ {updatedAt && updatedAtText !== publishedDateText && (
<>
-
-
-
- ) : (
-
- )}
-
-
- {type !== 'mention' && (
- <>
-
- {!/poll|update/i.test(type) && (
- <>
- {_accounts?.length > 1 ? (
- <>
- {_accounts.length} people{' '}
-
- ) : (
- <>
- {' '}
-
- )}
-
- )}
- {text}
- {type === 'mention' && (
-
- {' '}
- β’{' '}
-
-
- )}
-
- {type === 'follow_request' && (
-
{
- loadNotifications(true);
- }}
- />
- )}
+ {' '}
+ •{' '}
+
+ Updated{' '}
+
+
)}
- {_accounts?.length > 1 && (
-
- {_accounts.map((account, i) => (
- <>
- {
- e.preventDefault();
- states.showAccount = account;
- }}
- >
-
- {type === 'favourite+reblog' && (
-
- {account._types.map((type) => (
-
- ))}
-
- )}
- {' '}
-
- ))}
-
- )}
- {status && (
-
-
-
- )}
+
+
+ {reactions.map((reaction) => {
+ const { name, count, me, staticUrl, url } = reaction;
+ return (
+
+ );
+ })}
);
}
-function FollowRequestButtons({ accountID, onChange }) {
- const { masto } = api();
- const [uiState, setUIState] = useState('default');
- return (
-
- {' '}
-
-
-
- );
-}
-
-function groupNotifications(notifications) {
- // Create new flat list of notifications
- // Combine sibling notifications based on type and status id
- // Concat all notification.account into an array of _accounts
- const notificationsMap = {};
- const cleanNotifications = [];
- for (let i = 0, j = 0; i < notifications.length; i++) {
- const notification = notifications[i];
- const { status, account, type, createdAt } = notification;
- const date = new Date(createdAt).toLocaleDateString();
- let virtualType = type;
- if (type === 'favourite' || type === 'reblog') {
- virtualType = 'favourite+reblog';
- }
- const key = `${status?.id}-${virtualType}-${date}`;
- const mappedNotification = notificationsMap[key];
- if (virtualType === 'follow_request') {
- cleanNotifications[j++] = notification;
- } else if (mappedNotification?.account) {
- const mappedAccount = mappedNotification._accounts.find(
- (a) => a.id === account.id,
- );
- if (mappedAccount) {
- mappedAccount._types.push(type);
- mappedAccount._types.sort().reverse();
- } else {
- account._types = [type];
- mappedNotification._accounts.push(account);
- }
- } else {
- account._types = [type];
- let n = (notificationsMap[key] = {
- ...notification,
- type: virtualType,
- _accounts: [account],
- });
- cleanNotifications[j++] = n;
- }
- }
- return cleanNotifications;
-}
-
export default memo(Notifications);
diff --git a/src/pages/search.css b/src/pages/search.css
index 92105bd6..a274bd3f 100644
--- a/src/pages/search.css
+++ b/src/pages/search.css
@@ -43,3 +43,61 @@ ul.link-list.hashtag-list li a {
background-color: var(--bg-color);
}
}
+
+.search-popover-container {
+ position: relative;
+}
+.search-popover {
+ position: absolute;
+ left: 8px;
+ max-width: calc(100% - 16px);
+ /* right: 8px; */
+ background-color: var(--bg-color);
+ border: 1px solid var(--outline-color);
+ box-shadow: 0 4px 24px var(--drop-shadow-color);
+ border-radius: 8px;
+ display: flex;
+ flex-direction: column;
+ animation: appear-smooth 0.2s ease-out;
+ overflow: hidden;
+}
+.search-popover[hidden] {
+ display: none;
+}
+.search-popover-item {
+ text-decoration: none;
+ padding: 8px 16px 8px 8px;
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+.search-popover-item[hidden] {
+ display: none;
+}
+.search-popover-item:is(:hover, :focus, .focus) {
+ background-color: var(--button-bg-color);
+ color: var(--button-text-color);
+}
+.search-popover-item :is(mark, q) {
+ background-color: var(--bg-faded-blur-color);
+ color: inherit;
+}
+.search-popover-item:is(:hover, :focus, .focus) :is(mark, q) {
+ background-color: var(--button-bg-color);
+}
+.search-popover:hover .search-popover-item.focus:not(:hover, :focus),
+.search-popover:hover
+ .search-popover-item.focus:not(:hover, :focus)
+ :is(mark, q) {
+ background-color: unset;
+ color: unset;
+}
+.search-popover-item > span {
+ min-width: 0;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.search-popover-item:is(:hover, :focus, .focus) > .icon {
+ opacity: 1;
+}
diff --git a/src/pages/search.jsx b/src/pages/search.jsx
index d6e9a7ac..5b451e3b 100644
--- a/src/pages/search.jsx
+++ b/src/pages/search.jsx
@@ -1,6 +1,7 @@
import './search.css';
-import { useEffect, useRef, useState } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
+import { useEffect, useImperativeHandle, useRef, useState } from 'preact/hooks';
import { useParams, useSearchParams } from 'react-router-dom';
import AccountBlock from '../components/account-block';
@@ -18,25 +19,44 @@ function Search(props) {
instance: params.instance,
});
const [uiState, setUiState] = useState('default');
- const [searchParams, setSearchParams] = useSearchParams();
- const searchFieldRef = useRef();
+ const [searchParams] = useSearchParams();
+ const searchFormRef = useRef();
const q = props?.query || searchParams.get('q');
- useTitle(q ? `Search: ${q}` : 'Search', `/search`);
+ const type = props?.type || searchParams.get('type');
+ useTitle(
+ q
+ ? `Search: ${q}${
+ type
+ ? ` (${
+ {
+ statuses: 'Posts',
+ accounts: 'Accounts',
+ hashtags: 'Hashtags',
+ }[type]
+ })`
+ : ''
+ }`
+ : 'Search',
+ `/search`,
+ );
const [statusResults, setStatusResults] = useState([]);
const [accountResults, setAccountResults] = useState([]);
const [hashtagResults, setHashtagResults] = useState([]);
useEffect(() => {
- searchFieldRef.current?.focus?.();
+ // searchFieldRef.current?.focus?.();
+ // searchFormRef.current?.focus?.();
if (q) {
- searchFieldRef.current.value = q;
+ // searchFieldRef.current.value = q;
+ searchFormRef.current?.setValue?.(q);
setUiState('loading');
(async () => {
const results = await masto.v2.search({
q,
- limit: 20,
+ limit: type ? 40 : 5,
resolve: authenticated,
+ type,
});
console.log(results);
setStatusResults(results.statuses);
@@ -45,7 +65,7 @@ function Search(props) {
setUiState('default');
})();
}
- }, [q, instance]);
+ }, [q, type, instance]);
return (
@@ -55,89 +75,153 @@ function Search(props) {
-
-
+
+
+ {!!q && (
+
+ {!!type && βΉ All}
+ {[
+ {
+ label: 'Accounts',
+ type: 'accounts',
+ to: `/search?q=${q}&type=accounts`,
+ },
+ {
+ label: 'Hashtags',
+ type: 'hashtags',
+ to: `/search?q=${q}&type=hashtags`,
+ },
+ {
+ label: 'Posts',
+ type: 'statuses',
+ to: `/search?q=${q}&type=statuses`,
+ },
+ ]
+ .sort((a, b) => {
+ if (a.type === type) return -1;
+ if (b.type === type) return 1;
+ return 0;
+ })
+ .map((link) => (
+ {link.label}
+ ))}
+
+ )}
{!!q && uiState !== 'loading' ? (
<>
-
- {accountResults.length > 0 ? (
-
- {accountResults.map((account) => (
- -
-
-
- ))}
-
- ) : (
- No accounts found.
+ {(!type || type === 'accounts') && (
+ <>
+ {type !== 'accounts' && (
+
+ )}
+ {accountResults.length > 0 ? (
+ <>
+
+ {accountResults.map((account) => (
+ -
+
+
+ ))}
+
+ {type !== 'accounts' && (
+
+
+ See more accounts
+
+
+ )}
+
+ ) : (
+ No accounts found.
+ )}
+
)}
-
- {hashtagResults.length > 0 ? (
-
- {hashtagResults.map((hashtag) => (
- -
-
-
- {hashtag.name}
-
-
- ))}
-
- ) : (
- No hashtags found.
+ {(!type || type === 'hashtags') && (
+ <>
+ {type !== 'hashtags' && (
+
+ )}
+ {hashtagResults.length > 0 ? (
+ <>
+
+ {hashtagResults.map((hashtag) => (
+ -
+
+
+ {hashtag.name}
+
+
+ ))}
+
+ {type !== 'hashtags' && (
+
+
+ See more hashtags
+
+
+ )}
+
+ ) : (
+ No hashtags found.
+ )}
+
)}
-
- {statusResults.length > 0 ? (
-
- {statusResults.map((status) => (
- -
-
-
-
-
- ))}
-
- ) : (
- No posts found.
+ {(!type || type === 'statuses') && (
+ <>
+ {type !== 'statuses' && (
+
+ )}
+ {statusResults.length > 0 ? (
+ <>
+
+ {statusResults.map((status) => (
+ -
+
+
+
+
+ ))}
+
+ {type !== 'statuses' && (
+
+
+ See more posts
+
+
+ )}
+
+ ) : (
+ No posts found.
+ )}
+
)}
) : uiState === 'loading' ? (
@@ -156,3 +240,209 @@ function Search(props) {
}
export default Search;
+
+const SearchForm = forwardRef((props, ref) => {
+ const { instance } = api();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const [searchMenuOpen, setSearchMenuOpen] = useState(false);
+ const [query, setQuery] = useState(searchParams.q || '');
+ const formRef = useRef(null);
+
+ const searchFieldRef = useRef(null);
+ useImperativeHandle(ref, () => ({
+ setValue: (value) => {
+ setQuery(value);
+ },
+ focus: () => {
+ searchFieldRef.current.focus();
+ },
+ }));
+
+ return (
+
+ );
+});
diff --git a/src/pages/settings.jsx b/src/pages/settings.jsx
index 2b09b0e6..9dbad5da 100644
--- a/src/pages/settings.jsx
+++ b/src/pages/settings.jsx
@@ -147,6 +147,18 @@ function Settings({ onClose }) {
Experiments
+ -
+
+
-
@@ -1120,4 +1148,26 @@ function SubComments({
);
}
+const MEDIA_VIRTUAL_LENGTH = 140;
+const POLL_VIRTUAL_LENGTH = 35;
+const CARD_VIRTUAL_LENGTH = 70;
+const WEIGHT_SEGMENT = 140;
+const statusWeightCache = new Map();
+function calcStatusWeight(status) {
+ const cachedWeight = statusWeightCache.get(status.id);
+ if (cachedWeight) return cachedWeight;
+ const { spoilerText, content, mediaAttachments, poll, card } = status;
+ const length = htmlContentLength(spoilerText + content);
+ const mediaLength = mediaAttachments?.length ? MEDIA_VIRTUAL_LENGTH : 0;
+ const pollLength = (poll?.options?.length || 0) * POLL_VIRTUAL_LENGTH;
+ const cardLength =
+ card && (mediaAttachments?.length || poll?.options?.length)
+ ? 0
+ : CARD_VIRTUAL_LENGTH;
+ const totalLength = length + mediaLength + pollLength + cardLength;
+ const weight = totalLength / WEIGHT_SEGMENT;
+ statusWeightCache.set(status.id, weight);
+ return weight;
+}
+
export default memo(StatusPage);
diff --git a/src/utils/api.js b/src/utils/api.js
index 15522581..c9c6a589 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -48,7 +48,7 @@ export function initClient({ instance, accessToken }) {
// Get the instance information
// The config is needed for composing
-export async function initInstance(client) {
+export async function initInstance(client, instance) {
const masto = client;
// Request v2, fallback to v1 if fail
let info;
@@ -70,16 +70,19 @@ export async function initInstance(client) {
domain,
configuration: { urls: { streaming } = {} } = {},
} = info;
+ const instances = store.local.getJSON('instances') || {};
if (uri || domain) {
- const instances = store.local.getJSON('instances') || {};
instances[
(domain || uri)
.replace(/^https?:\/\//, '')
.replace(/\/+$/, '')
.toLowerCase()
] = info;
- store.local.setJSON('instances', instances);
}
+ if (instance) {
+ instances[instance.toLowerCase()] = info;
+ }
+ store.local.setJSON('instances', instances);
// This is a weird place to put this but here's updating the masto instance with the streaming API URL set in the configuration
// Reason: Streaming WebSocket URL may change, unlike the standard API REST URLs
if (streamingApi || streaming) {
diff --git a/src/utils/enhance-content.js b/src/utils/enhance-content.js
index bf0ef916..c91c6328 100644
--- a/src/utils/enhance-content.js
+++ b/src/utils/enhance-content.js
@@ -41,7 +41,10 @@ function enhanceContent(content, opts = {}) {
// Convert :shortcode: to ![]()
let textNodes = extractTextNodes(dom);
textNodes.forEach((node) => {
- let html = node.nodeValue.replace(//g, '>');
+ let html = node.nodeValue
+ .replace(/&/g, '&')
+ .replace(//g, '>');
if (emojis) {
html = emojifyText(html, emojis);
}
@@ -106,7 +109,10 @@ function enhanceContent(content, opts = {}) {
// Convert `code` to code
textNodes = extractTextNodes(dom);
textNodes.forEach((node) => {
- let html = node.nodeValue.replace(//g, '>');
+ let html = node.nodeValue
+ .replace(/&/g, '&')
+ .replace(//g, '>');
if (/`[^`]+`/g.test(html)) {
html = html.replaceAll(/(`[^]+?`)/g, '$1');
}
@@ -122,7 +128,10 @@ function enhanceContent(content, opts = {}) {
rejectFilter: ['A'],
});
textNodes.forEach((node) => {
- let html = node.nodeValue.replace(//g, '>');
+ let html = node.nodeValue
+ .replace(/&/g, '&')
+ .replace(//g, '>');
if (/@[a-zA-Z0-9_]+@twitter\.com/g.test(html)) {
html = html.replaceAll(
/(@([a-zA-Z0-9_]+)@twitter\.com)/g,
diff --git a/src/utils/group-notifications.jsx b/src/utils/group-notifications.jsx
new file mode 100644
index 00000000..eff19181
--- /dev/null
+++ b/src/utils/group-notifications.jsx
@@ -0,0 +1,43 @@
+function groupNotifications(notifications) {
+ // Create new flat list of notifications
+ // Combine sibling notifications based on type and status id
+ // Concat all notification.account into an array of _accounts
+ const notificationsMap = {};
+ const cleanNotifications = [];
+ for (let i = 0, j = 0; i < notifications.length; i++) {
+ const notification = notifications[i];
+ const { status, account, type, createdAt } = notification;
+ const date = new Date(createdAt).toLocaleDateString();
+ let virtualType = type;
+ if (type === 'favourite' || type === 'reblog') {
+ virtualType = 'favourite+reblog';
+ }
+ const key = `${status?.id}-${virtualType}-${date}`;
+ const mappedNotification = notificationsMap[key];
+ if (virtualType === 'follow_request') {
+ cleanNotifications[j++] = notification;
+ } else if (mappedNotification?.account) {
+ const mappedAccount = mappedNotification._accounts.find(
+ (a) => a.id === account.id,
+ );
+ if (mappedAccount) {
+ mappedAccount._types.push(type);
+ mappedAccount._types.sort().reverse();
+ } else {
+ account._types = [type];
+ mappedNotification._accounts.push(account);
+ }
+ } else {
+ account._types = [type];
+ let n = (notificationsMap[key] = {
+ ...notification,
+ type: virtualType,
+ _accounts: [account],
+ });
+ cleanNotifications[j++] = n;
+ }
+ }
+ return cleanNotifications;
+}
+
+export default groupNotifications;
diff --git a/src/utils/isMastodonLinkMaybe.jsx b/src/utils/isMastodonLinkMaybe.jsx
index ea63202b..9e070006 100644
--- a/src/utils/isMastodonLinkMaybe.jsx
+++ b/src/utils/isMastodonLinkMaybe.jsx
@@ -1,6 +1,6 @@
export default function isMastodonLinkMaybe(url) {
+ const { pathname } = new URL(url);
return (
- /^https:\/\/.*\/\d+$/i.test(url) ||
- /^https:\/\/.*\/notes\/[a-z0-9]+$/i.test(url) // Misskey, Calckey
+ /^\/.*\/\d+$/i.test(pathname) || /^\/notes\/[a-z0-9]+$/i.test(pathname) // Misskey, Calckey
);
}
diff --git a/src/utils/states.js b/src/utils/states.js
index 5e8ed57f..da3771f1 100644
--- a/src/utils/states.js
+++ b/src/utils/states.js
@@ -41,6 +41,7 @@ const states = proxy({
shortcuts: store.account.get('shortcuts') ?? [],
// Settings
settings: {
+ autoRefresh: store.account.get('settings-autoRefresh') ?? false,
shortcutsViewMode: store.account.get('settings-shortcutsViewMode') ?? null,
shortcutsColumnsMode:
store.account.get('settings-shortcutsColumnsMode') ?? false,
@@ -64,6 +65,9 @@ subscribeKey(states, 'notificationsLast', (v) => {
subscribe(states, (changes) => {
console.debug('STATES change', changes);
for (const [action, path, value, prevValue] of changes) {
+ if (path.join('.') === 'settings.autoRefresh') {
+ store.account.set('settings-autoRefresh', !!value);
+ }
if (path.join('.') === 'settings.boostsCarousel') {
store.account.set('settings-boostsCarousel', !!value);
}
diff --git a/src/utils/timeline-utils.jsx b/src/utils/timeline-utils.jsx
index 95c4dd8d..b81af192 100644
--- a/src/utils/timeline-utils.jsx
+++ b/src/utils/timeline-utils.jsx
@@ -97,6 +97,39 @@ export function groupContext(items) {
contexts[contextIndex++] = [item, repliedItem];
}
});
+
+ // Check for cross-item contexts
+ // Merge contexts into one if they have a common item (same id)
+ for (let i = 0; i < contexts.length; i++) {
+ for (let j = i + 1; j < contexts.length; j++) {
+ const commonItem = contexts[i].find((t) => contexts[j].includes(t));
+ if (commonItem) {
+ contexts[i] = [...contexts[i], ...contexts[j]];
+ // Remove duplicate items
+ contexts[i] = contexts[i].filter(
+ (item, index, self) =>
+ self.findIndex((t) => t.id === item.id) === index,
+ );
+ contexts.splice(j, 1);
+ j--;
+ }
+ }
+ }
+
+ // Sort items by checking inReplyToId
+ contexts.forEach((context) => {
+ context.sort((a, b) => {
+ if (!a.inReplyToId && !b.inReplyToId) {
+ return new Date(a.createdAt) - new Date(b.createdAt);
+ }
+ if (a.inReplyToId === b.id) return 1;
+ if (b.inReplyToId === a.id) return -1;
+ if (!a.inReplyToId) return -1;
+ if (!b.inReplyToId) return 1;
+ return new Date(a.createdAt) - new Date(b.createdAt);
+ });
+ });
+
if (contexts.length) console.log('𧡠Contexts', contexts);
const newItems = [];
diff --git a/src/utils/useInterval.js b/src/utils/useInterval.js
index 10bc59ec..baa21086 100644
--- a/src/utils/useInterval.js
+++ b/src/utils/useInterval.js
@@ -1,13 +1,10 @@
import { useEffect, useRef } from 'preact/hooks';
-const noop = () => {};
-
-function useInterval(callback, delay, immediate) {
- const savedCallback = useRef(noop);
-
+function useInterval(fn, delay, deps, immediate) {
+ const savedCallback = useRef(fn);
useEffect(() => {
- savedCallback.current = callback;
- }, []);
+ savedCallback.current = fn;
+ }, [deps]);
useEffect(() => {
if (!immediate || delay === null || delay === false) return;
diff --git a/src/utils/usePageVisibility.js b/src/utils/usePageVisibility.js
index ad9c73bb..ed11f1b3 100644
--- a/src/utils/usePageVisibility.js
+++ b/src/utils/usePageVisibility.js
@@ -1,7 +1,10 @@
import { useEffect, useRef } from 'preact/hooks';
export default function usePageVisibility(fn = () => {}, deps = []) {
- const savedCallback = useRef(fn, deps);
+ const savedCallback = useRef(fn);
+ useEffect(() => {
+ savedCallback.current = fn;
+ }, [deps]);
useEffect(() => {
const handleVisibilityChange = () => {