import './shortcuts-settings.css';
import { useEffect, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
import { api } from '../utils/api';
import states from '../utils/states';
import AsyncText from './AsyncText';
import Icon from './icon';
const TYPES = [
'following',
'notifications',
'list',
'public',
'search',
// NOTE: Hide for now, can't think of a good way to handle this
// 'account-statuses',
'bookmarks',
'favourites',
'hashtag',
];
const TYPE_TEXT = {
following: 'Home',
notifications: 'Notifications',
list: 'List',
public: 'Public',
search: 'Search',
'account-statuses': 'Account',
bookmarks: 'Bookmarks',
favourites: 'Favourites',
hashtag: 'Hashtag',
};
const TYPE_PARAMS = {
list: [
{
text: 'List ID',
name: 'id',
},
],
public: [
{
text: 'Local only',
name: 'local',
type: 'checkbox',
},
{
text: 'Instance',
name: 'instance',
type: 'text',
placeholder: 'e.g. mastodon.social',
},
],
search: [
{
text: 'Search term',
name: 'query',
type: 'text',
},
],
'account-statuses': [
{
text: '@',
name: 'id',
type: 'text',
placeholder: 'cheeaun@mastodon.social',
},
],
hashtag: [
{
text: '#',
name: 'hashtag',
type: 'text',
placeholder: 'e.g PixelArt',
},
],
};
export const SHORTCUTS_META = {
following: {
title: 'Home',
path: (_, index) => (index === 0 ? '/' : '/l/f'),
icon: 'home',
},
notifications: {
title: 'Notifications',
path: '/notifications',
icon: 'notification',
},
list: {
title: async ({ id }) => {
const list = await api().masto.v1.lists.fetch(id);
return list.title;
},
path: ({ id }) => `/l/${id}`,
icon: 'list',
},
public: {
title: ({ local, instance }) =>
`${local ? 'Local' : 'Federated'} (${instance})`,
path: ({ local, instance }) => `/${instance}/p${local ? '/l' : ''}`,
icon: ({ local }) => (local ? 'group' : 'earth'),
},
search: {
title: ({ query }) => query,
path: ({ query }) => `/search?q=${query}`,
icon: 'search',
},
'account-statuses': {
title: async ({ id }) => {
const account = await api().masto.v1.accounts.fetch(id);
return account.username || account.acct || account.displayName;
},
path: ({ id }) => `/a/${id}`,
icon: 'user',
},
bookmarks: {
title: 'Bookmarks',
path: '/b',
icon: 'bookmark',
},
favourites: {
title: 'Favourites',
path: '/f',
icon: 'heart',
},
hashtag: {
title: ({ hashtag }) => hashtag,
path: ({ hashtag }) => `/t/${hashtag}`,
icon: 'hashtag',
},
};
function ShortcutsSettings() {
const snapStates = useSnapshot(states);
const { masto } = api();
const [lists, setLists] = useState([]);
const [followedHashtags, setFollowedHashtags] = useState([]);
useEffect(() => {
(async () => {
try {
const lists = await masto.v1.lists.list();
setLists(lists);
} catch (e) {
console.error(e);
}
})();
(async () => {
try {
const iterator = masto.v1.followedTags.list();
const tags = [];
do {
const { value, done } = await iterator.next();
if (done || value?.length === 0) break;
tags.push(...value);
} while (true);
setFollowedHashtags(tags);
} catch (e) {
console.error(e);
}
})();
}, []);
return (
Specify a list of shortcuts that'll appear in the floating Shortcuts
button.
{snapStates.shortcuts.length > 0 ? (
{snapStates.shortcuts.map((shortcut, i) => {
const key = i + Object.values(shortcut);
const { type } = shortcut;
let { icon, title } = SHORTCUTS_META[type];
if (typeof title === 'function') {
title = title(shortcut);
}
if (typeof icon === 'function') {
icon = icon(shortcut);
}
return (
-
{title}
);
})}
) : (
No shortcuts yet. Add one from the form below.
)}
{
console.log('onSubmit', data);
states.shortcuts.push(data);
}}
/>
);
}
export default ShortcutsSettings;
function ShortcutForm({ type, lists, followedHashtags, onSubmit }) {
const [currentType, setCurrentType] = useState(type);
return (
<>
>
);
}