{"version":3,"file":"main-BiOvAqQu.js","sources":["../../node_modules/just-debounce-it/index.mjs","../../node_modules/swiped-events/src/swiped-events.js","../../src/utils/usePageVisibility.js","../../src/components/background-service.jsx","../../src/components/compose-button.jsx","../../src/components/keyboard-shortcuts-help.jsx","../../node_modules/@formkit/auto-animate/index.mjs","../../node_modules/@formkit/auto-animate/preact/index.mjs","../../src/utils/oauth-pkce.js","../../src/utils/auth.js","../../src/pages/accounts.jsx","../../src/assets/logo.svg","../../src/components/lang-selector.jsx","../../src/utils/push-notifications.js","../../src/pages/settings.jsx","../../src/utils/focus-deck.js","../../src/utils/useLocationChange.js","../../src/components/account-handle-info.jsx","../../src/components/edit-profile-sheet.jsx","../../src/components/endorsements.jsx","../../src/utils/lists.js","../../src/components/list-exclusive-badge.jsx","../../src/components/list-add-edit.jsx","../../src/components/add-remove-lists-sheet.jsx","../../src/components/private-note-sheet.jsx","../../src/components/translated-bio-sheet.jsx","../../src/components/related-actions.jsx","../../src/components/account-info.jsx","../../src/components/account-sheet.jsx","../../src/components/drafts.jsx","../../src/components/embed-modal.jsx","../../src/components/generic-accounts.jsx","../../src/components/media-alt-modal.jsx","../../node_modules/chroma-js/src/utils/limit.js","../../node_modules/chroma-js/src/utils/type.js","../../node_modules/chroma-js/src/utils/unpack.js","../../node_modules/chroma-js/src/utils/index.js","../../node_modules/chroma-js/src/utils/multiply-matrices.js","../../node_modules/chroma-js/src/io/lab/lab-constants.js","../../node_modules/chroma-js/src/io/lab/lab2rgb.js","../../node_modules/chroma-js/src/io/oklab/oklab2rgb.js","../../node_modules/chroma-js/src/io/lab/rgb2lab.js","../../node_modules/chroma-js/src/io/oklab/rgb2oklab.js","../../node_modules/chroma-js/src/io/lch/lch2lab.js","../../node_modules/chroma-js/src/io/oklch/oklch2rgb.js","../../node_modules/chroma-js/src/io/lch/lab2lch.js","../../node_modules/chroma-js/src/io/oklch/rgb2oklch.js","../../src/components/media-modal.jsx","../../src/components/open-link-sheet.jsx","../../src/components/report-modal.jsx","../../node_modules/lz-string/libs/lz-string.js","../../src/assets/floating-button.svg","../../src/assets/multi-column.svg","../../src/assets/tab-menu-bar.svg","../../src/utils/followed-tags.js","../../src/components/AsyncText.jsx","../../src/components/shortcuts-settings.jsx","../../src/components/modals.jsx","../../src/components/navigation-command.jsx","../../src/components/follow-request-buttons.jsx","../../src/components/notification.jsx","../../src/components/notification-service.jsx","../../src/utils/search-history.js","../../src/components/search-form.jsx","../../src/components/search-command.jsx","../../src/components/shortcuts.jsx","../../src/utils/timeline-utils.js","../../src/utils/useScroll.js","../../src/utils/useScrollFn.js","../../src/components/media-post.jsx","../../src/components/nav-menu.jsx","../../src/components/timeline.jsx","../../src/pages/account-statuses.jsx","../../src/pages/annual-report.jsx","../../src/pages/bookmarks.jsx","../../src/assets/features/catch-up.png","../../src/pages/catchup.jsx","../../src/pages/favourites.jsx","../../src/pages/filters.jsx","../../src/pages/followed-hashtags.jsx","../../src/pages/following.jsx","../../src/pages/hashtag.jsx","../../src/pages/list.jsx","../../src/utils/group-notifications.js","../../src/pages/mentions.jsx","../../src/pages/notifications.jsx","../../src/pages/public.jsx","../../src/components/recent-searches.jsx","../../src/pages/search.jsx","../../src/pages/trending.jsx","../../src/components/columns.jsx","../../src/pages/home.jsx","../../src/utils/get-instance-status-url.js","../../src/pages/http-route.jsx","../../src/pages/lists.jsx","../../src/data/instances.json?url","../../src/pages/login.jsx","../../src/pages/scheduled-posts.jsx","../../src/components/edit-history-controls.jsx","../../src/pages/status.jsx","../../src/pages/status-route.jsx","../../src/assets/features/boosts-carousel.jpg","../../src/assets/features/grouped-notifications.jpg","../../src/assets/features/multi-column.jpg","../../src/assets/features/multi-hashtag-timeline.jpg","../../src/assets/features/nested-comments-thread.jpg","../../src/assets/logo-text.svg","../../src/pages/welcome.jsx","../../src/utils/toast-alert.js","../../src/app.jsx","../../src/main.jsx"],"sourcesContent":["var functionDebounce = debounce;\n\nfunction debounce(fn, wait, callFirst) {\n var timeout = null;\n var debouncedFn = null;\n\n var clear = function() {\n if (timeout) {\n clearTimeout(timeout);\n\n debouncedFn = null;\n timeout = null;\n }\n };\n\n var flush = function() {\n var call = debouncedFn;\n clear();\n\n if (call) {\n call();\n }\n };\n\n var debounceWrapper = function() {\n if (!wait) {\n return fn.apply(this, arguments);\n }\n\n var context = this;\n var args = arguments;\n var callNow = callFirst && !timeout;\n clear();\n\n debouncedFn = function() {\n fn.apply(context, args);\n };\n\n timeout = setTimeout(function() {\n timeout = null;\n\n if (!callNow) {\n var call = debouncedFn;\n debouncedFn = null;\n\n return call();\n }\n }, wait);\n\n if (callNow) {\n return debouncedFn();\n }\n };\n\n debounceWrapper.cancel = clear;\n debounceWrapper.flush = flush;\n\n return debounceWrapper;\n}\n\nexport {functionDebounce as default};\n","/*!\n * swiped-events.js - v@version@\n * Pure JavaScript swipe events\n * https://github.com/john-doherty/swiped-events\n * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element\n * @author John Doherty \n * @license MIT\n */\n(function (window, document) {\n\n 'use strict';\n\n // patch CustomEvent to allow constructor creation (IE/Chrome)\n if (typeof window.CustomEvent !== 'function') {\n\n window.CustomEvent = function (event, params) {\n\n params = params || { bubbles: false, cancelable: false, detail: undefined };\n\n var evt = document.createEvent('CustomEvent');\n evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);\n return evt;\n };\n\n window.CustomEvent.prototype = window.Event.prototype;\n }\n\n document.addEventListener('touchstart', handleTouchStart, false);\n document.addEventListener('touchmove', handleTouchMove, false);\n document.addEventListener('touchend', handleTouchEnd, false);\n\n var xDown = null;\n var yDown = null;\n var xDiff = null;\n var yDiff = null;\n var timeDown = null;\n var startEl = null;\n var touchCount = 0;\n\n /**\n * Fires swiped event if swipe detected on touchend\n * @param {object} e - browser event object\n * @returns {void}\n */\n function handleTouchEnd(e) {\n\n // if the user released on a different target, cancel!\n if (startEl !== e.target) return;\n\n var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20 units\n var swipeUnit = getNearestAttribute(startEl, 'data-swipe-unit', 'px'); // default px\n var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10); // default 500ms\n var timeDiff = Date.now() - timeDown;\n var eventType = '';\n var changedTouches = e.changedTouches || e.touches || [];\n\n if (swipeUnit === 'vh') {\n swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientHeight); // get percentage of viewport height in pixels\n }\n if (swipeUnit === 'vw') {\n swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientWidth); // get percentage of viewport height in pixels\n }\n\n if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant\n if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {\n if (xDiff > 0) {\n eventType = 'swiped-left';\n }\n else {\n eventType = 'swiped-right';\n }\n }\n }\n else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {\n if (yDiff > 0) {\n eventType = 'swiped-up';\n }\n else {\n eventType = 'swiped-down';\n }\n }\n\n if (eventType !== '') {\n\n var eventData = {\n dir: eventType.replace(/swiped-/, ''),\n touchType: (changedTouches[0] || {}).touchType || 'direct',\n fingers: touchCount, // Number of fingers used\n xStart: parseInt(xDown, 10),\n xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),\n yStart: parseInt(yDown, 10),\n yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)\n };\n\n // fire `swiped` event event on the element that started the swipe\n startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));\n\n // fire `swiped-dir` event on the element that started the swipe\n startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));\n }\n\n // reset values\n xDown = null;\n yDown = null;\n timeDown = null;\n }\n /**\n * Records current location on touchstart event\n * @param {object} e - browser event object\n * @returns {void}\n */\n function handleTouchStart(e) {\n\n // if the element has data-swipe-ignore=\"true\" we stop listening for swipe events\n if (e.target.getAttribute('data-swipe-ignore') === 'true') return;\n\n startEl = e.target;\n\n timeDown = Date.now();\n xDown = e.touches[0].clientX;\n yDown = e.touches[0].clientY;\n xDiff = 0;\n yDiff = 0;\n touchCount = e.touches.length;\n }\n\n /**\n * Records location diff in px on touchmove event\n * @param {object} e - browser event object\n * @returns {void}\n */\n function handleTouchMove(e) {\n\n if (!xDown || !yDown) return;\n\n var xUp = e.touches[0].clientX;\n var yUp = e.touches[0].clientY;\n\n xDiff = xDown - xUp;\n yDiff = yDown - yUp;\n }\n\n /**\n * Gets attribute off HTML element or nearest parent\n * @param {object} el - HTML element to retrieve attribute from\n * @param {string} attributeName - name of the attribute\n * @param {any} defaultValue - default value to return if no match found\n * @returns {any} attribute value or defaultValue\n */\n function getNearestAttribute(el, attributeName, defaultValue) {\n\n // walk up the dom tree looking for attributeName\n while (el && el !== document.documentElement) {\n\n var attributeValue = el.getAttribute(attributeName);\n\n if (attributeValue) {\n return attributeValue;\n }\n\n el = el.parentNode;\n }\n\n return defaultValue;\n }\n\n}(window, document));\n","import { useEffect, useRef } from 'preact/hooks';\n\nexport default function usePageVisibility(fn = () => {}, deps = []) {\n const savedCallback = useRef(fn);\n useEffect(() => {\n savedCallback.current = fn;\n }, [deps]);\n\n useEffect(() => {\n const handleVisibilityChange = () => {\n const hidden = document.hidden || document.visibilityState === 'hidden';\n console.log('πŸ‘€ Page visibility changed', hidden ? 'hidden' : 'visible');\n savedCallback.current(!hidden);\n };\n\n document.addEventListener('visibilitychange', handleVisibilityChange);\n return () =>\n document.removeEventListener('visibilitychange', handleVisibilityChange);\n }, []);\n}\n","import { useLingui } from '@lingui/react/macro';\nimport { memo } from 'preact/compat';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport { api } from '../utils/api';\nimport showToast from '../utils/show-toast';\nimport states, { saveStatus } from '../utils/states';\nimport useInterval from '../utils/useInterval';\nimport usePageVisibility from '../utils/usePageVisibility';\n\nconst STREAMING_TIMEOUT = 1000 * 3; // 3 seconds\nconst POLL_INTERVAL = 20_000; // 20 seconds\n\nexport default memo(function BackgroundService({ isLoggedIn }) {\n const { t } = useLingui();\n\n // Notifications service\n // - WebSocket to receive notifications when page is visible\n const [visible, setVisible] = useState(true);\n const visibleTimeout = useRef();\n usePageVisibility((visible) => {\n clearTimeout(visibleTimeout.current);\n if (visible) {\n setVisible(true);\n } else {\n visibleTimeout.current = setTimeout(() => {\n setVisible(false);\n }, POLL_INTERVAL);\n }\n });\n\n const checkLatestNotification = async (masto, instance, skipCheckMarkers) => {\n if (states.notificationsLast) {\n const notificationsIterator = masto.v1.notifications\n .list({\n limit: 1,\n sinceId: states.notificationsLast.id,\n })\n .values();\n const { value: notifications } = await notificationsIterator.next();\n if (notifications?.length) {\n if (skipCheckMarkers) {\n states.notificationsShowNew = true;\n } else {\n let lastReadId;\n try {\n const markers = await masto.v1.markers.fetch({\n timeline: 'notifications',\n });\n lastReadId = markers?.notifications?.lastReadId;\n } catch (e) {}\n if (lastReadId) {\n states.notificationsShowNew = notifications[0].id !== lastReadId;\n } else {\n states.notificationsShowNew = true;\n }\n }\n }\n }\n };\n\n useEffect(() => {\n let sub;\n let streamTimeout;\n let pollNotifications;\n if (isLoggedIn && visible) {\n const { masto, streaming, instance } = api();\n (async () => {\n // 1. Get the latest notification\n await checkLatestNotification(masto, instance);\n\n let hasStreaming = false;\n // 2. Start streaming\n if (streaming) {\n streamTimeout = setTimeout(() => {\n (async () => {\n try {\n hasStreaming = true;\n sub = streaming.user.notification.subscribe();\n console.log('🎏 Streaming notification', sub);\n for await (const entry of sub) {\n if (!sub) break;\n if (!visible) break;\n console.log('πŸ””πŸ”” Notification entry', entry);\n if (entry.event === 'notification') {\n console.log('πŸ””πŸ”” Notification', entry);\n saveStatus(entry.payload, instance, {\n skipThreading: true,\n });\n }\n states.notificationsShowNew = true;\n }\n console.log('πŸ’₯ Streaming notification loop STOPPED');\n } catch (e) {\n hasStreaming = false;\n console.error(e);\n }\n\n if (!hasStreaming) {\n console.log('🎏 Streaming failed, fallback to polling');\n pollNotifications = setInterval(() => {\n checkLatestNotification(masto, instance, true);\n }, POLL_INTERVAL);\n }\n })();\n }, STREAMING_TIMEOUT);\n }\n })();\n }\n return () => {\n sub?.unsubscribe?.();\n sub = null;\n clearTimeout(streamTimeout);\n clearInterval(pollNotifications);\n };\n }, [visible, isLoggedIn]);\n\n // Check for updates service\n const lastCheckDate = useRef();\n const checkForUpdates = () => {\n lastCheckDate.current = Date.now();\n console.log('✨ Check app update');\n fetch('./version.json')\n .then((r) => r.json())\n .then((info) => {\n if (info) states.appVersion = info;\n })\n .catch((e) => {\n console.error(e);\n });\n };\n useInterval(checkForUpdates, visible && 1000 * 60 * 30); // 30 minutes\n usePageVisibility((visible) => {\n if (visible) {\n if (!lastCheckDate.current) {\n checkForUpdates();\n } else {\n const diff = Date.now() - lastCheckDate.current;\n if (diff > 1000 * 60 * 60) {\n // 1 hour\n checkForUpdates();\n }\n }\n }\n });\n\n // Global keyboard shortcuts \"service\"\n useHotkeys(\n 'shift+alt+k',\n (e) => {\n // Need modifers check due to useKey: true\n if (!e.shiftKey || !e.altKey) return;\n\n const currentCloakMode = states.settings.cloakMode;\n states.settings.cloakMode = !currentCloakMode;\n showToast({\n text: currentCloakMode ? t`Cloak mode disabled` : t`Cloak mode enabled`,\n });\n },\n {\n useKey: true,\n ignoreEventWhen: (e) => e.metaKey || e.ctrlKey,\n },\n );\n\n return null;\n});\n","import { Trans, useLingui } from '@lingui/react/macro';\nimport { ControlledMenu, MenuDivider, MenuItem } from '@szhsin/react-menu';\nimport { useCallback, useEffect, useRef, useState } from 'preact/hooks';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport { useLongPress } from 'use-long-press';\nimport { useSnapshot } from 'valtio';\n\nimport { api } from '../utils/api';\nimport niceDateTime from '../utils/nice-date-time';\nimport openCompose from '../utils/open-compose';\nimport openOSK from '../utils/open-osk';\nimport pmem from '../utils/pmem';\nimport safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';\nimport showCompose from '../utils/show-compose';\nimport states from '../utils/states';\nimport statusPeek from '../utils/status-peek';\nimport { getCurrentAccountID } from '../utils/store-utils';\n\nimport Icon from './icon';\nimport Loader from './loader';\nimport MenuLink from './menu-link';\nimport RelativeTime from './relative-time';\nimport SubMenu2 from './submenu2';\n\n// Function to fetch the latest posts from the current user\n// Use pmem to memoize fetch results for 1 minute\nconst fetchLatestPostsMemoized = pmem(\n async (masto, currentAccountID) => {\n const statusesIterator = masto.v1.accounts\n .$select(currentAccountID)\n .statuses.list({\n limit: 3,\n exclude_replies: true,\n exclude_reblogs: true,\n })\n .values();\n const { value } = await statusesIterator.next();\n return value || [];\n },\n { maxAge: 60000 },\n); // 1 minute cache\n\nexport default function ComposeButton() {\n const { t } = useLingui();\n const snapStates = useSnapshot(states);\n const { masto } = api();\n\n // Context menu state\n const [menuOpen, setMenuOpen] = useState(false);\n const [latestPosts, setLatestPosts] = useState([]);\n const [loadingPosts, setLoadingPosts] = useState(false);\n const buttonRef = useRef(null);\n const menuRef = useRef(null);\n\n const columnMode = snapStates.settings.shortcutsViewMode === 'multi-column';\n\n function handleButton(e) {\n // useKey will even listen to Shift\n // e.g. press Shift (without c) will trigger this 😱\n if (e.key && e.key.toLowerCase() !== 'c') return;\n\n if (snapStates.composerState.minimized) {\n states.composerState.minimized = false;\n openOSK();\n return;\n }\n\n const composeDataElements = document.querySelectorAll('data.compose-data');\n // If there's a lot of them, ignore\n const opts =\n !columnMode && composeDataElements.length === 1\n ? JSON.parse(composeDataElements[0].value)\n : undefined;\n\n if (e.shiftKey) {\n const newWin = openCompose(opts);\n\n if (!newWin) {\n states.showCompose = opts || true;\n }\n } else {\n openOSK();\n states.showCompose = opts || true;\n }\n }\n\n useHotkeys('c, shift+c', handleButton, {\n useKey: true,\n ignoreEventWhen: (e) => {\n const hasModal = !!document.querySelector('#modal-container > *');\n return hasModal || e.metaKey || e.ctrlKey || e.altKey;\n },\n });\n\n // Setup longpress handler to open context menu\n const bindLongPress = useLongPress(\n () => {\n setMenuOpen(true);\n },\n {\n threshold: 600,\n },\n );\n\n const fetchLatestPosts = useCallback(async () => {\n try {\n setLoadingPosts(true);\n const currentAccountID = getCurrentAccountID();\n if (!currentAccountID) {\n return;\n }\n const posts = await fetchLatestPostsMemoized(masto, currentAccountID);\n setLatestPosts(posts);\n } catch (error) {\n } finally {\n setLoadingPosts(false);\n }\n }, [masto]);\n\n // Function to handle opening the compose window to reply to a post\n const handleReplyToPost = useCallback((post) => {\n showCompose({\n replyToStatus: post,\n });\n setMenuOpen(false);\n }, []);\n\n useEffect(() => {\n if (menuOpen) {\n fetchLatestPosts();\n }\n }, [fetchLatestPosts, menuOpen]);\n\n return (\n <>\n {\n e.preventDefault();\n setMenuOpen(true);\n }}\n {...bindLongPress()}\n class={`${snapStates.composerState.minimized ? 'min' : ''} ${\n snapStates.composerState.publishing ? 'loading' : ''\n } ${snapStates.composerState.publishingError ? 'error' : ''}`}\n >\n \n \n setMenuOpen(false)}\n direction=\"top\"\n gap={8} // Add gap between menu and button\n unmountOnClose\n portal={{\n target: document.body,\n }}\n boundingBoxPadding={safeBoundingBoxPadding()}\n containerProps={{\n style: {\n zIndex: 19,\n },\n onClick: () => {\n menuRef.current?.closeMenu?.();\n },\n }}\n submenuOpenDelay={600}\n >\n \n {' '}\n \n Scheduled Posts\n \n \n \n \n {' '}\n \n Add to thread\n \n {loadingPosts ? '…' : }\n \n }\n >\n {latestPosts.length > 0 &&\n latestPosts.map((post) => {\n const createdDate = new Date(post.createdAt);\n const isWithinDay = Date.now() - createdDate.getTime() < 86400000;\n\n return (\n handleReplyToPost(post)}>\n \n
{statusPeek(post)}
\n \n {/* Show relative time if within a day */}\n {isWithinDay && (\n <>\n {' '}\n β€’{' '}\n \n )}\n \n {niceDateTime(post.createdAt)}\n \n \n
\n
\n );\n })}\n \n \n \n );\n}\n","import './keyboard-shortcuts-help.css';\n\nimport { Trans, useLingui } from '@lingui/react/macro';\nimport { memo } from 'preact/compat';\nimport { useHotkeys } from 'react-hotkeys-hook';\nimport { useSnapshot } from 'valtio';\n\nimport states from '../utils/states';\n\nimport Icon from './icon';\nimport Modal from './modal';\n\n// Helper component for sequential key shortcuts\nfunction SequentialKeys({ key1, key2 }) {\n return (\n \n {key1} then {key2}\n \n );\n}\n\nexport default memo(function KeyboardShortcutsHelp() {\n const { t } = useLingui();\n const snapStates = useSnapshot(states);\n\n function onClose() {\n states.showKeyboardShortcutsHelp = false;\n }\n\n useHotkeys(\n '?',\n () => {\n console.log('help');\n states.showKeyboardShortcutsHelp = true;\n },\n {\n useKey: true,\n ignoreEventWhen: (e) => {\n const isCatchUpPage = /\\/catchup/i.test(location.hash);\n return isCatchUpPage || e.metaKey || e.ctrlKey || e.altKey;\n // const hasModal = !!document.querySelector('#modal-container > *');\n // return hasModal;\n },\n },\n );\n\n return (\n !!snapStates.showKeyboardShortcutsHelp && (\n \n
\n \n
\n

\n Keyboard shortcuts\n

\n
\n
\n \n \n {[\n {\n action: t`Keyboard shortcuts help`,\n keys: ?,\n },\n {\n action: t`Next post`,\n keys: j,\n },\n {\n action: t`Previous post`,\n keys: k,\n },\n {\n action: t`Skip carousel to next post`,\n keys: (\n \n Shift + j\n \n ),\n },\n {\n action: t`Skip carousel to previous post`,\n keys: (\n \n Shift + k\n \n ),\n },\n {\n action: t`Load new posts`,\n keys: .,\n },\n {\n action: t`Open post details`,\n keys: (\n \n Enter or o\n \n ),\n },\n {\n action: (\n \n Expand content warning or\n
\n toggle expanded/collapsed thread\n
\n ),\n keys: x,\n },\n {\n action: t`Close post or dialogs`,\n keys: (\n \n Esc or Backspace\n \n ),\n },\n {\n action: t`Focus column in multi-column mode`,\n keys: (\n \n 1 to 9\n \n ),\n },\n {\n action: t`Focus next column in multi-column mode`,\n keys: ],\n },\n {\n action: t`Focus previous column in multi-column mode`,\n keys: [,\n },\n {\n action: t`Compose new post`,\n keys: c,\n },\n {\n action: t`Compose new post (new window)`,\n className: 'insignificant',\n keys: (\n \n Shift + c\n \n ),\n },\n {\n action: t`Send post`,\n keys: (\n \n Ctrl + Enter or ⌘ +{' '}\n Enter\n \n ),\n },\n {\n action: t`Search`,\n keys: /,\n },\n {\n action: t`Reply`,\n keys: r,\n },\n {\n action: t`Reply (new window)`,\n className: 'insignificant',\n keys: (\n \n Shift + r\n \n ),\n },\n {\n action: t`Like (favourite)`,\n keys: (\n \n l or f\n \n ),\n },\n {\n action: t`Boost`,\n keys: (\n \n Shift + b\n \n ),\n },\n {\n action: t`Quote`,\n keys: q,\n },\n {\n action: t`Bookmark`,\n keys: d,\n },\n {\n action: t`Toggle Cloak mode`,\n keys: (\n \n Shift + Alt + k\n \n ),\n },\n {\n action: t`Go to Home`,\n keys: ,\n },\n {\n action: t`Go to Notifications`,\n keys: ,\n },\n ].map(({ action, className, keys }) => (\n \n \n \n \n ))}\n \n
{action}{keys}
\n
\n
\n
\n )\n );\n});\n","/**\n * A set of all the parents currently being observe. This is the only non weak\n * registry.\n */\nconst parents = new Set();\n/**\n * Element coordinates that is constantly kept up to date.\n */\nconst coords = new WeakMap();\n/**\n * Siblings of elements that have been removed from the dom.\n */\nconst siblings = new WeakMap();\n/**\n * Animations that are currently running.\n */\nconst animations = new WeakMap();\n/**\n * A map of existing intersection observers used to track element movements.\n */\nconst intersections = new WeakMap();\n/**\n * A map of existing mutation observers used to track element movements.\n */\nconst mutationObservers = new WeakMap();\n/**\n * Intervals for automatically checking the position of elements occasionally.\n */\nconst intervals = new WeakMap();\n/**\n * The configuration options for each group of elements.\n */\nconst options = new WeakMap();\n/**\n * Debounce counters by id, used to debounce calls to update positions.\n */\nconst debounces = new WeakMap();\n/**\n * All parents that are currently enabled are tracked here.\n */\nconst enabled = new WeakSet();\n/**\n * The document used to calculate transitions.\n */\nlet root;\n/**\n * The root’s XY scroll positions.\n */\nlet scrollX = 0;\nlet scrollY = 0;\n/**\n * Used to sign an element as the target.\n */\nconst TGT = \"__aa_tgt\";\n/**\n * Used to sign an element as being part of a removal.\n */\nconst DEL = \"__aa_del\";\n/**\n * Used to sign an element as being \"new\". When an element is removed from the\n * dom, but may cycle back in we can sign it with new to ensure the next time\n * it is recognized we consider it new.\n */\nconst NEW = \"__aa_new\";\n/**\n * Callback for handling all mutations.\n * @param mutations - A mutation list\n */\nconst handleMutations = (mutations) => {\n const elements = getElements(mutations);\n // If elements is \"false\" that means this mutation that should be ignored.\n if (elements) {\n elements.forEach((el) => animate(el));\n }\n};\n/**\n *\n * @param entries - Elements that have been resized.\n */\nconst handleResizes = (entries) => {\n entries.forEach((entry) => {\n if (entry.target === root)\n updateAllPos();\n if (coords.has(entry.target))\n updatePos(entry.target);\n });\n};\n/**\n * Determine if an element is fully outside of the current viewport.\n * @param el - Element to test\n */\nfunction isOffscreen(el) {\n const rect = el.getBoundingClientRect();\n const vw = (root === null || root === void 0 ? void 0 : root.clientWidth) || 0;\n const vh = (root === null || root === void 0 ? void 0 : root.clientHeight) || 0;\n return rect.bottom < 0 || rect.top > vh || rect.right < 0 || rect.left > vw;\n}\n/**\n * Observe this elements position.\n * @param el - The element to observe the position of.\n */\nfunction observePosition(el) {\n const oldObserver = intersections.get(el);\n oldObserver === null || oldObserver === void 0 ? void 0 : oldObserver.disconnect();\n let rect = coords.get(el);\n let invocations = 0;\n const buffer = 5;\n if (!rect) {\n rect = getCoords(el);\n coords.set(el, rect);\n }\n const { offsetWidth, offsetHeight } = root;\n const rootMargins = [\n rect.top - buffer,\n offsetWidth - (rect.left + buffer + rect.width),\n offsetHeight - (rect.top + buffer + rect.height),\n rect.left - buffer,\n ];\n const rootMargin = rootMargins\n .map((px) => `${ -1 * Math.floor(px)}px`)\n .join(\" \");\n const observer = new IntersectionObserver(() => {\n ++invocations > 1 && updatePos(el);\n }, {\n root,\n threshold: 1,\n rootMargin,\n });\n observer.observe(el);\n intersections.set(el, observer);\n}\n/**\n * Update the exact position of a given element.\n * @param el - An element to update the position of.\n * @param debounce - Whether or not to debounce the update. After an animation is finished, it should update as soon as possible to prevent flickering on quick toggles.\n */\nfunction updatePos(el, debounce = true) {\n clearTimeout(debounces.get(el));\n const optionsOrPlugin = getOptions(el);\n const delay = debounce\n ? isPlugin(optionsOrPlugin)\n ? 500\n : optionsOrPlugin.duration\n : 0;\n debounces.set(el, setTimeout(async () => {\n const currentAnimation = animations.get(el);\n try {\n await (currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.finished);\n coords.set(el, getCoords(el));\n observePosition(el);\n }\n catch {\n // ignore errors as the `.finished` promise is rejected when animations were cancelled\n }\n }, delay));\n}\n/**\n * Updates all positions that are currently being tracked.\n */\nfunction updateAllPos() {\n clearTimeout(debounces.get(root));\n debounces.set(root, setTimeout(() => {\n parents.forEach((parent) => forEach(parent, (el) => lowPriority(() => updatePos(el))));\n }, 100));\n}\n/**\n * Its possible for a quick scroll or other fast events to get past the\n * intersection observer, so occasionally we need want \"cold-poll\" for the\n * latests and greatest position. We try to do this in the most non-disruptive\n * fashion possible. First we only do this ever couple seconds, staggard by a\n * random offset.\n * @param el - Element\n */\nfunction poll(el) {\n setTimeout(() => {\n intervals.set(el, setInterval(() => lowPriority(updatePos.bind(null, el)), 2000));\n }, Math.round(2000 * Math.random()));\n}\n/**\n * Perform some operation that is non critical at some point.\n * @param callback\n */\nfunction lowPriority(callback) {\n if (typeof requestIdleCallback === \"function\") {\n requestIdleCallback(() => callback());\n }\n else {\n requestAnimationFrame(() => callback());\n }\n}\n/**\n * A resize observer, responsible for recalculating elements on resize.\n */\nlet resize;\n/**\n * Ensure the browser is supported.\n */\nconst supportedBrowser = typeof window !== \"undefined\" && \"ResizeObserver\" in window;\n/**\n * If this is in a browser, initialize our Web APIs\n */\nif (supportedBrowser) {\n root = document.documentElement;\n new MutationObserver(handleMutations);\n resize = new ResizeObserver(handleResizes);\n window.addEventListener(\"scroll\", () => {\n scrollY = window.scrollY;\n scrollX = window.scrollX;\n });\n resize.observe(root);\n}\n/**\n * Retrieves all the elements that may have been affected by the last mutation\n * including ones that have been removed and are no longer in the DOM.\n * @param mutations - A mutation list.\n * @returns\n */\nfunction getElements(mutations) {\n const observedNodes = mutations.reduce((nodes, mutation) => {\n return [\n ...nodes,\n ...Array.from(mutation.addedNodes),\n ...Array.from(mutation.removedNodes),\n ];\n }, []);\n // Short circuit if _only_ comment nodes are observed\n const onlyCommentNodesObserved = observedNodes.every((node) => node.nodeName === \"#comment\");\n if (onlyCommentNodesObserved)\n return false;\n return mutations.reduce((elements, mutation) => {\n // Short circuit if we find a purposefully deleted node.\n if (elements === false)\n return false;\n if (mutation.target instanceof Element) {\n target(mutation.target);\n if (!elements.has(mutation.target)) {\n elements.add(mutation.target);\n for (let i = 0; i < mutation.target.children.length; i++) {\n const child = mutation.target.children.item(i);\n if (!child)\n continue;\n if (DEL in child) {\n return false;\n }\n target(mutation.target, child);\n elements.add(child);\n }\n }\n if (mutation.removedNodes.length) {\n for (let i = 0; i < mutation.removedNodes.length; i++) {\n const child = mutation.removedNodes[i];\n if (DEL in child) {\n return false;\n }\n if (child instanceof Element) {\n elements.add(child);\n target(mutation.target, child);\n siblings.set(child, [\n mutation.previousSibling,\n mutation.nextSibling,\n ]);\n }\n }\n }\n }\n return elements;\n }, new Set());\n}\n/**\n * Assign the target to an element.\n * @param el - The root element\n * @param child\n */\nfunction target(el, child) {\n if (!child && !(TGT in el))\n Object.defineProperty(el, TGT, { value: el });\n else if (child && !(TGT in child))\n Object.defineProperty(child, TGT, { value: el });\n}\n/**\n * Determines what kind of change took place on the given element and then\n * performs the proper animation based on that.\n * @param el - The specific element to animate.\n */\nfunction animate(el) {\n var _a, _b;\n const isMounted = el.isConnected;\n const preExisting = coords.has(el);\n if (isMounted && siblings.has(el))\n siblings.delete(el);\n if (((_a = animations.get(el)) === null || _a === void 0 ? void 0 : _a.playState) !== \"finished\") {\n (_b = animations.get(el)) === null || _b === void 0 ? void 0 : _b.cancel();\n }\n if (NEW in el) {\n add(el);\n }\n else if (preExisting && isMounted) {\n remain(el);\n }\n else if (preExisting && !isMounted) {\n remove(el);\n }\n else {\n add(el);\n }\n}\n/**\n * Removes all non-digits from a string and casts to a number.\n * @param str - A string containing a pixel value.\n * @returns\n */\nfunction raw(str) {\n return Number(str.replace(/[^0-9.\\-]/g, \"\"));\n}\n/**\n * Get the scroll offset of elements\n * @param el - Element\n * @returns\n */\nfunction getScrollOffset(el) {\n let p = el.parentElement;\n while (p) {\n if (p.scrollLeft || p.scrollTop) {\n return { x: p.scrollLeft, y: p.scrollTop };\n }\n p = p.parentElement;\n }\n return { x: 0, y: 0 };\n}\n/**\n * Get the coordinates of elements adjusted for scroll position.\n * @param el - Element\n * @returns\n */\nfunction getCoords(el) {\n const rect = el.getBoundingClientRect();\n const { x, y } = getScrollOffset(el);\n return {\n top: rect.top + y,\n left: rect.left + x,\n width: rect.width,\n height: rect.height,\n };\n}\n/**\n * Returns the width/height that the element should be transitioned between.\n * This takes into account box-sizing.\n * @param el - Element being animated\n * @param oldCoords - Old set of Coordinates coordinates\n * @param newCoords - New set of Coordinates coordinates\n * @returns\n */\nfunction getTransitionSizes(el, oldCoords, newCoords) {\n let widthFrom = oldCoords.width;\n let heightFrom = oldCoords.height;\n let widthTo = newCoords.width;\n let heightTo = newCoords.height;\n const styles = getComputedStyle(el);\n const sizing = styles.getPropertyValue(\"box-sizing\");\n if (sizing === \"content-box\") {\n const paddingY = raw(styles.paddingTop) +\n raw(styles.paddingBottom) +\n raw(styles.borderTopWidth) +\n raw(styles.borderBottomWidth);\n const paddingX = raw(styles.paddingLeft) +\n raw(styles.paddingRight) +\n raw(styles.borderRightWidth) +\n raw(styles.borderLeftWidth);\n widthFrom -= paddingX;\n widthTo -= paddingX;\n heightFrom -= paddingY;\n heightTo -= paddingY;\n }\n return [widthFrom, widthTo, heightFrom, heightTo].map(Math.round);\n}\n/**\n * Retrieves animation options for the current element.\n * @param el - Element to retrieve options for.\n * @returns\n */\nfunction getOptions(el) {\n return TGT in el && options.has(el[TGT])\n ? options.get(el[TGT])\n : { duration: 250, easing: \"ease-in-out\" };\n}\n/**\n * Returns the target of a given animation (generally the parent).\n * @param el - An element to check for a target\n * @returns\n */\nfunction getTarget(el) {\n if (TGT in el)\n return el[TGT];\n return undefined;\n}\n/**\n * Checks if animations are enabled or disabled for a given element.\n * @param el - Any element\n * @returns\n */\nfunction isEnabled(el) {\n const target = getTarget(el);\n return target ? enabled.has(target) : false;\n}\n/**\n * Iterate over the children of a given parent.\n * @param parent - A parent element\n * @param callback - A callback\n */\nfunction forEach(parent, ...callbacks) {\n callbacks.forEach((callback) => callback(parent, options.has(parent)));\n for (let i = 0; i < parent.children.length; i++) {\n const child = parent.children.item(i);\n if (child) {\n callbacks.forEach((callback) => callback(child, options.has(child)));\n }\n }\n}\n/**\n * Always return tuple to provide consistent interface\n */\nfunction getPluginTuple(pluginReturn) {\n if (Array.isArray(pluginReturn))\n return pluginReturn;\n return [pluginReturn];\n}\n/**\n * Determine if config is plugin\n */\nfunction isPlugin(config) {\n return typeof config === \"function\";\n}\n/**\n * The element in question is remaining in the DOM.\n * @param el - Element to flip\n * @returns\n */\nfunction remain(el) {\n const oldCoords = coords.get(el);\n const newCoords = getCoords(el);\n if (!isEnabled(el))\n return coords.set(el, newCoords);\n if (isOffscreen(el)) {\n // When element is offscreen, skip FLIP to avoid broken transforms\n coords.set(el, newCoords);\n observePosition(el);\n return;\n }\n let animation;\n if (!oldCoords)\n return;\n const pluginOrOptions = getOptions(el);\n if (typeof pluginOrOptions !== \"function\") {\n let deltaLeft = oldCoords.left - newCoords.left;\n let deltaTop = oldCoords.top - newCoords.top;\n const deltaRight = oldCoords.left + oldCoords.width - (newCoords.left + newCoords.width);\n const deltaBottom = oldCoords.top + oldCoords.height - (newCoords.top + newCoords.height);\n // element is probably anchored and doesn't need to be offset\n if (deltaBottom == 0)\n deltaTop = 0;\n if (deltaRight == 0)\n deltaLeft = 0;\n const [widthFrom, widthTo, heightFrom, heightTo] = getTransitionSizes(el, oldCoords, newCoords);\n const start = {\n transform: `translate(${deltaLeft}px, ${deltaTop}px)`,\n };\n const end = {\n transform: `translate(0, 0)`,\n };\n if (widthFrom !== widthTo) {\n start.width = `${widthFrom}px`;\n end.width = `${widthTo}px`;\n }\n if (heightFrom !== heightTo) {\n start.height = `${heightFrom}px`;\n end.height = `${heightTo}px`;\n }\n animation = el.animate([start, end], {\n duration: pluginOrOptions.duration,\n easing: pluginOrOptions.easing,\n });\n }\n else {\n const [keyframes] = getPluginTuple(pluginOrOptions(el, \"remain\", oldCoords, newCoords));\n animation = new Animation(keyframes);\n animation.play();\n }\n animations.set(el, animation);\n coords.set(el, newCoords);\n animation.addEventListener(\"finish\", updatePos.bind(null, el, false), {\n once: true,\n });\n}\n/**\n * Adds the element with a transition.\n * @param el - Animates the element being added.\n */\nfunction add(el) {\n if (NEW in el)\n delete el[NEW];\n const newCoords = getCoords(el);\n coords.set(el, newCoords);\n const pluginOrOptions = getOptions(el);\n if (!isEnabled(el))\n return;\n if (isOffscreen(el)) {\n // Skip entry animation if element is not visible in viewport\n observePosition(el);\n return;\n }\n let animation;\n if (typeof pluginOrOptions !== \"function\") {\n animation = el.animate([\n { transform: \"scale(.98)\", opacity: 0 },\n { transform: \"scale(0.98)\", opacity: 0, offset: 0.5 },\n { transform: \"scale(1)\", opacity: 1 },\n ], {\n duration: pluginOrOptions.duration * 1.5,\n easing: \"ease-in\",\n });\n }\n else {\n const [keyframes] = getPluginTuple(pluginOrOptions(el, \"add\", newCoords));\n animation = new Animation(keyframes);\n animation.play();\n }\n animations.set(el, animation);\n animation.addEventListener(\"finish\", updatePos.bind(null, el, false), {\n once: true,\n });\n}\n/**\n * Clean up after removing an element from the dom.\n * @param el - Element being removed\n * @param styles - Optional styles that should be removed from the element.\n */\nfunction cleanUp(el, styles) {\n var _a;\n el.remove();\n coords.delete(el);\n siblings.delete(el);\n animations.delete(el);\n (_a = intersections.get(el)) === null || _a === void 0 ? void 0 : _a.disconnect();\n setTimeout(() => {\n if (DEL in el)\n delete el[DEL];\n Object.defineProperty(el, NEW, { value: true, configurable: true });\n if (styles && el instanceof HTMLElement) {\n for (const style in styles) {\n el.style[style] = \"\";\n }\n }\n }, 0);\n}\n/**\n * Animates the removal of an element.\n * @param el - Element to remove\n */\nfunction remove(el) {\n var _a;\n if (!siblings.has(el) || !coords.has(el))\n return;\n const [prev, next] = siblings.get(el);\n Object.defineProperty(el, DEL, { value: true, configurable: true });\n const finalX = window.scrollX;\n const finalY = window.scrollY;\n if (next &&\n next.parentNode &&\n next.parentNode instanceof Element) {\n next.parentNode.insertBefore(el, next);\n }\n else if (prev && prev.parentNode) {\n prev.parentNode.appendChild(el);\n }\n else {\n (_a = getTarget(el)) === null || _a === void 0 ? void 0 : _a.appendChild(el);\n }\n if (!isEnabled(el))\n return cleanUp(el);\n const [top, left, width, height] = deletePosition(el);\n const optionsOrPlugin = getOptions(el);\n const oldCoords = coords.get(el);\n if (finalX !== scrollX || finalY !== scrollY) {\n adjustScroll(el, finalX, finalY, optionsOrPlugin);\n }\n let animation;\n let styleReset = {\n position: \"absolute\",\n top: `${top}px`,\n left: `${left}px`,\n width: `${width}px`,\n height: `${height}px`,\n margin: \"0\",\n pointerEvents: \"none\",\n transformOrigin: \"center\",\n zIndex: \"100\",\n };\n if (!isPlugin(optionsOrPlugin)) {\n Object.assign(el.style, styleReset);\n animation = el.animate([\n {\n transform: \"scale(1)\",\n opacity: 1,\n },\n {\n transform: \"scale(.98)\",\n opacity: 0,\n },\n ], {\n duration: optionsOrPlugin.duration,\n easing: \"ease-out\",\n });\n }\n else {\n const [keyframes, options] = getPluginTuple(optionsOrPlugin(el, \"remove\", oldCoords));\n if ((options === null || options === void 0 ? void 0 : options.styleReset) !== false) {\n styleReset =\n (options === null || options === void 0 ? void 0 : options.styleReset) ||\n styleReset;\n Object.assign(el.style, styleReset);\n }\n animation = new Animation(keyframes);\n animation.play();\n }\n animations.set(el, animation);\n animation.addEventListener(\"finish\", () => cleanUp(el, styleReset), {\n once: true,\n });\n}\n/**\n * If the element being removed is at the very bottom of the page, and the\n * the page was scrolled into a space being \"made available\" by the element\n * that was removed, the page scroll will have jumped up some amount. We need\n * to offset the jump by the amount that the page was \"automatically\" scrolled\n * up. We can do this by comparing the scroll position before and after the\n * element was removed, and then offsetting by that amount.\n *\n * @param el - The element being deleted\n * @param finalX - The final X scroll position\n * @param finalY - The final Y scroll position\n * @param optionsOrPlugin - The options or plugin\n * @returns\n */\nfunction adjustScroll(el, finalX, finalY, optionsOrPlugin) {\n const scrollDeltaX = scrollX - finalX;\n const scrollDeltaY = scrollY - finalY;\n const scrollBefore = document.documentElement.style.scrollBehavior;\n const scrollBehavior = getComputedStyle(root).scrollBehavior;\n if (scrollBehavior === \"smooth\") {\n document.documentElement.style.scrollBehavior = \"auto\";\n }\n window.scrollTo(window.scrollX + scrollDeltaX, window.scrollY + scrollDeltaY);\n if (!el.parentElement)\n return;\n const parent = el.parentElement;\n let lastHeight = parent.clientHeight;\n let lastWidth = parent.clientWidth;\n const startScroll = performance.now();\n // Here we use a manual scroll animation to keep the element using the same\n // easing and timing as the parent’s scroll animation.\n function smoothScroll() {\n requestAnimationFrame(() => {\n if (!isPlugin(optionsOrPlugin)) {\n const deltaY = lastHeight - parent.clientHeight;\n const deltaX = lastWidth - parent.clientWidth;\n if (startScroll + optionsOrPlugin.duration >\n performance.now()) {\n window.scrollTo({\n left: window.scrollX - deltaX,\n top: window.scrollY - deltaY,\n });\n lastHeight = parent.clientHeight;\n lastWidth = parent.clientWidth;\n smoothScroll();\n }\n else {\n document.documentElement.style.scrollBehavior = scrollBefore;\n }\n }\n });\n }\n smoothScroll();\n}\n/**\n * Determines the position of the element being removed.\n * @param el - The element being deleted\n * @returns\n */\nfunction deletePosition(el) {\n var _a;\n const oldCoords = coords.get(el);\n const [width, , height] = getTransitionSizes(el, oldCoords, getCoords(el));\n let offsetParent = el.parentElement;\n while (offsetParent &&\n (getComputedStyle(offsetParent).position === \"static\" ||\n offsetParent instanceof HTMLBodyElement)) {\n offsetParent = offsetParent.parentElement;\n }\n if (!offsetParent)\n offsetParent = document.body;\n const parentStyles = getComputedStyle(offsetParent);\n const parentCoords = !animations.has(el) || ((_a = animations.get(el)) === null || _a === void 0 ? void 0 : _a.playState) === \"finished\"\n ? getCoords(offsetParent)\n : coords.get(offsetParent);\n const top = Math.round(oldCoords.top - parentCoords.top) -\n raw(parentStyles.borderTopWidth);\n const left = Math.round(oldCoords.left - parentCoords.left) -\n raw(parentStyles.borderLeftWidth);\n return [top, left, width, height];\n}\n/**\n * A function that automatically adds animation effects to itself and its\n * immediate children. Specifically it adds effects for adding, moving, and\n * removing DOM elements.\n * @param el - A parent element to add animations to.\n * @param options - An optional object of options.\n */\nfunction autoAnimate(el, config = {}) {\n if (supportedBrowser && resize) {\n const mediaQuery = window.matchMedia(\"(prefers-reduced-motion: reduce)\");\n const isDisabledDueToReduceMotion = mediaQuery.matches &&\n !isPlugin(config) &&\n !config.disrespectUserMotionPreference;\n if (!isDisabledDueToReduceMotion) {\n enabled.add(el);\n if (getComputedStyle(el).position === \"static\") {\n Object.assign(el.style, { position: \"relative\" });\n }\n forEach(el, updatePos, poll, (element) => resize === null || resize === void 0 ? void 0 : resize.observe(element));\n if (isPlugin(config)) {\n options.set(el, config);\n }\n else {\n options.set(el, {\n duration: 250,\n easing: \"ease-in-out\",\n ...config,\n });\n }\n const mo = new MutationObserver(handleMutations);\n mo.observe(el, { childList: true });\n mutationObservers.set(el, mo);\n parents.add(el);\n }\n }\n const controller = Object.freeze({\n parent: el,\n enable: () => {\n enabled.add(el);\n },\n disable: () => {\n enabled.delete(el);\n // Cancel any in-flight animations and pending timers for immediate effect\n forEach(el, (node) => {\n const a = animations.get(node);\n try {\n a === null || a === void 0 ? void 0 : a.cancel();\n }\n catch { }\n animations.delete(node);\n const d = debounces.get(node);\n if (d)\n clearTimeout(d);\n debounces.delete(node);\n const i = intervals.get(node);\n if (i)\n clearInterval(i);\n intervals.delete(node);\n });\n },\n isEnabled: () => enabled.has(el),\n destroy: () => {\n enabled.delete(el);\n parents.delete(el);\n options.delete(el);\n const mo = mutationObservers.get(el);\n mo === null || mo === void 0 ? void 0 : mo.disconnect();\n mutationObservers.delete(el);\n forEach(el, (node) => {\n // unobserve resize\n resize === null || resize === void 0 ? void 0 : resize.unobserve(node);\n // cancel animations\n const a = animations.get(node);\n try {\n a === null || a === void 0 ? void 0 : a.cancel();\n }\n catch { }\n animations.delete(node);\n // disconnect observers\n const io = intersections.get(node);\n io === null || io === void 0 ? void 0 : io.disconnect();\n intersections.delete(node);\n // clear intervals and debounces\n const i = intervals.get(node);\n if (i)\n clearInterval(i);\n intervals.delete(node);\n const d = debounces.get(node);\n if (d)\n clearTimeout(d);\n debounces.delete(node);\n // clear state\n coords.delete(node);\n siblings.delete(node);\n });\n },\n });\n return controller;\n}\n/**\n * The vue directive.\n */\nconst vAutoAnimate = {\n mounted: (el, binding) => {\n const ctl = autoAnimate(el, binding.value || {});\n Object.defineProperty(el, \"__aa_ctl\", { value: ctl, configurable: true });\n },\n unmounted: (el) => {\n var _a;\n const ctl = el[\"__aa_ctl\"];\n (_a = ctl === null || ctl === void 0 ? void 0 : ctl.destroy) === null || _a === void 0 ? void 0 : _a.call(ctl);\n try {\n delete el[\"__aa_ctl\"];\n }\n catch { }\n },\n getSSRProps: () => ({}),\n};\n\nexport { autoAnimate, autoAnimate as default, getTransitionSizes, vAutoAnimate };\n","import { useRef, useState, useEffect } from 'preact/hooks';\nimport autoAnimate from '../index.mjs';\n\n/**\n * AutoAnimate hook for adding dead-simple transitions and animations to preact.\n * @param options - Auto animate options or a plugin\n * @returns\n */\nfunction useAutoAnimate(options) {\n const element = useRef(null);\n const [controller, setController] = useState();\n const setEnabled = (enabled) => {\n if (controller) {\n enabled ? controller.enable() : controller.disable();\n }\n };\n useEffect(() => {\n if (element.current instanceof HTMLElement)\n setController(autoAnimate(element.current, options || {}));\n }, []);\n useEffect(() => {\n return () => {\n var _a;\n (_a = controller === null || controller === void 0 ? void 0 : controller.destroy) === null || _a === void 0 ? void 0 : _a.call(controller);\n };\n }, [controller]);\n return [element, setEnabled];\n}\n\nexport { useAutoAnimate };\n","function dec2hex(dec) {\n return ('0' + dec.toString(16)).slice(-2);\n}\nexport function verifier() {\n var array = new Uint32Array(56 / 2);\n window.crypto.getRandomValues(array);\n return Array.from(array, dec2hex).join('');\n}\nfunction sha256(plain) {\n // returns promise ArrayBuffer\n const encoder = new TextEncoder();\n const data = encoder.encode(plain);\n return window.crypto.subtle.digest('SHA-256', data);\n}\nfunction base64urlencode(a) {\n let str = '';\n const bytes = new Uint8Array(a);\n const len = bytes.byteLength;\n for (var i = 0; i < len; i++) {\n str += String.fromCharCode(bytes[i]);\n }\n return btoa(str).replace(/\\+/g, '-').replace(/\\//g, '_').replace(/=+$/, '');\n}\nexport async function generateCodeChallenge(v) {\n const hashed = await sha256(v);\n return base64urlencode(hashed);\n}\n\n// If /.well-known/oauth-authorization-server exists and code_challenge_methods_supported includes \"S256\", means support PKCE\nexport async function supportsPKCE({ instanceURL }) {\n if (!instanceURL) return false;\n try {\n const res = await fetch(\n `https://${instanceURL}/.well-known/oauth-authorization-server`,\n );\n if (!res.ok || res.status !== 200) return false;\n const json = await res.json();\n if (json.code_challenge_methods_supported?.includes('S256')) return true;\n return false;\n } catch (e) {\n return false;\n }\n}\n\n// For debugging\nwindow.__generateCodeChallenge = generateCodeChallenge;\n","import { generateCodeChallenge, verifier } from './oauth-pkce';\n\nconst {\n DEV,\n PHANPY_CLIENT_NAME: CLIENT_NAME,\n PHANPY_WEBSITE: WEBSITE,\n} = import.meta.env;\n\nconst SCOPES = 'read write follow push';\n\n/*\n PHANPY_WEBSITE is set to the default official site.\n It's used in pre-built releases, so there's no way to change it dynamically\n without rebuilding.\n Therefore, we can't use it as redirect_uri.\n We only use PHANPY_WEBSITE if it's \"same\" as current location URL.\n \n Very basic check based on location.hostname for now\n*/\nconst sameSite = WEBSITE\n ? WEBSITE.toLowerCase().includes(location.hostname)\n : false;\nconst currentLocation = location.origin + location.pathname;\nconst REDIRECT_URI = DEV || !sameSite ? currentLocation : WEBSITE;\n\nexport async function registerApplication({ instanceURL }) {\n const registrationParams = new URLSearchParams({\n client_name: CLIENT_NAME,\n redirect_uris: REDIRECT_URI,\n scopes: SCOPES,\n website: WEBSITE,\n });\n const registrationResponse = await fetch(\n `https://${instanceURL}/api/v1/apps`,\n {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: registrationParams.toString(),\n },\n );\n const registrationJSON = await registrationResponse.json();\n console.log({ registrationJSON });\n return registrationJSON;\n}\n\nexport async function getPKCEAuthorizationURL({\n instanceURL,\n client_id,\n forceLogin = false,\n}) {\n const codeVerifier = verifier();\n const codeChallenge = await generateCodeChallenge(codeVerifier);\n const params = new URLSearchParams({\n client_id,\n code_challenge_method: 'S256',\n code_challenge: codeChallenge,\n redirect_uri: REDIRECT_URI,\n response_type: 'code',\n scope: SCOPES,\n });\n if (forceLogin) params.append('force_login', true);\n const authorizationURL = `https://${instanceURL}/oauth/authorize?${params.toString()}`;\n return [authorizationURL, codeVerifier];\n}\n\nexport async function getAuthorizationURL({\n instanceURL,\n client_id,\n forceLogin = false,\n}) {\n const authorizationParams = new URLSearchParams({\n client_id,\n scope: SCOPES,\n redirect_uri: REDIRECT_URI,\n // redirect_uri: 'urn:ietf:wg:oauth:2.0:oob',\n response_type: 'code',\n });\n if (forceLogin) authorizationParams.append('force_login', true);\n const authorizationURL = `https://${instanceURL}/oauth/authorize?${authorizationParams.toString()}`;\n return authorizationURL;\n}\n\nexport async function getAccessToken({\n instanceURL,\n client_id,\n client_secret,\n code,\n code_verifier,\n}) {\n const params = new URLSearchParams({\n client_id,\n redirect_uri: REDIRECT_URI,\n grant_type: 'authorization_code',\n code,\n // scope: SCOPES, // Not needed\n // client_secret,\n // code_verifier,\n });\n if (client_secret) {\n params.append('client_secret', client_secret);\n }\n if (code_verifier) {\n params.append('code_verifier', code_verifier);\n }\n const tokenResponse = await fetch(`https://${instanceURL}/oauth/token`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: params.toString(),\n });\n const tokenJSON = await tokenResponse.json();\n console.log({ tokenJSON });\n return tokenJSON;\n}\n\nexport async function revokeAccessToken({\n instanceURL,\n client_id,\n client_secret,\n token,\n}) {\n try {\n const params = new URLSearchParams({\n client_id,\n client_secret,\n token,\n });\n\n const revokeResponse = await fetch(`https://${instanceURL}/oauth/revoke`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/x-www-form-urlencoded',\n },\n body: params.toString(),\n keepalive: true,\n });\n\n return revokeResponse.ok;\n } catch (error) {\n console.erro('Error revoking token', error);\n return false;\n }\n}\n","import './accounts.css';\n\nimport { useAutoAnimate } from '@formkit/auto-animate/preact';\nimport { Trans, useLingui } from '@lingui/react/macro';\nimport { Menu, MenuDivider, MenuItem } from '@szhsin/react-menu';\nimport { useReducer } from 'preact/hooks';\n\nimport Avatar from '../components/avatar';\nimport Icon from '../components/icon';\nimport Link from '../components/link';\nimport MenuConfirm from '../components/menu-confirm';\nimport MenuLink from '../components/menu-link';\nimport Menu2 from '../components/menu2';\nimport NameText from '../components/name-text';\nimport RelativeTime from '../components/relative-time';\nimport { api } from '../utils/api';\nimport { revokeAccessToken } from '../utils/auth';\nimport niceDateTime from '../utils/nice-date-time';\nimport states from '../utils/states';\nimport store from '../utils/store';\nimport {\n getAccounts,\n getCurrentAccountID,\n saveAccounts,\n setCurrentAccountID,\n} from '../utils/store-utils';\n\nconst isStandalone = window.matchMedia('(display-mode: standalone)').matches;\n\nfunction Accounts({ onClose }) {\n const { t } = useLingui();\n const { masto } = api();\n // Accounts\n const accounts = getAccounts();\n const currentAccount = getCurrentAccountID();\n const moreThanOneAccount = accounts.length > 1;\n\n const [_, reload] = useReducer((x) => x + 1, 0);\n const [accountsListParent] = useAutoAnimate();\n\n return (\n
\n {!!onClose && (\n \n )}\n
\n

\n Accounts\n

\n
\n
\n
\n
    \n {accounts.map((account, i) => {\n const isCurrent = account.info.id === currentAccount;\n const isDefault = i === 0; // first account is always default\n return (\n
  • \n
    \n {moreThanOneAccount && (\n \n \n \n )}\n {\n if (isCurrent) {\n try {\n const info = await masto.v1.accounts\n .$select(account.info.id)\n .fetch();\n console.log('fetched account info', info);\n account.info = info;\n saveAccounts(accounts);\n reload();\n } catch (e) {}\n }\n }}\n />\n {\n if (isCurrent) {\n states.showAccount = `${account.info.username}@${account.instanceURL}`;\n } else {\n setCurrentAccountID(account.info.id);\n location.reload();\n }\n }}\n />\n
    \n
    \n {isDefault && moreThanOneAccount && (\n <>\n \n Default\n {' '}\n \n )}\n \n \n \n }\n >\n {moreThanOneAccount && (\n <>\n {\n setCurrentAccountID(account.info.id);\n location.reload();\n }}\n >\n {' '}\n Switch to this account\n \n {!isStandalone && !isCurrent && (\n \n \n \n Switch in new tab/window\n \n \n )}\n \n \n )}\n {\n states.showAccount = `${account.info.username}@${account.instanceURL}`;\n }}\n >\n \n \n View profile…\n \n \n \n {moreThanOneAccount && (\n <>\n {\n // Move account to the top of the list\n accounts.splice(i, 1);\n accounts.unshift(account);\n saveAccounts(accounts);\n reload();\n }}\n >\n \n \n Set as default\n \n \n {\n // Move account one position up\n accounts.splice(i, 1);\n accounts.splice(i - 1, 0, account);\n saveAccounts(accounts);\n reload();\n }}\n >\n \n \n Move up\n \n \n {\n // Move account one position down\n accounts.splice(i, 1);\n accounts.splice(i + 1, 0, account);\n saveAccounts(accounts);\n reload();\n }}\n >\n \n \n Move down\n \n \n \n \n )}\n \n \n \n \n Log out{' '}\n \n @{account.info.acct}\n \n ?\n \n \n \n }\n disabled={!isCurrent}\n menuItemClassName=\"danger\"\n onClick={async () => {\n // const yes = confirm('Log out?');\n // if (!yes) return;\n await revokeAccessToken({\n instanceURL: account.instanceURL,\n client_id: account.clientId,\n client_secret: account.clientSecret,\n token: account.accessToken,\n });\n accounts.splice(i, 1);\n saveAccounts(accounts);\n // location.reload();\n try {\n // Clean up session currentAccount if same as deleted\n if (\n store.session.get('currentAccount') ===\n account.info.id\n ) {\n store.session.del('currentAccount');\n }\n } catch (e) {}\n location.href = location.pathname || '/';\n }}\n >\n \n \n Log out…\n \n \n {!!account?.createdAt && (\n
    \n \n \n \n Connected on {niceDateTime(account.createdAt)} (\n )\n \n \n
    \n )}\n \n
    \n
  • \n );\n })}\n
\n

\n \n {' '}\n \n Add an existing account\n \n \n

\n {moreThanOneAccount && (\n

\n \n \n Note: Default account will always be used for first\n load. Switched accounts will persist during the session.\n \n \n

\n )}\n
\n
\n
\n );\n}\n\nexport default Accounts;\n","export default \"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20xml:space='preserve'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2064%2064'%3e%3cpath%20fill='none'%20d='M0%200h63.994v63.994H0z'/%3e%3cpath%20fill='%23a4bff7'%20d='M37.774%2011.471c14.639%203.752%2019.034%2016.557%2015.889%2031.304-.696%203.261-2.563%206.661-6.356%208.693-3.204%201.717-8.07%202.537-15.338.55l-9.634-2.404C11.651%2046.992%208.378%2038.733%2010.027%2031.823c3.627-15.201%2015.543-23.48%2027.747-20.352Z'/%3e%3cpath%20fill='%23d8e7fe'%20d='M36.76%2015.429c12.289%203.15%2015.547%2014.114%2012.907%2026.493-.947%204.44-4.937%209.365-16.664%206.143l-9.684-2.417c-7.854-1.923-10.53-7.8-9.318-12.877%203.016-12.639%2012.611-19.943%2022.759-17.342Z'/%3e%3cpath%20fill='%236081e6'%20d='M27.471%2024.991c-1.457-.698-7.229%203.213-7.663%208.926-.182%202.39%204.55%203.237%205.071-.169.725-4.743%203.715-8.218%202.592-8.757Zm10.746%202.005c-2.083.327-.382%205.901-.595%2010.727-.123%202.8%204.388%203.464%204.703%202.011%201.098-5.073-2.066-13.058-4.108-12.738Z'/%3e%3c/svg%3e\"","import { useLingui } from '@lingui/react';\nimport { useMemo } from 'preact/hooks';\n\nimport { CATALOGS, DEFAULT_LANG, DEV_LOCALES, LOCALES } from '../locales';\nimport { activateLang } from '../utils/lang';\nimport localeCode2Text from '../utils/localeCode2Text';\nimport store from '../utils/store';\n\nconst regionMaps = {\n 'zh-CN': 'zh-Hans',\n 'zh-TW': 'zh-Hant',\n 'pt-BR': 'pt-BR',\n};\n\nexport default function LangSelector() {\n const { i18n } = useLingui();\n\n // Sorted on render, so the order won't suddenly change based on current locale\n const populatedLocales = useMemo(() => {\n return LOCALES.map((lang) => {\n // Don't need regions for now, it makes text too noisy\n // Wait till there's too many languages and there are regional clashes\n const regionlessCode = regionMaps[lang] || lang.replace(/-[a-z]+$/i, '');\n\n const native = localeCode2Text({\n code: regionlessCode,\n locale: lang,\n fallback: CATALOGS.find((c) => c.code === lang)?.nativeName,\n });\n\n // Not used when rendering because it'll change based on current locale\n // Only used for sorting on render\n const _common = localeCode2Text({\n code: regionlessCode,\n locale: i18n.locale,\n fallback: CATALOGS.find((c) => c.code === lang)?.name,\n });\n\n return {\n code: lang,\n regionlessCode,\n _common,\n native,\n };\n }).sort((a, b) => {\n // Sort by common name\n const order = a._common.localeCompare(b._common, i18n.locale);\n if (order !== 0) return order;\n // Sort by code (fallback)\n if (a.code < b.code) return -1;\n if (a.code > b.code) return 1;\n return 0;\n });\n }, []);\n\n return (\n \n );\n}\n","// Utils for push notifications\nimport { api } from './api';\nimport { getVapidKey } from './store-utils';\n\n// Subscription is an object with the following structure:\n// {\n// data: {\n// alerts: {\n// admin: {\n// report: boolean,\n// signUp: boolean,\n// },\n// favourite: boolean,\n// follow: boolean,\n// mention: boolean,\n// poll: boolean,\n// reblog: boolean,\n// status: boolean,\n// update: boolean,\n// }\n// },\n// policy: \"all\" | \"followed\" | \"follower\" | \"none\",\n// subscription: {\n// endpoint: string,\n// keys: {\n// auth: string,\n// p256dh: string,\n// },\n// },\n// }\n\n// Back-end CRUD\n// =============\n\nfunction createBackendPushSubscription(subscription) {\n const { masto } = api();\n return masto.v1.push.subscription.create(subscription);\n}\n\nfunction fetchBackendPushSubscription() {\n const { masto } = api();\n return masto.v1.push.subscription.fetch();\n}\n\nfunction updateBackendPushSubscription(subscription) {\n const { masto } = api();\n return masto.v1.push.subscription.update(subscription);\n}\n\nfunction removeBackendPushSubscription() {\n const { masto } = api();\n return masto.v1.push.subscription.remove();\n}\n\n// Front-end\n// =========\n\nexport function isPushSupported() {\n return 'serviceWorker' in navigator && 'PushManager' in window;\n}\n\nexport function getRegistration() {\n // return navigator.serviceWorker.ready;\n return navigator.serviceWorker.getRegistration();\n}\n\nasync function getSubscription() {\n const registration = await getRegistration();\n const subscription = registration\n ? await registration.pushManager.getSubscription()\n : undefined;\n return { registration, subscription };\n}\n\nfunction urlBase64ToUint8Array(base64String) {\n const padding = '='.repeat((4 - (base64String.length % 4)) % 4);\n const base64 = `${base64String}${padding}`\n .replace(/-/g, '+')\n .replace(/_/g, '/');\n\n const rawData = window.atob(base64);\n const outputArray = new Uint8Array(rawData.length);\n\n for (let i = 0; i < rawData.length; ++i) {\n outputArray[i] = rawData.charCodeAt(i);\n }\n\n return outputArray;\n}\n\n// Front-end <-> back-end\n// ======================\n\nexport async function initSubscription() {\n if (!isPushSupported()) return;\n const { subscription } = await getSubscription();\n let backendSubscription = null;\n try {\n backendSubscription = await fetchBackendPushSubscription();\n } catch (err) {\n if (/(not found|unknown)/i.test(err.message)) {\n // No subscription found\n } else {\n // Other error\n throw err;\n }\n }\n console.log('INIT subscription', {\n subscription,\n backendSubscription,\n });\n\n // Check if the subscription changed\n if (backendSubscription && subscription) {\n const sameEndpoint = backendSubscription.endpoint === subscription.endpoint;\n const vapidKey = getVapidKey();\n const sameKey = backendSubscription.serverKey === vapidKey;\n if (!sameEndpoint) {\n throw new Error('Backend subscription endpoint changed');\n }\n if (sameKey) {\n // Subscription didn't change\n } else {\n // Subscription changed\n console.error('πŸ”” Subscription changed', {\n sameEndpoint,\n serverKey: backendSubscription.serverKey,\n vapIdKey: vapidKey,\n endpoint1: backendSubscription.endpoint,\n endpoint2: subscription.endpoint,\n sameKey,\n key1: backendSubscription.serverKey,\n key2: vapidKey,\n });\n throw new Error('Backend subscription key and vapid key changed');\n // Only unsubscribe from backend, not from browser\n // await removeBackendPushSubscription();\n // // Now let's resubscribe\n // // NOTE: I have no idea if this works\n // return await updateSubscription({\n // data: backendSubscription.data,\n // policy: backendSubscription.policy,\n // });\n }\n }\n\n if (subscription && !backendSubscription) {\n // check if account's vapidKey is same as subscription's applicationServerKey\n const vapidKey = getVapidKey();\n if (vapidKey) {\n const { applicationServerKey } = subscription.options;\n const vapidKeyStr = urlBase64ToUint8Array(vapidKey).toString();\n const applicationServerKeyStr = new Uint8Array(\n applicationServerKey,\n ).toString();\n const sameKey = vapidKeyStr === applicationServerKeyStr;\n if (sameKey) {\n // Subscription didn't change\n } else {\n // Subscription changed\n console.error('πŸ”” Subscription changed', {\n vapidKeyStr,\n applicationServerKeyStr,\n sameKey,\n });\n // Unsubscribe since backend doesn't have a subscription\n await subscription.unsubscribe();\n throw new Error('Subscription key and vapid key changed');\n }\n } else {\n console.warn('No vapidKey found');\n }\n }\n\n // Check if backend subscription returns 404\n // if (subscription && !backendSubscription) {\n // // Re-subscribe to backend\n // backendSubscription = await createBackendPushSubscription({\n // subscription,\n // data: {},\n // policy: 'all',\n // });\n // }\n\n return { subscription, backendSubscription };\n}\n\nexport async function updateSubscription({ data, policy }) {\n console.log('πŸ”” Updating subscription', { data, policy });\n if (!isPushSupported()) return;\n let { registration, subscription } = await getSubscription();\n let backendSubscription = null;\n\n if (subscription) {\n try {\n backendSubscription = await updateBackendPushSubscription({\n data,\n policy,\n });\n // TODO: save subscription in user settings\n } catch (error) {\n // Backend doesn't have a subscription for this user\n // Create a new one\n backendSubscription = await createBackendPushSubscription({\n subscription,\n data,\n policy,\n });\n // TODO: save subscription in user settings\n }\n } else {\n // User is not subscribed\n const vapidKey = getVapidKey();\n if (!vapidKey) throw new Error('No server key found');\n subscription = await registration.pushManager.subscribe({\n userVisibleOnly: true,\n applicationServerKey: urlBase64ToUint8Array(vapidKey),\n });\n backendSubscription = await createBackendPushSubscription({\n subscription,\n data,\n policy,\n });\n // TODO: save subscription in user settings\n }\n\n return { subscription, backendSubscription };\n}\n\nexport async function removeSubscription() {\n if (!isPushSupported()) return;\n const { subscription } = await getSubscription();\n if (subscription) {\n await removeBackendPushSubscription();\n await subscription.unsubscribe();\n }\n}\n","import './settings.css';\n\nimport { Plural, Trans, useLingui } from '@lingui/react/macro';\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { useSnapshot } from 'valtio';\n\nimport logo from '../assets/logo.svg';\n\nimport Icon from '../components/icon';\nimport LangSelector from '../components/lang-selector';\nimport Link from '../components/link';\nimport RelativeTime from '../components/relative-time';\nimport languages from '../data/translang-languages';\nimport { api, getPreferences, setPreferences } from '../utils/api';\nimport getTranslateTargetLanguage from '../utils/get-translate-target-language';\nimport localeCode2Text from '../utils/localeCode2Text';\nimport prettyBytes from '../utils/pretty-bytes';\nimport {\n initSubscription,\n isPushSupported,\n removeSubscription,\n updateSubscription,\n} from '../utils/push-notifications';\nimport { supportsNativeQuote } from '../utils/quote-utils';\nimport showToast from '../utils/show-toast';\nimport states from '../utils/states';\nimport store from '../utils/store';\nimport { getAPIVersions, getVapidKey } from '../utils/store-utils';\n\nconst DEFAULT_TEXT_SIZE = 16;\nconst TEXT_SIZES = [14, 15, 16, 17, 18, 19, 20];\nconst {\n PHANPY_WEBSITE: WEBSITE,\n PHANPY_PRIVACY_POLICY_URL: PRIVACY_POLICY_URL,\n PHANPY_TRANSLANG_INSTANCES: TRANSLANG_INSTANCES,\n PHANPY_IMG_ALT_API_URL: IMG_ALT_API_URL,\n PHANPY_GIPHY_API_KEY: GIPHY_API_KEY,\n} = import.meta.env;\n\nconst targetLanguages = Object.entries(languages.tl).map(([code, name]) => ({\n code,\n name,\n}));\n\nconst TRANSLATION_API_NAME = 'TransLang API';\n\nfunction Settings({ onClose }) {\n const { t } = useLingui();\n const snapStates = useSnapshot(states);\n const currentTheme = store.local.get('theme') || 'auto';\n const themeFormRef = useRef();\n const targetLanguage =\n snapStates.settings.contentTranslationTargetLanguage || null;\n const systemTargetLanguage = getTranslateTargetLanguage();\n const systemTargetLanguageText = localeCode2Text(systemTargetLanguage);\n const currentTextSize = store.local.get('textSize') || DEFAULT_TEXT_SIZE;\n\n const [prefs, setPrefs] = useState(getPreferences());\n const { masto, authenticated, instance } = api();\n // Get preferences every time Settings is opened\n // NOTE: Disabled for now because I don't expect this to change often. Also for some reason, the /api/v1/preferences endpoint is cached for a while and return old prefs if refresh immediately after changing them.\n // useEffect(() => {\n // const { masto } = api();\n // (async () => {\n // try {\n // const preferences = await masto.v1.preferences.fetch();\n // setPrefs(preferences);\n // store.account.set('preferences', preferences);\n // } catch (e) {\n // // Silently fail\n // console.error(e);\n // }\n // })();\n // }, []);\n\n const [expTabBarV2, setExpTabBarV2] = useState(\n store.local.get('experiments-tabBarV2') ?? false,\n );\n\n const disableQuotePolicy = prefs['posting:default:visibility'] === 'private';\n\n return (\n \n {!!onClose && (\n \n )}\n
\n

\n Settings\n

\n
\n
\n
\n
    \n
  • \n
    \n \n
    \n
    \n {\n console.log(e);\n e.preventDefault();\n const formData = new FormData(themeFormRef.current);\n const theme = formData.get('theme');\n const html = document.documentElement;\n\n if (theme === 'auto') {\n html.classList.remove('is-light', 'is-dark');\n\n // Disable manual theme \n const $manualMeta = document.querySelector(\n 'meta[data-theme-setting=\"manual\"]',\n );\n if ($manualMeta) {\n $manualMeta.name = '';\n }\n // Enable auto theme s\n const $autoMetas = document.querySelectorAll(\n 'meta[data-theme-setting=\"auto\"]',\n );\n $autoMetas.forEach((m) => {\n m.name = 'theme-color';\n });\n } else {\n html.classList.toggle('is-light', theme === 'light');\n html.classList.toggle('is-dark', theme === 'dark');\n\n // Enable manual theme \n const $manualMeta = document.querySelector(\n 'meta[data-theme-setting=\"manual\"]',\n );\n if ($manualMeta) {\n $manualMeta.name = 'theme-color';\n $manualMeta.content =\n theme === 'light'\n ? $manualMeta.dataset.themeLightColor\n : $manualMeta.dataset.themeDarkColor;\n }\n // Disable auto theme s\n const $autoMetas = document.querySelectorAll(\n 'meta[data-theme-setting=\"auto\"]',\n );\n $autoMetas.forEach((m) => {\n m.name = '';\n });\n }\n document\n .querySelector('meta[name=\"color-scheme\"]')\n .setAttribute(\n 'content',\n theme === 'auto' ? 'light dark' : theme,\n );\n\n if (theme === 'auto') {\n store.local.del('theme');\n } else {\n store.local.set('theme', theme);\n }\n }}\n >\n
    \n \n \n \n
    \n \n
    \n
  • \n
  • \n
    \n \n
    \n
    \n \n \n A\n \n {' '}\n {\n const value = parseInt(e.target.value, 10);\n const html = document.documentElement;\n // set CSS variable\n html.style.setProperty('--text-size', `${value}px`);\n // save to local storage\n if (value === DEFAULT_TEXT_SIZE) {\n store.local.del('textSize');\n } else {\n store.local.set('textSize', e.target.value);\n }\n }}\n />{' '}\n \n \n A\n \n \n \n {TEXT_SIZES.map((size) => (\n \n
    \n
  • \n
  • \n \n \n
    \n \n \n Volunteer translations\n \n \n
    \n \n
  • \n
\n
\n {authenticated && (\n <>\n

\n Posting\n

\n
\n
    \n
  • \n \n {\n const { value } = e.target;\n (async () => {\n try {\n await masto.v1.accounts.updateCredentials({\n source: {\n privacy: value,\n },\n });\n const newPrefs = {\n ...prefs,\n 'posting:default:visibility': value,\n };\n if (value === 'private') {\n newPrefs['posting:default:quote_policy'] = 'nobody';\n }\n setPrefs(newPrefs);\n setPreferences(newPrefs);\n } catch (e) {\n alert(t`Failed to update posting privacy`);\n console.error(e);\n }\n })();\n }}\n >\n \n \n \n \n
  • \n {supportsNativeQuote() && (\n
  • \n \n {\n const { value } = e.target;\n (async () => {\n try {\n await masto.v1.accounts.updateCredentials({\n source: {\n quote_policy: value,\n },\n });\n setPrefs({\n ...prefs,\n 'posting:default:quote_policy': value,\n });\n setPreferences({\n ...prefs,\n 'posting:default:quote_policy': value,\n });\n } catch (e) {\n alert(t`Failed to update quote settings`);\n console.error(e);\n }\n })();\n }}\n >\n \n \n \n \n
  • \n )}\n
\n
\n

\n {' '}\n \n \n Synced to your instance server's settings.{' '}\n \n Go to your instance ({instance}) for more settings.\n \n \n \n

\n \n )}\n

\n Experiments\n

\n
\n
    \n
  • \n \n
  • \n
  • \n \n
  • \n {!!TRANSLANG_INSTANCES && (\n
  • \n \n \n
    \n \n
    \n
    \n
    \n \n
    \n {targetLanguages.map((lang) => {\n const common = localeCode2Text({\n code: lang.code,\n fallback: lang.name,\n });\n const native = localeCode2Text({\n code: lang.code,\n locale: lang.code,\n });\n const showCommon = native && common !== native;\n return (\n \n );\n })}\n
    \n
    \n

    \n \n \n Note: This feature uses external translation services,\n powered by{' '}\n \n {TRANSLATION_API_NAME}\n \n .\n \n \n

    \n
    \n
    \n \n

    \n \n \n Automatically show translation for posts in timeline.\n Only works for short posts without content\n warning, media and poll.\n \n \n

    \n
    \n \n
  • \n )}\n {!!GIPHY_API_KEY && authenticated && (\n
  • \n \n
    \n \n \n Note: This feature uses external GIF search service,\n powered by{' '}\n \n GIPHY\n \n . G-rated (suitable for viewing by all ages), tracking\n parameters are stripped, referrer information is omitted\n from requests, but search queries and IP address\n information will still reach their servers.\n \n \n
    \n
  • \n )}\n {!!IMG_ALT_API_URL && authenticated && (\n
  • \n \n
    \n \n \n Only for new images while composing new posts.\n \n \n
    \n
    \n \n \n Note: This feature uses external AI service, powered by{' '}\n \n img-alt-api\n \n . May not work well. Only for images and in English.\n \n \n
    \n
  • \n )}\n {authenticated && getAPIVersions()?.mastodon >= 2 && (\n
  • \n \n
    \n \n \n Alpha-stage feature. Potentially improved grouping window\n but basic grouping logic.\n \n \n
    \n
  • \n )}\n {authenticated && (\n
  • \n \n
    \n \n \n ⚠️⚠️⚠️ Very experimental.\n
    \n Stored in your own profile’s notes. Profile (private)\n notes are mainly used for other profiles, and hidden for\n own profile.\n
    \n
    \n
    \n
    \n \n \n Note: This feature uses currently-logged-in instance\n server API.\n \n \n
    \n
  • \n )}\n
  • \n \n
    \n \n \n Replace text as blocks, useful when taking screenshots, for\n privacy reasons.\n \n \n
    \n
  • \n {authenticated && (\n
  • \n {\n states.showDrafts = true;\n states.showSettings = false;\n }}\n >\n Unsent drafts\n \n
  • \n )}\n
\n
\n {authenticated && }\n

\n About\n

\n
\n \n \n
\n Phanpy{' '}\n {\n e.preventDefault();\n states.showAccount = 'phanpy@hachyderm.io';\n }}\n >\n @phanpy\n \n
\n \n \n Built\n {' '}\n by{' '}\n {\n e.preventDefault();\n states.showAccount = 'cheeaun@mastodon.social';\n }}\n >\n @cheeaun\n \n \n
\n \n

\n \n Sponsor\n {' '}\n ·{' '}\n \n Donate\n {' '}\n ·{' '}\n \n Patreon\n {' '}\n ·{' '}\n \n What's new\n {' '}\n ·{' '}\n \n Privacy Policy\n \n

\n {__BUILD_TIME__ && (\n

\n {WEBSITE && (\n <>\n \n Site:{' '}\n {WEBSITE.replace(/https?:\\/\\//g, '').replace(/\\/$/, '')}\n \n
\n \n )}\n \n Version:{' '}\n {\n e.target.select();\n // Copy to clipboard\n try {\n navigator.clipboard.writeText(e.target.value);\n showToast(t`Version string copied`);\n } catch (e) {\n console.warn(e);\n showToast(t`Unable to copy version string`);\n }\n }}\n />{' '}\n {!__FAKE_COMMIT_HASH__ && (\n \n (\n \n \n \n )\n \n )}\n \n

\n )}\n
\n {(import.meta.env.DEV || import.meta.env.PHANPY_DEV) && (\n
\n \n

\n \n Sandbox\n \n

\n

Debugging

\n

\n Vapid key: {getVapidKey()}\n

\n {__BENCH_RESULTS?.size > 0 && (\n
    \n {Array.from(__BENCH_RESULTS.entries()).map(\n ([name, duration]) => (\n
  • \n {name}: {duration}ms\n
  • \n ),\n )}\n
\n )}\n

Service Worker Cache

\n alert(await getCachesKeys())}\n >\n Show keys count\n {' '}\n alert(await getCachesSize())}\n >\n Show cache size\n {' '}\n {\n const key = prompt('Enter cache key');\n if (!key) return;\n try {\n clearCacheKey(key);\n } catch (e) {\n alert(e);\n }\n }}\n >\n Clear cache key\n {' '}\n {\n try {\n clearCaches();\n } catch (e) {\n alert(e);\n }\n }}\n >\n Clear all caches\n \n

Temporary Experiments

\n \n
\n )}\n
\n \n );\n}\n\nasync function getCachesKeys() {\n const keys = await caches.keys();\n const total = {};\n for (const key of keys) {\n const cache = await caches.open(key);\n const k = await cache.keys();\n total[key] = k.length;\n }\n return total;\n}\n\nasync function getCachesSize() {\n const keys = await caches.keys();\n let total = {};\n let TOTAL = 0;\n for (const key of keys) {\n const cache = await caches.open(key);\n const k = await cache.keys();\n for (const item of k) {\n try {\n const response = await cache.match(item);\n const blob = await response.blob();\n total[key] = (total[key] || 0) + blob.size;\n TOTAL += blob.size;\n } catch (e) {\n alert('Failed to get cache size for ' + item);\n alert(e);\n }\n }\n }\n return {\n ...Object.fromEntries(\n Object.entries(total).map(([k, v]) => [k, prettyBytes(v)]),\n ),\n TOTAL: prettyBytes(TOTAL),\n };\n}\n\nfunction clearCacheKey(key) {\n return caches.delete(key);\n}\n\nasync function clearCaches() {\n const keys = await caches.keys();\n for (const key of keys) {\n await caches.delete(key);\n }\n}\n\nfunction PushNotificationsSection({ onClose }) {\n const { t } = useLingui();\n if (!isPushSupported()) return null;\n\n const { instance } = api();\n const [uiState, setUIState] = useState('default');\n const pushFormRef = useRef();\n const [allowNotifications, setAllowNotifications] = useState(false);\n const [needRelogin, setNeedRelogin] = useState(false);\n const previousPolicyRef = useRef();\n useEffect(() => {\n (async () => {\n setUIState('loading');\n try {\n const { subscription, backendSubscription } = await initSubscription();\n if (\n backendSubscription?.policy &&\n backendSubscription.policy !== 'none'\n ) {\n setAllowNotifications(true);\n const { alerts, policy } = backendSubscription;\n console.log('backendSubscription', backendSubscription);\n previousPolicyRef.current = policy;\n const { elements } = pushFormRef.current;\n const policyEl = elements.namedItem('policy');\n if (policyEl) policyEl.value = policy;\n // alerts is {}, iterate it\n Object.entries(alerts).forEach(([alert, value]) => {\n const el = elements.namedItem(alert);\n if (el?.type === 'checkbox') {\n el.checked = !!value;\n }\n });\n }\n setUIState('default');\n } catch (err) {\n console.warn(err);\n if (/outside.*authorized/i.test(err.message)) {\n setNeedRelogin(true);\n } else {\n alert(err?.message || err);\n }\n setUIState('error');\n }\n })();\n }, []);\n\n const isLoading = uiState === 'loading';\n\n return (\n {\n setTimeout(() => {\n const values = Object.fromEntries(new FormData(pushFormRef.current));\n const allowNotifications = !!values['policy-allow'];\n const params = {\n data: {\n policy: values.policy,\n alerts: {\n mention: !!values.mention,\n favourite: !!values.favourite,\n reblog: !!values.reblog,\n follow: !!values.follow,\n follow_request: !!values.followRequest,\n poll: !!values.poll,\n update: !!values.update,\n status: !!values.status,\n },\n },\n };\n\n let alertsCount = 0;\n // Remove false values from data.alerts\n // API defaults to false anyway\n Object.keys(params.data.alerts).forEach((key) => {\n if (!params.data.alerts[key]) {\n delete params.data.alerts[key];\n } else {\n alertsCount++;\n }\n });\n const policyChanged =\n previousPolicyRef.current !== params.data.policy;\n\n console.log('PN Form', {\n values,\n allowNotifications: allowNotifications,\n params,\n });\n\n if (allowNotifications && alertsCount > 0) {\n if (policyChanged) {\n console.debug('Policy changed.');\n removeSubscription()\n .then(() => {\n updateSubscription(params);\n })\n .catch((err) => {\n console.warn(err);\n alert(t`Failed to update subscription. Please try again.`);\n });\n } else {\n updateSubscription(params).catch((err) => {\n console.warn(err);\n alert(t`Failed to update subscription. Please try again.`);\n });\n }\n } else {\n removeSubscription().catch((err) => {\n console.warn(err);\n alert(t`Failed to remove subscription. Please try again.`);\n });\n }\n }, 100);\n }}\n >\n

\n Push Notifications (beta)\n

\n
\n
    \n
  • \n \n
  • \n
\n
\n

\n \n \n NOTE: Push notifications only work for one account.\n \n \n

\n \n );\n}\n\nexport default Settings;\n","const focusDeck = () => {\n let timer = setTimeout(() => {\n const columns = document.getElementById('columns');\n if (columns) {\n // Focus focused column\n const focusedColumn = columns.querySelector('.deck-container.focus');\n if (focusedColumn) {\n focusedColumn.focus();\n } else {\n // Focus first column within viewport\n const firstVisibleColumn = Array.from(\n columns.querySelectorAll('.deck-container'),\n ).find((column) => {\n const columnRect = column.getBoundingClientRect();\n return columnRect.left >= 0;\n });\n if (firstVisibleColumn) {\n firstVisibleColumn.focus();\n } else {\n // Focus first column\n columns.querySelector('.deck-container')?.focus?.();\n }\n }\n } else {\n const modals = document.querySelectorAll('#modal-container > *');\n if (modals?.length) {\n // Focus last modal\n const modal = modals[modals.length - 1]; // last one\n const modalFocusElement =\n modal.querySelector('[tabindex=\"-1\"]') || modal;\n if (modalFocusElement) {\n modalFocusElement.focus();\n return;\n }\n }\n const backDrop = document.querySelector('.deck-backdrop');\n if (backDrop) return;\n // Focus last deck\n const pages = document.querySelectorAll('.deck-container');\n const page = pages[pages.length - 1]; // last one\n if (page && page.tabIndex === -1) {\n console.log('FOCUS', page);\n page.focus();\n }\n }\n }, 100);\n return () => clearTimeout(timer);\n};\n\nexport default focusDeck;\n","import { useEffect, useRef } from 'preact/hooks';\nimport { useLocation } from 'react-router-dom';\n\n// Hook that runs a callback when the location changes\n// Won't run on the first render\n\nexport default function useLocationChange(fn) {\n if (!fn) return;\n const location = useLocation();\n const currentLocationRef = useRef(location.pathname);\n useEffect(() => {\n // console.log('location', {\n // current: currentLocationRef.current,\n // next: location.pathname,\n // });\n if (\n currentLocationRef.current &&\n location.pathname !== currentLocationRef.current\n ) {\n fn?.();\n }\n }, [location.pathname, fn]);\n}\n","import { Trans } from '@lingui/react/macro';\nimport punycode from 'punycode/';\n\nfunction AccountHandleInfo({ acct, instance }) {\n // acct = username or username@server\n let [username, server] = acct.split('@');\n if (!server) server = instance;\n const encodedAcct = punycode.toASCII(acct);\n return (\n
\n \n {username}\n @\n {server}\n \n
\n \n username\n {' '}\n \n {' '}\n server domain name\n \n
\n
\n );\n}\n\nexport default AccountHandleInfo;\n","import { Trans, useLingui } from '@lingui/react/macro';\nimport { useEffect, useRef, useState } from 'preact/hooks';\n\nimport { api } from '../utils/api';\nimport states from '../utils/states';\n\nimport Icon from './icon';\nimport Loader from './loader';\n\nconst SUPPORTED_IMAGE_FORMATS = [\n 'image/jpeg',\n 'image/png',\n 'image/gif',\n 'image/webp',\n];\nconst SUPPORTED_IMAGE_FORMATS_STR = SUPPORTED_IMAGE_FORMATS.join(',');\n\nfunction FieldsAttributesRow({ name, value, disabled, index: i }) {\n const [hasValue, setHasValue] = useState(!!value);\n return (\n \n \n \n \n \n setHasValue(!!e.currentTarget.value)}\n dir=\"auto\"\n />\n \n \n );\n}\n\nfunction EditProfileSheet({ onClose = () => {} }) {\n const { t } = useLingui();\n const { masto } = api();\n const [uiState, setUIState] = useState('loading');\n const [account, setAccount] = useState(null);\n const [headerPreview, setHeaderPreview] = useState(null);\n const [avatarPreview, setAvatarPreview] = useState(null);\n\n useEffect(() => {\n (async () => {\n try {\n const acc = await masto.v1.accounts.verifyCredentials();\n setAccount(acc);\n setUIState('default');\n } catch (e) {\n console.error(e);\n setUIState('error');\n }\n })();\n }, []);\n\n console.log('EditProfileSheet', account);\n const { displayName, source, avatar, header } = account || {};\n const { note, fields } = source || {};\n const fieldsAttributesRef = useRef(null);\n\n const avatarMediaAttachments = [\n ...(avatar ? [{ type: 'image', url: avatar }] : []),\n ...(avatarPreview ? [{ type: 'image', url: avatarPreview }] : []),\n ];\n const headerMediaAttachments = [\n ...(header ? [{ type: 'image', url: header }] : []),\n ...(headerPreview ? [{ type: 'image', url: headerPreview }] : []),\n ];\n\n return (\n
\n {!!onClose && (\n \n )}\n
\n \n Edit profile\n \n
\n
\n {uiState === 'loading' ? (\n

\n \n

\n ) : (\n {\n e.preventDefault();\n const formData = new FormData(e.target);\n const header = formData.get('header');\n const avatar = formData.get('avatar');\n const displayName = formData.get('display_name');\n const note = formData.get('note');\n const fieldsAttributesFields =\n fieldsAttributesRef.current.querySelectorAll(\n 'input[name^=\"fields_attributes\"]',\n );\n const fieldsAttributes = [];\n fieldsAttributesFields.forEach((field) => {\n const name = field.name;\n const [_, index, key] =\n name.match(/fields_attributes\\[(\\d+)\\]\\[(.+)\\]/) || [];\n const value = field.value ? field.value.trim() : '';\n if (index && key && value) {\n if (!fieldsAttributes[index]) fieldsAttributes[index] = {};\n fieldsAttributes[index][key] = value;\n }\n });\n // Fill in the blanks\n fieldsAttributes.forEach((field) => {\n if (field.name && !field.value) {\n field.value = '';\n }\n });\n\n (async () => {\n try {\n const newAccount = await masto.v1.accounts.updateCredentials({\n header,\n avatar,\n displayName,\n note,\n fieldsAttributes,\n });\n console.log('updated account', newAccount);\n onClose?.({\n state: 'success',\n account: newAccount,\n });\n } catch (e) {\n console.error(e);\n alert(e?.message || t`Unable to update profile.`);\n }\n })();\n }}\n >\n
\n \n
\n {header ? (\n {\n states.showMediaModal = {\n mediaAttachments: headerMediaAttachments,\n mediaIndex: 0,\n };\n }}\n >\n \"\"\n
\n ) : (\n
\n )}\n {headerPreview && (\n <>\n \n {\n states.showMediaModal = {\n mediaAttachments: headerMediaAttachments,\n mediaIndex: 1,\n };\n }}\n >\n \"\"\n
\n \n )}\n
\n \n
\n \n
\n {avatar ? (\n {\n states.showMediaModal = {\n mediaAttachments: avatarMediaAttachments,\n mediaIndex: 0,\n };\n }}\n >\n \"\"\n
\n ) : (\n
\n )}\n {avatarPreview && (\n <>\n \n {\n states.showMediaModal = {\n mediaAttachments: avatarMediaAttachments,\n mediaIndex: 1,\n };\n }}\n >\n \"\"\n
\n \n )}\n \n \n

\n \n

\n

\n \n

\n {/* Table for fields; name and values are in fields, min 4 rows */}\n

\n Extra fields\n

\n \n \n \n \n \n \n \n \n {Array.from({ length: Math.max(4, fields.length) }).map(\n (_, i) => {\n const { name = '', value = '' } = fields[i] || {};\n return (\n \n );\n },\n )}\n \n
\n Label\n \n Content\n
\n
\n {\n onClose?.();\n }}\n >\n Cancel\n \n \n
\n \n )}\n \n \n );\n}\n\nexport default EditProfileSheet;\n","import { Trans } from '@lingui/react/macro';\nimport { useEffect, useRef, useState } from 'preact/hooks';\n\nimport { api } from '../utils/api';\nimport { fetchRelationships } from '../utils/relationships';\nimport supports from '../utils/supports';\n\nimport AccountBlock from './account-block';\nimport Loader from './loader';\n\nconst ENDORSEMENTS_LIMIT = 80;\n\nfunction Endorsements({\n accountID: id,\n info,\n open = false,\n onlyOpenIfHasEndorsements = false,\n}) {\n const { masto } = api();\n const endorsementsContainer = useRef();\n const [endorsementsUIState, setEndorsementsUIState] = useState('default');\n const [endorsements, setEndorsements] = useState([]);\n const [relationshipsMap, setRelationshipsMap] = useState({});\n useEffect(() => {\n if (!supports('@mastodon/endorsements')) return;\n if (!open) return;\n (async () => {\n setEndorsementsUIState('loading');\n try {\n const accounts = await masto.v1.accounts.$select(id).endorsements.list({\n limit: ENDORSEMENTS_LIMIT,\n });\n console.log({ endorsements: accounts });\n if (!accounts.length) {\n setEndorsementsUIState('default');\n return;\n }\n setEndorsements(accounts);\n setEndorsementsUIState('default');\n setTimeout(() => {\n endorsementsContainer.current.scrollIntoView({\n behavior: 'smooth',\n block: 'nearest',\n });\n }, 300);\n\n const relationships = await fetchRelationships(\n accounts,\n relationshipsMap,\n );\n if (relationships) {\n setRelationshipsMap(relationships);\n }\n } catch (e) {\n console.error(e);\n setEndorsementsUIState('error');\n }\n })();\n }, [open, id]);\n\n const reallyOpen = onlyOpenIfHasEndorsements\n ? open && endorsements.length > 0\n : open;\n\n if (!reallyOpen) return null;\n\n return (\n
\n
\n
\n

\n Profiles featured by @{info.username}\n

\n {endorsementsUIState === 'loading' ? (\n

\n \n

\n ) : endorsements.length > 0 ? (\n 10 ? 'expanded' : ''\n }`}\n >\n {endorsements.map((account) => (\n
  • \n \n
  • \n ))}\n \n ) : (\n

    \n No featured profiles.\n

    \n )}\n
    \n
    \n
    \n );\n}\n\nexport default Endorsements;\n","import { api } from './api';\nimport pmem from './pmem';\nimport store from './store';\n\nconst FETCH_MAX_AGE = 1000 * 60; // 1 minute\nconst MAX_AGE = 24 * 60 * 60 * 1000; // 1 day\n\nexport const fetchLists = pmem(\n async () => {\n const { masto } = api();\n const lists = await masto.v1.lists.list();\n lists.sort((a, b) => a.title.localeCompare(b.title));\n\n if (lists.length) {\n setTimeout(() => {\n // Save to local storage, with saved timestamp\n store.account.set('lists', {\n lists,\n updatedAt: Date.now(),\n });\n }, 1);\n }\n\n return lists;\n },\n {\n maxAge: FETCH_MAX_AGE,\n },\n);\n\nexport async function getLists() {\n try {\n const { lists, updatedAt } = store.account.get('lists') || {};\n if (!lists?.length) return await fetchLists();\n if (Date.now() - updatedAt > MAX_AGE) {\n // Stale-while-revalidate\n fetchLists();\n return lists;\n }\n return lists;\n } catch (e) {\n return [];\n }\n}\n\nexport const fetchList = pmem(\n (id) => {\n const { masto } = api();\n return masto.v1.lists.$select(id).fetch();\n },\n {\n maxAge: FETCH_MAX_AGE,\n },\n);\n\nexport async function getList(id) {\n const { lists } = store.account.get('lists') || {};\n console.log({ lists });\n if (lists?.length) {\n const theList = lists.find((l) => l.id === id);\n if (theList) return theList;\n }\n try {\n return fetchList(id);\n } catch (e) {\n return null;\n }\n}\n\nexport async function getListTitle(id) {\n const list = await getList(id);\n return list?.title || '';\n}\n\nexport function addListStore(list) {\n const { lists } = store.account.get('lists') || {};\n if (lists?.length) {\n lists.push(list);\n lists.sort((a, b) => a.title.localeCompare(b.title));\n store.account.set('lists', {\n lists,\n updatedAt: Date.now(),\n });\n }\n}\n\nexport function updateListStore(list) {\n const { lists } = store.account.get('lists') || {};\n if (lists?.length) {\n const index = lists.findIndex((l) => l.id === list.id);\n if (index !== -1) {\n lists[index] = list;\n lists.sort((a, b) => a.title.localeCompare(b.title));\n store.account.set('lists', {\n lists,\n updatedAt: Date.now(),\n });\n }\n }\n}\n\nexport function deleteListStore(listID) {\n const { lists } = store.account.get('lists') || {};\n if (lists?.length) {\n const index = lists.findIndex((l) => l.id === listID);\n if (index !== -1) {\n lists.splice(index, 1);\n store.account.set('lists', {\n lists,\n updatedAt: Date.now(),\n });\n }\n }\n}\n","import './list-exclusive-badge.css';\n\nimport { useLingui } from '@lingui/react/macro';\n\nimport Icon from './icon';\n\nfunction ListExclusiveBadge({ insignificant }) {\n const { t } = useLingui();\n return (\n