phanpy/src/components/shortcuts-settings.jsx

505 lines
14 KiB
React
Raw Normal View History

2023-02-16 12:51:54 +03:00
import './shortcuts-settings.css';
import mem from 'mem';
2023-02-16 12:51:54 +03:00
import { useEffect, useState } from 'preact/hooks';
import { useSnapshot } from 'valtio';
2023-03-09 18:37:25 +03:00
import floatingButtonUrl from '../assets/floating-button.svg';
import multiColumnUrl from '../assets/multi-column.svg';
import tabMenuBarUrl from '../assets/tab-menu-bar.svg';
2023-02-16 12:51:54 +03:00
import { api } from '../utils/api';
import states from '../utils/states';
import AsyncText from './AsyncText';
import Icon from './icon';
import Modal from './modal';
2023-02-16 12:51:54 +03:00
const SHORTCUTS_LIMIT = 9;
2023-02-16 12:51:54 +03:00
const TYPES = [
'following',
'notifications',
'list',
'public',
2023-02-18 15:48:24 +03:00
// NOTE: Hide for now
// 'search', // Search on Mastodon ain't great
// 'account-statuses', // Need @acct search first
2023-02-16 12:51:54 +03:00
'bookmarks',
'favourites',
'hashtag',
];
const TYPE_TEXT = {
2023-02-18 15:48:24 +03:00
following: 'Home / Following',
2023-02-16 12:51:54 +03:00
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',
2023-02-25 05:04:30 +03:00
placeholder: 'e.g. PixelArt (Max 5, space-separated)',
pattern: '[^#]+',
2023-02-16 12:51:54 +03:00
},
],
};
export const SHORTCUTS_META = {
following: {
2023-02-27 19:35:07 +03:00
id: 'home',
2023-02-27 18:59:41 +03:00
title: (_, index) => (index === 0 ? 'Home' : 'Following'),
path: '/',
2023-02-16 12:51:54 +03:00
icon: 'home',
},
notifications: {
2023-02-27 18:59:41 +03:00
id: 'notifications',
2023-02-16 12:51:54 +03:00
title: 'Notifications',
path: '/notifications',
icon: 'notification',
},
list: {
2023-02-27 18:59:41 +03:00
id: 'list',
title: mem(
async ({ id }) => {
const list = await api().masto.v1.lists.fetch(id);
return list.title;
},
{
cacheKey: ([{ id }]) => id,
},
),
2023-02-16 12:51:54 +03:00
path: ({ id }) => `/l/${id}`,
icon: 'list',
},
public: {
2023-02-27 18:59:41 +03:00
id: 'public',
2023-02-16 12:51:54 +03:00
title: ({ local, instance }) =>
`${local ? 'Local' : 'Federated'} (${instance})`,
path: ({ local, instance }) => `/${instance}/p${local ? '/l' : ''}`,
icon: ({ local }) => (local ? 'group' : 'earth'),
},
search: {
2023-02-27 18:59:41 +03:00
id: 'search',
2023-02-16 12:51:54 +03:00
title: ({ query }) => query,
path: ({ query }) => `/search?q=${query}`,
icon: 'search',
},
'account-statuses': {
2023-02-27 18:59:41 +03:00
id: 'account-statuses',
title: mem(
async ({ id }) => {
const account = await api().masto.v1.accounts.fetch(id);
return account.username || account.acct || account.displayName;
},
{
cacheKey: ([{ id }]) => id,
},
),
2023-02-16 12:51:54 +03:00
path: ({ id }) => `/a/${id}`,
icon: 'user',
},
bookmarks: {
2023-02-27 18:59:41 +03:00
id: 'bookmarks',
2023-02-16 12:51:54 +03:00
title: 'Bookmarks',
path: '/b',
icon: 'bookmark',
},
favourites: {
2023-02-27 18:59:41 +03:00
id: 'favourites',
2023-02-16 12:51:54 +03:00
title: 'Favourites',
path: '/f',
icon: 'heart',
},
hashtag: {
2023-02-27 18:59:41 +03:00
id: 'hashtag',
2023-02-16 12:51:54 +03:00
title: ({ hashtag }) => hashtag,
2023-02-25 09:58:11 +03:00
path: ({ hashtag }) => `/t/${hashtag.split(/\s+/).join('+')}`,
2023-02-16 12:51:54 +03:00
icon: 'hashtag',
},
};
function ShortcutsSettings() {
const snapStates = useSnapshot(states);
const { masto } = api();
const { shortcuts } = snapStates;
2023-02-16 12:51:54 +03:00
const [lists, setLists] = useState([]);
const [followedHashtags, setFollowedHashtags] = useState([]);
const [showForm, setShowForm] = useState(false);
2023-02-16 12:51:54 +03:00
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 (
<div id="shortcuts-settings-container" class="sheet" tabindex="-1">
<header>
<h2>
<Icon icon="shortcut" /> Shortcuts{' '}
<sup
style={{
fontSize: 12,
opacity: 0.5,
textTransform: 'uppercase',
}}
>
beta
</sup>
</h2>
</header>
<main>
<p>
2023-03-09 18:37:25 +03:00
Specify a list of shortcuts that'll appear&nbsp;as:
<div class="shortcuts-view-mode">
{[
{
value: 'float-button',
label: 'Floating button',
imgURL: floatingButtonUrl,
},
{
value: 'tab-menu-bar',
label: 'Tab/Menu bar',
imgURL: tabMenuBarUrl,
},
{
value: 'multi-column',
label: 'Multi-column',
imgURL: multiColumnUrl,
},
].map(({ value, label, imgURL }) => (
<label>
<input
type="radio"
name="shortcuts-view-mode"
value={value}
checked={
snapStates.settings.shortcutsViewMode === value ||
(value === 'float-button' &&
!snapStates.settings.shortcutsViewMode)
}
2023-03-09 18:37:25 +03:00
onChange={(e) => {
states.settings.shortcutsViewMode = e.target.value;
}}
/>{' '}
<img src={imgURL} alt="" /> <span>{label}</span>
</label>
))}
</div>
{/* <select
2023-02-27 18:59:41 +03:00
value={snapStates.settings.shortcutsViewMode || 'float-button'}
onChange={(e) => {
states.settings.shortcutsViewMode = e.target.value;
}}
>
<option value="float-button">Floating button</option>
<option value="multi-column">Multi-column</option>
<option value="tab-menu-bar">Tab/Menu bar </option>
2023-03-09 18:37:25 +03:00
</select> */}
2023-02-27 18:59:41 +03:00
</p>
{/* <p>
2023-02-18 15:48:24 +03:00
<details>
<summary class="insignificant">
Experimental Multi-column mode
</summary>
<label>
<input
type="checkbox"
checked={snapStates.settings.shortcutsColumnsMode}
onChange={(e) => {
states.settings.shortcutsColumnsMode = e.target.checked;
}}
/>{' '}
Show shortcuts in multiple columns instead of the floating button.
</label>
</details>
2023-02-27 18:59:41 +03:00
</p> */}
2023-02-18 15:48:24 +03:00
{shortcuts.length > 0 ? (
2023-02-16 12:51:54 +03:00
<ol class="shortcuts-list">
{shortcuts.map((shortcut, i) => {
2023-02-16 12:51:54 +03:00
const key = i + Object.values(shortcut);
const { type } = shortcut;
2023-02-19 05:42:56 +03:00
if (!SHORTCUTS_META[type]) return null;
2023-02-16 12:51:54 +03:00
let { icon, title } = SHORTCUTS_META[type];
if (typeof title === 'function') {
2023-02-28 14:12:16 +03:00
title = title(shortcut, i);
2023-02-16 12:51:54 +03:00
}
if (typeof icon === 'function') {
2023-02-28 14:12:16 +03:00
icon = icon(shortcut, i);
2023-02-16 12:51:54 +03:00
}
return (
<li key={key}>
<Icon icon={icon} />
<span class="shortcut-text">
<AsyncText>{title}</AsyncText>
</span>
<span class="shortcut-actions">
2023-02-16 12:51:54 +03:00
<button
type="button"
class="plain small"
disabled={i === 0}
onClick={() => {
const shortcutsArr = Array.from(states.shortcuts);
if (i > 0) {
const temp = states.shortcuts[i - 1];
shortcutsArr[i - 1] = shortcut;
shortcutsArr[i] = temp;
states.shortcuts = shortcutsArr;
}
}}
>
<Icon icon="arrow-up" alt="Move up" />
</button>
<button
type="button"
class="plain small"
disabled={i === shortcuts.length - 1}
2023-02-16 12:51:54 +03:00
onClick={() => {
const shortcutsArr = Array.from(states.shortcuts);
if (i < states.shortcuts.length - 1) {
const temp = states.shortcuts[i + 1];
shortcutsArr[i + 1] = shortcut;
shortcutsArr[i] = temp;
states.shortcuts = shortcutsArr;
}
}}
>
<Icon icon="arrow-down" alt="Move down" />
</button>
<button
type="button"
class="plain small"
onClick={() => {
states.shortcuts.splice(i, 1);
}}
>
<Icon icon="x" alt="Remove" />
</button>
</span>
</li>
);
})}
</ol>
) : (
<p class="ui-state insignificant">
No shortcuts yet. Add one from the form below.
</p>
)}
<p
style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
2023-02-16 12:51:54 +03:00
}}
>
<span class="insignificant">
{shortcuts.length >= SHORTCUTS_LIMIT &&
`Max ${SHORTCUTS_LIMIT} shortcuts`}
</span>
<button
type="button"
disabled={shortcuts.length >= SHORTCUTS_LIMIT}
onClick={() => setShowForm(true)}
>
<Icon icon="plus" /> <span>Add shortcut</span>
</button>
</p>
2023-02-16 12:51:54 +03:00
</main>
{showForm && (
<Modal
class="light"
onClick={(e) => {
if (e.target === e.currentTarget) {
setShowForm(false);
}
}}
>
<ShortcutForm
disabled={shortcuts.length >= SHORTCUTS_LIMIT}
lists={lists}
followedHashtags={followedHashtags}
onSubmit={(data) => {
console.log('onSubmit', data);
states.shortcuts.push(data);
}}
onClose={() => setShowForm(false)}
/>
</Modal>
)}
2023-02-16 12:51:54 +03:00
</div>
);
}
function ShortcutForm({
type,
lists,
followedHashtags,
onSubmit,
disabled,
onClose = () => {},
}) {
2023-02-16 12:51:54 +03:00
const [currentType, setCurrentType] = useState(type);
return (
<div id="shortcut-settings-form" class="sheet">
<header>
<h2>Add shortcut</h2>
</header>
<main tabindex="-1">
<form
onSubmit={(e) => {
// Construct a nice object from form
e.preventDefault();
const data = new FormData(e.target);
const result = {};
data.forEach((value, key) => {
result[key] = value?.trim();
});
if (!result.type) return;
onSubmit(result);
// Reset
e.target.reset();
setCurrentType(null);
onClose();
}}
>
<p>
<label>
<span>Timeline</span>
<select
required
disabled={disabled}
onChange={(e) => {
setCurrentType(e.target.value);
}}
name="type"
>
<option></option>
{TYPES.map((type) => (
<option value={type}>{TYPE_TEXT[type]}</option>
))}
</select>
</label>
</p>
{TYPE_PARAMS[currentType]?.map?.(
({ text, name, type, placeholder, pattern }) => {
if (currentType === 'list') {
return (
<p>
<label>
<span>List</span>
<select name="id" required disabled={disabled}>
{lists.map((list) => (
<option value={list.id}>{list.title}</option>
))}
</select>
</label>
</p>
);
}
2023-02-16 12:51:54 +03:00
return (
<p>
<label>
<span>{text}</span>{' '}
<input
type={type}
name={name}
placeholder={placeholder}
required={type === 'text'}
disabled={disabled}
list={
currentType === 'hashtag'
? 'followed-hashtags-datalist'
: null
}
autocorrect="off"
autocapitalize="off"
spellcheck={false}
pattern={pattern}
/>
{currentType === 'hashtag' &&
followedHashtags.length > 0 && (
<datalist id="followed-hashtags-datalist">
{followedHashtags.map((tag) => (
<option value={tag.name} />
))}
</datalist>
)}
2023-02-16 12:51:54 +03:00
</label>
</p>
);
},
)}
<button type="submit" class="block" disabled={disabled}>
Add
</button>
</form>
</main>
</div>
2023-02-16 12:51:54 +03:00
);
}
export default ShortcutsSettings;