Merge to main 4.7.0 (#200)

Author: thieflord06

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "",
   "scripts": {
     "start": "vite --open",

src/common-components/account-short-entry.jsx

@@ -34,18 +34,16 @@ import './account-short-entry.css';
  */
 export function AccountShortEntry({ account, ...rest }) {
   const resolved = useResolveHandleOrDid(account);
-  if (!resolved) return undefined;
-  
+
   if (resolved.isLoading) return (
-    <LoadingAccount  {...rest} handle={account} />
+    <LoadingAccount {...rest} handle={account} />
   );
-  else if (resolved.isError) return (
-    <ErrorAccount {...rest} error={resolved.error} handle={account} />
+  else if (resolved.isError || !resolved.data) return (
+    <ErrorAccount {...rest} error={resolved.error || { message: "not found" }} handle={account} />
   );
   else {
-    const { did, handle } = distinguishDidFromHandle(account);
     return (
-      <ResolvedAccount {...rest} account={resolved.data || { shortDID: did || '', shortHandle: handle || '' }} />
+      <ResolvedAccount {...rest} account={resolved.data} />
     );
   }
 }

src/detail-panels/account-header/account-header.jsx

@@ -62,10 +62,13 @@ export function AccountHeader({
         }
 
         <div className='account-banner' style={{
-          backgroundImage: resolved.data?.bannerUrl ? `url(${resolved.data?.bannerUrl})` : 'transparent'
+          backgroundImage: resolved.data?.bannerUrl ? `url(${resolved.data.bannerUrl})` : 'transparent'
         }}>
         </div>
 
+        {
+          resolved.isSuccess && !resolved.data
+            ? <span>Account not found</span> :
         <span className='account-avatar-and-displayName-line'>
           <span className='account-banner-overlay'></span>
           <span className='account-avatar' style={{
@@ -95,6 +98,7 @@ export function AccountHeader({
             <span className='info-icon'></span>
           </Button>
         </span>
+        }
       </h1>
       <div>
       </div>

src/detail-panels/account-resolver.jsx

@@ -3,6 +3,6 @@ import { useParams } from 'react-router-dom';
 import { useResolveHandleOrDid } from '../api';
 
 export function useAccountResolver() {
-  let { handle } = useParams();
+  const { handle } = useParams();
   return useResolveHandleOrDid(handle);
 }

src/detail-panels/block-panel-generic/block-panel-generic.css

@@ -1,6 +1,7 @@
 .account-info-panel-blocked-timestamp {
   font-size: 80%;
-  text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 12px white, 0 0 12px white, 0 0 12px white, 0 0 12px white;
+  text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white, 0 0 1px white,
+    0 0 12px white, 0 0 12px white, 0 0 12px white, 0 0 12px white;
   border-top: solid 1px #ededed;
   padding-top: 0.5em;
 }
@@ -52,15 +53,16 @@
 
 li.blocking-list-entry:nth-child(even) {
   background-color: #0000000a;
-  background-image: linear-gradient(to top, #00000024, transparent 1px), linear-gradient(to bottom, #0000000a, transparent 1px);
+  background-image: linear-gradient(to top, #00000024, transparent 1px),
+    linear-gradient(to bottom, #0000000a, transparent 1px);
 }
 
 .blocking-list-entry .blocking-account-link {
   color: inherit;
   text-decoration: inherit;
 }
 
-.blocking-list-entry .blocking-account-link:hover {
+.blocking-list-entry a.blocking-account-link:hover {
   text-decoration: underline;
 }
 
@@ -70,7 +72,10 @@ li.blocking-list-entry:nth-child(even) {
   grid-template-columns: auto 1fr;
 }
 
-.blocking-list-entry .account-short-entry-content .account-short-entry-handle .account-short-entry-display-name {
+.blocking-list-entry
+  .account-short-entry-content
+  .account-short-entry-handle
+  .account-short-entry-display-name {
   opacity: 0.7;
 }
 

src/detail-panels/block-panel-generic/block-panel-generic.jsx

@@ -68,6 +68,7 @@ export function BlockPanelGeneric({
         setQ
       /> */}
       <PanelHeader
+        loading={isLoading}
         count={count}
         blocklist={blocklist}
         header={header}
@@ -109,8 +110,8 @@ class PanelHeader extends React.Component {
   direction = +1;
 
   render() {
-    let count = this.props.count;
-    if (typeof this.props.count !== 'number') {
+    let count = this.props.count || 0;
+    if (this.props.loading) {
       clearTimeout(this.timeout);
       this.timeout = setTimeout(() => this.forceUpdate(), 10);
       count = this.state?.count || 0;

src/detail-panels/layout.jsx

@@ -25,7 +25,7 @@ export const accountTabs = /** @type {const} */ ([
 ]);
 
 export function AccountLayout() {
-  const account = useAccountResolver();
+  const { handle } = useParams();
   let { tab } = useParams();
   if (!tab) tab = accountTabs[0];
 
@@ -36,10 +36,7 @@ export function AccountLayout() {
       selectedTab={tab}
       onSetSelectedTab={(selectedTab) => {
         navigate(
-          '/' +
-            unwrapShortHandle(account.data?.shortHandle) +
-            '/' +
-            selectedTab,
+          `/${handle}/` + selectedTab,
           { replace: true }
         );
       }}