diff --git a/src/timelines/TootComposer.css b/src/timelines/TootComposer.css new file mode 100644 index 0000000..c8b279d --- /dev/null +++ b/src/timelines/TootComposer.css @@ -0,0 +1,12 @@ + +.TootComposer { + --card-gut: 8px; + + .reply-input { + display: flex; + align-items: flex-start; + gap: 8px; + } +} + + diff --git a/src/timelines/TootComposer.module.css b/src/timelines/TootComposer.module.css deleted file mode 100644 index f752e7c..0000000 --- a/src/timelines/TootComposer.module.css +++ /dev/null @@ -1,11 +0,0 @@ - -.composer { - composes: card from "../material/cards.module.css"; - --card-gut: 8px; -} - -.replyInput { - display: flex; - align-items: flex-start; - gap: 8px; -} diff --git a/src/timelines/TootComposer.tsx b/src/timelines/TootComposer.tsx index 01e0b81..1671e19 100644 --- a/src/timelines/TootComposer.tsx +++ b/src/timelines/TootComposer.tsx @@ -5,6 +5,7 @@ import { createUniqueId, onMount, Show, + type Accessor, type Component, type JSX, type Ref, @@ -35,7 +36,7 @@ import { Translate, } from "@suid/icons-material"; import type { Account } from "../accounts/stores"; -import tootComposers from "./TootComposer.module.css"; +import "./TootComposer.css"; import { makeEventListener } from "@solid-primitives/event-listener"; import BottomSheet from "../material/BottomSheet"; import { useLanguage } from "../platform/i18n"; @@ -196,6 +197,10 @@ function randomChoose( return K[idx]; } +function useRandomChoice(choices: () => T[]): Accessor { + return createMemo(() => randomChoose(Math.random(), choices())); +} + function cancelEvent(event: Event) { event.stopPropagation(); } @@ -224,9 +229,10 @@ const TootComposer: Component<{ const [langPickerOpen, setLangPickerOpen] = createSignal(false); const appLanguage = useLanguage(); - const randomPlaceholder = createMemo(() => - randomChoose(Math.random(), ["What's happening?", "What do your think?"]), - ); + const randomPlaceholder = useRandomChoice(() => [ + "What's happening?", + "What do you think?", + ]); createEffect(() => { const lang = appLanguage().split("-")[0]; @@ -311,7 +317,7 @@ const TootComposer: Component<{ return (
{ inputRef.focus(); @@ -323,7 +329,7 @@ const TootComposer: Component<{ on:touchmove={cancelEvent} on:wheel={cancelEvent} > -
+