[feature] Add "Instance Info" settings panel section, with domain blocks + allows (#4193)

This pull request adds a new read-only, user-level "instance info" section to the settings panel, which presents api/v2/instance info in a nice readable format, and also gives the user authenticated access to the blocklist and allowlist of the domain.

Closes https://codeberg.org/superseriousbusiness/gotosocial/issues/3711
Reviewed-on: https://codeberg.org/superseriousbusiness/gotosocial/pulls/4193
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>

1 files changed, 42 insertions, 0 deletions

diff --git a/web/source/settings/lib/util/index.ts b/web/source/settings/lib/util/index.ts
index 8bcf5ab5d..46b35fd70 100644
--- a/web/source/settings/lib/util/index.ts
+++ b/web/source/settings/lib/util/index.ts
@@ -22,6 +22,8 @@ import { useMemo } from "react";
 import { AdminAccount } from "../types/account";
 import { store } from "../../redux/store";
 
+import humanizeDuration from "humanize-duration";
+
 export function yesOrNo(b: boolean): string {
 	return b ? "yes" : "no";
 }
@@ -54,3 +56,43 @@ export function useCapitalize(i?: string): string {
 		return i.charAt(0).toUpperCase() + i.slice(1); 
 	}, [i]);
 }
+
+/**
+ * Return human-readable string representation of given bytes.
+ * 
+ * Adapted from https://stackoverflow.com/a/14919494.
+ */
+export function useHumanReadableBytes(bytes: number): string {
+	return useMemo(() => {
+		const thresh = 1024;
+		const digitPrecision = 2;
+		const r = 10**digitPrecision;
+		const units = ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+
+		if (Math.abs(bytes) < thresh) {
+			return bytes + ' B';
+		}
+
+		let u = -1;
+		let threshed = bytes;
+		do { threshed /= thresh; ++u;
+		} while (Math.round(Math.abs(threshed) * r) / r >= thresh && u < units.length - 1);
+
+		return threshed.toFixed(digitPrecision) + ' ' + units[u];
+	}, [bytes]);
+}
+
+/**
+ * Return human-readable string representation of given time in seconds.
+ */
+export function useHumanReadableDuration(seconds: number): string {
+	return useMemo(() => {
+		if (seconds % 2629746 === 0) {
+			const n = seconds / 2629746;
+			return n + " month" + (n !== 1 ? "s" : "");
+		}
+		
+		const ms = seconds*1000;
+		return humanizeDuration(ms);
+	}, [seconds]);
+}