Profile: support locked acct

src/material/typography.tsx

@@ -43,7 +43,7 @@ export function Typography<T extends AnyElement>(
     <Dynamic
       ref={managed.ref}
       component={managed.component ?? "span"}
-      class={`${managed.class} ${managed.typography}`}
+      class={`${managed.class || ""} ${managed.typography}`}
       {...passthough}
     ></Dynamic>
   );

src/profiles/Profile.css

@@ -53,7 +53,7 @@
     flex-flow: column nowrap;
   }
 
-  .bot-mark {
+  .acct-mark {
     font-size: 1.2em;
   }
 

src/profiles/Profile.tsx

@@ -33,6 +33,7 @@ import {
   Edit,
   ExpandMore,
   Group,
+  Lock,
   MoreVert,
   OpenInBrowser,
   PersonOff,
@@ -41,7 +42,6 @@ import {
   Share,
   SmartToySharp,
   Subject,
-  Translate,
   Verified,
 } from "@suid/icons-material";
 import { Body2, Title } from "../material/typography";
@@ -372,13 +372,19 @@ const Profile: Component = () => {
       <Menu {...subscribeMenuState}>
         <MenuItem
           onClick={toggleSubscribeHome}
-          aria-details="Subscribe or Unsubscribe this account on your home timeline"
+          aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
         >
           <ListItemAvatar>
             <Avatar src={session().account?.inf?.avatar}></Avatar>
           </ListItemAvatar>
           <ListItemText
-            secondary={relationship()?.following ? "Subscribed" : undefined}
+            secondary={
+              relationship()?.following
+                ? undefined
+                : profile()?.locked
+                  ? "A request will be sent"
+                  : undefined
+            }
           >
             <span ref={useSessionDisplayName}></span>
             <span>'s Home</span>
@@ -408,7 +414,10 @@ const Profile: Component = () => {
           <div class="name-grp">
             <div class="display-name">
               <Show when={profile()?.bot}>
-                <SmartToySharp class="bot-mark" aria-label="Bot" />
+                <SmartToySharp class="acct-mark" aria-label="Bot" />
+              </Show>
+              <Show when={profile()?.locked}>
+                <Lock class="acct-mark" aria-label="Locked" />
               </Show>
               <Body2
                 component="span"

src/timelines/RegularToot.tsx

@@ -21,6 +21,7 @@ import {
   Bookmark,
   Share,
   SmartToySharp,
+  Lock,
 } from "@suid/icons-material";
 import { useTimeSource } from "../platform/timesrc.js";
 import { resolveCustomEmoji } from "../masto/toot.js";
@@ -154,7 +155,10 @@ function TootAuthorGroup(
       <div class={tootStyle.tootAuthorNameGrp}>
         <div class={tootStyle.tootAuthorNamePrimary}>
           <Show when={toot().account.bot}>
-            <SmartToySharp class="bot-mark" aria-label="Bot" />
+            <SmartToySharp class="acct-mark" aria-label="Bot" />
+          </Show>
+          <Show when={toot().account.locked}>
+            <Lock class="acct-mark" aria-label="Locked" />
           </Show>
           <Body2
             component="span"
@@ -369,7 +373,6 @@ const RegularToot: Component<TootCardProps> = (props) => {
         <Show when={!!status().reblog}>
           <div class={tootStyle.tootRetootGrp}>
             <BoostIcon />
-            <span>
               <Body2
                 ref={(e: { innerHTML: string }) => {
                   createRenderEffect(() => {
@@ -379,9 +382,8 @@ const RegularToot: Component<TootCardProps> = (props) => {
                     );
                   });
                 }}
-              ></Body2>{" "}
-              boosted
-            </span>
+              ></Body2>
+            <span>boosts</span>
           </div>
         </Show>
         <TootAuthorGroup

src/timelines/toot.module.css

@@ -72,8 +72,9 @@
   align-items: center;
   gap: 4px;
 
-  > :global(.bot-mark) {
+  > :global(.acct-mark) {
     font-size: 1.2em;
+    color: var(--tutu-color-secondary-text-on-surface);
   }
 }
 
@@ -221,11 +222,14 @@
 }
 
 .tootRetootGrp {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 8px;
+  display: flex;
+  gap: 0.25em;
   margin-bottom: 8px;
   align-items: center;
+
+  > :first-child {
+    margin-right: 0.25em;
+  }
 }
 
 .tootAttachmentGrp {