diff --git a/bun.lockb b/bun.lockb index 16c0c62..c0145f0 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/package.json b/package.json index b5fb7a4..056139a 100644 --- a/package.json +++ b/package.json @@ -40,8 +40,7 @@ "masto": "^6.8.0", "nanostores": "^0.9.5", "solid-js": "^1.8.18", - "solid-styled": "^0.11.1", - "stacktrace-js": "^2.0.2" + "solid-styled": "^0.11.1" }, "packageManager": "bun@1.1.21" } diff --git a/src/App.css b/src/App.css index b912c3a..bba585f 100644 --- a/src/App.css +++ b/src/App.css @@ -9,4 +9,4 @@ .custom-emoji { width: 1.25em; -} +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 1522795..55e9971 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -53,13 +53,11 @@ const App: Component = () => { ); }); -const UnexpectedError = lazy(() => import("./UnexpectedError.js")) - return ( { console.error(err); - return ; + return <>; }} > diff --git a/src/UnexpectedError.tsx b/src/UnexpectedError.tsx deleted file mode 100644 index 38e3c70..0000000 --- a/src/UnexpectedError.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { Button } from '@suid/material'; -import {Component, createResource} from 'solid-js' -import { css } from 'solid-styled'; - -const UnexpectedError: Component<{error?: any}> = (props) => { - - const [errorMsg] = createResource(() => props.error, async (err) => { - if (err instanceof Error) { - const mod = await import('stacktrace-js') - const stacktrace = await mod.fromError(err) - const strackMsg = stacktrace.map(entry => `${entry.functionName ?? ""}@${entry.fileName}:(${entry.lineNumber}:${entry.columnNumber})`).join('\n') - return `${err.name}: ${err.message}\n${strackMsg}` - } - - return err.toString() - }) - - css` - main { - padding: calc(var(--safe-area-inset-top) + 20px) calc(var(--safe-area-inset-right) + 20px) calc(var(--safe-area-inset-bottom) + 20px) calc(var(--safe-area-inset-left) + 20px); - } - ` - - return
-

Oh, it is our fault.

-

There is an unexpected error in our app, and it's not your fault.

-

You can reload to see if this guy is gone. If you meet this guy repeatly, please report to us.

-
- -
-
- {errorMsg.loading ? 'Generating ' : " "}Technical Infomation (Bring to us if you report the problem) - 
-        {errorMsg()}
-
-
-
-} - -export default UnexpectedError; diff --git a/src/accounts/MastodonOAuth2Callback.tsx b/src/accounts/MastodonOAuth2Callback.tsx index 249c58f..2b34af9 100644 --- a/src/accounts/MastodonOAuth2Callback.tsx +++ b/src/accounts/MastodonOAuth2Callback.tsx @@ -44,12 +44,12 @@ const MastodonOAuth2Callback: Component = () => { setDocumentTitle(`Back from ${ins.title}...`); setSiteTitle(ins.title); - const srcset = []; + const srcset = [] if (ins.thumbnail.versions["@1x"]) { - srcset.push(`${ins.thumbnail.versions["@1x"]} 1x`); + srcset.push(`${ins.thumbnail.versions["@1x"]} 1x`) } if (ins.thumbnail.versions["@2x"]) { - srcset.push(`${ins.thumbnail.versions["@2x"]} 2x`); + srcset.push(`${ins.thumbnail.versions["@2x"]} 2x`) } setSiteImg({ @@ -66,8 +66,8 @@ const MastodonOAuth2Callback: Component = () => { onGoingOAuth2Process, params.code, ); - $settings.setKey("onGoingOAuth2Process", undefined); - navigate("/", { replace: true }); + $settings.setKey('onGoingOAuth2Process', undefined) + navigate('/', {replace: true}) return; } @@ -95,27 +95,18 @@ const MastodonOAuth2Callback: Component = () => {
- - } - > + }> {`Banner @@ -123,8 +114,7 @@ const MastodonOAuth2Callback: Component = () => { Contracting {siteTitle}...

- If this page stays too long, you can close this page and sign in - again. + If this page stays too long, you can close this page and sign in again.

diff --git a/src/accounts/SignIn.tsx b/src/accounts/SignIn.tsx index bd6c95b..0d0cf94 100644 --- a/src/accounts/SignIn.tsx +++ b/src/accounts/SignIn.tsx @@ -69,8 +69,8 @@ const SignIn: Component = () => { }); onMount(() => { - $settings.setKey("onGoingOAuth2Process", undefined); - }); + $settings.setKey('onGoingOAuth2Process', undefined) + }) const onStartOAuth2 = async (e: Event) => { e.preventDefault(); @@ -107,7 +107,7 @@ const SignIn: Component = () => { for (const [k, v] of Object.entries(args)) { searches.set(k, v); } - $settings.setKey("onGoingOAuth2Process", url); + $settings.setKey("onGoingOAuth2Process", url) window.location.href = authStart.toString(); } catch (e) { setServerUrlHelperText( diff --git a/src/accounts/stores.ts b/src/accounts/stores.ts index d34a420..9668d2a 100644 --- a/src/accounts/stores.ts +++ b/src/accounts/stores.ts @@ -95,13 +95,9 @@ export const updateAcctInf = action( }, ); -export const signOut = action( - $accounts, - "signOut", - ($store, predicate: (acct: Account) => boolean) => { - $store.set($store.get().filter((a) => !predicate(a))); - }, -); +export const signOut = action($accounts, "signOut", ($store, predicate: (acct: Account) => boolean) => { + $store.set($store.get().filter(a => !predicate(a))); +}); export type RegisteredApp = { site: string; diff --git a/src/index.tsx b/src/index.tsx index 0b9e3a9..9430fe8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ -import { render } from "solid-js/web"; -import App from "./App.js"; -import "./material/theme.css"; +import {render} from 'solid-js/web' +import App from './App.js' +import "./material/theme.css" -render(() => , document.getElementById("root")!); +render(() => , document.getElementById("root")!) diff --git a/src/masto/timelines.ts b/src/masto/timelines.ts index 91e1d84..a2e7b21 100644 --- a/src/masto/timelines.ts +++ b/src/masto/timelines.ts @@ -12,7 +12,9 @@ type Timeline = { }): mastodon.Paginator; }; -export function useTimeline(timeline: Accessor) { +export function useTimeline( + timeline: Accessor, +) { let minId: string | undefined; let maxId: string | undefined; let otl: Timeline | undefined; diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css index 0295b86..1a15849 100644 --- a/src/material/BottomSheet.module.css +++ b/src/material/BottomSheet.module.css @@ -1,5 +1,5 @@ .bottomSheet { - composes: surface from "material.module.css"; + composes: surface from 'material.module.css'; border: none; position: absolute; left: 50%; @@ -22,11 +22,11 @@ @media (max-width: 560px) { & { left: 0; - top: var(--safe-area-inset-top, 0); + top: 0; transform: none; bottom: 0; height: 100vh; height: 100dvh; } } -} +} \ No newline at end of file diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx index eeefcc5..112a17e 100644 --- a/src/material/BottomSheet.tsx +++ b/src/material/BottomSheet.tsx @@ -1,5 +1,5 @@ import { createEffect, type ParentComponent } from "solid-js"; -import styles from "./BottomSheet.module.css"; +import styles from './BottomSheet.module.css' export type BottomSheetProps = { open?: boolean; @@ -20,11 +20,7 @@ const BottomSheet: ParentComponent = (props) => { } }); - return ( - - {props.children} - - ); + return {props.children}; }; export default BottomSheet; diff --git a/src/material/Button.tsx b/src/material/Button.tsx index 1e08e41..7b0051d 100644 --- a/src/material/Button.tsx +++ b/src/material/Button.tsx @@ -9,12 +9,12 @@ import materialStyles from "./material.module.css"; const Button: Component> = ( props, ) => { - const [managed, passthough] = splitProps(props, ["class", "type"]); + const [managed, passthough] = splitProps(props, ["class", 'type']); const classes = () => managed.class ? [materialStyles.button, managed.class].join(" ") : materialStyles.button; - const type = () => managed.type ?? "button"; + const type = () => managed.type ?? 'button' return ; }; diff --git a/src/material/cards.module.css b/src/material/cards.module.css index 2b1cc41..b5966e3 100644 --- a/src/material/cards.module.css +++ b/src/material/cards.module.css @@ -1,5 +1,5 @@ .card { - composes: surface from "material.module.css"; + composes: surface from 'material.module.css'; border-radius: 2px; box-shadow: var(--tutu-shadow-e2); transition: var(--tutu-transition-shadow); @@ -12,7 +12,7 @@ } &:not(.manualMargin) { - & > :not(.cardNoPad) { + &>:not(.cardNoPad) { margin-inline: var(--card-pad, 20px); } @@ -20,7 +20,7 @@ margin-top: var(--card-gut, 20px); } - > .cardGutSkip + *:not(.cardGutSkip) { + >.cardGutSkip+*:not(.cardGutSkip) { margin-top: var(--card-gut, 20px); } @@ -28,6 +28,7 @@ margin-bottom: var(--card-gut, 20px); } } + } .layoutCentered { @@ -51,4 +52,4 @@ overflow: auto; } } -} +} \ No newline at end of file diff --git a/src/material/form.module.css b/src/material/form.module.css index 1fde099..5e7dfb7 100644 --- a/src/material/form.module.css +++ b/src/material/form.module.css @@ -1,5 +1,5 @@ .textfield { - composes: touchTarget from "material.module.css"; + composes: touchTarget from 'material.module.css'; --border-color: var(--tutu-color-inactive-on-surface); --active-border-color: var(--tutu-color-primary); @@ -7,78 +7,74 @@ --active-label-color: var(--tutu-color-primary); --helper-text-color: var(--tutu-color-inactive-on-surface); - & > * { - width: 100%; + &>* { + width: 100%; } - &.error, - &:has(> input[aria-invalid="true"]) { - &:not(:focus-within) { - --border-color: var(--tutu-color-error-on-surface); - --label-color: var(--tutu-color-error-on-surface); - --helper-text-color: var(--tutu-color-error-on-surface); - } + &.error, &:has(>input[aria-invalid="true"]) { + &:not(:focus-within) { + --border-color: var(--tutu-color-error-on-surface); + --label-color: var(--tutu-color-error-on-surface); + --helper-text-color: var(--tutu-color-error-on-surface); + } - &:focus-within { - --helper-text-color: var(--tutu-color-error-on-surface); - } + &:focus-within { + --helper-text-color: var(--tutu-color-error-on-surface); + } } + position: relative; - & > label { - position: absolute; - left: 0; - bottom: calc(10px + var(--bottom-height, 0px)); - color: var(--label-color); - transition: - bottom 0.2s ease-in-out, - font-size 0.2s ease-in-out, - color 0.2s ease-in-out; - cursor: text; - font-size: 0.8125rem; + &>label { + position: absolute; + left: 0; + bottom: calc(10px + var(--bottom-height, 0px)); + color: var(--label-color); + transition: bottom .2s ease-in-out, font-size .2s ease-in-out, color .2s ease-in-out; + cursor: text; + font-size: 0.8125rem; } - & > label:has(+ input:not(:placeholder-shown)) { - bottom: calc(100% - 0.8125rem); + &>label:has(+ input:not(:placeholder-shown)) { + bottom: calc(100% - 0.8125rem); } - &:focus-within > label, - &.float-label > label { - bottom: calc(100% - 0.8125rem); - color: var(--active-label-color); + &:focus-within>label, &.float-label>label { + bottom: calc(100% - 0.8125rem); + color: var(--active-label-color); } - & > input[type="text"], - & > input[type="password"] { - border: none; - outline: none; - border-bottom: 1px solid var(--border-color); - background-color: transparent; - padding-top: 16px; - padding-bottom: 8px; - margin-bottom: 1px; - transition: border-color 0.2s ease-in-out; + &>input[type='text'], + &>input[type='password'] { + border: none; + outline: none; + border-bottom: 1px solid var(--border-color); + background-color: transparent; + padding-top: 16px; + padding-bottom: 8px; + margin-bottom: 1px; + transition: border-color .2s ease-in-out; - &:focus { - border-bottom: 2px solid var(--active-border-color); - margin-bottom: 0; - } + &:focus { + border-bottom: 2px solid var(--active-border-color); + margin-bottom: 0; + } } &.withHelperText { - --bottom-height: 0.8125rem; + --bottom-height: 0.8125rem; } & .helperText { - color: var(--helper-text-color); - font-size: 0.8125rem; - line-height: 100%; - -webkit-line-clamp: 1; - line-clamp: 1; - display: flex; - justify-content: space-between; - min-height: 0.8125rem; - cursor: auto; + color: var(--helper-text-color); + font-size: 0.8125rem; + line-height: 100%; + -webkit-line-clamp: 1; + line-clamp: 1; + display: flex; + justify-content: space-between; + min-height: 0.8125rem; + cursor: auto; } -} +} \ No newline at end of file diff --git a/src/material/material.module.css b/src/material/material.module.css index 3443756..d51a179 100644 --- a/src/material/material.module.css +++ b/src/material/material.module.css @@ -10,7 +10,7 @@ } .button { - composes: buttonText from "./typography.module.css"; + composes: buttonText from './typography.module.css'; composes: touchTarget; border: none; @@ -18,34 +18,28 @@ color: var(--tutu-color-primary); font-family: inherit; - &:focus, - &:hover, - &:focus-visible { - background-color: var(--tutu-color-surface-dd); + &:focus,&:hover,&:focus-visible { + background-color: var(--tutu-color-surface-dd); } &.pressed { - background-color: var(--tutu-color-surface-d); + background-color: var(--tutu-color-surface-d); } &.raised { - background-color: var(--tutu-color-primary); - color: var(--tutu-color-on-primary); + background-color: var(--tutu-color-primary); + color: var(--tutu-color-on-primary); } - &:disabled, - &[aria-disabled]:not([aria-disabled="false"]) { - color: #9e9e9e; + &:disabled, &[aria-disabled]:not([aria-disabled="false"]) { + color: #9e9e9e; - &:focus, - &:hover, - &:focus-visible { - background-color: transparent; - } + &:focus,&:hover,&:focus-visible { + background-color: transparent; + } } - .toolbar &, - .appbar & { + .toolbar &, .appbar & { height: 100%; margin-block: 0; padding-block: 0; @@ -55,9 +49,7 @@ .appbar & { color: var(--tutu-color-on-primary); - &:focus, - &:hover, - &:focus-visible { + &:focus,&:hover,&:focus-visible { background-color: var(--tutu-color-primary-ll); } @@ -70,3 +62,4 @@ color: var(--tutu-color-on-surface); } } + diff --git a/src/material/mui.ts b/src/material/mui.ts index 6527cc4..15511ac 100644 --- a/src/material/mui.ts +++ b/src/material/mui.ts @@ -2,16 +2,15 @@ import { Theme, createTheme } from "@suid/material/styles"; import { deepPurple, amber } from "@suid/material/colors"; import { Accessor } from "solid-js"; -export function useRootTheme(): Accessor { - return () => - createTheme({ - palette: { - primary: { - main: deepPurple[500], - }, - secondary: { - main: amber.A200, - }, +export function useRootTheme() : Accessor { + return () => createTheme({ + palette: { + primary: { + main: deepPurple[500] }, - }); + secondary: { + main: amber.A200 + } + } + }) } diff --git a/src/material/theme.css b/src/material/theme.css index 76bfab4..5d26879 100644 --- a/src/material/theme.css +++ b/src/material/theme.css @@ -1,6 +1,5 @@ :root, -[lang^="en"], -[lang="en"] { +[lang^="en"], [lang="en"] { --md-typography-type: "regular"; --title-size: 1.25rem; --title-weight: 500; @@ -20,12 +19,9 @@ } } -[lang^="zh"], -[lang="zh"], -[lang^="kr"], -[lang="kr"], -[lang^="ja"], -[lang="ja"] { +[lang^="zh"], [lang="zh"], +[lang^="kr"], [lang="kr"], +[lang^="ja"], [lang="ja"] { --md-typography-type: "dense"; --title-size: 1.4375rem; --subheading-size: 1.1875rem; @@ -99,6 +95,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 +103,7 @@ } @media (max-width: 600px) { + /* Mobile */ & { --tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std); @@ -113,6 +111,7 @@ } @media (max-width: 1200px) { + /* Tablet */ & { --tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std); @@ -126,17 +125,11 @@ } * { - font-family: - Roboto, - "Noto Sans", - system-ui, - -apple-system, - BlinkMacSystemFont, - sans-serif; + font-family: Roboto, "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; margin: 0; } body { font-size: var(--body-size, 1rem); -} +} \ No newline at end of file diff --git a/src/material/typography.tsx b/src/material/typography.tsx index 2ea0fd3..2121266 100644 --- a/src/material/typography.tsx +++ b/src/material/typography.tsx @@ -3,7 +3,7 @@ import { Dynamic } from "solid-js/web"; import typography from "./typography.module.css"; import { mergeClass } from "../utils"; -type AnyElement = keyof JSX.IntrinsicElements | ParentComponent; +type AnyElement = keyof JSX.IntrinsicElements | ParentComponent type PropsOf = E extends ParentComponent @@ -12,7 +12,9 @@ type PropsOf = ? JSX.IntrinsicElements[E] : JSX.HTMLAttributes; -export type TypographyProps = { +export type TypographyProps< + E extends AnyElement, +> = { ref?: Ref; component?: E; class?: string; @@ -31,9 +33,7 @@ type TypographyKind = | "caption" | "buttonText"; -export function Typography( - props: { typography: TypographyKind } & TypographyProps, -) { +export function Typography(props: {typography: TypographyKind } & TypographyProps) { const [managed, passthough] = splitProps(props, [ "ref", "component", @@ -50,38 +50,38 @@ export function Typography( {...passthough} > ); -} +}; export function Display4(props: TypographyProps) { - return ; + return } export function Display3(props: TypographyProps) { - return ; + return } export function Display2(props: TypographyProps) { - return ; + return } export function Display1(props: TypographyProps) { - return ; + return } export function Headline(props: TypographyProps) { - return ; + return } export function Title(props: TypographyProps) { - return ; + return } export function Subheading(props: TypographyProps) { - return ; + return } export function Body1(props: TypographyProps) { - return ; + return } export function Body2(props: TypographyProps) { - return ; + return } export function Caption(props: TypographyProps) { - return ; + return } export function ButtonText(props: TypographyProps) { - return ; + return } diff --git a/src/platform/anim.ts b/src/platform/anim.ts index 75446ef..eead57a 100644 --- a/src/platform/anim.ts +++ b/src/platform/anim.ts @@ -1,13 +1,11 @@ import { createContext, useContext, type Accessor } from "solid-js"; -export type HeroSource = { - [key: string | symbol | number]: HTMLElement | undefined; -}; +export type HeroSource = {[key: string | symbol | number]: HTMLElement | undefined} -const HeroSourceContext = createContext>(() => ({})); +const HeroSourceContext = createContext>(() => ({})) -export const HeroSourceProvider = HeroSourceContext.Provider; +export const HeroSourceProvider = HeroSourceContext.Provider export function useHeroSource() { - return useContext(HeroSourceContext); + return useContext(HeroSourceContext) } diff --git a/src/settings/stores.ts b/src/settings/stores.ts index 25f6484..d3ddc24 100644 --- a/src/settings/stores.ts +++ b/src/settings/stores.ts @@ -1,15 +1,11 @@ import { persistentMap } from "@nanostores/persistent"; type Settings = { - onGoingOAuth2Process?: string; - prefetchTootsDisabled?: boolean; -}; + onGoingOAuth2Process?: string + prefetchTootsDisabled?: boolean +} -export const $settings = persistentMap( - "settings::", - {}, - { - encode: JSON.stringify, - decode: JSON.parse, - }, -); +export const $settings = persistentMap("settings::", {}, { + encode: JSON.stringify, + decode: JSON.parse +}) diff --git a/src/timelines/CompactToot.tsx b/src/timelines/CompactToot.tsx index 0d58b3d..b8db733 100644 --- a/src/timelines/CompactToot.tsx +++ b/src/timelines/CompactToot.tsx @@ -18,14 +18,16 @@ const CompactToot: Component = (props) => { const toot = () => props.status; return (
-
+
{ appliedCustomEmoji( @@ -46,7 +48,7 @@ const CompactToot: Component = (props) => { ref={(e: { innerHTML: string }) => { appliedCustomEmoji(e, toot().content, toot().emojis); }} - class={[tootStyle.compactTootContent].join(" ")} + class={[tootStyle.compactTootContent].join(' ')} >
); diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index 44682e1..c70cf39 100644 --- a/src/timelines/Home.tsx +++ b/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([]); const [focusRange, setFocusRange] = createSignal([0, 0] as readonly [ number, number, ]); - const child = children(() => props.children); + const child = children(() => props.children) let scrollEventLockReleased = true; @@ -229,7 +229,7 @@ const Home: ParentComponent = (props) => { const onTabClick = (idx: number) => { const items = panelList.querySelectorAll(".tab-panel"); if (items.length > idx) { - items.item(idx).scrollIntoView({ block: "start", behavior: "smooth" }); + items.item(idx).scrollIntoView({ block: "nearest", behavior: "smooth" }); } }; @@ -269,11 +269,7 @@ const Home: ParentComponent = (props) => { - + Home @@ -286,14 +282,7 @@ const Home: ParentComponent = (props) => { - - $settings.setKey( - "prefetchTootsDisabled", - !$settings.get().prefetchTootsDisabled, - ) - } - > + $settings.setKey("prefetchTootsDisabled", !$settings.get().prefetchTootsDisabled)}> Prefetch Toots diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx index 198de31..f98df53 100644 --- a/src/timelines/MediaAttachmentGrid.tsx +++ b/src/timelines/MediaAttachmentGrid.tsx @@ -11,7 +11,7 @@ const MediaAttachmentGrid: Component<{ }> = (props) => { let rootRef: HTMLElement; const [viewerIndex, setViewerIndex] = createSignal(); - const viewerOpened = () => typeof viewerIndex() !== "undefined"; + const viewerOpened = () => typeof viewerIndex() !== "undefined" const gridTemplateColumns = () => { const l = props.attachments.length; if (l < 2) { diff --git a/src/timelines/MediaViewer.tsx b/src/timelines/MediaViewer.tsx index 65da782..5e73f4c 100644 --- a/src/timelines/MediaViewer.tsx +++ b/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 = (props) => { @@ -128,13 +128,6 @@ const MediaViewer: ParentComponent = (props) => { left: 0; z-index: 1; cursor: ${dragging() ? "grabbing" : "grab"}; - padding-left: var(--safe-area-inset-left, 0); - padding-right: var(--safe-area-inset-right, 0); - padding-bottom: var(--safe-area-inset-bottom, 0); - - :global(> .MuiToolbar-root) { - padding-top: var(--safe-area-inset-top, 0); - } } .left-dock { @@ -214,13 +207,7 @@ const MediaViewer: ParentComponent = (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 diff --git a/src/timelines/ProfileMenuButton.tsx b/src/timelines/ProfileMenuButton.tsx index 4fe8f04..b997041 100644 --- a/src/timelines/ProfileMenuButton.tsx +++ b/src/timelines/ProfileMenuButton.tsx @@ -8,13 +8,7 @@ import { Menu, MenuItem, } from "@suid/material"; -import { - ErrorBoundary, - Show, - createSignal, - createUniqueId, - type ParentComponent, -} from "solid-js"; +import { Show, createSignal, createUniqueId, type ParentComponent } from "solid-js"; import { Settings as SettingsIcon, Bookmark as BookmarkIcon, @@ -48,79 +42,79 @@ const ProfileMenuButton: ParentComponent<{ return ( <> - - - - - - - - - - + + + + + + + + + + - - - - - Bookmarks - - - - - - Likes - - - - - - Lists - + + + + + Bookmarks + + + + + + Likes + + + + + + Lists + + + + {props.children} - - {props.children} - - - - - - - Settings - - + + + + + + Settings + + ); }; diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index 28bc4d8..7d9b694 100644 --- a/src/timelines/RegularToot.tsx +++ b/src/timelines/RegularToot.tsx @@ -211,7 +211,7 @@ const RegularToot: Component = (props) => { classList={{ [tootStyle.toot]: true, [tootStyle.expanded]: managed.evaluated, - [managed.class || ""]: true, + [managed.class || ""]: true }} ref={rootRef!} lang={toot().language || managed.lang} diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index eb11704..0b40aa0 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -1,7 +1,8 @@ import type { Component } from "solid-js"; -const TootBottomSheet: Component = (props) => { - return <>; -}; -export default TootBottomSheet; +const TootBottomSheet: Component = (props) => { + return <> +} + +export default TootBottomSheet diff --git a/src/timelines/TootThread.tsx b/src/timelines/TootThread.tsx index c23b8f4..cf4c226 100644 --- a/src/timelines/TootThread.tsx +++ b/src/timelines/TootThread.tsx @@ -38,9 +38,7 @@ const TootThread: Component = (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; } @@ -66,10 +64,7 @@ const TootThread: Component = (props) => { `; return ( -
setExpanded((x) => !x)} - > +
setExpanded((x) => !x)}> .toot { + &>.toot { box-shadow: none; } @@ -47,11 +46,11 @@ display: grid; grid-template-columns: 1fr auto; - > * { + >* { color: var(--tutu-color-secondary-text-on-surface); } - > :last-child { + >:last-child { grid-column: 1 /3; } @@ -81,7 +80,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; @@ -151,14 +150,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; @@ -169,7 +168,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; @@ -177,7 +176,7 @@ flex-flow: row wrap; justify-content: space-evenly; - > button { + > button{ color: var(--tutu-color-on-surface); padding: 10px 8px; @@ -207,4 +206,4 @@ 100% { opacity: 1; } -} +} \ No newline at end of file diff --git a/src/utils.tsx b/src/utils.tsx index 9ca5052..51091ca 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -1,26 +1,26 @@ import { createRenderEffect, createSignal, onCleanup } from "solid-js"; export function useDocumentTitle(newTitle?: string) { - const capturedTitle = document.title; - const [title, setTitle] = createSignal(newTitle ?? capturedTitle); + const capturedTitle = document.title + const [title, setTitle] = createSignal(newTitle ?? capturedTitle) createRenderEffect(() => { - document.title = title(); - }); + document.title = title() + }) onCleanup(() => { - document.title = capturedTitle; - }); + document.title = capturedTitle + }) - return setTitle; + return setTitle } export function mergeClass(c1: string | undefined, c2: string | undefined) { if (!c1) { - return c2; + return c2 } if (!c2) { - return c1; + return c1 } - return [c1, c2].join(" "); + return [c1, c2].join(' ') }