From 2071c1e6b679aebbf368e651f7387528c4ca763d Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 00:05:56 +0800 Subject: [PATCH 1/8] start of v1.0.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 32a9d10..9cce6a9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "$schema": "https://json.schemastore.org/package", "name": "tutu", - "version": "1.0.3", + "version": "1.0.4", "description": "", "private": true, "type": "module", From c56c098bdb538dc872c335b1447184242635b776 Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 14:06:55 +0800 Subject: [PATCH 2/8] {Regular,Compact}Toot: fix time is future --- src/timelines/CompactToot.tsx | 2 +- src/timelines/RegularToot.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/timelines/CompactToot.tsx b/src/timelines/CompactToot.tsx index 0d58b3d..7042ad4 100644 --- a/src/timelines/CompactToot.tsx +++ b/src/timelines/CompactToot.tsx @@ -39,7 +39,7 @@ const CompactToot: Component = (props) => { @{toot().account.username}@{new URL(toot().account.url).hostname}
@{toot().account.username}@{new URL(toot().account.url).hostname} From 368bca9fa17c0623b09c2d89722b8effe27a2555 Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 14:17:33 +0800 Subject: [PATCH 3/8] TootBottomSheet: added cache --- src/timelines/Home.tsx | 2 ++ src/timelines/TootBottomSheet.tsx | 21 ++++++++++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index ad18c8d..5483771 100644 --- a/src/timelines/Home.tsx +++ b/src/timelines/Home.tsx @@ -43,6 +43,7 @@ import PullDownToRefresh from "./PullDownToRefresh"; import { HeroSourceProvider, type HeroSource } from "../platform/anim"; import { useNavigate } from "@solidjs/router"; import { useSignedInProfiles } from "../masto/acct"; +import { setCache as setTootBottomSheetCache } from "./TootBottomSheet"; const TimelinePanel: Component<{ client: mastodon.rest.Client; @@ -288,6 +289,7 @@ const Home: ParentComponent = (props) => { const rect = srcElement?.getBoundingClientRect(); setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect })); const acct = `${inf.username}@${p.account.site}`; + setTootBottomSheetCache(acct, toot); navigate(`/${encodeURIComponent(acct)}/${toot.id}`); }; diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index e7abbf8..b51bf7c 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -1,5 +1,5 @@ import { useNavigate, useParams } from "@solidjs/router"; -import { createResource, Show, type Component } from "solid-js"; +import { createEffect, createResource, Show, type Component } from "solid-js"; import Scaffold from "../material/Scaffold"; import TootThread from "./TootThread"; import { AppBar, IconButton, Toolbar } from "@suid/material"; @@ -9,13 +9,28 @@ import { isiOS } from "../platform/host"; import { createUnauthorizedClient, useSessions } from "../masto/clients"; import { resolveCustomEmoji } from "../masto/toot"; import RegularToot from "./RegularToot"; +import type { mastodon } from "masto"; + +let cachedEntry: [string, mastodon.v1.Status] | undefined; + +export function setCache(acct: string, status: mastodon.v1.Status) { + cachedEntry = [acct, status] +} + +function getCache(acct: string, id: string) { + if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) { + return cachedEntry[1] + } +} + const TootBottomSheet: Component = (props) => { const params = useParams<{ acct: string; id: string }>(); const navigate = useNavigate(); const allSession = useSessions(); + const acctText = () => decodeURIComponent(params.acct) const session = () => { - const [inputUsername, inputSite] = decodeURIComponent(params.acct).split( + const [inputUsername, inputSite] = acctText().split( "@", 2, ); @@ -34,7 +49,7 @@ const TootBottomSheet: Component = (props) => { }, ); - const toot = remoteToot; + const toot = () => remoteToot() ?? getCache(acctText(), params.id); const tootTitle = () => { const t = toot(); From 7cc9753d3026c0f16e7786e180b92ab5467b49f7 Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 15:01:06 +0800 Subject: [PATCH 4/8] BottomSheet: fix jumpy animation --- src/material/BottomSheet.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx index b5b93cc..73d5b4a 100644 --- a/src/material/BottomSheet.tsx +++ b/src/material/BottomSheet.tsx @@ -1,11 +1,15 @@ import { + children, createEffect, createRenderEffect, + createSignal, onCleanup, onMount, startTransition, useTransition, + type ChildrenReturn, type ParentComponent, + type ResolvedChildren, } from "solid-js"; import styles from "./BottomSheet.module.css"; import { useHeroSignal } from "../platform/anim"; @@ -40,17 +44,21 @@ const BottomSheet: ParentComponent = (props) => { let element: HTMLDialogElement; let animation: Animation | undefined; const hero = useHeroSignal(HERO); + const [cache, setCache] = createSignal(); + const ochildren = children(() => props.children); - const [pending] = useTransition() + const [pending] = useTransition(); createEffect(() => { if (props.open) { if (!element.open && !pending()) { animatedOpen(); + setCache(ochildren()); } } else { if (element.open) { animatedClose(); + setCache(undefined); } } }); @@ -115,7 +123,7 @@ const BottomSheet: ParentComponent = (props) => { return ( - {props.children} + {ochildren() ?? cache()} ); }; From 086c692dfff05739012b02788bc7861ab699527a Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 15:08:29 +0800 Subject: [PATCH 5/8] Settings: workaround for the crash on WebKit The ripple may be undefined on mount --- src/settings/Settings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/settings/Settings.tsx b/src/settings/Settings.tsx index a45a4fc..56cca5e 100644 --- a/src/settings/Settings.tsx +++ b/src/settings/Settings.tsx @@ -50,7 +50,7 @@ const Settings: ParentComponent = () => { topbar={ - + Settings From 8d14abf12289cd14b777a0b637d9704465fd9661 Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 15:09:18 +0800 Subject: [PATCH 6/8] BottomSheet: fix height on phone --- src/material/BottomSheet.module.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css index 237d0bd..5693423 100644 --- a/src/material/BottomSheet.module.css +++ b/src/material/BottomSheet.module.css @@ -31,7 +31,8 @@ bottom: 0; height: 100vh; height: 100dvh; - max-height: 100%; + max-height: 100vh; + max-height: 100dvh; } } From e2a5666b34ec196d2b1c9aa8bdd8ec03b946aa65 Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 15:39:05 +0800 Subject: [PATCH 7/8] TootBottomSheet: basic layout --- src/App.css | 2 +- src/timelines/TootBottomSheet.tsx | 78 +++++++++++++++++++++++++------ 2 files changed, 64 insertions(+), 16 deletions(-) diff --git a/src/App.css b/src/App.css index b912c3a..e2c7ce3 100644 --- a/src/App.css +++ b/src/App.css @@ -8,5 +8,5 @@ } .custom-emoji { - width: 1.25em; + width: 1em; } diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index b51bf7c..22b0946 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -1,45 +1,57 @@ import { useNavigate, useParams } from "@solidjs/router"; -import { createEffect, createResource, Show, type Component } from "solid-js"; +import { + createEffect, + createRenderEffect, + createResource, + Show, + type Component, +} from "solid-js"; import Scaffold from "../material/Scaffold"; import TootThread from "./TootThread"; -import { AppBar, IconButton, Toolbar } from "@suid/material"; +import { AppBar, Avatar, IconButton, Toolbar } from "@suid/material"; import { Title } from "../material/typography"; -import { Close as CloseIcon } from "@suid/icons-material"; +import { Close as CloseIcon, Send } from "@suid/icons-material"; import { isiOS } from "../platform/host"; import { createUnauthorizedClient, useSessions } from "../masto/clients"; import { resolveCustomEmoji } from "../masto/toot"; import RegularToot from "./RegularToot"; import type { mastodon } from "masto"; +import cards from "../material/cards.module.css"; +import { css } from "solid-styled"; let cachedEntry: [string, mastodon.v1.Status] | undefined; export function setCache(acct: string, status: mastodon.v1.Status) { - cachedEntry = [acct, status] + cachedEntry = [acct, status]; } function getCache(acct: string, id: string) { if (acct === cachedEntry?.[0] && id === cachedEntry?.[1].id) { - return cachedEntry[1] + return cachedEntry[1]; } } - const TootBottomSheet: Component = (props) => { const params = useParams<{ acct: string; id: string }>(); const navigate = useNavigate(); const allSession = useSessions(); - const acctText = () => decodeURIComponent(params.acct) + const acctText = () => decodeURIComponent(params.acct); const session = () => { - const [inputUsername, inputSite] = acctText().split( - "@", - 2, - ); + const [inputUsername, inputSite] = acctText().split("@", 2); const authedSession = allSession().find( (x) => x.account.site === inputSite && x.account.inf?.username === inputUsername, ); - return authedSession ?? { client: createUnauthorizedClient(inputSite) }; + return ( + authedSession ?? { + client: createUnauthorizedClient(inputSite), + account: undefined, + } + ); + }; + const profile = () => { + return session().account; }; const [remoteToot] = createResource( @@ -60,6 +72,17 @@ const TootBottomSheet: Component = (props) => { return "A toot"; }; + css` + .bottom-dock { + position: sticky; + bottom: 0; + } + + .name :global(img) { + max-height: 1em; + } + `; + return ( { - {tootTitle} + + createRenderEffect(() => (e.innerHTML = tootTitle())) + } + > } > -
+
- + + +
+ +
+ +
+ + + + + +
From 35f51db294e48eb4129089cd46ba112370137364 Mon Sep 17 00:00:00 2001 From: thislight Date: Tue, 13 Aug 2024 15:49:36 +0800 Subject: [PATCH 8/8] theme: fix input zoom in on iOS --- src/material/theme.css | 11 ++++++++++- src/timelines/TootBottomSheet.tsx | 2 +- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/material/theme.css b/src/material/theme.css index 76bfab4..deacbe7 100644 --- a/src/material/theme.css +++ b/src/material/theme.css @@ -18,6 +18,12 @@ --body-size: 0.9375rem; } } + + input, + textarea { + /* iOS will zoom in if the font-size is smaller than 16px (or 1rem? i dont know) */ + font-size: 1rem; + } } [lang^="zh"], @@ -99,6 +105,7 @@ --tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1); @media (max-width: 300px) { + /* XS screen, like wearables */ & { --tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std); @@ -106,6 +113,7 @@ } @media (max-width: 600px) { + /* Mobile */ & { --tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std); @@ -113,6 +121,7 @@ } @media (max-width: 1200px) { + /* Tablet */ & { --tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std); @@ -139,4 +148,4 @@ body { font-size: var(--body-size, 1rem); -} +} \ No newline at end of file diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index 22b0946..a4d72c6 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -128,7 +128,7 @@ const TootBottomSheet: Component = (props) => {