You may close this page now.
\n\n
\n {attachment.description || No description}\n
\nError loading accounts
\nError loading custom emojis
\n{emoji.shortcode}\n \n )}\n \n );\n});\n\nconst GIFS_PER_PAGE = 20;\nfunction GIFPickerModal({ onClose = () => {}, onSelect = () => {} }) {\n const [uiState, setUIState] = useState('default');\n const [results, setResults] = useState([]);\n const formRef = useRef(null);\n const qRef = useRef(null);\n const currentOffset = useRef(0);\n const scrollableRef = useRef(null);\n\n function fetchGIFs({ offset }) {\n console.log('fetchGIFs', { offset });\n if (!qRef.current?.value) return;\n setUIState('loading');\n scrollableRef.current?.scrollTo?.({\n top: 0,\n left: 0,\n behavior: 'smooth',\n });\n (async () => {\n try {\n const query = {\n api_key: GIPHY_API_KEY,\n q: qRef.current.value,\n rating: 'g',\n limit: GIFS_PER_PAGE,\n bundle: 'messaging_non_clips',\n offset,\n };\n const response = await fetch(\n 'https://api.giphy.com/v1/gifs/search?' + new URLSearchParams(query),\n {\n referrerPolicy: 'no-referrer',\n },\n ).then((r) => r.json());\n currentOffset.current = response.pagination?.offset || 0;\n setResults(response);\n setUIState('results');\n } catch (e) {\n setUIState('error');\n console.error(e);\n }\n })();\n }\n\n useEffect(() => {\n qRef.current?.focus();\n }, []);\n\n const debouncedOnInput = useDebouncedCallback(() => {\n fetchGIFs({ offset: 0 });\n }, 1000);\n\n return (\n Type to search GIFs
\n\n {results.pagination?.offset > 0 && (\n
No results
\nError loading GIFs
\n| {action} | \n{keys} | \n
|---|
\n \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 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 \n Note: This feature uses external translation services,\n powered by{' '}\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 {WEBSITE && (\n <>\n Site:{' '}\n {WEBSITE.replace(/https?:\\/\\//g, '').replace(/\\/$/, '')}\n
\n \n )}\n Version:{' '}\n
\n Push permission was not granted since your last login. You'll\n need to{' '}\n \n log in again to grant push permission\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 (\nUnable to load account.
\n\n
███████ ████ ████
\n████ ████████ ██████ █████████ ████ ██
\n\n {displayName} has indicated that their new account is\n now:\n
\n\n
Unable to load lists.
\n ) : (\nNo lists.
\n )}\n\n
\n \n
\n\n \n
\n {/* Table for fields; name and values are in fields, min 4 rows */}\nExtra fields
\n| Label | \nContent | \n
|---|
\n
No drafts found.
\n )}\nThe end.
\n )\n ) : (\n uiState === 'loading' && (\n\n
\n
Error loading accounts
\n ) : (\n{blankCopy}
\n )}\n\n {post\n ? `What's the issue with this post?`\n : `What's the issue with this profile?`}\n
\n\n \n
\nSpecify a list of shortcuts that'll appear as:
\n\n {snapStates.settings.shortcutsViewMode === 'multi-column'\n ? 'No columns yet. Tap on the Add column button.'\n : 'No shortcuts yet. Tap on the Add shortcut button.'}\n
\n\n Not sure what to add?\n
\n Try adding{' '}\n
\n {shortcuts.length >= SHORTCUTS_LIMIT &&\n (snapStates.settings.shortcutsViewMode === 'multi-column'\n ? `Max ${SHORTCUTS_LIMIT} columns`\n : `Max ${SHORTCUTS_LIMIT} shortcuts`)}\n
\n\n \n
\n {TYPE_PARAMS[currentType]?.map?.(\n ({ text, name, type, placeholder, pattern, notRequired }) => {\n if (currentType === 'list') {\n return (\n\n \n
\n );\n }\n\n return (\n\n \n
\n );\n },\n )}\n {!!FORM_NOTES[currentType] && (\n\n
\n {parsedImportShortcutStr.length} shortcut\n {parsedImportShortcutStr.length > 1 ? 's' : ''}{' '}\n \n ({importShortcutStr.length} characters)\n \n
\n\n * Exists in current shortcuts\n
\n \n ⚠️ List may not work if it's from a different account.\n \n
\n ⚠️ Invalid settings format\n
\n )}\n\n {hasCurrentSettings && (\n <>\n
\n
\n
\n {!/poll|update/i.test(type) && (\n <>\n {_accounts?.length > 1 ? (\n <>\n \n \n {shortenNumber(_accounts.length)}\n {' '}\n people\n {' '}\n \n ) : (\n account && (\n <>\n
\n {_accounts.slice(0, AVATARS_LIMIT).map((account) => (\n
This notification is from your other account.
\n )}\n{query}\n \n ),\n to: `/search?q=${encodeURIComponent(query)}&type=statuses`,\n hidden: /^https?:/.test(query),\n top: /\\s/.test(query),\n icon: 'document',\n queryType: 'statuses',\n },\n {\n label: (\n <>\n Posts tagged with #{query.replace(/^#/, '')}\n \n ),\n to: `/${instance}/t/${query.replace(/^#/, '')}`,\n hidden:\n /^@/.test(query) || /^https?:/.test(query) || /\\s/.test(query),\n top: /^#/.test(query),\n type: 'link',\n icon: 'hashtag',\n queryType: 'hashtags',\n },\n {\n label: (\n <>\n Look up {query}\n \n ),\n to: `/${query}`,\n hidden: !/^https?:/.test(query),\n top: /^https?:/.test(query),\n type: 'link',\n },\n {\n label: (\n <>\n Accounts with
{query}\n \n ),\n to: `/search?q=${encodeURIComponent(query)}&type=accounts`,\n icon: 'group',\n queryType: 'accounts',\n },\n ]\n .sort((a, b) => {\n if (type) {\n if (a.queryType === type) return -1;\n if (b.queryType === type) return 1;\n }\n if (a.top && !b.top) return -1;\n if (!a.top && b.top) return 1;\n return 0;\n })\n .filter(({ hidden }) => !hidden)\n .map(({ label, to, icon, type }, i) => (\n
The end.
\n ))}\n \n ) : uiState === 'loading' ? (\n{emptyText}
\n )}\n {uiState === 'error' && (\n\n {errorText}\n
\n
\n \n
\n \n
\n