{"version":3,"file":"main-FOJmGvRC.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/pages/accounts.jsx","../../src/assets/logo.svg","../../src/utils/push-notifications.js","../../src/pages/settings.jsx","../../src/utils/focus-deck.jsx","../../src/utils/useLocationChange.js","../../src/utils/lists.js","../../src/components/list-add-edit.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","../../src/utils/color-utils.js","../../src/components/media-modal.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/follow-request-buttons.jsx","../../src/components/notification.jsx","../../src/components/notification-service.jsx","../../src/components/search-form.jsx","../../src/components/search-command.jsx","../../src/components/shortcuts.jsx","../../src/utils/timeline-utils.jsx","../../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/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.jsx","../../src/pages/mentions.jsx","../../src/pages/notifications.jsx","../../src/pages/public.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/utils/auth.js","../../src/pages/login.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 { 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 = 15_000; // 15 seconds\n\nexport default memo(function BackgroundService({ isLoggedIn }) {\n // Notifications service\n // - WebSocket to receive notifications when page is visible\n const [visible, setVisible] = useState(true);\n usePageVisibility(setVisible);\n const checkLatestNotification = async (masto, instance, skipCheckMarkers) => {\n if (states.notificationsLast) {\n const notificationsIterator = masto.v1.notifications.list({\n limit: 1,\n sinceId: states.notificationsLast.id,\n });\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 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 pollNotifications = 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(pollNotifications);\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('shift+alt+k', () => {\n const currentCloakMode = states.settings.cloakMode;\n states.settings.cloakMode = !currentCloakMode;\n showToast({\n text: `Cloak mode ${currentCloakMode ? 'disabled' : 'enabled'}`,\n });\n });\n\n return null;\n});\n","import { useHotkeys } from 'react-hotkeys-hook';\nimport { useSnapshot } from 'valtio';\n\nimport openCompose from '../utils/open-compose';\nimport openOSK from '../utils/open-osk';\nimport states from '../utils/states';\n\nimport Icon from './icon';\n\nexport default function ComposeButton() {\n const snapStates = useSnapshot(states);\n\n function handleButton(e) {\n if (snapStates.composerState.minimized) {\n states.composerState.minimized = false;\n openOSK();\n return;\n }\n\n if (e.shiftKey) {\n const newWin = openCompose();\n\n if (!newWin) {\n states.showCompose = true;\n }\n } else {\n openOSK();\n states.showCompose = true;\n }\n }\n\n useHotkeys('c, shift+c', handleButton, {\n ignoreEventWhen: (e) => {\n const hasModal = !!document.querySelector('#modal-container > *');\n return hasModal;\n },\n });\n\n return (\n \n \n \n );\n}\n","import './keyboard-shortcuts-help.css';\n\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\nexport default memo(function KeyboardShortcutsHelp() {\n const snapStates = useSnapshot(states);\n\n function onClose() {\n states.showKeyboardShortcutsHelp = false;\n }\n\n useHotkeys(\n '?, shift+?, shift+slash',\n (e) => {\n console.log('help');\n states.showKeyboardShortcutsHelp = true;\n },\n {\n ignoreEventWhen: (e) => {\n const hasModal = !!document.querySelector('#modal-container > *');\n return hasModal;\n },\n },\n );\n\n return (\n !!snapStates.showKeyboardShortcutsHelp && (\n \n
\n \n
\n

Keyboard shortcuts

\n
\n
\n \n {[\n {\n action: 'Keyboard shortcuts help',\n keys: ?,\n },\n {\n action: 'Next post',\n keys: j,\n },\n {\n action: 'Previous post',\n keys: k,\n },\n {\n action: 'Skip carousel to next post',\n keys: (\n <>\n Shift + j\n \n ),\n },\n {\n action: 'Skip carousel to previous post',\n keys: (\n <>\n Shift + k\n \n ),\n },\n {\n action: 'Load new posts',\n keys: .,\n },\n {\n action: '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: 'Close post or dialogs',\n keys: (\n <>\n Esc or Backspace\n \n ),\n },\n {\n action: 'Focus column in multi-column mode',\n keys: (\n <>\n 1 to 9\n \n ),\n },\n {\n action: 'Compose new post',\n keys: c,\n },\n {\n action: 'Compose new post (new window)',\n className: 'insignificant',\n keys: (\n <>\n Shift + c\n \n ),\n },\n {\n action: 'Send post',\n keys: (\n <>\n Ctrl + Enter or ⌘ +{' '}\n Enter\n \n ),\n },\n {\n action: 'Search',\n keys: /,\n },\n {\n action: 'Reply',\n keys: r,\n },\n {\n action: 'Reply (new window)',\n className: 'insignificant',\n keys: (\n <>\n Shift + r\n \n ),\n },\n {\n action: 'Like (favourite)',\n keys: (\n <>\n l or f\n \n ),\n },\n {\n action: 'Boost',\n keys: (\n <>\n Shift + b\n \n ),\n },\n {\n action: 'Bookmark',\n keys: d,\n },\n {\n action: 'Toggle Cloak mode',\n keys: (\n <>\n Shift + Alt + k\n \n ),\n },\n ].map(({ action, className, keys }) => (\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 * 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 * 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 */\nfunction updatePos(el) {\n clearTimeout(debounces.get(el));\n const optionsOrPlugin = getOptions(el);\n const delay = isPlugin(optionsOrPlugin) ? 500 : optionsOrPlugin.duration;\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 * The mutation observer responsible for watching each root element.\n */\nlet mutations;\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 mutations = 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;\n const isMounted = el.isConnected;\n const preExisting = coords.has(el);\n if (isMounted && siblings.has(el))\n siblings.delete(el);\n if (animations.has(el)) {\n (_a = animations.get(el)) === null || _a === void 0 ? void 0 : _a.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 let animation;\n if (!oldCoords)\n return;\n const pluginOrOptions = getOptions(el);\n if (typeof pluginOrOptions !== \"function\") {\n const deltaX = oldCoords.left - newCoords.left;\n const deltaY = oldCoords.top - newCoords.top;\n const [widthFrom, widthTo, heightFrom, heightTo] = getTransitionSizes(el, oldCoords, newCoords);\n const start = {\n transform: `translate(${deltaX}px, ${deltaY}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));\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 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));\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 && next.parentNode && 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 ], { duration: optionsOrPlugin.duration, easing: \"ease-out\" });\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 = (options === null || options === void 0 ? void 0 : options.styleReset) || 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.bind(null, el, styleReset));\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 > 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 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 = coords.get(offsetParent) || getCoords(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 (mutations && 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, { duration: 250, easing: \"ease-in-out\", ...config });\n }\n mutations.observe(el, { childList: true });\n parents.add(el);\n }\n }\n return Object.freeze({\n parent: el,\n enable: () => {\n enabled.add(el);\n },\n disable: () => {\n enabled.delete(el);\n },\n isEnabled: () => enabled.has(el),\n });\n}\n/**\n * The vue directive.\n */\nconst vAutoAnimate = {\n mounted: (el, binding) => {\n autoAnimate(el, binding.value || {});\n },\n // ignore ssr see #96:\n getSSRProps: () => ({}),\n};\n\nexport { 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 return [element, setEnabled];\n}\n\nexport { useAutoAnimate };\n","import './accounts.css';\n\nimport { useAutoAnimate } from '@formkit/auto-animate/preact';\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 Menu2 from '../components/menu2';\nimport NameText from '../components/name-text';\nimport { api } from '../utils/api';\nimport states from '../utils/states';\nimport store from '../utils/store';\nimport { getCurrentAccountID, setCurrentAccountID } from '../utils/store-utils';\n\nfunction Accounts({ onClose }) {\n const { masto } = api();\n // Accounts\n const accounts = store.local.getJSON('accounts');\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

Accounts

\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 store.local.setJSON('accounts', 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 Default{' '}\n \n )}\n \n \n \n }\n >\n {\n states.showAccount = `${account.info.username}@${account.instanceURL}`;\n }}\n >\n \n View profile…\n \n \n {moreThanOneAccount && (\n {\n // Move account to the top of the list\n accounts.splice(i, 1);\n accounts.unshift(account);\n store.local.setJSON('accounts', accounts);\n reload();\n }}\n >\n \n Set as default\n \n )}\n \n \n Log out @{account.info.acct}?\n \n }\n disabled={!isCurrent}\n menuItemClassName=\"danger\"\n onClick={() => {\n // const yes = confirm('Log out?');\n // if (!yes) return;\n accounts.splice(i, 1);\n store.local.setJSON('accounts', accounts);\n // location.reload();\n location.href = location.pathname || '/';\n }}\n >\n \n Log out…\n \n \n
    \n
    • \n );\n })}\n
\n

\n \n Add an existing account\n \n

\n {moreThanOneAccount && (\n

\n \n Note: Default account will always be used for first load.\n Switched accounts will persist during the session.\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\"","// Utils for push notifications\nimport { api } from './api';\nimport { getCurrentAccount } 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 } = getCurrentAccount();\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 } = getCurrentAccount();\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 } = getCurrentAccount();\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 { useEffect, useRef, useState } from 'preact/hooks';\nimport { useSnapshot } from 'valtio';\n\nimport logo from '../assets/logo.svg';\n\nimport Icon from '../components/icon';\nimport Link from '../components/link';\nimport RelativeTime from '../components/relative-time';\nimport targetLanguages from '../data/lingva-target-languages';\nimport { api } from '../utils/api';\nimport getTranslateTargetLanguage from '../utils/get-translate-target-language';\nimport localeCode2Text from '../utils/localeCode2Text';\nimport {\n initSubscription,\n isPushSupported,\n removeSubscription,\n updateSubscription,\n} from '../utils/push-notifications';\nimport showToast from '../utils/show-toast';\nimport states from '../utils/states';\nimport store from '../utils/store';\nimport supports from '../utils/supports';\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_IMG_ALT_API_URL: IMG_ALT_API_URL,\n PHANPY_GIPHY_API_KEY: GIPHY_API_KEY,\n} = import.meta.env;\n\nfunction Settings({ onClose }) {\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(store.account.get('preferences') || {});\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 return (\n
\n {!!onClose && (\n \n )}\n
\n

Settings

\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' ? 'dark light' : 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 A{' '}\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 A\n \n \n {TEXT_SIZES.map((size) => (\n \n
    \n
    • \n
\n
\n {authenticated && (\n <>\n

Posting

\n
\n
    \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 setPrefs({\n ...prefs,\n 'posting:default:visibility': value,\n });\n store.account.set('preferences', {\n ...prefs,\n 'posting:default:visibility': value,\n });\n } catch (e) {\n alert('Failed to update posting privacy');\n console.error(e);\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

Experiments

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

    \n Hide \"Translate\" button for\n {snapStates.settings.contentTranslationHideLanguages.length >\n 0 && (\n <>\n {' '}\n (\n {\n snapStates.settings.contentTranslationHideLanguages\n .length\n }\n )\n \n )}\n :\n

    \n {targetLanguages.map((lang) => (\n \n ))}\n
    \n

    \n

    \n \n Note: This feature uses external translation services,\n powered by{' '}\n \n Lingva API\n {' '}\n &{' '}\n \n Lingva Translate\n \n .\n \n

    \n
    \n
    \n \n

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

    \n
    \n
\n \n {!!GIPHY_API_KEY && authenticated && (\n
  • \n \n
    \n \n Note: This feature uses external GIF search service, powered\n 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 information\n will still reach their servers.\n \n
    \n
    • \n )}\n {!!IMG_ALT_API_URL && authenticated && (\n
  • \n \n
    \n Only for new images while composing new posts.\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 {authenticated && supports('@mastodon/grouped-notifications') && (\n
  • \n \n
    \n \n Alpha-stage feature. Potentially improved grouping window\n but basic grouping logic.\n \n
    \n
    • \n )}\n {authenticated && (\n
  • \n \n
    \n \n ⚠️⚠️⚠️ Very experimental.\n
    \n Stored in your own profile’s notes. Profile (private) notes\n are mainly used for other profiles, and hidden for own\n profile.\n     \n
    \n
    \n \n Note: This feature uses currently-logged-in instance server\n API.\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 {authenticated && (\n
  • \n {\n states.showDrafts = true;\n states.showSettings = false;\n }}\n >\n Unsent drafts\n \n
    • \n )}\n \n \n {authenticated && }\n

    About

    \n
    \n \n \n
    \n Phanpy{' '}\n {\n e.preventDefault();\n states.showAccount = 'phanpy@hachyderm.io';\n }}\n >\n @phanpy\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 Sponsor\n {' '}\n ·{' '}\n \n Donate\n {' '}\n ·{' '}\n \n Privacy Policy\n \n

    \n {__BUILD_TIME__ && (\n

    \n {WEBSITE && (\n <>\n Site:{' '}\n {WEBSITE.replace(/https?:\\/\\//g, '').replace(/\\/$/, '')}\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('Version string copied');\n } catch (e) {\n console.warn(e);\n showToast('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 \n );\n}\n\nfunction PushNotificationsSection({ onClose }) {\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.keys(alerts).forEach((alert) => {\n const el = elements.namedItem(alert);\n if (el?.type === 'checkbox') {\n el.checked = true;\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('Failed to update subscription. Please try again.');\n });\n } else {\n updateSubscription(params).catch((err) => {\n console.warn(err);\n alert('Failed to update subscription. Please try again.');\n });\n }\n } else {\n removeSubscription().catch((err) => {\n console.warn(err);\n alert('Failed to remove subscription. Please try again.');\n });\n }\n }, 100);\n }}\n >\n

    Push Notifications (beta)

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

    \n \n NOTE: Push notifications only work for one account.\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 first column\n // columns.querySelector('.deck-container')?.focus?.();\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 { 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 { useEffect, useRef, useState } from 'preact/hooks';\n\nimport { api } from '../utils/api';\nimport { addListStore, deleteListStore, updateListStore } from '../utils/lists';\nimport supports from '../utils/supports';\n\nimport Icon from './icon';\nimport MenuConfirm from './menu-confirm';\n\nfunction ListAddEdit({ list, onClose }) {\n const { masto } = api();\n const [uiState, setUIState] = useState('default');\n const editMode = !!list;\n const nameFieldRef = useRef();\n const repliesPolicyFieldRef = useRef();\n const exclusiveFieldRef = useRef();\n useEffect(() => {\n if (editMode) {\n nameFieldRef.current.value = list.title;\n repliesPolicyFieldRef.current.value = list.repliesPolicy;\n if (exclusiveFieldRef.current) {\n exclusiveFieldRef.current.checked = list.exclusive;\n }\n }\n }, [editMode]);\n const supportsExclusive = supports('@mastodon/list-exclusive');\n\n return (\n
    \n {!!onClose && (\n \n )}{' '}\n
    \n

    {editMode ? 'Edit list' : 'New list'}

    \n
    \n
    \n {\n e.preventDefault(); // Get form values\n\n const formData = new FormData(e.target);\n const title = formData.get('title');\n const repliesPolicy = formData.get('replies_policy');\n const exclusive = formData.get('exclusive') === 'on';\n console.log({\n title,\n repliesPolicy,\n exclusive,\n });\n setUIState('loading');\n\n (async () => {\n try {\n let listResult;\n\n if (editMode) {\n listResult = await masto.v1.lists.$select(list.id).update({\n title,\n replies_policy: repliesPolicy,\n exclusive,\n });\n } else {\n listResult = await masto.v1.lists.create({\n title,\n replies_policy: repliesPolicy,\n exclusive,\n });\n }\n\n console.log(listResult);\n setUIState('default');\n onClose?.({\n state: 'success',\n list: listResult,\n });\n\n setTimeout(() => {\n if (editMode) {\n updateListStore(listResult);\n } else {\n addListStore(listResult);\n }\n }, 1);\n } catch (e) {\n console.error(e);\n setUIState('error');\n alert(\n editMode ? 'Unable to edit list.' : 'Unable to create list.',\n );\n }\n })();\n }}\n >\n
    \n \n
    \n
    \n \n \n \n \n \n
    \n {supportsExclusive && (\n
    \n \n
    \n )}\n
    \n \n {editMode && (\n {\n // const yes = confirm('Delete this list?');\n // if (!yes) return;\n setUIState('loading');\n\n (async () => {\n try {\n await masto.v1.lists.$select(list.id).remove();\n setUIState('default');\n onClose?.({\n state: 'deleted',\n });\n setTimeout(() => {\n deleteListStore(list.id);\n }, 1);\n } catch (e) {\n console.error(e);\n setUIState('error');\n alert('Unable to delete list.');\n }\n })();\n }}\n >\n \n Delete…\n \n \n )}\n
    \n \n
    \n
    \n );\n}\n\nexport default ListAddEdit;\n","import './account-info.css';\n\nimport { MenuDivider, MenuItem } from '@szhsin/react-menu';\nimport {\n useCallback,\n useEffect,\n useMemo,\n useReducer,\n useRef,\n useState,\n} from 'preact/hooks';\nimport punycode from 'punycode/';\n\nimport { api } from '../utils/api';\nimport enhanceContent from '../utils/enhance-content';\nimport getHTMLText from '../utils/getHTMLText';\nimport handleContentLinks from '../utils/handle-content-links';\nimport { getLists } from '../utils/lists';\nimport niceDateTime from '../utils/nice-date-time';\nimport pmem from '../utils/pmem';\nimport shortenNumber from '../utils/shorten-number';\nimport showCompose from '../utils/show-compose';\nimport showToast from '../utils/show-toast';\nimport states, { hideAllModals } from '../utils/states';\nimport store from '../utils/store';\nimport { getCurrentAccountID, updateAccount } from '../utils/store-utils';\nimport supports from '../utils/supports';\n\nimport AccountBlock from './account-block';\nimport Avatar from './avatar';\nimport EmojiText from './emoji-text';\nimport Icon from './icon';\nimport Link from './link';\nimport ListAddEdit from './list-add-edit';\nimport Loader from './loader';\nimport MenuConfirm from './menu-confirm';\nimport MenuLink from './menu-link';\nimport Menu2 from './menu2';\nimport Modal from './modal';\nimport SubMenu2 from './submenu2';\nimport TranslationBlock from './translation-block';\n\nconst MUTE_DURATIONS = [\n 60 * 5, // 5 minutes\n 60 * 30, // 30 minutes\n 60 * 60, // 1 hour\n 60 * 60 * 6, // 6 hours\n 60 * 60 * 24, // 1 day\n 60 * 60 * 24 * 3, // 3 days\n 60 * 60 * 24 * 7, // 1 week\n 0, // forever\n];\nconst MUTE_DURATIONS_LABELS = {\n 0: 'Forever',\n 300: '5 minutes',\n 1_800: '30 minutes',\n 3_600: '1 hour',\n 21_600: '6 hours',\n 86_400: '1 day',\n 259_200: '3 days',\n 604_800: '1 week',\n};\n\nconst LIMIT = 80;\n\nconst ACCOUNT_INFO_MAX_AGE = 1000 * 60 * 10; // 10 mins\n\nfunction fetchFamiliarFollowers(currentID, masto) {\n return masto.v1.accounts.familiarFollowers.fetch({\n id: [currentID],\n });\n}\nconst memFetchFamiliarFollowers = pmem(fetchFamiliarFollowers, {\n maxAge: ACCOUNT_INFO_MAX_AGE,\n});\n\nasync function fetchPostingStats(accountID, masto) {\n const fetchStatuses = masto.v1.accounts\n .$select(accountID)\n .statuses.list({\n limit: 20,\n })\n .next();\n\n const { value: statuses } = await fetchStatuses;\n console.log('fetched statuses', statuses);\n const stats = {\n total: statuses.length,\n originals: 0,\n replies: 0,\n boosts: 0,\n };\n // Categories statuses by type\n // - Original posts (not replies to others)\n // - Threads (self-replies + 1st original post)\n // - Boosts (reblogs)\n // - Replies (not-self replies)\n statuses.forEach((status) => {\n if (status.reblog) {\n stats.boosts++;\n } else if (\n !!status.inReplyToId &&\n status.inReplyToAccountId !== status.account.id // Not self-reply\n ) {\n stats.replies++;\n } else {\n stats.originals++;\n }\n });\n\n // Count days since last post\n if (statuses.length) {\n stats.daysSinceLastPost = Math.ceil(\n (Date.now() - new Date(statuses[statuses.length - 1].createdAt)) /\n 86400000,\n );\n }\n\n console.log('posting stats', stats);\n return stats;\n}\nconst memFetchPostingStats = pmem(fetchPostingStats, {\n maxAge: ACCOUNT_INFO_MAX_AGE,\n});\n\nfunction AccountInfo({\n account,\n fetchAccount = () => {},\n standalone,\n instance,\n authenticated,\n}) {\n const { masto } = api({\n instance,\n });\n const { masto: currentMasto, instance: currentInstance } = api();\n const [uiState, setUIState] = useState('default');\n const isString = typeof account === 'string';\n const [info, setInfo] = useState(isString ? null : account);\n\n const sameCurrentInstance = useMemo(\n () => instance === currentInstance,\n [instance, currentInstance],\n );\n\n useEffect(() => {\n if (!isString) {\n setInfo(account);\n return;\n }\n setUIState('loading');\n (async () => {\n try {\n const info = await fetchAccount();\n states.accounts[`${info.id}@${instance}`] = info;\n setInfo(info);\n setUIState('default');\n } catch (e) {\n console.error(e);\n setInfo(null);\n setUIState('error');\n }\n })();\n }, [isString, account, fetchAccount]);\n\n const {\n acct,\n avatar,\n avatarStatic,\n bot,\n createdAt,\n displayName,\n emojis,\n fields,\n followersCount,\n followingCount,\n group,\n // header,\n // headerStatic,\n id,\n lastStatusAt,\n locked,\n note,\n statusesCount,\n url,\n username,\n memorial,\n moved,\n roles,\n hideCollections,\n } = info || {};\n let headerIsAvatar = false;\n let { header, headerStatic } = info || {};\n if (!header || /missing\\.png$/.test(header)) {\n if (avatar && !/missing\\.png$/.test(avatar)) {\n header = avatar;\n headerIsAvatar = true;\n if (avatarStatic && !/missing\\.png$/.test(avatarStatic)) {\n headerStatic = avatarStatic;\n }\n }\n }\n\n const isSelf = useMemo(() => id === getCurrentAccountID(), [id]);\n\n useEffect(() => {\n const infoHasEssentials = !!(\n info?.id &&\n info?.username &&\n info?.acct &&\n info?.avatar &&\n info?.avatarStatic &&\n info?.displayName &&\n info?.url\n );\n if (isSelf && instance && infoHasEssentials) {\n const accounts = store.local.getJSON('accounts');\n let updated = false;\n accounts.forEach((account) => {\n if (account.info.id === info.id && account.instanceURL === instance) {\n account.info = info;\n updated = true;\n }\n });\n if (updated) {\n console.log('Updated account info', info);\n store.local.setJSON('accounts', accounts);\n }\n }\n }, [isSelf, info, instance]);\n\n const accountInstance = useMemo(() => {\n if (!url) return null;\n const domain = punycode.toUnicode(URL.parse(url).hostname);\n return domain;\n }, [url]);\n\n const [headerCornerColors, setHeaderCornerColors] = useState([]);\n\n const followersIterator = useRef();\n const familiarFollowersCache = useRef([]);\n async function fetchFollowers(firstLoad) {\n if (firstLoad || !followersIterator.current) {\n followersIterator.current = masto.v1.accounts.$select(id).followers.list({\n limit: LIMIT,\n });\n }\n const results = await followersIterator.current.next();\n if (isSelf) return results;\n if (!sameCurrentInstance) return results;\n\n const { value } = results;\n let newValue = [];\n // On first load, fetch familiar followers, merge to top of results' `value`\n // Remove dups on every fetch\n if (firstLoad) {\n let familiarFollowers = [];\n try {\n familiarFollowers = await masto.v1.accounts.familiarFollowers.fetch({\n id: [id],\n });\n } catch (e) {}\n familiarFollowersCache.current = familiarFollowers?.[0]?.accounts || [];\n newValue = [\n ...familiarFollowersCache.current,\n ...value.filter(\n (account) =>\n !familiarFollowersCache.current.some(\n (familiar) => familiar.id === account.id,\n ),\n ),\n ];\n } else if (value?.length) {\n newValue = value.filter(\n (account) =>\n !familiarFollowersCache.current.some(\n (familiar) => familiar.id === account.id,\n ),\n );\n }\n\n return {\n ...results,\n value: newValue,\n };\n }\n\n const followingIterator = useRef();\n async function fetchFollowing(firstLoad) {\n if (firstLoad || !followingIterator.current) {\n followingIterator.current = masto.v1.accounts.$select(id).following.list({\n limit: LIMIT,\n });\n }\n const results = await followingIterator.current.next();\n return results;\n }\n\n const LinkOrDiv = standalone ? 'div' : Link;\n const accountLink = instance ? `/${instance}/a/${id}` : `/a/${id}`;\n\n const [familiarFollowers, setFamiliarFollowers] = useState([]);\n const [postingStats, setPostingStats] = useState();\n const [postingStatsUIState, setPostingStatsUIState] = useState('default');\n const hasPostingStats = !!postingStats?.total;\n\n const renderFamiliarFollowers = async (currentID) => {\n try {\n const followers = await memFetchFamiliarFollowers(\n currentID,\n currentMasto,\n );\n console.log('fetched familiar followers', followers);\n setFamiliarFollowers(\n followers[0].accounts.slice(0, FAMILIAR_FOLLOWERS_LIMIT),\n );\n } catch (e) {\n console.error(e);\n }\n };\n\n const renderPostingStats = async () => {\n if (!id) return;\n setPostingStatsUIState('loading');\n try {\n const stats = await memFetchPostingStats(id, masto);\n setPostingStats(stats);\n setPostingStatsUIState('default');\n } catch (e) {\n console.error(e);\n setPostingStatsUIState('error');\n }\n };\n\n const onRelationshipChange = useCallback(\n ({ relationship, currentID }) => {\n if (!relationship.following) {\n renderFamiliarFollowers(currentID);\n if (!standalone && statusesCount > 0) {\n // Only render posting stats if not standalone and has posts\n renderPostingStats();\n }\n }\n },\n [standalone, id, statusesCount],\n );\n\n const onProfileUpdate = useCallback(\n (newAccount) => {\n if (newAccount.id === id) {\n console.log('Updated account info', newAccount);\n setInfo(newAccount);\n states.accounts[`${newAccount.id}@${instance}`] = newAccount;\n }\n },\n [id, instance],\n );\n\n return (\n \n {uiState === 'error' && (\n
    \n

    Unable to load account.

    \n

    \n \n Go to account page \n \n

    \n
    \n )}\n {uiState === 'loading' ? (\n <>\n
    \n \n
    \n
    \n
    \n

    β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ β–ˆβ–ˆβ–ˆβ–ˆ β–ˆβ–ˆβ–ˆβ–ˆ

    \n

    β–ˆβ–ˆβ–ˆβ–ˆ β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ β–ˆβ–ˆβ–ˆβ–ˆ β–ˆβ–ˆ

    \n
    \n
    \n
    \n
    \n β–ˆβ–ˆβ–ˆ\n

    β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ

    \n
    \n
    \n β–ˆβ–ˆβ–ˆβ–ˆ\n

    β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ

    \n
    \n
    \n
    \n
    \n β–ˆβ–ˆ Followers\n
    \n
    \n β–ˆβ–ˆ Following\n
    \n
    \n β–ˆβ–ˆ Posts\n
    \n
    \n
    \n
    \n \n \n \n \n
    \n
    \n \n ) : (\n info && (\n <>\n {!!moved && (\n
    \n

    \n {displayName} has indicated that their new account is\n now:\n

    \n {\n e.stopPropagation();\n states.showAccount = moved;\n }}\n />\n
    \n )}\n {!!header && !/missing\\.png$/.test(header) && (\n {\n if (e.target.crossOrigin) {\n if (e.target.src !== headerStatic) {\n e.target.src = headerStatic;\n } else {\n e.target.removeAttribute('crossorigin');\n e.target.src = header;\n }\n } else if (e.target.src !== headerStatic) {\n e.target.src = headerStatic;\n } else {\n e.target.remove();\n }\n }}\n crossOrigin=\"anonymous\"\n onLoad={(e) => {\n e.target.classList.add('loaded');\n try {\n // Get color from four corners of image\n const canvas = window.OffscreenCanvas\n ? new OffscreenCanvas(1, 1)\n : document.createElement('canvas');\n const ctx = canvas.getContext('2d', {\n willReadFrequently: true,\n });\n canvas.width = e.target.width;\n canvas.height = e.target.height;\n ctx.imageSmoothingEnabled = false;\n ctx.drawImage(e.target, 0, 0);\n // const colors = [\n // ctx.getImageData(0, 0, 1, 1).data,\n // ctx.getImageData(e.target.width - 1, 0, 1, 1).data,\n // ctx.getImageData(0, e.target.height - 1, 1, 1).data,\n // ctx.getImageData(\n // e.target.width - 1,\n // e.target.height - 1,\n // 1,\n // 1,\n // ).data,\n // ];\n // Get 10x10 pixels from corners, get average color from each\n const pixelDimension = 10;\n const colors = [\n ctx.getImageData(0, 0, pixelDimension, pixelDimension)\n .data,\n ctx.getImageData(\n e.target.width - pixelDimension,\n 0,\n pixelDimension,\n pixelDimension,\n ).data,\n ctx.getImageData(\n 0,\n e.target.height - pixelDimension,\n pixelDimension,\n pixelDimension,\n ).data,\n ctx.getImageData(\n e.target.width - pixelDimension,\n e.target.height - pixelDimension,\n pixelDimension,\n pixelDimension,\n ).data,\n ].map((data) => {\n let r = 0;\n let g = 0;\n let b = 0;\n let a = 0;\n for (let i = 0; i < data.length; i += 4) {\n r += data[i];\n g += data[i + 1];\n b += data[i + 2];\n a += data[i + 3];\n }\n const dataLength = data.length / 4;\n return [\n r / dataLength,\n g / dataLength,\n b / dataLength,\n a / dataLength,\n ];\n });\n const rgbColors = colors.map((color) => {\n const [r, g, b, a] = lightenRGB(color);\n return `rgba(${r}, ${g}, ${b}, ${a})`;\n });\n setHeaderCornerColors(rgbColors);\n console.log({ colors, rgbColors });\n } catch (e) {\n // Silently fail\n }\n }}\n />\n )}\n
    \n {standalone ? (\n \n {}}\n />\n \n }\n >\n
    \n \n
    \n {\n const handleWithInstance = acct.includes('@') ? `@${acct}` : `@${acct}@${instance}`;\n try {\n navigator.clipboard.writeText(handleWithInstance);\n showToast('Handle copied');\n } catch (e) {\n console.error(e);\n showToast('Unable to copy handle');\n }\n }}\n >\n \n Copy handle\n \n \n \n Go to original profile page\n \n \n \n \n View profile image\n \n \n \n View profile header\n \n \n ) : (\n \n )}\n
    \n
    \n
    \n {!!memorial && In Memoriam}\n {!!bot && (\n \n Automated\n \n )}\n {!!group && (\n \n Group\n \n )}\n {roles?.map((role) => (\n \n {role.name}\n {!!accountInstance && (\n <>\n {' '}\n {accountInstance}\n \n )}\n \n ))}\n \n
    \n {fields?.length > 0 && (\n
    \n {fields.map(({ name, value, verifiedAt }, i) => (\n \n \n {' '}\n {!!verifiedAt && (\n \n )}\n \n \n
    \n ))}\n
    \n )}\n
    \n {\n // states.showAccount = false;\n setTimeout(() => {\n states.showGenericAccounts = {\n id: 'followers',\n heading: 'Followers',\n fetchAccounts: fetchFollowers,\n instance,\n excludeRelationshipAttrs: isSelf\n ? ['followedBy']\n : [],\n blankCopy: hideCollections\n ? 'This user has chosen to not make this information available.'\n : undefined,\n };\n }, 0);\n }}\n >\n {!!familiarFollowers.length && (\n \n \n {familiarFollowers.map((follower) => (\n \n ))}\n \n \n )}\n \n {shortenNumber(followersCount)}\n {' '}\n Followers\n \n {\n // states.showAccount = false;\n setTimeout(() => {\n states.showGenericAccounts = {\n heading: 'Following',\n fetchAccounts: fetchFollowing,\n instance,\n excludeRelationshipAttrs: isSelf ? ['following'] : [],\n blankCopy: hideCollections\n ? 'This user has chosen to not make this information available.'\n : undefined,\n };\n }, 0);\n }}\n >\n \n {shortenNumber(followingCount)}\n {' '}\n Following\n
    \n \n {\n // hideAllModals();\n // }\n // }\n >\n \n {shortenNumber(statusesCount)}\n {' '}\n Posts\n \n {!!createdAt && (\n
    \n Joined{' '}\n \n
    \n )}\n
    \n
    \n {!!postingStats && (\n {\n // states.showAccount = false;\n // }}\n >\n
    \n
    \n {hasPostingStats ? (\n \n
    \n {postingStats.daysSinceLastPost < 365\n ? `Last ${postingStats.total} post${\n postingStats.total > 1 ? 's' : ''\n } in the past \n ${postingStats.daysSinceLastPost} day${\n postingStats.daysSinceLastPost > 1 ? 's' : ''\n }`\n : `\n Last ${postingStats.total} posts in the past year(s)\n `}\n
    \n \n
    \n \n {' '}\n Original\n {' '}\n \n {' '}\n Replies\n {' '}\n \n {' '}\n Boosts\n \n
    \n
    \n ) : (\n
    Post stats unavailable.
    \n )}\n
    \n \n \n )}\n {!moved && (\n
    \n
    \n \n )}\n \n
    \n \n
    \n \n )\n )}\n \n );\n}\n\nconst FAMILIAR_FOLLOWERS_LIMIT = 3;\n\nfunction RelatedActions({\n info,\n instance,\n standalone,\n authenticated,\n onRelationshipChange = () => {},\n onProfileUpdate = () => {},\n}) {\n if (!info) return null;\n const {\n masto: currentMasto,\n instance: currentInstance,\n authenticated: currentAuthenticated,\n } = api();\n const sameInstance = instance === currentInstance;\n\n const [relationshipUIState, setRelationshipUIState] = useState('default');\n const [relationship, setRelationship] = useState(null);\n\n const { id, acct, url, username, locked, lastStatusAt, note, fields, moved } =\n info;\n const accountID = useRef(id);\n\n const {\n following,\n showingReblogs,\n notifying,\n followedBy,\n blocking,\n blockedBy,\n muting,\n mutingNotifications,\n requested,\n domainBlocking,\n endorsed,\n note: privateNote,\n } = relationship || {};\n\n const [currentInfo, setCurrentInfo] = useState(null);\n const [isSelf, setIsSelf] = useState(false);\n\n const acctWithInstance = acct.includes('@') ? acct : `${acct}@${instance}`;\n\n useEffect(() => {\n if (info) {\n const currentAccount = getCurrentAccountID();\n let currentID;\n (async () => {\n if (sameInstance && authenticated) {\n currentID = id;\n } else if (!sameInstance && currentAuthenticated) {\n // Grab this account from my logged-in instance\n const acctHasInstance = info.acct.includes('@');\n try {\n const results = await currentMasto.v2.search.fetch({\n q: acctHasInstance ? info.acct : `${info.username}@${instance}`,\n type: 'accounts',\n limit: 1,\n resolve: true,\n });\n console.log('πŸ₯ Fetched account from logged-in instance', results);\n if (results.accounts.length) {\n currentID = results.accounts[0].id;\n setCurrentInfo(results.accounts[0]);\n }\n } catch (e) {\n console.error(e);\n }\n }\n\n if (!currentID) return;\n\n if (currentAccount === currentID) {\n // It's myself!\n setIsSelf(true);\n return;\n }\n\n accountID.current = currentID;\n\n // if (moved) return;\n\n setRelationshipUIState('loading');\n\n const fetchRelationships = currentMasto.v1.accounts.relationships.fetch(\n {\n id: [currentID],\n },\n );\n\n try {\n const relationships = await fetchRelationships;\n console.log('fetched relationship', relationships);\n setRelationshipUIState('default');\n\n if (relationships.length) {\n const relationship = relationships[0];\n setRelationship(relationship);\n onRelationshipChange({ relationship, currentID });\n }\n } catch (e) {\n console.error(e);\n setRelationshipUIState('error');\n }\n })();\n }\n }, [info, authenticated]);\n\n useEffect(() => {\n if (info && isSelf) {\n updateAccount(info);\n }\n }, [info, isSelf]);\n\n const loading = relationshipUIState === 'loading';\n\n const [showTranslatedBio, setShowTranslatedBio] = useState(false);\n const [showAddRemoveLists, setShowAddRemoveLists] = useState(false);\n const [showPrivateNoteModal, setShowPrivateNoteModal] = useState(false);\n const [showEditProfile, setShowEditProfile] = useState(false);\n const [lists, setLists] = useState([]);\n\n return (\n <>\n
    \n \n {followedBy ? (\n Follows you\n ) : !!lastStatusAt ? (\n \n Last post:{' '}\n \n {niceDateTime(lastStatusAt, {\n hideTime: true,\n })}\n \n \n ) : (\n \n )}\n {muting && Muted}\n {blocking && Blocked}\n {' '}\n \n {!!privateNote && (\n {\n setShowPrivateNoteModal(true);\n }}\n dir=\"auto\"\n >\n {privateNote}\n \n )}\n \n \n \n }\n onMenuChange={(e) => {\n if (following && e.open) {\n // Fetch lists that have this account\n (async () => {\n try {\n const lists = await currentMasto.v1.accounts\n .$select(accountID.current)\n .lists.list();\n console.log('fetched account lists', lists);\n setLists(lists);\n } catch (e) {\n console.error(e);\n }\n })();\n }\n }}\n >\n {currentAuthenticated && !isSelf && (\n <>\n {\n showCompose({\n draftStatus: {\n status: `@${currentInfo?.acct || acct} `,\n },\n });\n }}\n >\n \n Mention @{username}\n \n {\n setShowTranslatedBio(true);\n }}\n >\n \n Translate bio\n \n {supports('@mastodon/profile-private-note') && (\n {\n setShowPrivateNoteModal(true);\n }}\n >\n \n \n {privateNote ? 'Edit private note' : 'Add private note'}\n \n \n )}\n {following && !!relationship && (\n <>\n {\n setRelationshipUIState('loading');\n (async () => {\n try {\n const rel = await currentMasto.v1.accounts\n .$select(accountID.current)\n .follow({\n notify: !notifying,\n });\n if (rel) setRelationship(rel);\n setRelationshipUIState('default');\n showToast(\n rel.notifying\n ? `Notifications enabled for @${username}'s posts.`\n : ` Notifications disabled for @${username}'s posts.`,\n );\n } catch (e) {\n alert(e);\n setRelationshipUIState('error');\n }\n })();\n }}\n >\n \n \n {notifying\n ? 'Disable notifications'\n : 'Enable notifications'}\n \n \n {\n setRelationshipUIState('loading');\n (async () => {\n try {\n const rel = await currentMasto.v1.accounts\n .$select(accountID.current)\n .follow({\n reblogs: !showingReblogs,\n });\n if (rel) setRelationship(rel);\n setRelationshipUIState('default');\n showToast(\n rel.showingReblogs\n ? `Boosts from @${username} enabled.`\n : `Boosts from @${username} disabled.`,\n );\n } catch (e) {\n alert(e);\n setRelationshipUIState('error');\n }\n })();\n }}\n >\n \n \n {showingReblogs ? 'Disable boosts' : 'Enable boosts'}\n \n \n \n )}\n {/* Add/remove from lists is only possible if following the account */}\n {following && (\n {\n setShowAddRemoveLists(true);\n }}\n >\n \n {lists.length ? (\n <>\n \n Add/Remove from Lists\n
    \n \n {lists.map((list) => list.title).join(', ')}\n \n     \n {lists.length}\n \n ) : (\n Add/Remove from Lists\n )}\n \n )}\n \n \n )}\n {\n const handle = `@${currentInfo?.acct || acctWithInstance}`;\n try {\n navigator.clipboard.writeText(handle);\n showToast('Handle copied');\n } catch (e) {\n console.error(e);\n showToast('Unable to copy handle');\n }\n }}\n >\n \n \n Copy handle\n
    \n \n @{currentInfo?.acct || acctWithInstance}\n \n     \n \n \n \n {niceAccountURL(url)}\n \n
    \n {\n // Copy url to clipboard\n try {\n navigator.clipboard.writeText(url);\n showToast('Link copied');\n } catch (e) {\n console.error(e);\n showToast('Unable to copy link');\n }\n }}\n >\n \n Copy\n \n {navigator?.share &&\n navigator?.canShare?.({\n url,\n }) && (\n {\n try {\n navigator.share({\n url,\n });\n } catch (e) {\n console.error(e);\n alert(\"Sharing doesn't seem to work.\");\n }\n }}\n >\n \n Share…\n \n )}\n
    \n {!!relationship && (\n <>\n \n {muting ? (\n {\n setRelationshipUIState('loading');\n (async () => {\n try {\n const newRelationship = await currentMasto.v1.accounts\n .$select(currentInfo?.id || id)\n .unmute();\n console.log('unmuting', newRelationship);\n setRelationship(newRelationship);\n setRelationshipUIState('default');\n showToast(`Unmuted @${username}`);\n states.reloadGenericAccounts.id = 'mute';\n states.reloadGenericAccounts.counter++;\n } catch (e) {\n console.error(e);\n setRelationshipUIState('error');\n }\n })();\n }}\n >\n \n Unmute @{username}\n \n ) : (\n \n \n Mute @{username}…\n \n \n \n     \n \n }\n >\n
    \n {MUTE_DURATIONS.map((duration) => (\n {\n setRelationshipUIState('loading');\n (async () => {\n try {\n const newRelationship =\n await currentMasto.v1.accounts\n .$select(currentInfo?.id || id)\n .mute({\n duration,\n });\n console.log('muting', newRelationship);\n setRelationship(newRelationship);\n setRelationshipUIState('default');\n showToast(\n `Muted @${username} for ${MUTE_DURATIONS_LABELS[duration]}`,\n );\n states.reloadGenericAccounts.id = 'mute';\n states.reloadGenericAccounts.counter++;\n } catch (e) {\n console.error(e);\n setRelationshipUIState('error');\n showToast(`Unable to mute @${username}`);\n }\n })();\n }}\n >\n {MUTE_DURATIONS_LABELS[duration]}\n \n ))}\n
    \n \n )}\n {followedBy && (\n \n \n Remove @{username} from followers?\n \n }\n onClick={() => {\n setRelationshipUIState('loading');\n (async () => {\n try {\n const newRelationship = await currentMasto.v1.accounts\n .$select(currentInfo?.id || id)\n .removeFromFollowers();\n console.log(\n 'removing from followers',\n newRelationship,\n );\n setRelationship(newRelationship);\n setRelationshipUIState('default');\n showToast(`@${username} removed from followers`);\n states.reloadGenericAccounts.id = 'followers';\n states.reloadGenericAccounts.counter++;\n } catch (e) {\n console.error(e);\n setRelationshipUIState('error');\n }\n })();\n }}\n >\n \n Remove follower…\n \n )}\n \n \n Block @{username}?\n \n }\n menuItemClassName=\"danger\"\n onClick={() => {\n // if (!blocking && !confirm(`Block @${username}?`)) {\n // return;\n // }\n setRelationshipUIState('loading');\n (async () => {\n try {\n if (blocking) {\n const newRelationship = await currentMasto.v1.accounts\n .$select(currentInfo?.id || id)\n .unblock();\n console.log('unblocking', newRelationship);\n setRelationship(newRelationship);\n setRelationshipUIState('default');\n showToast(`Unblocked @${username}`);\n } else {\n const newRelationship = await currentMasto.v1.accounts\n .$select(currentInfo?.id || id)\n .block();\n console.log('blocking', newRelationship);\n setRelationship(newRelationship);\n setRelationshipUIState('default');\n showToast(`Blocked @${username}`);\n }\n states.reloadGenericAccounts.id = 'block';\n states.reloadGenericAccounts.counter++;\n } catch (e) {\n console.error(e);\n setRelationshipUIState('error');\n if (blocking) {\n showToast(`Unable to unblock @${username}`);\n } else {\n showToast(`Unable to block @${username}`);\n }\n }\n })();\n }}\n >\n {blocking ? (\n <>\n \n Unblock @{username}\n \n ) : (\n <>\n \n Block @{username}…\n \n )}\n \n {\n states.showReportModal = {\n account: currentInfo || info,\n };\n }}\n >\n \n Report @{username}…\n \n \n )}\n {currentAuthenticated &&\n isSelf &&\n standalone &&\n supports('@mastodon/profile-edit') && (\n <>\n \n {\n setShowEditProfile(true);\n }}\n >\n \n Edit profile\n \n \n )}\n {import.meta.env.DEV && currentAuthenticated && isSelf && (\n <>\n \n {\n const relationships =\n await currentMasto.v1.accounts.relationships.fetch({\n id: [accountID.current],\n });\n const { note } = relationships[0] || {};\n if (note) {\n alert(note);\n console.log(note);\n }\n }}\n >\n \n See note\n \n \n )}\n \n {!relationship && relationshipUIState === 'loading' && (\n \n )}\n {!!relationship && !moved && (\n \n {requested\n ? 'Withdraw follow request?'\n : `Unfollow @${info.acct || info.username}?`}\n     \n }\n menuItemClassName=\"danger\"\n align=\"end\"\n disabled={loading}\n onClick={() => {\n setRelationshipUIState('loading');\n (async () => {\n try {\n let newRelationship;\n\n if (following || requested) {\n // const yes = confirm(\n // requested\n // ? 'Withdraw follow request?'\n // : `Unfollow @${info.acct || info.username}?`,\n // );\n\n // if (yes) {\n newRelationship = await currentMasto.v1.accounts\n .$select(accountID.current)\n .unfollow();\n // }\n } else {\n newRelationship = await currentMasto.v1.accounts\n .$select(accountID.current)\n .follow();\n }\n\n if (newRelationship) setRelationship(newRelationship);\n setRelationshipUIState('default');\n } catch (e) {\n alert(e);\n setRelationshipUIState('error');\n }\n })();\n }}\n >\n \n {following ? (\n <>\n Following\n Unfollow…\n \n ) : requested ? (\n <>\n Requested\n Withdraw…\n \n ) : locked ? (\n <>\n Follow\n \n ) : (\n 'Follow'\n )}\n \n \n )}\n \n
    \n {!!showTranslatedBio && (\n {\n setShowTranslatedBio(false);\n }}\n >\n setShowTranslatedBio(false)}\n />\n \n )}\n {!!showAddRemoveLists && (\n {\n setShowAddRemoveLists(false);\n }}\n >\n setShowAddRemoveLists(false)}\n />\n \n )}\n {!!showPrivateNoteModal && (\n {\n setShowPrivateNoteModal(false);\n }}\n >\n {\n setRelationship(relationship);\n // onRelationshipChange({ relationship, currentID: accountID.current });\n }}\n onClose={() => setShowPrivateNoteModal(false)}\n />\n \n )}\n {!!showEditProfile && (\n {\n setShowEditProfile(false);\n }}\n >\n {\n setShowEditProfile(false);\n if (state === 'success' && account) {\n onProfileUpdate(account);\n }\n }}\n />\n \n )}\n \n );\n}\n\n// Apply more alpha if high luminence\nfunction lightenRGB([r, g, b]) {\n const luminence = 0.2126 * r + 0.7152 * g + 0.0722 * b;\n console.log('luminence', luminence);\n let alpha;\n if (luminence >= 220) {\n alpha = 1;\n } else if (luminence <= 50) {\n alpha = 0.1;\n } else {\n alpha = luminence / 255;\n }\n alpha = Math.min(1, alpha);\n return [r, g, b, alpha];\n}\n\nfunction niceAccountURL(url) {\n if (!url) return;\n const urlObj = URL.parse(url);\n const { host, pathname } = urlObj;\n const path = pathname.replace(/\\/$/, '').replace(/^\\//, '');\n return (\n <>\n {punycode.toUnicode(host)}/\n \n {path}\n \n );\n}\n\nfunction TranslatedBioSheet({ note, fields, onClose }) {\n const fieldsText =\n fields\n ?.map(({ name, value }) => `${name}\\n${getHTMLText(value)}`)\n .join('\\n\\n') || '';\n\n const text = getHTMLText(note) + (fieldsText ? `\\n\\n${fieldsText}` : '');\n\n return (\n
    \n {!!onClose && (\n \n )}\n
    \n

    Translated Bio

    \n
    \n
    \n \n {text}\n

    \n \n
    \n
    \n );\n}\n\nfunction AddRemoveListsSheet({ accountID, onClose }) {\n const { masto } = api();\n const [uiState, setUIState] = useState('default');\n const [lists, setLists] = useState([]);\n const [listsContainingAccount, setListsContainingAccount] = useState([]);\n const [reloadCount, reload] = useReducer((c) => c + 1, 0);\n\n useEffect(() => {\n setUIState('loading');\n (async () => {\n try {\n const lists = await getLists();\n setLists(lists);\n const listsContainingAccount = await masto.v1.accounts\n .$select(accountID)\n .lists.list();\n console.log({ lists, listsContainingAccount });\n setListsContainingAccount(listsContainingAccount);\n setUIState('default');\n } catch (e) {\n console.error(e);\n setUIState('error');\n }\n })();\n }, [reloadCount]);\n\n const [showListAddEditModal, setShowListAddEditModal] = useState(false);\n\n return (\n
    \n {!!onClose && (\n \n )}\n
    \n

    Add/Remove from Lists

    \n
    \n
    \n {lists.length > 0 ? (\n
      \n {lists.map((list) => {\n const inList = listsContainingAccount.some(\n (l) => l.id === list.id,\n );\n return (\n
    • \n {\n setUIState('loading');\n (async () => {\n try {\n if (inList) {\n await masto.v1.lists\n .$select(list.id)\n .accounts.remove({\n accountIds: [accountID],\n });\n } else {\n await masto.v1.lists\n .$select(list.id)\n .accounts.create({\n accountIds: [accountID],\n });\n }\n // setUIState('default');\n reload();\n } catch (e) {\n console.error(e);\n setUIState('error');\n alert(\n inList\n ? 'Unable to remove from list.'\n : 'Unable to add to list.',\n );\n }\n })();\n }}\n >\n \n {list.title}\n \n
      • \n );\n })}\n
    \n ) : uiState === 'loading' ? (\n

    \n \n

    \n ) : uiState === 'error' ? (\n

    Unable to load lists.

    \n ) : (\n

    No lists.

    \n )}\n setShowListAddEditModal(true)}\n disabled={uiState !== 'default'}\n >\n New list\n \n
    \n {showListAddEditModal && (\n {\n if (e.target === e.currentTarget) {\n setShowListAddEditModal(false);\n }\n }}\n >\n {\n if (result.state === 'success') {\n reload();\n }\n setShowListAddEditModal(false);\n }}\n />\n \n )}\n
    \n );\n}\n\nfunction PrivateNoteSheet({\n account,\n note: initialNote,\n onRelationshipChange = () => {},\n onClose = () => {},\n}) {\n const { masto } = api();\n const [uiState, setUIState] = useState('default');\n const textareaRef = useRef(null);\n\n useEffect(() => {\n let timer;\n if (textareaRef.current && !initialNote) {\n timer = setTimeout(() => {\n textareaRef.current.focus?.();\n }, 100);\n }\n return () => {\n clearTimeout(timer);\n };\n }, []);\n\n return (\n
    \n {!!onClose && (\n \n )}\n
    \n Private note about @{account?.username || account?.acct}\n
    \n
    \n {\n e.preventDefault();\n const formData = new FormData(e.target);\n const note = formData.get('note');\n if (note?.trim() !== initialNote?.trim()) {\n setUIState('loading');\n (async () => {\n try {\n const newRelationship = await masto.v1.accounts\n .$select(account?.id)\n .note.create({\n comment: note,\n });\n console.log('updated relationship', newRelationship);\n setUIState('default');\n onRelationshipChange(newRelationship);\n onClose();\n } catch (e) {\n console.error(e);\n setUIState('error');\n alert(e?.message || 'Unable to update private note.');\n }\n })();\n }\n }}\n >\n \n {initialNote}\n \n
    \n {\n onClose?.();\n }}\n >\n Cancel\n \n \n \n
    \n \n
    \n
    \n );\n}\n\nfunction EditProfileSheet({ onClose = () => {} }) {\n const { masto } = api();\n const [uiState, setUIState] = useState('loading');\n const [account, setAccount] = 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 } = account || {};\n const { note, fields } = source || {};\n const fieldsAttributesRef = useRef(null);\n\n return (\n
    \n {!!onClose && (\n \n )}\n
    \n Edit profile\n
    \n
    \n {uiState === 'loading' ? (\n

    \n \n

    \n ) : (\n {\n e.preventDefault();\n const formData = new FormData(e.target);\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 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 || 'Unable to update profile.');\n }\n })();\n }}\n >\n

    \n \n

    \n

    \n \n

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

    Extra fields

    \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
    LabelContent
    \n
    \n {\n onClose?.();\n }}\n >\n Cancel\n \n \n
    \n \n )}\n
    \n
    \n );\n}\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 />\n \n \n );\n}\n\nfunction AccountHandleInfo({ acct, instance }) {\n // acct = username or username@server\n let [username, server] = acct.split('@');\n if (!server) server = instance;\n return (\n
    \n \n {username}\n @\n {server}\n \n
    \n \n username\n {' '}\n \n server domain name\n \n
    \n
    \n );\n}\n\nexport default AccountInfo;\n","import { useEffect } from 'preact/hooks';\n\nimport { api } from '../utils/api';\nimport states from '../utils/states';\nimport useLocationChange from '../utils/useLocationChange';\n\nimport AccountInfo from './account-info';\nimport Icon from './icon';\n\nfunction AccountSheet({ account, instance: propInstance, onClose }) {\n const { masto, instance, authenticated } = api({ instance: propInstance });\n const isString = typeof account === 'string';\n\n useEffect(() => {\n if (!isString) {\n states.accounts[`${account.id}@${instance}`] = account;\n }\n }, [account]);\n\n useLocationChange(onClose);\n\n return (\n {\n // const accountBlock = e.target.closest('.account-block');\n // if (accountBlock) {\n // onClose({\n // destination: 'account-statuses',\n // });\n // }\n // }}\n >\n {!!onClose && (\n \n )}\n {\n if (isString) {\n try {\n const info = await masto.v1.accounts.lookup({\n acct: account,\n skip_webfinger: false,\n });\n return info;\n } catch (e) {\n const result = await masto.v2.search.fetch({\n q: account,\n type: 'accounts',\n limit: 1,\n resolve: authenticated,\n });\n if (result.accounts.length) {\n return result.accounts[0];\n } else if (/https?:\\/\\/[^/]+\\/@/.test(account)) {\n const accountURL = URL.parse(account);\n const { hostname, pathname } = accountURL;\n const acct =\n pathname.replace(/^\\//, '').replace(/\\/$/, '') +\n '@' +\n hostname;\n const result = await masto.v2.search.fetch({\n q: acct,\n type: 'accounts',\n limit: 1,\n resolve: authenticated,\n });\n if (result.accounts.length) {\n return result.accounts[0];\n }\n }\n }\n } else {\n return account;\n }\n }}\n />\n \n );\n}\n\nexport default AccountSheet;\n","import './drafts.css';\n\nimport { useEffect, useMemo, useReducer, useState } from 'react';\n\nimport { api } from '../utils/api';\nimport db from '../utils/db';\nimport niceDateTime from '../utils/nice-date-time';\nimport states from '../utils/states';\nimport { getCurrentAccountNS } from '../utils/store-utils';\n\nimport Icon from './icon';\nimport Loader from './loader';\nimport MenuConfirm from './menu-confirm';\n\nfunction Drafts({ onClose }) {\n const { masto } = api();\n const [uiState, setUIState] = useState('default');\n const [drafts, setDrafts] = useState([]);\n const [reloadCount, reload] = useReducer((c) => c + 1, 0);\n\n useEffect(() => {\n setUIState('loading');\n (async () => {\n try {\n const keys = await db.drafts.keys();\n if (keys.length) {\n const ns = getCurrentAccountNS();\n const ownKeys = keys.filter((key) => key.startsWith(ns));\n if (ownKeys.length) {\n const drafts = await db.drafts.getMany(ownKeys);\n drafts.sort(\n (a, b) =>\n new Date(b.updatedAt).getTime() -\n new Date(a.updatedAt).getTime(),\n );\n setDrafts(drafts);\n } else {\n setDrafts([]);\n }\n } else {\n setDrafts([]);\n }\n setUIState('default');\n } catch (e) {\n console.error(e);\n setUIState('error');\n }\n })();\n }, [reloadCount]);\n\n const hasDrafts = drafts?.length > 0;\n\n return (\n
    \n {!!onClose && (\n \n )}\n
    \n

    \n Unsent drafts

    \n {hasDrafts && (\n
    \n Looks like you have unsent drafts. Let's continue where you left\n off.\n
    \n )}\n
    \n
    \n {hasDrafts ? (\n <>\n
      \n {drafts.map((draft) => {\n const { updatedAt, key, draftStatus, replyTo } = draft;\n const updatedAtDate = new Date(updatedAt);\n return (\n
    • \n
      \n \n {' '}\n \n \n Delete this draft?}\n menuItemClassName=\"danger\"\n align=\"end\"\n disabled={uiState === 'loading'}\n onClick={() => {\n (async () => {\n try {\n // const yes = confirm('Delete this draft?');\n // if (yes) {\n await db.drafts.del(key);\n reload();\n // }\n } catch (e) {\n alert('Error deleting draft! Please try again.');\n }\n })();\n }}\n >\n \n Delete…\n \n \n
      \n {\n // console.log({ draftStatus });\n let replyToStatus;\n if (replyTo) {\n setUIState('loading');\n try {\n replyToStatus = await masto.v1.statuses\n .$select(replyTo.id)\n .fetch();\n } catch (e) {\n console.error(e);\n alert('Error fetching reply-to status!');\n setUIState('default');\n return;\n }\n setUIState('default');\n }\n window.__COMPOSE__ = {\n draftStatus,\n replyToStatus,\n };\n states.showCompose = true;\n states.showDrafts = false;\n }}\n >\n \n \n
      • \n );\n })}\n
    \n {drafts.length > 1 && (\n

    \n Delete all drafts?}\n menuItemClassName=\"danger\"\n disabled={uiState === 'loading'}\n onClick={() => {\n (async () => {\n // const yes = confirm('Delete all drafts?');\n // if (yes) {\n setUIState('loading');\n try {\n await db.drafts.delMany(\n drafts.map((draft) => draft.key),\n );\n setUIState('default');\n reload();\n } catch (e) {\n console.error(e);\n alert('Error deleting drafts! Please try again.');\n setUIState('error');\n }\n // }\n })();\n }}\n >\n \n Delete all…\n \n \n

    \n )}\n \n ) : (\n

    No drafts found.

    \n )}\n
    \n
    \n );\n}\n\nfunction MiniDraft({ draft }) {\n const { draftStatus, replyTo } = draft;\n const { status, spoilerText, poll, mediaAttachments } = draftStatus;\n const hasPoll = poll?.options?.length > 0;\n const hasMedia = mediaAttachments?.length > 0;\n const hasPollOrMedia = hasPoll || hasMedia;\n const firstImageMedia = useMemo(() => {\n if (!hasMedia) return;\n const image = mediaAttachments.find((media) => /image/.test(media.type));\n if (!image) return;\n const { file } = image;\n const objectURL = URL.createObjectURL(file);\n return objectURL;\n }, [hasMedia, mediaAttachments]);\n return (\n <>\n
    \n {hasPollOrMedia && (\n \n {hasPoll && }\n {hasMedia && (\n \n {' '}\n {mediaAttachments?.length}\n \n )}\n
    \n )}\n
    \n {!!spoilerText &&
    {spoilerText}
    }\n {!!status &&
    {status}
    }\n
    \n \n \n );\n}\n\nexport default Drafts;\n","import './embed-modal.css';\n\nimport Icon from './icon';\n\nfunction EmbedModal({ html, url, width, height, onClose = () => {} }) {\n return (\n
    \n
    \n \n {url && (\n \n Open link \n \n )}\n
    \n \n
    \n );\n}\n\nexport default EmbedModal;\n","import './generic-accounts.css';\n\nimport { useEffect, useRef, useState } from 'preact/hooks';\nimport { InView } from 'react-intersection-observer';\nimport { useSnapshot } from 'valtio';\n\nimport { api } from '../utils/api';\nimport { fetchRelationships } from '../utils/relationships';\nimport states from '../utils/states';\nimport useLocationChange from '../utils/useLocationChange';\n\nimport AccountBlock from './account-block';\nimport Icon from './icon';\nimport Link from './link';\nimport Loader from './loader';\nimport Status from './status';\n\nexport default function GenericAccounts({\n instance,\n excludeRelationshipAttrs = [],\n postID,\n onClose = () => {},\n blankCopy = 'Nothing to show',\n}) {\n const { masto, instance: currentInstance } = api();\n const isCurrentInstance = instance ? instance === currentInstance : true;\n const snapStates = useSnapshot(states);\n ``;\n const [uiState, setUIState] = useState('default');\n const [accounts, setAccounts] = useState([]);\n const [showMore, setShowMore] = useState(false);\n\n useLocationChange(onClose);\n\n if (!snapStates.showGenericAccounts) {\n return null;\n }\n\n const {\n id,\n heading,\n fetchAccounts,\n accounts: staticAccounts,\n showReactions,\n } = snapStates.showGenericAccounts;\n\n const [relationshipsMap, setRelationshipsMap] = useState({});\n\n const loadRelationships = async (accounts) => {\n if (!accounts?.length) return;\n if (!isCurrentInstance) return;\n const relationships = await fetchRelationships(accounts, relationshipsMap);\n if (relationships) {\n setRelationshipsMap({\n ...relationshipsMap,\n ...relationships,\n });\n }\n };\n\n const loadAccounts = (firstLoad) => {\n if (!fetchAccounts) return;\n if (firstLoad) setAccounts([]);\n setUIState('loading');\n (async () => {\n try {\n const { done, value } = await fetchAccounts(firstLoad);\n if (Array.isArray(value)) {\n if (firstLoad) {\n const accounts = [];\n for (let i = 0; i < value.length; i++) {\n const account = value[i];\n const theAccount = accounts.find(\n (a, j) => a.id === account.id && i !== j,\n );\n if (!theAccount) {\n accounts.push({\n _types: [],\n ...account,\n });\n } else {\n theAccount._types.push(...account._types);\n }\n }\n setAccounts(accounts);\n } else {\n // setAccounts((prev) => [...prev, ...value]);\n // Merge accounts by id and _types\n setAccounts((prev) => {\n const newAccounts = prev;\n for (const account of value) {\n const theAccount = newAccounts.find((a) => a.id === account.id);\n if (!theAccount) {\n newAccounts.push(account);\n } else {\n theAccount._types.push(...account._types);\n }\n }\n return newAccounts;\n });\n }\n setShowMore(!done);\n\n loadRelationships(value);\n } else {\n setShowMore(false);\n }\n setUIState('default');\n } catch (e) {\n console.error(e);\n setUIState('error');\n }\n })();\n };\n\n const firstLoad = useRef(true);\n useEffect(() => {\n if (staticAccounts?.length > 0) {\n setAccounts(staticAccounts);\n loadRelationships(staticAccounts);\n } else {\n loadAccounts(true);\n firstLoad.current = false;\n }\n }, [staticAccounts, fetchAccounts]);\n\n useEffect(() => {\n if (firstLoad.current) return;\n // reloadGenericAccounts contains value like {id: 'mute', counter: 1}\n // We only need to reload if the id matches\n if (snapStates.reloadGenericAccounts?.id === id) {\n loadAccounts(true);\n }\n }, [snapStates.reloadGenericAccounts.counter]);\n\n const post = states.statuses[postID];\n\n return (\n
    \n \n
    \n

    {heading || 'Accounts'}

    \n
    \n
    \n {post && (\n \n \n \n )}\n {accounts.length > 0 ? (\n <>\n
      \n {accounts.map((account) => {\n const relationship = relationshipsMap[account.id];\n const key = `${account.id}-${account._types?.length || ''}`;\n return (\n
    • \n {showReactions && account._types?.length > 0 && (\n
      \n {account._types.map((type) => (\n \n ))}\n
      \n )}\n
      \n \n
      \n
      • \n );\n })}\n
    \n {uiState === 'default' ? (\n showMore ? (\n {\n if (inView) {\n loadAccounts();\n }\n }}\n >\n loadAccounts()}\n >\n Show more…\n \n \n ) : (\n

    The end.

    \n )\n ) : (\n uiState === 'loading' && (\n

    \n \n

    \n )\n )}\n \n ) : uiState === 'loading' ? (\n

    \n \n

    \n ) : uiState === 'error' ? (\n

    Error loading accounts

    \n ) : (\n

    {blankCopy}

    \n )}\n
    \n
    \n );\n}\n","import { Menu, MenuItem } from '@szhsin/react-menu';\nimport { useState } from 'preact/hooks';\nimport { useSnapshot } from 'valtio';\n\nimport getTranslateTargetLanguage from '../utils/get-translate-target-language';\nimport localeMatch from '../utils/locale-match';\nimport { speak, supportsTTS } from '../utils/speech';\nimport states from '../utils/states';\n\nimport Icon from './icon';\nimport Menu2 from './menu2';\nimport TranslationBlock from './translation-block';\n\nexport default function MediaAltModal({ alt, lang, onClose }) {\n const snapStates = useSnapshot(states);\n const [forceTranslate, setForceTranslate] = useState(false);\n const targetLanguage = getTranslateTargetLanguage(true);\n const contentTranslationHideLanguages =\n snapStates.settings.contentTranslationHideLanguages || [];\n const differentLanguage =\n !!lang &&\n lang !== targetLanguage &&\n !localeMatch([lang], [targetLanguage]) &&\n !contentTranslationHideLanguages.find(\n (l) => lang === l || localeMatch([lang], [l]),\n );\n\n return (\n
    \n {!!onClose && (\n \n )}\n
    \n

    Media description

    \n
    \n \n \n \n }\n >\n {\n setForceTranslate(true);\n }}\n >\n \n Translate\n \n {supportsTTS && (\n {\n speak(alt, lang);\n }}\n >\n \n Speak\n \n )}\n \n
    \n
    \n
    \n \n {alt}\n

    \n {(differentLanguage || forceTranslate) && (\n \n )}\n
    \n
    \n );\n}\n","// https://gist.github.com/earthbound19/e7fe15fdf8ca3ef814750a61bc75b5ce\nfunction clamp(value, min, max) {\n return Math.max(Math.min(value, max), min);\n}\n\nconst gammaToLinear = (c) =>\n c >= 0.04045 ? Math.pow((c + 0.055) / 1.055, 2.4) : c / 12.92;\nconst linearToGamma = (c) =>\n c >= 0.0031308 ? 1.055 * Math.pow(c, 1 / 2.4) - 0.055 : 12.92 * c;\n\nexport function rgb2oklab([r, g, b]) {\n r = gammaToLinear(r / 255);\n g = gammaToLinear(g / 255);\n b = gammaToLinear(b / 255);\n var l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;\n var m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;\n var s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;\n l = Math.cbrt(l);\n m = Math.cbrt(m);\n s = Math.cbrt(s);\n return [\n l * +0.2104542553 + m * +0.793617785 + s * -0.0040720468,\n l * +1.9779984951 + m * -2.428592205 + s * +0.4505937099,\n l * +0.0259040371 + m * +0.7827717662 + s * -0.808675766,\n ];\n}\n\nexport function oklab2rgb([L, a, b]) {\n var l = L + a * +0.3963377774 + b * +0.2158037573;\n var m = L + a * -0.1055613458 + b * -0.0638541728;\n var s = L + a * -0.0894841775 + b * -1.291485548;\n // The ** operator here cubes; same as l_*l_*l_ in the C++ example:\n l = l ** 3;\n m = m ** 3;\n s = s ** 3;\n var r = l * +4.0767416621 + m * -3.3077115913 + s * +0.2309699292;\n var g = l * -1.2684380046 + m * +2.6097574011 + s * -0.3413193965;\n var b = l * -0.0041960863 + m * -0.7034186147 + s * +1.707614701;\n // Convert linear RGB values returned from oklab math to sRGB for our use before returning them:\n r = 255 * linearToGamma(r);\n g = 255 * linearToGamma(g);\n b = 255 * linearToGamma(b);\n // OPTION: clamp r g and b values to the range 0-255; but if you use the values immediately to draw, JavaScript clamps them on use:\n r = clamp(r, 0, 255);\n g = clamp(g, 0, 255);\n b = clamp(b, 0, 255);\n // OPTION: round the values. May not be necessary if you use them immediately for rendering in JavaScript, as JavaScript (also) discards decimals on render:\n r = Math.round(r);\n g = Math.round(g);\n b = Math.round(b);\n return [r, g, b];\n}\n","import { MenuDivider, MenuItem } from '@szhsin/react-menu';\nimport { getBlurHashAverageColor } from 'fast-blurhash';\nimport {\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from 'preact/hooks';\nimport { useHotkeys } from 'react-hotkeys-hook';\n\nimport { oklab2rgb, rgb2oklab } from '../utils/color-utils';\nimport showToast from '../utils/show-toast';\nimport states from '../utils/states';\n\nimport Icon from './icon';\nimport Link from './link';\nimport Media from './media';\nimport MenuLink from './menu-link';\nimport Menu2 from './menu2';\n\nconst { PHANPY_IMG_ALT_API_URL: IMG_ALT_API_URL } = import.meta.env;\n\nfunction MediaModal({\n mediaAttachments,\n statusID,\n instance,\n lang,\n index = 0,\n onClose = () => {},\n}) {\n const [uiState, setUIState] = useState('default');\n const carouselRef = useRef(null);\n\n const [currentIndex, setCurrentIndex] = useState(index);\n const carouselFocusItem = useRef(null);\n useLayoutEffect(() => {\n carouselFocusItem.current?.scrollIntoView();\n\n // history.pushState({ mediaModal: true }, '');\n // const handlePopState = (e) => {\n // if (e.state?.mediaModal) {\n // onClose();\n // }\n // };\n // window.addEventListener('popstate', handlePopState);\n // return () => {\n // window.removeEventListener('popstate', handlePopState);\n // };\n }, []);\n const prevStatusID = useRef(statusID);\n useEffect(() => {\n const scrollLeft = index * carouselRef.current.clientWidth;\n const differentStatusID = prevStatusID.current !== statusID;\n if (differentStatusID) prevStatusID.current = statusID;\n carouselRef.current.scrollTo({\n left: scrollLeft,\n behavior: differentStatusID ? 'auto' : 'smooth',\n });\n carouselRef.current.focus();\n }, [index, statusID]);\n\n const [showControls, setShowControls] = useState(true);\n\n useEffect(() => {\n let handleSwipe = () => {\n onClose();\n };\n if (carouselRef.current) {\n carouselRef.current.addEventListener('swiped-down', handleSwipe);\n }\n return () => {\n if (carouselRef.current) {\n carouselRef.current.removeEventListener('swiped-down', handleSwipe);\n }\n };\n }, []);\n\n useHotkeys(\n 'esc',\n onClose,\n {\n ignoreEventWhen: (e) => {\n const hasModal = !!document.querySelector('#modal-container > *');\n return hasModal;\n },\n },\n [onClose],\n );\n\n useEffect(() => {\n let handleScroll = () => {\n const { clientWidth, scrollLeft } = carouselRef.current;\n const index = Math.round(scrollLeft / clientWidth);\n setCurrentIndex(index);\n };\n if (carouselRef.current) {\n carouselRef.current.addEventListener('scroll', handleScroll, {\n passive: true,\n });\n }\n return () => {\n if (carouselRef.current) {\n carouselRef.current.removeEventListener('scroll', handleScroll);\n }\n };\n }, []);\n\n useEffect(() => {\n let timer = setTimeout(() => {\n carouselRef.current?.focus?.();\n }, 100);\n return () => clearTimeout(timer);\n }, []);\n\n const mediaAccentColors = useMemo(() => {\n return mediaAttachments?.map((media) => {\n const { blurhash } = media;\n if (blurhash) {\n const averageColor = getBlurHashAverageColor(blurhash);\n const labAverageColor = rgb2oklab(averageColor);\n return oklab2rgb([0.6, labAverageColor[1], labAverageColor[2]]);\n }\n return null;\n });\n }, [mediaAttachments]);\n const mediaAccentGradient = useMemo(() => {\n const gap = 5;\n const range = 100 / mediaAccentColors.length;\n return (\n mediaAccentColors\n ?.map((color, i) => {\n const start = i * range + gap;\n const end = (i + 1) * range - gap;\n if (color) {\n return `\n rgba(${color?.join(',')}, 0.4) ${start}%,\n rgba(${color?.join(',')}, 0.4) ${end}%\n `;\n }\n\n return `\n transparent ${start}%,\n transparent ${end}%\n `;\n })\n ?.join(', ') || 'transparent'\n );\n }, [mediaAccentColors]);\n\n let toastRef = useRef(null);\n useEffect(() => {\n return () => {\n toastRef.current?.hideToast?.();\n };\n }, []);\n\n return (\n \n {\n if (\n e.target.classList.contains('carousel-item') ||\n e.target.classList.contains('media') ||\n e.target.classList.contains('media-zoom')\n ) {\n onClose();\n }\n }}\n style={\n mediaAttachments.length > 1\n ? {\n backgroundAttachment: 'local',\n backgroundImage: `linear-gradient(\n to right, ${mediaAccentGradient})`,\n }\n : {}\n }\n >\n {mediaAttachments?.map((media, i) => {\n const accentColor =\n mediaAttachments.length === 1 ? mediaAccentColors[i] : null;\n return (\n {\n // console.log(e);\n // if (e.target !== e.currentTarget) {\n // setShowControls(!showControls);\n // }\n if (!e.target.classList.contains('media')) {\n setShowControls(!showControls);\n }\n }}\n >\n {!!media.description && (\n