Merge pull request #98 from cloudflare/miscellaneous-fe-improvements

Miscellaneous fe improvements

frontend/src/components/Status/index.tsx

@@ -31,9 +31,9 @@ export default component$((props: Props) => {
 						<Avatar primary={status.account} secondary={reblogger} />
 						<div class="flex-col ml-3">
 							<div>
-								<a class="no-underline" href={status.account.url}>
+								<Link class="no-underline" href={accountUrl}>
 									{status.account.display_name}
-								</a>
+								</Link>
 							</div>
 							<div class="text-wildebeest-500">@{status.account.username}</div>
 						</div>
@@ -70,7 +70,7 @@ export const RebloggerLink = ({ account }: { account: Account | null }) => {
 		account && (
 			<div class="flex text-wildebeest-500 py-3">
 				<p>
-					<i class="fa fa-retweet mr-3" />
+					<i class="fa fa-retweet mr-3 w-4 inline-block" />
 					<a class="no-underline" href={account.url}>
 						{account.display_name}
 					</a>

frontend/src/components/layout/RightColumn/RightColumn.tsx

@@ -35,7 +35,7 @@ export default component$(() => {
 		{ iconName: 'fa-globe', linkText: 'Federated', linkTarget: '/public', linkActiveRegex: /^\/public\/?$/ },
 	]
 
-	const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
+	// const aboutLink = { iconName: 'fa-ellipsis', linkText: 'About', linkTarget: '/about', linkActiveRegex: /^\/about/ }
 
 	return (
 		<div class="bg-wildebeest-600 xl:bg-transparent flex flex-col justify-between right-column-wrapper text-wildebeest-200 flex-1">
@@ -47,10 +47,11 @@ export default component$(() => {
 				</div>
 				<hr class="hidden xl:block border-t border-wildebeest-700 my-3" />
 				{links.map((link) => renderNavLink(link))}
-				<div class="xl:hidden">
+				{/* *********** Hiding the about link until the backend support is available ***************** */}
+				{/* <div class="xl:hidden">
 					<hr class="border-t border-wildebeest-700 my-3" />
 					{renderNavLink(aboutLink)}
-				</div>
+				</div> */}
 			</div>
 		</div>
 	)

frontend/src/routes/(frontend)/[accountId]/[statusId]/index.tsx

@@ -57,13 +57,16 @@ export default component$(() => {
 })
 
 export const AccountCard = component$<{ status: MastodonStatus }>(({ status }) => {
+	const accountUrl = `/@${status.account.username}`
+
 	return (
 		<div class="flex">
 			<Avatar primary={status.account} secondary={null} />
 			<div class="flex flex-col">
 				<div class="p-1">
-					{/* TODO: this should either have an href or not being an `a` element (also consider using QwikCity's `Link` instead) */}
-					<a class="no-underline">{status.account.display_name}</a>
+					<Link href={accountUrl} class="no-underline">
+						{status.account.display_name}
+					</Link>
 				</div>
 				<div class="p-1 text-wildebeest-400">@{status.account.acct}</div>
 			</div>

frontend/src/routes/(frontend)/layout.tsx

@@ -18,7 +18,7 @@ export const instanceLoader = loader$<
 		INSTANCE_TITLE: platform.INSTANCE_TITLE,
 		ADMIN_EMAIL: platform.ADMIN_EMAIL,
 	} as Env
-	const response = await instance.handleRequest('', platform.DATABASE, env)
+	const response = await instance.handleRequest('', env)
 	const results = await response.text()
 	const json = JSON.parse(results) as InstanceConfig
 	return json
@@ -35,7 +35,7 @@ export default component$(() => {
 					<WildebeestLogo size="small" />
 				</a>
 			</header>
-			<main class="flex-1 flex justify-center main-wrapper top-[3.9rem]">
+			<main class="flex-1 flex justify-center top-[3.9rem]">
 				<div class="w-fit md:w-72 hidden xl:block mx-2.5">
 					<div class="sticky top-2.5">
 						<LeftColumn />