Profile: fix page title and intro layout

README.md

@@ -2,6 +2,8 @@
 
 Tutu is a comfortable experience for tooting. Designed to work on any device - desktop, phone and tablet.
 
+[Launch Tutu](https://tutu.lightstands.xyz)
+
 ## Compatibility
 
 The code is built against those targets and Tutu must run on those platforms:
@@ -12,6 +14,12 @@ The code is built against those targets and Tutu must run on those platforms:
 
 Tutu trys to push the Web technology to its limit. Some features might not be available on the platform does not meet the requirement.
 
+## The "Next" Branch
+
+The "next" branch of the app is built on every commit pushed into "master". You can tatse latest change but risks your data.
+
+[Launch Tutu (Next)](https://next.tututheapp.pages.dev)
+
 ## Build & Depoly
 
 Tutu uses [bun](https://bun.sh) as the package manager. Run

src/masto/clients.ts

@@ -49,7 +49,8 @@ export type Session = {
   client: mastodon.rest.Client;
 };
 
-const Context = /* @__PURE__ */ createContext<Accessor<readonly Readonly<Session>[]>>();
+const Context =
+  /* @__PURE__ */ createContext<Accessor<readonly Readonly<Session>[]>>();
 
 export const Provider = Context.Provider;
 
@@ -77,7 +78,9 @@ function useSessionsRaw() {
   return store;
 }
 
-const DefaultSessionContext = /* @__PURE__ */ createContext<Accessor<number>>(() => 0)
+const DefaultSessionContext = /* @__PURE__ */ createContext<Accessor<number>>(
+  () => 0,
+);
 
 export const DefaultSessionProvider = DefaultSessionContext.Provider;
 
@@ -87,14 +90,14 @@ export const DefaultSessionProvider = DefaultSessionContext.Provider;
  * This function may return `undefined`, but it will try to redirect the user to the sign in.
  */
 export function useDefaultSession() {
-  const sessions = useSessions()
+  const sessions = useSessions();
-  const sessionIndex = useContext(DefaultSessionContext)
+  const sessionIndex = useContext(DefaultSessionContext);
 
   return () => {
     if (sessions().length > 0) {
-      return sessions()[sessionIndex()]
+      return sessions()[sessionIndex()];
-    }
     }
+  };
 }
 
 /**
@@ -114,7 +117,7 @@ export function useDefaultSession() {
  * unauthorised client for the site. This client may not available for some operations.
  */
 export function useSessionForAcctStr(acct: Accessor<string>) {
-  const allSessions = useSessions()
+  const allSessions = useSessions();
 
   return createMemo(() => {
     const [inputUsername, inputSite] = acct().split("@", 2);
@@ -132,4 +135,6 @@ export function useSessionForAcctStr(acct: Accessor<string>) {
   });
 }
 
-
+export function makeAcctText(session: Session) {
+  return `${session.account.inf?.username}@${session.account.site}`;
+}

src/profiles/Profile.tsx

@@ -116,10 +116,19 @@ const Profile: Component = () => {
     }
 
     .acct-grp {
-      display: grid;
+      display: flex;
-      grid-template-columns: auto 1fr auto;
+      flex-flow: row wrap;
       gap: 16px;
       align-items: center;
+
+      & > :nth-child(2) {
+        flex-grow: 1;
+      }
+
+      & > :last-child {
+        flex-grow: 1;
+        text-align: right;
+      }
     }
 
     .name-grp {
@@ -128,11 +137,13 @@ const Profile: Component = () => {
     }
 
     table.acct-fields {
+      word-break: break-all;
+
       & td > :global(a) {
         display: inline-flex;
-        min-height: 44px;
         align-items: center;
         color: inherit;
+        min-height: 44px;
       }
 
       & :global(a > .invisible) {
@@ -146,6 +157,9 @@ const Profile: Component = () => {
 
     .page-title {
       flex-grow: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   `;
 

src/timelines/RegularToot.tsx

@@ -39,6 +39,8 @@ import { FastAverageColor } from "fast-average-color";
 import Color from "colorjs.io";
 import { useDateFnLocale } from "../platform/i18n";
 import { canShare, share } from "../platform/share";
+import { makeAcctText, useDefaultSession } from "../masto/clients";
+import { useNavigate } from "@solidjs/router";
 
 type TootContentViewProps = {
   source?: string;
@@ -209,12 +211,16 @@ function TootActionGroup<T extends mastodon.v1.Status>(
   );
 }
 
-function TootAuthorGroup(props: { status: mastodon.v1.Status; now: Date }) {
+function TootAuthorGroup(props: {
+  status: mastodon.v1.Status;
+  now: Date;
+  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;
+}) {
   const toot = () => props.status;
   const dateFnLocale = useDateFnLocale();
 
   return (
-    <div class={tootStyle.tootAuthorGrp}>
+    <div class={tootStyle.tootAuthorGrp} onClick={props.onClick}>
       <Img src={toot().account.avatar} class={tootStyle.tootAvatar} />
       <div class={tootStyle.tootAuthorNameGrp}>
         <Body2
@@ -309,6 +315,13 @@ export function TootPreviewCard(props: {
   );
 }
 
+/**
+ * Component for a toot.
+ *
+ * If the session involved is not the first session, you must wrap
+ * this component under a `<DefaultSessionProvier />` with correct
+ * session.
+ */
 const RegularToot: Component<TootCardProps> = (props) => {
   let rootRef: HTMLElement;
   const [managed, managedActionGroup, rest] = splitProps(
@@ -319,6 +332,25 @@ const RegularToot: Component<TootCardProps> = (props) => {
   const now = useTimeSource();
   const status = () => managed.status;
   const toot = () => status().reblog ?? status();
+  const session = useDefaultSession();
+  const navigate = useNavigate();
+
+  const openProfile = (event: MouseEvent) => {
+    if (!managed.evaluated) return;
+    event.stopPropagation();
+
+    const s = session();
+    if (!s) {
+      console.warn("No session is provided");
+      return;
+    }
+
+    const acct = makeAcctText(s);
+
+    navigate(
+      `/${encodeURIComponent(acct)}/profile/${managed.status.account.id}`,
+    );
+  };
 
   css`
     .reply-sep {
@@ -396,7 +428,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
             </span>
           </div>
         </Show>
-        <TootAuthorGroup status={toot()} now={now()} />
+        <TootAuthorGroup status={toot()} now={now()} onClick={openProfile} />
         <TootContentView
           source={toot().content}
           emojis={toot().emojis}