diff --git a/src/app.css b/src/app.css index 80079981..4fc3151b 100644 --- a/src/app.css +++ b/src/app.css @@ -1217,6 +1217,42 @@ meter.donut:is(.danger, .explode):after { color: var(--text-insignificant-color); } +/* LINK LISTS? */ + +ul.link-list { + list-style: none; + padding: 16px; + margin: 0; +} +ul.link-list li { + padding: 0; + margin: 0; +} +ul.link-list li a { + display: block; + background-color: var(--bg-faded-color); + border-radius: 8px; + line-height: 1.25; + padding: 12px; + text-decoration: none; + line-height: 1.4; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + font-weight: 500; +} +ul.link-list li a * { + vertical-align: middle; +} + +@media (min-width: 40em) { + ul.link-list li a { + background-color: var(--bg-color); + } +} + +/* OTHERS */ + @media (min-width: 40em) { html, body { diff --git a/src/app.jsx b/src/app.jsx index 9ff2b17c..7b0705fa 100644 --- a/src/app.jsx +++ b/src/app.jsx @@ -30,6 +30,7 @@ import NotFound from './pages/404'; import AccountStatuses from './pages/account-statuses'; import Bookmarks from './pages/bookmarks'; import Favourites from './pages/favourites'; +import FollowedHashtags from './pages/followed-hashtags'; import Following from './pages/following'; import Hashtags from './pages/hashtags'; import Home from './pages/home'; @@ -215,6 +216,7 @@ function App() { } /> )} + {isLoggedIn && } />} } /> } /> diff --git a/src/components/icon.jsx b/src/components/icon.jsx index 4f610de0..7edefb70 100644 --- a/src/components/icon.jsx +++ b/src/components/icon.jsx @@ -51,6 +51,7 @@ const ICONS = { menu: 'mingcute:rows-4-line', list: 'mingcute:list-check-line', search: 'mingcute:search-2-line', + hashtag: 'mingcute:hashtag-line', }; const modules = import.meta.glob('/node_modules/@iconify-icons/mingcute/*.js'); diff --git a/src/components/menu.jsx b/src/components/menu.jsx index a7e5de06..461263d8 100644 --- a/src/components/menu.jsx +++ b/src/components/menu.jsx @@ -28,15 +28,18 @@ function NavMenu(props) { Notifications + + Lists + + + Followed Hashtags + Bookmarks Favourites - - Lists - {/* Search diff --git a/src/pages/followed-hashtags.jsx b/src/pages/followed-hashtags.jsx new file mode 100644 index 00000000..8964b74f --- /dev/null +++ b/src/pages/followed-hashtags.jsx @@ -0,0 +1,74 @@ +import { useEffect, useState } from 'preact/hooks'; + +import Icon from '../components/icon'; +import Link from '../components/link'; +import Loader from '../components/loader'; +import Menu from '../components/menu'; +import { api } from '../utils/api'; + +function FollowedHashtags() { + const { masto, instance } = api(); + const [uiState, setUiState] = useState('default'); + + const [followedHashtags, setFollowedHashtags] = useState([]); + useEffect(() => { + setUiState('loading'); + (async () => { + try { + const tags = await masto.v1.followedTags.list(); + console.log(tags); + setFollowedHashtags(tags); + setUiState('default'); + } catch (e) { + console.error(e); + setUiState('error'); + } + })(); + }, []); + + return ( +
+
+
+
+
+ + + + +
+

Followed Hashtags

+
+
+
+
+ {followedHashtags.length > 0 ? ( + + ) : uiState === 'loading' ? ( +

+ +

+ ) : uiState === 'error' ? ( +

Unable to load followed hashtags.

+ ) : ( +

No hashtags followed yet.

+ )} +
+
+
+ ); +} + +export default FollowedHashtags; diff --git a/src/pages/lists.css b/src/pages/lists.css deleted file mode 100644 index 53795ecb..00000000 --- a/src/pages/lists.css +++ /dev/null @@ -1,25 +0,0 @@ -#lists-page ul { - list-style: none; - padding: 16px; - margin: 0; -} -#lists-page ul li { - padding: 0; - margin: 0; -} -#lists-page ul li a { - display: block; - background-color: var(--bg-faded-color); - border-radius: 8px; - line-height: 1.25; - padding: 12px; - text-decoration: none; - line-height: 1.4; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - font-weight: 500; -} -#lists-page ul li a * { - vertical-align: middle; -} diff --git a/src/pages/lists.jsx b/src/pages/lists.jsx index 0736e65d..2ab28e53 100644 --- a/src/pages/lists.jsx +++ b/src/pages/lists.jsx @@ -1,5 +1,3 @@ -import './lists.css'; - import { useEffect, useState } from 'preact/hooks'; import Icon from '../components/icon'; @@ -45,7 +43,7 @@ function Lists() {
{lists.length > 0 ? ( -
    +