SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[feature/frontend] Hide "engagement" stats, edits, and other info under a little drop down to unclutter status info bar (#4021)

Browse Source 
* dick about with stats a bit

* more dicking abuot

* lil tweaks

* more about-dicking

* weee

* comments

* fixie uppie
This commit is contained in:
tobi
2025-04-18 17:36:26 +02:00
committed by GitHub
parent d694666436
commit 2fce027808
14 changed files with 453 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
web/source/settings/components/status.tsx
View File

@ -17,7 +17,7 @@
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React, { useState } from "react";
import React, { useMemo, useState } from "react";
import { useVerifyCredentialsQuery } from "../lib/query/login";
import { MediaAttachment, Status as StatusType } from "../lib/types/status";
import sanitize from "sanitize-html";
@ -68,15 +68,6 @@ export function Status({ status }: { status: StatusType }) {
<StatusHeader status={status} />
<StatusBody status={status} />
<StatusFooter status={status} />
<a
href={status.url}
target="_blank"
className="status-link"
data-nosnippet
title="Open this status (opens in new tab)"
>
Open this status (opens in new tab)
</a>
</article>
);
}
@ -266,25 +257,103 @@ function StatusMediaEntry({ media }: { media: MediaAttachment }) {
);
}
function useVisibilityIcon(visibility: string): string {
return useMemo(() => {
switch (true) {
case visibility === "direct":
return "fa-envelope";
case visibility === "followers_only":
return "fa-lock";
case visibility === "unlisted":
return "fa-unlock";
case visibility === "public":
return "fa-globe";
default:
return "fa-question";
}
}, [visibility]);
}
function StatusFooter({ status }: { status: StatusType }) {
const visibilityIcon = useVisibilityIcon(status.visibility);
return (
<aside className="status-info">
<dl className="status-stats">
<div className="stats-grouping">
<div className="status-stats">
<dl className="stats-grouping text-cutoff">
<div className="stats-item published-at text-cutoff">
<dt className="sr-only">Published</dt>
<dd>
<time dateTime={status.created_at}>
{ new Date(status.created_at).toLocaleString() }
</time>
<dd className="text-cutoff">
<a
href={status.url}
className="u-url text-cutoff"
>
<time
className="dt-published text-cutoff"
dateTime={status.created_at}
>
{new Date(status.created_at).toLocaleString(undefined, {
year: 'numeric',
month: 'short',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: false
})}
</time>
</a>
</dd>
</div>
</div>
<div className="stats-item language">
<dt className="sr-only">Language</dt>
<dd>{status.language}</dd>
</div>
</dl>
<div className="stats-grouping">
<div className="stats-item visibility-level" title={status.visibility}>
<dt className="sr-only">Visibility</dt>
<dd>
<i className={`fa ${visibilityIcon}`} aria-hidden="true"></i>
<span className="sr-only">{status.visibility}</span>
</dd>
</div>
</div>
</dl>
<details className="stats-more-info">
<summary title="More info">
<i className="fa fa-fw fa-info" aria-hidden="true"></i>
<span className="sr-only">More info</span>
<i className="fa fa-fw fa-chevron-right show" aria-hidden="true"></i>
<i className="fa fa-fw fa-chevron-down hide" aria-hidden="true"></i>
</summary>
<dl className="stats-more-info-content">
<div className="stats-grouping">
<div className="stats-item" title="Language">
<dt>
<span className="sr-only">Language</span>
<i className="fa fa-language" aria-hidden="true"></i>
</dt>
<dd>{status.language}</dd>
</div>
<div className="stats-item" title="Replies">
<dt>
<span className="sr-only">Replies</span>
<i className="fa fa-reply-all" aria-hidden="true"></i>
</dt>
<dd>{status.replies_count}</dd>
</div>
<div className="stats-item" title="Faves">
<dt>
<span className="sr-only">Favourites</span>
<i className="fa fa-star" aria-hidden="true"></i>
</dt>
<dd>{status.favourites_count}</dd>
</div>
<div className="stats-item" title="Boosts">
<dt>
<span className="sr-only">Reblogs</span>
<i className="fa fa-retweet" aria-hidden="true"></i>
</dt>
<dd>{status.reblogs_count}</dd>
</div>
</div>
</dl>
</details>
</div>
</aside>
);
}