This commit is contained in:
		
							parent
							
								
									29eaf1a02b
								
							
						
					
					
						commit
						cd1ae210e7
					
				
					 4 changed files with 2 additions and 108 deletions
				
			
		| 
						 | 
				
			
			@ -1,6 +1,5 @@
 | 
			
		|||
import {
 | 
			
		||||
  Component,
 | 
			
		||||
  For,
 | 
			
		||||
  onCleanup,
 | 
			
		||||
  createSignal,
 | 
			
		||||
  Show,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -12,7 +12,6 @@ import Scaffold from "../material/Scaffold";
 | 
			
		|||
import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
 | 
			
		||||
import { Title } from "../material/typography";
 | 
			
		||||
import {
 | 
			
		||||
  ArrowBack as BackIcon,
 | 
			
		||||
  Close as CloseIcon,
 | 
			
		||||
} from "@suid/icons-material";
 | 
			
		||||
import { useSessionForAcctStr } from "../masto/clients";
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,6 +1,5 @@
 | 
			
		|||
import {
 | 
			
		||||
  Component,
 | 
			
		||||
  For,
 | 
			
		||||
  createSignal,
 | 
			
		||||
  ErrorBoundary,
 | 
			
		||||
  type Ref,
 | 
			
		||||
| 
						 | 
				
			
			@ -20,7 +19,6 @@ import RegularToot, {
 | 
			
		|||
  findRootToot,
 | 
			
		||||
} from "./RegularToot";
 | 
			
		||||
import cardStyle from "../material/cards.module.css";
 | 
			
		||||
import type { ReactiveMap } from "@solid-primitives/map";
 | 
			
		||||
import type { ThreadNode } from "../masto/timelines";
 | 
			
		||||
 | 
			
		||||
function positionTootInThread(index: number, threadLength: number) {
 | 
			
		||||
| 
						 | 
				
			
			@ -73,7 +71,7 @@ const TootList: Component<{
 | 
			
		|||
      });
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    /* const result = reblogged
 | 
			
		||||
    const result = reblogged
 | 
			
		||||
      ? await client.v1.statuses.$select(status.id).unreblog()
 | 
			
		||||
      : (await client.v1.statuses.$select(status.id).reblog()).reblog!;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -84,7 +82,7 @@ const TootList: Component<{
 | 
			
		|||
      });
 | 
			
		||||
    } else {
 | 
			
		||||
      props.onChangeToot(status.id, result);
 | 
			
		||||
    } */
 | 
			
		||||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const toggleFavourite = async (status: mastodon.v1.Status) => {
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,102 +0,0 @@
 | 
			
		|||
import type { mastodon } from "masto";
 | 
			
		||||
import { Show, createResource, createSignal, type Component, type Ref } from "solid-js";
 | 
			
		||||
import CompactToot from "./CompactToot";
 | 
			
		||||
import { useTimeSource } from "../platform/timesrc";
 | 
			
		||||
import RegularToot from "./RegularToot";
 | 
			
		||||
import cardStyle from "../material/cards.module.css";
 | 
			
		||||
import { css } from "solid-styled";
 | 
			
		||||
 | 
			
		||||
type TootThreadProps = {
 | 
			
		||||
  ref?: Ref<HTMLElement>,
 | 
			
		||||
  status: mastodon.v1.Status;
 | 
			
		||||
  client: mastodon.rest.Client;
 | 
			
		||||
  expanded?: 0 | 1 | 2;
 | 
			
		||||
 | 
			
		||||
  onBoost?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
 | 
			
		||||
  onBookmark?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
 | 
			
		||||
  onReply?(client: mastodon.rest.Client, status: mastodon.v1.Status): void
 | 
			
		||||
  onExpandChange?(level: 0 | 1 | 2): void;
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
const TootThread: Component<TootThreadProps> = (props) => {
 | 
			
		||||
  const status = () => props.status;
 | 
			
		||||
  const now = useTimeSource();
 | 
			
		||||
  const expanded = () => props.expanded ?? 0;
 | 
			
		||||
 | 
			
		||||
  const [inReplyTo] = createResource(
 | 
			
		||||
    () => [props.client, status().inReplyToId || null] as const,
 | 
			
		||||
    async ([client, replyToId]) => {
 | 
			
		||||
      if (!(client && replyToId)) return null;
 | 
			
		||||
      return await client.v1.statuses.$select(replyToId).fetch();
 | 
			
		||||
    },
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const boost = (status: mastodon.v1.Status) => {
 | 
			
		||||
    props.onBoost?.(props.client, status);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const bookmark = (status: mastodon.v1.Status) => {
 | 
			
		||||
    props.onBookmark?.(props.client, status);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const reply = (status: mastodon.v1.Status) => {
 | 
			
		||||
    props.onReply?.(props.client, status)
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  css`
 | 
			
		||||
    article {
 | 
			
		||||
      transition:
 | 
			
		||||
        margin 90ms var(--tutu-anim-curve-sharp),
 | 
			
		||||
        var(--tutu-transition-shadow);
 | 
			
		||||
      user-select: none;
 | 
			
		||||
      cursor: pointer;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .thread-line {
 | 
			
		||||
      position: relative;
 | 
			
		||||
      &::before {
 | 
			
		||||
        content: "";
 | 
			
		||||
        position: absolute;
 | 
			
		||||
        left: 36px;
 | 
			
		||||
        top: 16px;
 | 
			
		||||
        bottom: 0;
 | 
			
		||||
        background-color: var(--tutu-color-secondary);
 | 
			
		||||
        width: 2px;
 | 
			
		||||
        display: block;
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    .expanded {
 | 
			
		||||
      margin-block: 20px;
 | 
			
		||||
      box-shadow: var(--tutu-shadow-e9);
 | 
			
		||||
    }
 | 
			
		||||
  `;
 | 
			
		||||
 | 
			
		||||
  const nextExpandLevel = [1, 2, 2] as const;
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <article
 | 
			
		||||
      ref={props.ref}
 | 
			
		||||
      classList={{ "thread-line": !!inReplyTo(), expanded: expanded() > 0 }}
 | 
			
		||||
      onClick={() => props.onExpandChange?.(nextExpandLevel[expanded()])}
 | 
			
		||||
    >
 | 
			
		||||
      <Show when={inReplyTo()}>
 | 
			
		||||
        <CompactToot
 | 
			
		||||
          status={inReplyTo()!}
 | 
			
		||||
          now={now()}
 | 
			
		||||
          class={[cardStyle.card, cardStyle.manualMargin].join(" ")}
 | 
			
		||||
        />
 | 
			
		||||
      </Show>
 | 
			
		||||
      <RegularToot
 | 
			
		||||
        status={status()}
 | 
			
		||||
        class={cardStyle.card}
 | 
			
		||||
        actionable={expanded() > 0}
 | 
			
		||||
        onBookmark={(s) => bookmark(s)}
 | 
			
		||||
        onRetoot={(s) => boost(s)}
 | 
			
		||||
        onReply={s => reply(s)}
 | 
			
		||||
      />
 | 
			
		||||
    </article>
 | 
			
		||||
  );
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
export default TootThread;
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue