format code using prettier

src/timelines/CompactToot.tsx

@@ -18,16 +18,14 @@ const CompactToot: Component<CompactTootProps> = (props) => {
   const toot = () => props.status;
   return (
     <section
-      class={[tootStyle.compact,  props.class || ""].join(" ")}
+      class={[tootStyle.compact, props.class || ""].join(" ")}
       lang={toot().language || undefined}
     >
       <Img
         src={toot().account.avatar}
-        class={[
-          tootStyle.tootAvatar,
-        ].join(" ")}
+        class={[tootStyle.tootAvatar].join(" ")}
       />
-      <div class={[tootStyle.compactAuthorGroup].join(' ')}>
+      <div class={[tootStyle.compactAuthorGroup].join(" ")}>
         <Body2
           ref={(e: { innerHTML: string }) => {
             appliedCustomEmoji(
@@ -48,7 +46,7 @@ const CompactToot: Component<CompactTootProps> = (props) => {
         ref={(e: { innerHTML: string }) => {
           appliedCustomEmoji(e, toot().content, toot().emojis);
         }}
-        class={[tootStyle.compactTootContent].join(' ')}
+        class={[tootStyle.compactTootContent].join(" ")}
       ></div>
     </section>
   );

src/timelines/Home.tsx

@@ -155,20 +155,20 @@ const Home: ParentComponent = (props) => {
   useDocumentTitle("Timelines");
   const now = createTimeSource();
 
-  const settings$ = useStore($settings)
+  const settings$ = useStore($settings);
   const sessions = useSessions();
   const client = () => sessions()[0].client;
   const [profile] = useAcctProfile(client);
 
   const [panelOffset, setPanelOffset] = createSignal(0);
-  const prefetching = () => !settings$().prefetchTootsDisabled
+  const prefetching = () => !settings$().prefetchTootsDisabled;
   const [currentFocusOn, setCurrentFocusOn] = createSignal<HTMLElement[]>([]);
   const [focusRange, setFocusRange] = createSignal([0, 0] as readonly [
     number,
     number,
   ]);
 
-  const child = children(() => props.children)
+  const child = children(() => props.children);
 
   let scrollEventLockReleased = true;
 
@@ -269,7 +269,11 @@ const Home: ParentComponent = (props) => {
       <Scaffold
         topbar={
           <AppBar position="static">
-            <Toolbar variant="dense" class="responsive" sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}>
+            <Toolbar
+              variant="dense"
+              class="responsive"
+              sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+            >
               <Tabs onFocusChanged={setCurrentFocusOn} offset={panelOffset()}>
                 <Tab focus={isTabFocus(0)} onClick={[onTabClick, 0]}>
                   Home
@@ -282,7 +286,14 @@ const Home: ParentComponent = (props) => {
                 </Tab>
               </Tabs>
               <ProfileMenuButton profile={profile()}>
-                <MenuItem onClick={(e) => $settings.setKey("prefetchTootsDisabled", !$settings.get().prefetchTootsDisabled)}>
+                <MenuItem
+                  onClick={(e) =>
+                    $settings.setKey(
+                      "prefetchTootsDisabled",
+                      !$settings.get().prefetchTootsDisabled,
+                    )
+                  }
+                >
                   <ListItemText>Prefetch Toots</ListItemText>
                   <ListItemSecondaryAction>
                     <Switch checked={prefetching()}></Switch>

src/timelines/MediaAttachmentGrid.tsx

@@ -11,7 +11,7 @@ const MediaAttachmentGrid: Component<{
 }> = (props) => {
   let rootRef: HTMLElement;
   const [viewerIndex, setViewerIndex] = createSignal<number>();
-  const viewerOpened = () => typeof viewerIndex() !== "undefined"
+  const viewerOpened = () => typeof viewerIndex() !== "undefined";
   const gridTemplateColumns = () => {
     const l = props.attachments.length;
     if (l < 2) {

src/timelines/MediaViewer.tsx

@@ -36,7 +36,7 @@ function within(n: number, target: number, range: number) {
 }
 
 function clamp(input: number, min: number, max: number) {
-  return Math.min(Math.max(input, min), max)
+  return Math.min(Math.max(input, min), max);
 }
 
 const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
@@ -207,7 +207,13 @@ const MediaViewer: ParentComponent<MediaViewerProps> = (props) => {
     move: number,
     idx: number,
   ) => {
-    const { ref, top: otop, left: oleft, scale: oscale, osize: [owidth, oheight] } = state[idx];
+    const {
+      ref,
+      top: otop,
+      left: oleft,
+      scale: oscale,
+      osize: [owidth, oheight],
+    } = state[idx];
     const [cx, cy] = center;
     const iy = clamp(cy - otop, 0, oheight),
       ix = clamp(cx - oleft, 0, owidth); // in image coordinate system

src/timelines/ProfileMenuButton.tsx

@@ -8,7 +8,13 @@ import {
   Menu,
   MenuItem,
 } from "@suid/material";
-import { Show, createSignal, createUniqueId, type ParentComponent } from "solid-js";
+import {
+  ErrorBoundary,
+  Show,
+  createSignal,
+  createUniqueId,
+  type ParentComponent,
+} from "solid-js";
 import {
   Settings as SettingsIcon,
   Bookmark as BookmarkIcon,
@@ -42,79 +48,79 @@ const ProfileMenuButton: ParentComponent<{
 
   return (
     <>
-      <ButtonBase
-        aria-haspopup="true"
-        sx={{ borderRadius: "50%" }}
-        id={buttonId}
-        onClick={onClick}
-        aria-controls={open() ? menuId : undefined}
-        aria-expanded={open() ? "true" : undefined}
-      >
-        <Avatar
-          alt={`${props.profile?.displayName}'s avatar`}
-          src={props.profile?.avatar}
-        ></Avatar>
-      </ButtonBase>
-      <Menu
-        id={menuId}
-        anchorEl={anchor()}
-        open={open()}
-        onClose={onClose}
-        MenuListProps={{
-          "aria-labelledby": buttonId,
-          sx: {
-            minWidth: "220px",
-          }
-        }}
-        anchorOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "right",
-        }}
-      >
-        <MenuItem>
-          <ListItemAvatar>
-            <Avatar src={props.profile?.avatar}></Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={props.profile?.displayName}
-            secondary={`@${props.profile?.username}`}
-          ></ListItemText>
-        </MenuItem>
+        <ButtonBase
+          aria-haspopup="true"
+          sx={{ borderRadius: "50%" }}
+          id={buttonId}
+          onClick={onClick}
+          aria-controls={open() ? menuId : undefined}
+          aria-expanded={open() ? "true" : undefined}
+        >
+          <Avatar
+            alt={`${props.profile?.displayName}'s avatar`}
+            src={props.profile?.avatar}
+          ></Avatar>
+        </ButtonBase>
+        <Menu
+          id={menuId}
+          anchorEl={anchor()}
+          open={open()}
+          onClose={onClose}
+          MenuListProps={{
+            "aria-labelledby": buttonId,
+            sx: {
+              minWidth: "220px",
+            },
+          }}
+          anchorOrigin={{
+            vertical: "top",
+            horizontal: "right",
+          }}
+          transformOrigin={{
+            vertical: "top",
+            horizontal: "right",
+          }}
+        >
+          <MenuItem>
+            <ListItemAvatar>
+              <Avatar src={props.profile?.avatar}></Avatar>
+            </ListItemAvatar>
+            <ListItemText
+              primary={props.profile?.displayName}
+              secondary={`@${props.profile?.username}`}
+            ></ListItemText>
+          </MenuItem>
 
-        <MenuItem>
-          <ListItemIcon>
-            <BookmarkIcon />
-          </ListItemIcon>
-          <ListItemText>Bookmarks</ListItemText>
-        </MenuItem>
-        <MenuItem>
-          <ListItemIcon>
-            <LikeIcon />
-          </ListItemIcon>
-          <ListItemText>Likes</ListItemText>
-        </MenuItem>
-        <MenuItem>
-          <ListItemIcon>
-            <ListIcon />
-          </ListItemIcon>
-          <ListItemText>Lists</ListItemText>
-        </MenuItem>
-        <Divider />
-        <Show when={props.children}>
-          {props.children}
+          <MenuItem>
+            <ListItemIcon>
+              <BookmarkIcon />
+            </ListItemIcon>
+            <ListItemText>Bookmarks</ListItemText>
+          </MenuItem>
+          <MenuItem>
+            <ListItemIcon>
+              <LikeIcon />
+            </ListItemIcon>
+            <ListItemText>Likes</ListItemText>
+          </MenuItem>
+          <MenuItem>
+            <ListItemIcon>
+              <ListIcon />
+            </ListItemIcon>
+            <ListItemText>Lists</ListItemText>
+          </MenuItem>
           <Divider />
-        </Show>
-        <MenuItem component={A} href="/settings" onClick={onClose}>
-          <ListItemIcon>
-            <SettingsIcon />
-          </ListItemIcon>
-          <ListItemText>Settings</ListItemText>
-        </MenuItem>
-      </Menu>
+          <Show when={props.children}>
+            {props.children}
+            <Divider />
+          </Show>
+          <MenuItem component={A} href="/settings" onClick={onClose}>
+            <ListItemIcon>
+              <SettingsIcon />
+            </ListItemIcon>
+            <ListItemText>Settings</ListItemText>
+          </MenuItem>
+        </Menu>
     </>
   );
 };

src/timelines/RegularToot.tsx

@@ -211,7 +211,7 @@ const RegularToot: Component<TootCardProps> = (props) => {
         classList={{
           [tootStyle.toot]: true,
           [tootStyle.expanded]: managed.evaluated,
-          [managed.class || ""]: true
+          [managed.class || ""]: true,
         }}
         ref={rootRef!}
         lang={toot().language || managed.lang}

src/timelines/TootBottomSheet.tsx

@@ -1,8 +1,7 @@
 import type { Component } from "solid-js";
 
-
 const TootBottomSheet: Component = (props) => {
-  return <></>
-}
+  return <></>;
+};
 
-export default TootBottomSheet
+export default TootBottomSheet;

src/timelines/TootThread.tsx

@@ -38,7 +38,9 @@ const TootThread: Component<TootThreadProps> = (props) => {
 
   css`
     article {
-      transition: margin 90ms var(--tutu-anim-curve-sharp), var(--tutu-transition-shadow);
+      transition:
+        margin 90ms var(--tutu-anim-curve-sharp),
+        var(--tutu-transition-shadow);
       user-select: none;
       cursor: pointer;
     }
@@ -64,7 +66,10 @@ const TootThread: Component<TootThreadProps> = (props) => {
   `;
 
   return (
-    <article classList={{ "thread-line": !!inReplyTo(), "expanded": expanded() }} onClick={() => setExpanded((x) => !x)}>
+    <article
+      classList={{ "thread-line": !!inReplyTo(), expanded: expanded() }}
+      onClick={() => setExpanded((x) => !x)}
+    >
       <Show when={inReplyTo()}>
         <CompactToot
           status={inReplyTo()!}

src/timelines/toot.module.css

@@ -6,13 +6,14 @@
 
   &.toot {
     /* fix composition ordering: I think the css module processor should aware the overriding and behaves, but no */
-    transition: margin-block 125ms var(--tutu-anim-curve-std),
+    transition:
+      margin-block 125ms var(--tutu-anim-curve-std),
       height 225ms var(--tutu-anim-curve-std),
       var(--tutu-transition-shadow);
     border-radius: 0;
   }
 
-  &>.toot {
+  & > .toot {
     box-shadow: none;
   }
 
@@ -46,11 +47,11 @@
   display: grid;
   grid-template-columns: 1fr auto;
 
-  >* {
+  > * {
     color: var(--tutu-color-secondary-text-on-surface);
   }
 
-  >:last-child {
+  > :last-child {
     grid-column: 1 /3;
   }
 
@@ -80,7 +81,7 @@
 }
 
 .tootContent {
-  composes: cardNoPad from '../material/cards.module.css';
+  composes: cardNoPad from "../material/cards.module.css";
   margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
   margin-right: var(--card-pad, 0);
   line-height: 1.5;
@@ -150,14 +151,14 @@
 }
 
 .tootAttachmentGrp {
-  composes: cardNoPad from '../material/cards.module.css';
+  composes: cardNoPad from "../material/cards.module.css";
   margin-top: 1em;
   margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px);
   margin-right: var(--card-pad, 0);
   display: grid;
   gap: 4px;
 
-  >:where(img) {
+  > :where(img) {
     max-height: 35vh;
     min-height: 40px;
     object-fit: none;
@@ -168,7 +169,7 @@
 }
 
 .tootBottomActionGrp {
-  composes: cardGutSkip from '../material/cards.module.css';
+  composes: cardGutSkip from "../material/cards.module.css";
   padding-block: calc((var(--card-gut) - 10px) / 2);
 
   animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding;
@@ -176,7 +177,7 @@
   flex-flow: row wrap;
   justify-content: space-evenly;
 
-  > button{
+  > button {
     color: var(--tutu-color-on-surface);
     padding: 10px 8px;
 
@@ -206,4 +207,4 @@
   100% {
     opacity: 1;
   }
-}
+}