Compare commits
27 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
9821b16968 | ||
| a887cd39f1 | |||
|
|
ac863b3c1a | ||
| a889b67c2e | |||
|
|
4618d59605 | ||
| 697f03bc51 | |||
|
|
670aaf6a20 | ||
| c4a6b4b175 | |||
| a5efb1f337 | |||
|
|
8cacf555e5 | ||
| 5a1579dd01 | |||
| 792c735ffe | |||
|
|
32af57d9f1 | ||
| 197474a049 | |||
| 19252fdbb0 | |||
|
|
b260f741d5 | ||
| 7655759bbc | |||
| d30b98c987 | |||
|
|
70d6f6ff42 | ||
| 97f0a15ae2 | |||
| 4cf19131bf | |||
|
|
83137c92a9 | ||
| 426ddf5650 | |||
| 7800e7ced7 | |||
|
|
a5afa6b493 | ||
| afeb45f59d | |||
| 6f45f94f19 |
@@ -0,0 +1,32 @@
|
||||
package com.paarrot.app
|
||||
|
||||
import android.net.Uri
|
||||
import android.view.View
|
||||
import androidx.core.view.ContentInfoCompat
|
||||
import androidx.core.view.OnReceiveContentListener
|
||||
|
||||
/**
|
||||
* Receives rich content from the IME (Gboard GIF), clipboard paste, and drag-drop,
|
||||
* then forwards file URIs through [ShareIntentStore] so JS can attach them in-room.
|
||||
*/
|
||||
class ImageKeyboardContentReceiver : OnReceiveContentListener {
|
||||
|
||||
override fun onReceiveContent(view: View, payload: ContentInfoCompat): ContentInfoCompat? {
|
||||
val split = payload.partition { item -> item.uri != null }
|
||||
val uriContent = split.first
|
||||
val remaining = split.second
|
||||
|
||||
if (uriContent != null) {
|
||||
val uris = mutableListOf<Uri>()
|
||||
val clip = uriContent.clip
|
||||
for (i in 0 until clip.itemCount) {
|
||||
clip.getItemAt(i).uri?.let { uris.add(it) }
|
||||
}
|
||||
if (uris.isNotEmpty()) {
|
||||
ShareIntentStore.handleContentUris(view.context, uris)
|
||||
}
|
||||
}
|
||||
|
||||
return remaining
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
package com.paarrot.app
|
||||
|
||||
import android.content.Context
|
||||
import android.util.AttributeSet
|
||||
import android.view.inputmethod.EditorInfo
|
||||
import android.view.inputmethod.InputConnection
|
||||
import androidx.core.view.inputmethod.EditorInfoCompat
|
||||
import androidx.core.view.inputmethod.InputConnectionCompat
|
||||
import com.getcapacitor.CapacitorWebView
|
||||
|
||||
/**
|
||||
* Capacitor WebView that advertises image/video MIME types to the IME
|
||||
* (Gboard GIF/sticker keyboard) and routes commit-content through
|
||||
* [androidx.core.view.ViewCompat.setOnReceiveContentListener].
|
||||
*/
|
||||
class ImageKeyboardWebView(
|
||||
context: Context,
|
||||
attrs: AttributeSet?,
|
||||
) : CapacitorWebView(context, attrs) {
|
||||
|
||||
override fun onCreateInputConnection(outAttrs: EditorInfo): InputConnection? {
|
||||
val inputConnection = super.onCreateInputConnection(outAttrs) ?: return null
|
||||
EditorInfoCompat.setContentMimeTypes(outAttrs, MIME_TYPES)
|
||||
return InputConnectionCompat.createWrapper(this, inputConnection, outAttrs)
|
||||
}
|
||||
|
||||
companion object {
|
||||
@JvmField
|
||||
val MIME_TYPES: Array<String> = arrayOf(
|
||||
"image/*",
|
||||
"image/png",
|
||||
"image/gif",
|
||||
"image/jpeg",
|
||||
"image/webp",
|
||||
"video/*",
|
||||
)
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
package com.paarrot.app;
|
||||
|
||||
import android.os.Bundle;
|
||||
import android.webkit.WebView;
|
||||
import androidx.core.view.ViewCompat;
|
||||
import com.getcapacitor.BridgeActivity;
|
||||
|
||||
public class MainActivity extends BridgeActivity {
|
||||
@@ -10,5 +12,18 @@ public class MainActivity extends BridgeActivity {
|
||||
registerPlugin(ShareHandlerPlugin.class);
|
||||
registerPlugin(PluginStoragePlugin.class);
|
||||
super.onCreate(savedInstanceState);
|
||||
setupImageKeyboardSupport();
|
||||
}
|
||||
|
||||
/** Advertise image MIME types and receive Gboard / paste / drag-drop media. */
|
||||
private void setupImageKeyboardSupport() {
|
||||
if (bridge == null) return;
|
||||
WebView webView = bridge.getWebView();
|
||||
if (webView == null) return;
|
||||
ViewCompat.setOnReceiveContentListener(
|
||||
webView,
|
||||
ImageKeyboardWebView.MIME_TYPES,
|
||||
new ImageKeyboardContentReceiver()
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -62,7 +62,6 @@ object ShareIntentStore {
|
||||
|
||||
if (action != Intent.ACTION_SEND && action != Intent.ACTION_SEND_MULTIPLE) return
|
||||
|
||||
val receivedAt = System.currentTimeMillis()
|
||||
val text = intent.getStringExtra(Intent.EXTRA_TEXT)
|
||||
val subject = intent.getStringExtra(Intent.EXTRA_SUBJECT)
|
||||
|
||||
@@ -86,8 +85,29 @@ object ShareIntentStore {
|
||||
uri?.let { uris.add(it) }
|
||||
}
|
||||
|
||||
deliverShare(context, uris, text, subject)
|
||||
}
|
||||
|
||||
/**
|
||||
* Deliver content URIs from the IME (Gboard GIF), clipboard paste, or drag-drop
|
||||
* into the same share pipeline used by ACTION_SEND.
|
||||
*/
|
||||
fun handleContentUris(context: Context, uris: List<Uri>) {
|
||||
if (uris.isEmpty()) return
|
||||
deliverShare(context, uris, text = null, subject = null)
|
||||
}
|
||||
|
||||
private fun deliverShare(
|
||||
context: Context,
|
||||
uris: List<Uri>,
|
||||
text: String?,
|
||||
subject: String?,
|
||||
) {
|
||||
val receivedAt = System.currentTimeMillis()
|
||||
val copiedFiles = uris.mapNotNull { copySharedUri(context, it, receivedAt) }
|
||||
|
||||
if (copiedFiles.isEmpty() && text.isNullOrBlank() && subject.isNullOrBlank()) return
|
||||
|
||||
val payload = SharePayload(
|
||||
text = text,
|
||||
subject = subject,
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
|
||||
xmlns:tools="http://schemas.android.com/tools"
|
||||
android:layout_width="match_parent"
|
||||
android:layout_height="match_parent"
|
||||
tools:context="com.getcapacitor.BridgeActivity">
|
||||
|
||||
<com.paarrot.app.ImageKeyboardWebView
|
||||
android:id="@+id/webview"
|
||||
android:layout_width="fill_parent"
|
||||
android:layout_height="fill_parent" />
|
||||
|
||||
</androidx.coordinatorlayout.widget.CoordinatorLayout>
|
||||
2
cinny
2
cinny
Submodule cinny updated: 9c7f71896c...61d41900cc
@@ -1,3 +1,5 @@
|
||||
{
|
||||
"dependencies": {}
|
||||
"dependencies": {
|
||||
"@capacitor/status-bar": "8.0.1"
|
||||
}
|
||||
}
|
||||
|
||||
79
overlay/src/app/components/editor/Editor.css.ts
Normal file
79
overlay/src/app/components/editor/Editor.css.ts
Normal file
@@ -0,0 +1,79 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { color, config, DefaultReset, toRem } from 'folds';
|
||||
|
||||
export const Editor = style([
|
||||
DefaultReset,
|
||||
{
|
||||
backgroundColor: color.SurfaceVariant.Container,
|
||||
color: color.SurfaceVariant.OnContainer,
|
||||
boxShadow: `inset 0 0 0 ${config.borderWidth.B300} ${color.SurfaceVariant.ContainerLine}`,
|
||||
borderRadius: config.radii.R400,
|
||||
overflow: 'hidden',
|
||||
selectors: {
|
||||
// Keyboard-flush dock: only a top edge so the input can sit on the IME.
|
||||
'[data-composer-flush="true"] &': {
|
||||
borderRadius: 0,
|
||||
boxShadow: `inset 0 ${config.borderWidth.B300} 0 0 ${color.SurfaceVariant.ContainerLine}`,
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const EditorOptions = style([
|
||||
DefaultReset,
|
||||
{
|
||||
padding: config.space.S200,
|
||||
},
|
||||
]);
|
||||
|
||||
export const EditorTextareaScroll = style({});
|
||||
|
||||
export const EditorTextarea = style([
|
||||
DefaultReset,
|
||||
{
|
||||
flexGrow: 1,
|
||||
height: '100%',
|
||||
padding: `${toRem(13)} ${toRem(1)}`,
|
||||
selectors: {
|
||||
[`${EditorTextareaScroll}:first-child &`]: {
|
||||
paddingLeft: toRem(13),
|
||||
},
|
||||
[`${EditorTextareaScroll}:last-child &`]: {
|
||||
paddingRight: toRem(13),
|
||||
},
|
||||
'&:focus': {
|
||||
outline: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
]);
|
||||
|
||||
export const EditorPlaceholderContainer = style([
|
||||
DefaultReset,
|
||||
{
|
||||
opacity: config.opacity.Placeholder,
|
||||
pointerEvents: 'none',
|
||||
userSelect: 'none',
|
||||
},
|
||||
]);
|
||||
|
||||
export const EditorPlaceholderTextVisual = style([
|
||||
DefaultReset,
|
||||
{
|
||||
display: 'block',
|
||||
paddingTop: toRem(13),
|
||||
paddingLeft: toRem(1),
|
||||
},
|
||||
]);
|
||||
|
||||
export const EditorToolbarBase = style({
|
||||
padding: `0 ${config.borderWidth.B300}`,
|
||||
});
|
||||
|
||||
export const EditorToolbar = style({
|
||||
padding: config.space.S100,
|
||||
});
|
||||
|
||||
export const MarkdownBtnBox = style({
|
||||
paddingRight: config.space.S100,
|
||||
});
|
||||
@@ -220,6 +220,12 @@ export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps
|
||||
const getEndedTouch = (evt: TouchEvent, touchId: number) =>
|
||||
Array.from(evt.changedTouches).find((touch) => touch.identifier === touchId);
|
||||
|
||||
const isInsideSwipeHost = (target: EventTarget | null): boolean => {
|
||||
const root = rootRef.current;
|
||||
if (!root || !(target instanceof Node)) return false;
|
||||
return root.contains(target);
|
||||
};
|
||||
|
||||
const handleTouchStart = (evt: TouchEvent) => {
|
||||
if (gestureRef.current.phase !== 'idle') return;
|
||||
|
||||
@@ -232,7 +238,12 @@ export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps
|
||||
const messageEl = findMessageElement(target);
|
||||
const messageId = messageEl?.getAttribute('data-message-id') ?? null;
|
||||
|
||||
const canStartBack = backEnabled && !shouldIgnoreBackTarget(target);
|
||||
// Only steal touches that start inside the detail/swipe host. Document-level
|
||||
// listeners otherwise fight the always-visible sidebar (space icons sit in the
|
||||
// former screen-left EDGE_WIDTH zone and lost clicks to preventDefault).
|
||||
const insideHost = isInsideSwipeHost(target);
|
||||
const canStartBack =
|
||||
backEnabled && insideHost && !shouldIgnoreBackTarget(target);
|
||||
const canStartReply =
|
||||
replyEnabled &&
|
||||
messageEl &&
|
||||
@@ -242,23 +253,11 @@ export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps
|
||||
|
||||
if (!canStartBack && !canStartReply) return;
|
||||
|
||||
if (touch.clientX <= EDGE_WIDTH && canStartBack) {
|
||||
evt.preventDefault();
|
||||
gestureRef.current = {
|
||||
phase: 'back',
|
||||
touchId: touch.identifier,
|
||||
startX: touch.clientX,
|
||||
startY: touch.clientY,
|
||||
messageEl: null,
|
||||
transformEl: null,
|
||||
messageId: null,
|
||||
edgeBack: true,
|
||||
offset: 0,
|
||||
};
|
||||
document.documentElement.classList.add('mobile-gesture-lock');
|
||||
return;
|
||||
}
|
||||
const contentLeft = rootRef.current?.getBoundingClientRect().left ?? 0;
|
||||
const nearContentLeftEdge =
|
||||
touch.clientX >= contentLeft && touch.clientX <= contentLeft + EDGE_WIDTH;
|
||||
|
||||
// Prefer pending over immediate back+preventDefault so a tap still clicks.
|
||||
gestureRef.current = {
|
||||
phase: 'pending',
|
||||
touchId: touch.identifier,
|
||||
@@ -267,7 +266,7 @@ export function MobileSwipeGestureHost({ children }: MobileSwipeGestureHostProps
|
||||
messageEl: canStartReply ? messageEl : null,
|
||||
transformEl: canStartReply && messageEl ? findReplyTransformTarget(messageEl) : null,
|
||||
messageId: canStartReply ? messageId : null,
|
||||
edgeBack: false,
|
||||
edgeBack: nearContentLeftEdge && canStartBack,
|
||||
offset: 0,
|
||||
};
|
||||
};
|
||||
|
||||
@@ -7,6 +7,7 @@ import * as swipeCss from '../mobile/mobile-gestures.css';
|
||||
import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
|
||||
import { SidebarDockedCallPanel } from '../../features/call/SidebarDockedCallPanel';
|
||||
import { useShowCompactMasterView } from '../../hooks/useCompactNav';
|
||||
import { isStationeryTheme, useTheme } from '../../hooks/useTheme';
|
||||
|
||||
type PageRootProps = {
|
||||
nav: ReactNode;
|
||||
@@ -74,6 +75,7 @@ export function PageNav({
|
||||
grow={isMobile ? 'Yes' : undefined}
|
||||
className={classNames(css.PageNav({ size }), className)}
|
||||
shrink={isMobile ? 'Yes' : 'No'}
|
||||
data-page-nav=""
|
||||
>
|
||||
<Box grow="Yes" direction="Column">
|
||||
{children}
|
||||
@@ -89,6 +91,7 @@ export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
|
||||
className={classNames(css.PageNavHeader({ outlined }), className)}
|
||||
variant="Background"
|
||||
size="600"
|
||||
data-folder-tab="nav"
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
@@ -104,13 +107,16 @@ export function PageNavContent({
|
||||
scrollRef?: MutableRefObject<HTMLDivElement | null>;
|
||||
scrollProps?: React.ComponentProps<typeof Scroll>;
|
||||
}) {
|
||||
const theme = useTheme();
|
||||
const hideScrollbar = isStationeryTheme(theme);
|
||||
|
||||
return (
|
||||
<Box grow="Yes" direction="Column">
|
||||
<Scroll
|
||||
ref={scrollRef}
|
||||
variant="Background"
|
||||
direction="Vertical"
|
||||
size="300"
|
||||
size={hideScrollbar ? '0' : '300'}
|
||||
hideTrack
|
||||
visibility="Hover"
|
||||
{...scrollProps}
|
||||
@@ -126,6 +132,7 @@ export const Page = as<'div'>(({ className, ...props }, ref) => (
|
||||
grow="Yes"
|
||||
direction="Column"
|
||||
className={classNames(ContainerColor({ variant: 'Surface' }), className)}
|
||||
data-page=""
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
@@ -137,6 +144,7 @@ export const PageHeader = as<'div', css.PageHeaderVariants>(
|
||||
as="header"
|
||||
size="600"
|
||||
className={classNames(css.PageHeader({ balance, outlined }), className)}
|
||||
data-folder-tab-bar=""
|
||||
{...props}
|
||||
ref={ref}
|
||||
/>
|
||||
|
||||
136
overlay/src/app/features/forum/ForumBoardDetail.tsx
Normal file
136
overlay/src/app/features/forum/ForumBoardDetail.tsx
Normal file
@@ -0,0 +1,136 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { Box, Scroll, Text, color } from 'folds';
|
||||
import { Icon, Icons } from '../../components/icons';
|
||||
import classNames from 'classnames';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useCompactNav } from '../../hooks/useCompactNav';
|
||||
import { Page, PageContent } from '../../components/page';
|
||||
import { ContainerColor } from '../../styles/ContainerColor.css';
|
||||
import { activeThreadIdAtomFamily } from '../../state/activeThread';
|
||||
import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
|
||||
import { getSpacePath } from '../../pages/pathUtils';
|
||||
import { useForumBoardContext } from './ForumBoardContext';
|
||||
import { ForumThreadDetail } from './ForumThreadDetail';
|
||||
import type { ForumPost } from './types';
|
||||
import * as theme from './forumTheme.css';
|
||||
|
||||
/** Thread detail in the main pane; post list lives in ForumFeedSidebar. */
|
||||
export function ForumBoardDetail() {
|
||||
const mx = useMatrixClient();
|
||||
const navigate = useNavigate();
|
||||
const compact = useCompactNav();
|
||||
const [optimisticPost, setOptimisticPost] = useState<ForumPost | null>(null);
|
||||
|
||||
const {
|
||||
forumSpace,
|
||||
query,
|
||||
error,
|
||||
selectedPostId,
|
||||
activeTopicRoomId,
|
||||
threads,
|
||||
recordThreadReply,
|
||||
} = useForumBoardContext();
|
||||
|
||||
// Compact: /feed/ without a selected post has no detail content — return to the list
|
||||
// so an empty detail layer cannot cover the forum sidebar.
|
||||
useEffect(() => {
|
||||
if (!compact || selectedPostId) return;
|
||||
navigate(getSpacePath(getCanonicalAliasOrRoomId(mx, forumSpace.roomId)), { replace: true });
|
||||
}, [compact, selectedPostId, navigate, mx, forumSpace.roomId]);
|
||||
|
||||
const activeTopicRoom = activeTopicRoomId ? mx.getRoom(activeTopicRoomId) : null;
|
||||
const topicSelected = Boolean(query.topic);
|
||||
|
||||
const setActiveThreadId = useSetAtom(
|
||||
activeThreadIdAtomFamily(activeTopicRoomId ?? forumSpace.roomId)
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedPostId && activeTopicRoomId) {
|
||||
setActiveThreadId(selectedPostId);
|
||||
return () => setActiveThreadId(undefined);
|
||||
}
|
||||
setActiveThreadId(undefined);
|
||||
return undefined;
|
||||
}, [selectedPostId, activeTopicRoomId, setActiveThreadId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (optimisticPost && optimisticPost.eventId !== selectedPostId) {
|
||||
setOptimisticPost(null);
|
||||
}
|
||||
}, [optimisticPost, selectedPostId]);
|
||||
|
||||
const selectedThread = useMemo(
|
||||
() => threads.find((t) => t.eventId === selectedPostId),
|
||||
[threads, selectedPostId]
|
||||
);
|
||||
|
||||
const handleReplySent = useCallback(
|
||||
(_reply: ForumPost) => {
|
||||
if (selectedPostId) {
|
||||
recordThreadReply(selectedPostId);
|
||||
}
|
||||
},
|
||||
[recordThreadReply, selectedPostId]
|
||||
);
|
||||
|
||||
const showThread = Boolean(selectedPostId && activeTopicRoom);
|
||||
const threadInitialPost =
|
||||
optimisticPost?.eventId === selectedPostId ? optimisticPost : null;
|
||||
const detailDropRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
return (
|
||||
<Page className={classNames(ContainerColor({ variant: 'Background' }), theme.ForumAppRoot)}>
|
||||
<PageContent className={theme.ForumPageContent}>
|
||||
{error && (
|
||||
<Text as="p" style={{ color: color.Critical.Main, padding: '0.5rem 1rem' }}>
|
||||
{error}
|
||||
</Text>
|
||||
)}
|
||||
<aside className={theme.ForumDetailPane}>
|
||||
{showThread && activeTopicRoom ? (
|
||||
<div ref={detailDropRef} className={theme.ForumTopicPostDetailThreadLayout}>
|
||||
<ForumThreadDetail
|
||||
roomId={activeTopicRoom.roomId}
|
||||
rootEventId={selectedPostId!}
|
||||
titleHint={selectedThread?.title}
|
||||
initialPost={threadInitialPost}
|
||||
fileDropContainerRef={detailDropRef}
|
||||
onReplySent={handleReplySent}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Scroll
|
||||
id="topicPostDetail"
|
||||
className={theme.ForumTopicPostDetailScroll}
|
||||
variant="Surface"
|
||||
direction="Vertical"
|
||||
size="300"
|
||||
hideTrack
|
||||
visibility="Hover"
|
||||
>
|
||||
<div className={theme.ForumTopicPostDetailInner}>
|
||||
<Box
|
||||
className={theme.ForumEmptyDetail}
|
||||
direction="Column"
|
||||
alignItems="Center"
|
||||
justifyContent="Center"
|
||||
gap="300"
|
||||
>
|
||||
<Icon src={Icons.Thread} size="600" />
|
||||
<Text size="T300" priority="300">
|
||||
{topicSelected
|
||||
? 'Select a post to read the thread'
|
||||
: 'Pick a category and topic, then choose a post'}
|
||||
</Text>
|
||||
</Box>
|
||||
</div>
|
||||
</Scroll>
|
||||
)}
|
||||
</aside>
|
||||
</PageContent>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
431
overlay/src/app/features/forum/useForumBoard.ts
Normal file
431
overlay/src/app/features/forum/useForumBoard.ts
Normal file
@@ -0,0 +1,431 @@
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
import { MatrixEvent, Room, RoomStateEvent } from 'matrix-js-sdk';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { useMatrixClient } from '../../hooks/useMatrixClient';
|
||||
import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
|
||||
import { useCompactNav } from '../../hooks/useCompactNav';
|
||||
import { getCanonicalAliasOrRoomId } from '../../utils/matrix';
|
||||
import { getSpaceFeedPath, getSpaceLobbyPath, getSpacePath } from '../../pages/pathUtils';
|
||||
import { createRoomModalAtom } from '../../state/createRoomModal';
|
||||
import { createSpaceModalAtom } from '../../state/createSpaceModal';
|
||||
import { StateEvent } from '../../../types/matrix/room';
|
||||
import {
|
||||
buildForumSections,
|
||||
buildTopicThreads,
|
||||
buildThreadSummaries,
|
||||
} from './forumTopicHelpers';
|
||||
import { applyTopicStatusSort } from './topicSearch';
|
||||
import {
|
||||
createForumPostFromPayload,
|
||||
listForumTopics,
|
||||
listTopicFeedPosts,
|
||||
loadAggregatedTopicFeed,
|
||||
} from './forumFeed';
|
||||
import type {
|
||||
ForumBoardQuery,
|
||||
ForumPost,
|
||||
ForumPublishedPost,
|
||||
ForumSection,
|
||||
ForumThreadSummary,
|
||||
} from './types';
|
||||
import { useForumRoomLiveUpdates } from './useForumRoomLiveUpdates';
|
||||
|
||||
export type ForumBoardScope = {
|
||||
forumSpaceId: string;
|
||||
/** When set, only show posts from this topic room. */
|
||||
topicRoomId?: string;
|
||||
};
|
||||
|
||||
function scopesFromSelection(
|
||||
sections: ForumSection[],
|
||||
category?: string,
|
||||
topic?: string
|
||||
): Array<{ roomId: string; sectionTitle?: string; topicName?: string }> {
|
||||
if (topic) {
|
||||
for (const section of sections) {
|
||||
const match = section.topics.find((t) => t.roomId === topic);
|
||||
if (match) {
|
||||
return [{ roomId: match.roomId, sectionTitle: section.title, topicName: match.name }];
|
||||
}
|
||||
}
|
||||
return [{ roomId: topic }];
|
||||
}
|
||||
|
||||
if (category) {
|
||||
const section = sections.find((s) => s.title === category);
|
||||
if (!section) return [];
|
||||
return section.topics.map((t) => ({
|
||||
roomId: t.roomId,
|
||||
sectionTitle: section.title,
|
||||
topicName: t.name,
|
||||
}));
|
||||
}
|
||||
|
||||
return sections.flatMap((section) =>
|
||||
section.topics.map((t) => ({
|
||||
roomId: t.roomId,
|
||||
sectionTitle: section.title,
|
||||
topicName: t.name,
|
||||
}))
|
||||
);
|
||||
}
|
||||
|
||||
export function useForumBoard(scope: ForumBoardScope, forumSpace: Room) {
|
||||
const mx = useMatrixClient();
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
const selectedRoomId = useSelectedRoom();
|
||||
const compact = useCompactNav();
|
||||
|
||||
const searchParams = useMemo(
|
||||
() => new URLSearchParams(location.search),
|
||||
[location.search]
|
||||
);
|
||||
|
||||
const filterQuery: ForumBoardQuery = useMemo(
|
||||
() => ({
|
||||
category: searchParams.get('category') || undefined,
|
||||
topic: searchParams.get('topic') || undefined,
|
||||
q: searchParams.get('q') || undefined,
|
||||
status: (searchParams.get('status') as ForumBoardQuery['status']) || 'all',
|
||||
sort: (searchParams.get('sort') as ForumBoardQuery['sort']) || 'hot',
|
||||
}),
|
||||
[searchParams]
|
||||
);
|
||||
|
||||
const query: ForumBoardQuery = useMemo(
|
||||
() => ({
|
||||
...filterQuery,
|
||||
post: searchParams.get('post') || undefined,
|
||||
postRoom: searchParams.get('postRoom') || undefined,
|
||||
}),
|
||||
[filterQuery, searchParams]
|
||||
);
|
||||
|
||||
const [sections, setSections] = useState<ForumSection[]>([]);
|
||||
const [threads, setThreads] = useState<ForumThreadSummary[]>([]);
|
||||
const [loadingSections, setLoadingSections] = useState(true);
|
||||
const [loadingThreads, setLoadingThreads] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
const [postsNextBatch, setPostsNextBatch] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const applyForumSearchParams = useCallback(
|
||||
(mutate: (next: URLSearchParams) => void) => {
|
||||
const next = new URLSearchParams(location.search);
|
||||
mutate(next);
|
||||
const search = next.toString();
|
||||
const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, forumSpace.roomId);
|
||||
|
||||
const onTopicRoomRoute =
|
||||
Boolean(selectedRoomId) && selectedRoomId !== forumSpace.roomId;
|
||||
|
||||
// Compact master view only mounts the post list on /:spaceId/. Opening a post
|
||||
// must switch to /feed/ so ForumFeedPage mounts as the detail pane.
|
||||
let pathname = location.pathname;
|
||||
if (onTopicRoomRoute) {
|
||||
pathname = getSpaceLobbyPath(spaceIdOrAlias);
|
||||
} else if (next.get('post')) {
|
||||
pathname = getSpaceFeedPath(spaceIdOrAlias);
|
||||
} else if (compact) {
|
||||
pathname = getSpacePath(spaceIdOrAlias);
|
||||
}
|
||||
|
||||
navigate(
|
||||
{
|
||||
pathname,
|
||||
search: search ? `?${search}` : '',
|
||||
},
|
||||
{ replace: true }
|
||||
);
|
||||
},
|
||||
[
|
||||
location.pathname,
|
||||
location.search,
|
||||
navigate,
|
||||
mx,
|
||||
forumSpace.roomId,
|
||||
selectedRoomId,
|
||||
compact,
|
||||
]
|
||||
);
|
||||
|
||||
const setQueryParam = useCallback(
|
||||
(key: string, value: string | null) => {
|
||||
applyForumSearchParams((next) => {
|
||||
if (!value) next.delete(key);
|
||||
else next.set(key, value);
|
||||
if (key !== 'post') {
|
||||
next.delete('post');
|
||||
next.delete('postRoom');
|
||||
}
|
||||
});
|
||||
},
|
||||
[applyForumSearchParams]
|
||||
);
|
||||
|
||||
const setCategory = useCallback(
|
||||
(category: string | null) => {
|
||||
applyForumSearchParams((next) => {
|
||||
if (!category) next.delete('category');
|
||||
else next.set('category', category);
|
||||
next.delete('topic');
|
||||
next.delete('post');
|
||||
next.delete('postRoom');
|
||||
});
|
||||
},
|
||||
[applyForumSearchParams]
|
||||
);
|
||||
|
||||
const loadSections = useCallback(async () => {
|
||||
setLoadingSections(true);
|
||||
setError(null);
|
||||
try {
|
||||
const topics = await listForumTopics(mx, scope.forumSpaceId);
|
||||
setSections(buildForumSections(topics));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load forum categories');
|
||||
} finally {
|
||||
setLoadingSections(false);
|
||||
}
|
||||
}, [mx, scope.forumSpaceId]);
|
||||
|
||||
const refreshThreads = useCallback(async (options?: { silent?: boolean }) => {
|
||||
if (!options?.silent) setLoadingThreads(true);
|
||||
setError(null);
|
||||
try {
|
||||
const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
|
||||
if (roomScopes.length === 0) {
|
||||
setThreads([]);
|
||||
return;
|
||||
}
|
||||
|
||||
let posts;
|
||||
if (roomScopes.length === 1) {
|
||||
const result = await listTopicFeedPosts(mx, roomScopes[0].roomId);
|
||||
posts = result.posts;
|
||||
setPostsNextBatch(result.nextBatch);
|
||||
const scopeMeta = roomScopes[0];
|
||||
posts.forEach((post) => {
|
||||
post.topicRoomId = scopeMeta.roomId;
|
||||
if (scopeMeta.sectionTitle) post.sectionTitle = scopeMeta.sectionTitle;
|
||||
if (scopeMeta.topicName) post.topicName = scopeMeta.topicName;
|
||||
});
|
||||
} else {
|
||||
posts = await loadAggregatedTopicFeed(mx, roomScopes);
|
||||
setPostsNextBatch(null);
|
||||
}
|
||||
|
||||
setThreads(buildTopicThreads(posts, filterQuery));
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load forum posts');
|
||||
} finally {
|
||||
if (!options?.silent) setLoadingThreads(false);
|
||||
}
|
||||
}, [mx, sections, filterQuery]);
|
||||
|
||||
useEffect(() => {
|
||||
loadSections();
|
||||
}, [loadSections]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleSpaceChild = (event: MatrixEvent) => {
|
||||
if (event.getType() !== StateEvent.SpaceChild) return;
|
||||
const roomId = event.getRoomId();
|
||||
if (!roomId) return;
|
||||
if (
|
||||
roomId === forumSpace.roomId ||
|
||||
sections.some((section) => section.spaceId === roomId)
|
||||
) {
|
||||
loadSections();
|
||||
}
|
||||
};
|
||||
mx.on(RoomStateEvent.Events, handleSpaceChild);
|
||||
return () => {
|
||||
mx.removeListener(RoomStateEvent.Events, handleSpaceChild);
|
||||
};
|
||||
}, [mx, forumSpace.roomId, sections, loadSections]);
|
||||
|
||||
const createSpaceModal = useAtomValue(createSpaceModalAtom);
|
||||
const createRoomModal = useAtomValue(createRoomModalAtom);
|
||||
const prevCreateSpaceModal = useRef(createSpaceModal);
|
||||
const prevCreateRoomModal = useRef(createRoomModal);
|
||||
useEffect(() => {
|
||||
if (prevCreateSpaceModal.current && !createSpaceModal) {
|
||||
loadSections();
|
||||
}
|
||||
if (prevCreateRoomModal.current && !createRoomModal) {
|
||||
loadSections();
|
||||
}
|
||||
prevCreateSpaceModal.current = createSpaceModal;
|
||||
prevCreateRoomModal.current = createRoomModal;
|
||||
}, [createSpaceModal, createRoomModal, loadSections]);
|
||||
|
||||
useEffect(() => {
|
||||
if (loadingSections) return;
|
||||
void refreshThreads();
|
||||
}, [
|
||||
loadingSections,
|
||||
refreshThreads,
|
||||
filterQuery.category,
|
||||
filterQuery.topic,
|
||||
filterQuery.q,
|
||||
filterQuery.status,
|
||||
filterQuery.sort,
|
||||
]);
|
||||
|
||||
const scopedRooms = useMemo(() => {
|
||||
if (loadingSections) return [];
|
||||
const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
|
||||
return roomScopes
|
||||
.map((scope) => mx.getRoom(scope.roomId))
|
||||
.filter((room): room is Room => room !== null);
|
||||
}, [loadingSections, sections, filterQuery.category, filterQuery.topic, mx]);
|
||||
|
||||
useForumRoomLiveUpdates(scopedRooms, () => {
|
||||
void refreshThreads({ silent: true });
|
||||
});
|
||||
|
||||
const selectedPostId = query.post ?? null;
|
||||
const selectedThread = threads.find((t) => t.eventId === selectedPostId);
|
||||
const activeTopicRoomId =
|
||||
query.postRoom || selectedThread?.topicRoomId || query.topic || scope.topicRoomId || null;
|
||||
|
||||
const selectPost = useCallback(
|
||||
(eventId: string | null, topicRoomId?: string) => {
|
||||
applyForumSearchParams((next) => {
|
||||
if (!eventId) {
|
||||
next.delete('post');
|
||||
next.delete('postRoom');
|
||||
} else {
|
||||
next.set('post', eventId);
|
||||
if (topicRoomId) next.set('postRoom', topicRoomId);
|
||||
else next.delete('postRoom');
|
||||
}
|
||||
});
|
||||
},
|
||||
[applyForumSearchParams]
|
||||
);
|
||||
|
||||
const insertThreadFromNewPost = useCallback(
|
||||
(published: ForumPublishedPost): ForumPost | null => {
|
||||
const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
|
||||
const inScope =
|
||||
filterQuery.topic === published.topicRoomId ||
|
||||
(!filterQuery.topic &&
|
||||
(filterQuery.category
|
||||
? roomScopes.some((s) => s.roomId === published.topicRoomId)
|
||||
: true));
|
||||
|
||||
const scopeMeta = roomScopes.find((s) => s.roomId === published.topicRoomId);
|
||||
const post = createForumPostFromPayload(
|
||||
mx,
|
||||
published.topicRoomId,
|
||||
published.eventId,
|
||||
{
|
||||
title: published.title,
|
||||
plainText: published.plainText,
|
||||
formattedHtml: published.formattedHtml,
|
||||
},
|
||||
{
|
||||
topicRoomId: published.topicRoomId,
|
||||
sectionTitle: scopeMeta?.sectionTitle,
|
||||
topicName: scopeMeta?.topicName,
|
||||
}
|
||||
);
|
||||
|
||||
if (inScope) {
|
||||
const [summary] = buildThreadSummaries([post]);
|
||||
if (summary) {
|
||||
setThreads((prev) => {
|
||||
const without = prev.filter((t) => t.eventId !== summary.eventId);
|
||||
const merged = [summary, ...without];
|
||||
return applyTopicStatusSort(merged, filterQuery.status || 'all', filterQuery.sort || 'hot');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return post;
|
||||
},
|
||||
[mx, sections, filterQuery]
|
||||
);
|
||||
|
||||
const recordThreadReply = useCallback((rootEventId: string) => {
|
||||
setThreads((prev) =>
|
||||
prev.map((t) =>
|
||||
t.eventId === rootEventId
|
||||
? {
|
||||
...t,
|
||||
totalReplies: t.totalReplies + 1,
|
||||
lastActivityTs: Date.now(),
|
||||
}
|
||||
: t
|
||||
)
|
||||
);
|
||||
}, []);
|
||||
|
||||
const loadMorePosts = useCallback(async () => {
|
||||
if (!postsNextBatch || loadingMore) return;
|
||||
const roomScopes = scopesFromSelection(sections, filterQuery.category, filterQuery.topic);
|
||||
if (roomScopes.length !== 1) return;
|
||||
|
||||
setLoadingMore(true);
|
||||
setError(null);
|
||||
try {
|
||||
const scopeMeta = roomScopes[0];
|
||||
const result = await listTopicFeedPosts(mx, scopeMeta.roomId, {
|
||||
from: postsNextBatch,
|
||||
minRoots: 1,
|
||||
});
|
||||
setPostsNextBatch(result.nextBatch);
|
||||
result.posts.forEach((post) => {
|
||||
post.topicRoomId = scopeMeta.roomId;
|
||||
if (scopeMeta.sectionTitle) post.sectionTitle = scopeMeta.sectionTitle;
|
||||
if (scopeMeta.topicName) post.topicName = scopeMeta.topicName;
|
||||
});
|
||||
setThreads((prev) => {
|
||||
const existingIds = new Set(prev.map((t) => t.eventId));
|
||||
const added = buildTopicThreads(result.posts, filterQuery).filter(
|
||||
(t) => !existingIds.has(t.eventId)
|
||||
);
|
||||
const merged = [...prev, ...added];
|
||||
const sort = filterQuery.sort || 'hot';
|
||||
merged.sort((a, b) => {
|
||||
if (sort === 'new') return b.timestamp - a.timestamp;
|
||||
if (sort === 'top') return b.totalReplies - a.totalReplies;
|
||||
const hotA = a.totalReplies * 4 + Math.floor((a.lastActivityTs - a.timestamp) / 3600000);
|
||||
const hotB = b.totalReplies * 4 + Math.floor((b.lastActivityTs - b.timestamp) / 3600000);
|
||||
return hotB - hotA;
|
||||
});
|
||||
return merged;
|
||||
});
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to load older posts');
|
||||
} finally {
|
||||
setLoadingMore(false);
|
||||
}
|
||||
}, [postsNextBatch, loadingMore, sections, filterQuery, mx]);
|
||||
|
||||
return {
|
||||
forumSpace,
|
||||
sections,
|
||||
threads,
|
||||
query,
|
||||
loadingSections,
|
||||
loadingThreads,
|
||||
error,
|
||||
selectedPostId,
|
||||
selectedThread,
|
||||
activeTopicRoomId,
|
||||
setQueryParam,
|
||||
setCategory,
|
||||
selectPost,
|
||||
refreshThreads,
|
||||
insertThreadFromNewPost,
|
||||
recordThreadReply,
|
||||
loadMorePosts,
|
||||
hasMorePosts: Boolean(postsNextBatch),
|
||||
loadingMore,
|
||||
};
|
||||
}
|
||||
@@ -27,6 +27,7 @@ import { activeThreadIdAtomFamily } from '../../state/activeThread';
|
||||
import { ThreadView } from './ThreadView';
|
||||
import { MobileSwipeToReplyLayer } from '../../components/mobile/MobileSwipeToReplyLayer';
|
||||
import { useMobileKeyboardLayout } from '../../hooks/useMobileKeyboardLayout';
|
||||
import * as composerCss from './room-composer-mobile.css';
|
||||
|
||||
const FN_KEYS_REGEX = /^F\d+$/;
|
||||
const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
|
||||
@@ -64,7 +65,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
||||
const roomViewRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
|
||||
const { isLandscape, keyboardOpen } = useMobileKeyboardLayout();
|
||||
const { immersive } = useMobileKeyboardLayout();
|
||||
|
||||
const { roomId } = room;
|
||||
const editor = useEditor();
|
||||
@@ -103,8 +104,9 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
||||
)
|
||||
);
|
||||
|
||||
const composerPadding = isLandscape ? '0' : `0 ${config.space.S400}`;
|
||||
const showHeader = !keyboardOpen;
|
||||
const flushComposer = immersive;
|
||||
const composerPadding = flushComposer ? '0' : `0 ${config.space.S400}`;
|
||||
const showHeader = !immersive;
|
||||
|
||||
return (
|
||||
<Page ref={roomViewRef}>
|
||||
@@ -125,7 +127,20 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
||||
<RoomViewTyping room={room} />
|
||||
</Box>
|
||||
</MobileSwipeToReplyLayer>
|
||||
<Box shrink="No" direction="Column" data-disable-swipe-back="true">
|
||||
<Box
|
||||
shrink="No"
|
||||
direction="Column"
|
||||
data-disable-swipe-back="true"
|
||||
data-composer-flush={flushComposer ? 'true' : undefined}
|
||||
className={composerCss.ComposerDock}
|
||||
>
|
||||
{immersive && !hideActivity && (
|
||||
<div className={composerCss.FollowingFloat}>
|
||||
<div className={composerCss.FollowingFloatHit}>
|
||||
<RoomViewFollowing room={room} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div style={{ padding: composerPadding }}>
|
||||
{tombstoneEvent ? (
|
||||
<RoomTombstone
|
||||
@@ -156,7 +171,12 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
|
||||
{!immersive &&
|
||||
(hideActivity ? (
|
||||
<RoomViewFollowingPlaceholder />
|
||||
) : (
|
||||
<RoomViewFollowing room={room} />
|
||||
))}
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
|
||||
49
overlay/src/app/features/room/RoomViewFollowing.css.ts
Normal file
49
overlay/src/app/features/room/RoomViewFollowing.css.ts
Normal file
@@ -0,0 +1,49 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { recipe } from '@vanilla-extract/recipes';
|
||||
import { DefaultReset, color, config, toRem } from 'folds';
|
||||
|
||||
export const RoomViewFollowingPlaceholder = style([
|
||||
DefaultReset,
|
||||
{
|
||||
height: toRem(28),
|
||||
},
|
||||
]);
|
||||
|
||||
export const RoomViewFollowing = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
minHeight: toRem(28),
|
||||
padding: `0 ${config.space.S400}`,
|
||||
width: '100%',
|
||||
backgroundColor: color.Surface.Container,
|
||||
color: color.Surface.OnContainer,
|
||||
outline: 'none',
|
||||
selectors: {
|
||||
// Compact floating chip while the keyboard is open.
|
||||
'[data-composer-flush="true"] &': {
|
||||
minHeight: 0,
|
||||
width: 'auto',
|
||||
maxWidth: '100%',
|
||||
padding: `${config.space.S100} ${config.space.S200}`,
|
||||
backgroundColor: 'transparent',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
clickable: {
|
||||
true: {
|
||||
cursor: 'pointer',
|
||||
selectors: {
|
||||
'&:hover, &:focus-visible': {
|
||||
color: color.Primary.Main,
|
||||
},
|
||||
'&:active': {
|
||||
color: color.Primary.Main,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -802,8 +802,9 @@ export const Message = as<'div', MessageProps>(
|
||||
gap="300"
|
||||
direction={messageLayout === MessageLayout.Compact ? 'RowReverse' : 'Row'}
|
||||
justifyContent="SpaceBetween"
|
||||
alignItems="Baseline"
|
||||
alignItems="Center"
|
||||
grow="Yes"
|
||||
data-message-header=""
|
||||
>
|
||||
<Box alignItems="Center" gap="200">
|
||||
<Username
|
||||
|
||||
63
overlay/src/app/features/room/room-composer-mobile.css.ts
Normal file
63
overlay/src/app/features/room/room-composer-mobile.css.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { style } from '@vanilla-extract/css';
|
||||
import { recipe } from '@vanilla-extract/recipes';
|
||||
import { DefaultReset, color, config } from 'folds';
|
||||
|
||||
export const ComposerDock = style({
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
/** Read receipts float above the input so they don't reserve layout height. */
|
||||
export const FollowingFloat = style({
|
||||
position: 'absolute',
|
||||
bottom: '100%',
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 2,
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
pointerEvents: 'none',
|
||||
padding: `0 ${config.space.S200}`,
|
||||
});
|
||||
|
||||
export const FollowingFloatHit = style({
|
||||
pointerEvents: 'auto',
|
||||
maxWidth: '100%',
|
||||
});
|
||||
|
||||
export const RoomViewFollowingPlaceholder = style([
|
||||
DefaultReset,
|
||||
{
|
||||
display: 'none',
|
||||
height: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
export const RoomViewFollowing = recipe({
|
||||
base: [
|
||||
DefaultReset,
|
||||
{
|
||||
minHeight: 0,
|
||||
padding: `${config.space.S100} ${config.space.S200}`,
|
||||
width: 'auto',
|
||||
maxWidth: '100%',
|
||||
backgroundColor: 'transparent',
|
||||
color: color.Surface.OnContainer,
|
||||
outline: 'none',
|
||||
},
|
||||
],
|
||||
variants: {
|
||||
clickable: {
|
||||
true: {
|
||||
cursor: 'pointer',
|
||||
selectors: {
|
||||
'&:hover, &:focus-visible': {
|
||||
color: color.Primary.Main,
|
||||
},
|
||||
'&:active': {
|
||||
color: color.Primary.Main,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
111
overlay/src/app/hooks/useFilePasteHandler.ts
Normal file
111
overlay/src/app/hooks/useFilePasteHandler.ts
Normal file
@@ -0,0 +1,111 @@
|
||||
import { useCallback, ClipboardEventHandler } from 'react';
|
||||
import { getDataTransferFiles } from '../utils/dom';
|
||||
import { readClipboardImage, isTauri, isLinux, isCapacitorNative } from '../utils/tauri';
|
||||
|
||||
const filesFromClipboardItems = (data: DataTransfer | null): File[] => {
|
||||
if (!data?.items) return [];
|
||||
|
||||
const files: File[] = [];
|
||||
for (let i = 0; i < data.items.length; i += 1) {
|
||||
const item = data.items[i];
|
||||
if (item.kind !== 'file') continue;
|
||||
const file = item.getAsFile();
|
||||
if (file) files.push(file);
|
||||
}
|
||||
return files;
|
||||
};
|
||||
|
||||
const filesFromHtmlImage = (data: DataTransfer | null): File[] => {
|
||||
const html = data?.getData('text/html');
|
||||
if (!html) return [];
|
||||
|
||||
const match = html.match(/<img[^>]+src=["'](data:image\/[a-zA-Z+]+;base64,[^"']+)["']/i);
|
||||
if (!match?.[1]) return [];
|
||||
|
||||
try {
|
||||
const dataUrl = match[1];
|
||||
const [meta, base64] = dataUrl.split(',');
|
||||
const mime = meta.match(/data:(image\/[a-zA-Z+]+);base64/i)?.[1] ?? 'image/png';
|
||||
const binary = atob(base64);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let i = 0; i < binary.length; i += 1) {
|
||||
bytes[i] = binary.charCodeAt(i);
|
||||
}
|
||||
const ext = mime.split('/')[1]?.replace('+xml', '') || 'png';
|
||||
return [new File([bytes], `clipboard-image.${ext}`, { type: mime })];
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
const getClipboardFiles = (data: DataTransfer | null): File[] => {
|
||||
if (!data) return [];
|
||||
|
||||
const fromFiles = getDataTransferFiles(data);
|
||||
if (fromFiles && fromFiles.length > 0) return fromFiles;
|
||||
|
||||
const fromItems = filesFromClipboardItems(data);
|
||||
if (fromItems.length > 0) return fromItems;
|
||||
|
||||
return filesFromHtmlImage(data);
|
||||
};
|
||||
|
||||
/** Async Clipboard API fallback (when paste event has no file payload). */
|
||||
const filesFromClipboardApi = async (): Promise<File[]> => {
|
||||
if (!navigator.clipboard?.read) return [];
|
||||
try {
|
||||
const items = await navigator.clipboard.read();
|
||||
const files: File[] = [];
|
||||
for (const item of items) {
|
||||
for (const type of item.types) {
|
||||
if (!type.startsWith('image/')) continue;
|
||||
const blob = await item.getType(type);
|
||||
const ext = type.split('/')[1]?.replace('+xml', '') || 'png';
|
||||
files.push(new File([blob], `clipboard-image.${ext}`, { type }));
|
||||
}
|
||||
}
|
||||
return files;
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Paste handler for RoomInput. Supports clipboard images via files, DataTransferItem
|
||||
* list, HTML data-URL fallbacks, and Clipboard API (common on mobile WebViews).
|
||||
* On Capacitor Android, native OnReceiveContent also routes images into the share pipeline.
|
||||
*/
|
||||
export const useFilePasteHandler = (onPaste: (file: File[]) => void): ClipboardEventHandler =>
|
||||
useCallback(
|
||||
async (evt) => {
|
||||
const files = getClipboardFiles(evt.clipboardData);
|
||||
if (files.length > 0) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
onPaste(files);
|
||||
return;
|
||||
}
|
||||
|
||||
// On Linux with Tauri, browser clipboard API doesn't work for images.
|
||||
if (isTauri() && isLinux()) {
|
||||
const clipboardImage = await readClipboardImage();
|
||||
if (clipboardImage) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
onPaste([clipboardImage]);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Mobile WebView / Capacitor: paste events often omit file payloads.
|
||||
if (isCapacitorNative()) {
|
||||
const apiFiles = await filesFromClipboardApi();
|
||||
if (apiFiles.length > 0) {
|
||||
evt.preventDefault();
|
||||
evt.stopPropagation();
|
||||
onPaste(apiFiles);
|
||||
}
|
||||
}
|
||||
},
|
||||
[onPaste]
|
||||
);
|
||||
@@ -1,6 +1,8 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { isCapacitorNative } from '../utils/tauri';
|
||||
|
||||
const KEYBOARD_HEIGHT_THRESHOLD_PX = 120;
|
||||
const IMMERSIVE_CLASS = 'immersive-landscape-keyboard';
|
||||
|
||||
const getIsLandscape = (): boolean => {
|
||||
if (typeof window === 'undefined') return false;
|
||||
@@ -24,9 +26,25 @@ const getKeyboardOpen = (): boolean => {
|
||||
return tag === 'INPUT' || tag === 'TEXTAREA';
|
||||
};
|
||||
|
||||
const setNativeStatusBarHidden = async (hidden: boolean) => {
|
||||
if (!isCapacitorNative()) return;
|
||||
try {
|
||||
const { StatusBar } = await import('@capacitor/status-bar');
|
||||
if (hidden) {
|
||||
await StatusBar.hide();
|
||||
} else {
|
||||
await StatusBar.show();
|
||||
}
|
||||
} catch {
|
||||
// Plugin may be missing in some builds; CSS safe-area collapse still applies.
|
||||
}
|
||||
};
|
||||
|
||||
export type MobileKeyboardLayout = {
|
||||
isLandscape: boolean;
|
||||
keyboardOpen: boolean;
|
||||
/** Landscape + keyboard: compact immersive room chrome. */
|
||||
immersive: boolean;
|
||||
};
|
||||
|
||||
/**
|
||||
@@ -37,6 +55,8 @@ export const useMobileKeyboardLayout = (): MobileKeyboardLayout => {
|
||||
const [isLandscape, setIsLandscape] = useState(getIsLandscape);
|
||||
const [keyboardOpen, setKeyboardOpen] = useState(getKeyboardOpen);
|
||||
|
||||
const immersive = isLandscape && keyboardOpen;
|
||||
|
||||
useEffect(() => {
|
||||
const sync = () => {
|
||||
setIsLandscape(getIsLandscape());
|
||||
@@ -63,5 +83,15 @@ export const useMobileKeyboardLayout = (): MobileKeyboardLayout => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { isLandscape, keyboardOpen };
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle(IMMERSIVE_CLASS, immersive);
|
||||
void setNativeStatusBarHidden(immersive);
|
||||
|
||||
return () => {
|
||||
document.documentElement.classList.remove(IMMERSIVE_CLASS);
|
||||
void setNativeStatusBarHidden(false);
|
||||
};
|
||||
}, [immersive]);
|
||||
|
||||
return { isLandscape, keyboardOpen, immersive };
|
||||
};
|
||||
|
||||
@@ -9,11 +9,11 @@ type ClientLayoutProps = {
|
||||
};
|
||||
|
||||
export function ClientLayout({ nav, children }: ClientLayoutProps) {
|
||||
const { keyboardOpen } = useMobileKeyboardLayout();
|
||||
const { immersive } = useMobileKeyboardLayout();
|
||||
|
||||
return (
|
||||
<Box grow="Yes">
|
||||
{!keyboardOpen && <Box shrink="No">{nav}</Box>}
|
||||
{!immersive && <Box shrink="No">{nav}</Box>}
|
||||
<Box grow="Yes">{children}</Box>
|
||||
<DockedCallPanel />
|
||||
</Box>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { useAtom, useSetAtom } from 'jotai';
|
||||
import { useAtomValue, useStore } from 'jotai';
|
||||
import React, { ReactNode, useCallback, useEffect, useRef, useState, Fragment } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
|
||||
@@ -23,13 +22,12 @@ import {
|
||||
guessPerfectParent,
|
||||
} from '../../utils/room';
|
||||
import { NotificationType, UnreadInfo } from '../../../types/matrix/room';
|
||||
import { getMxIdLocalPart, mxcUrlToHttp, getCanonicalAliasOrRoomId } from '../../utils/matrix';
|
||||
import { getMxIdLocalPart, mxcUrlToHttp, getCanonicalAliasOrRoomId, encryptFile } from '../../utils/matrix';
|
||||
import { mDirectAtom } from '../../state/mDirectList';
|
||||
import { roomToParentsAtom } from '../../state/room/roomToParents';
|
||||
import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
|
||||
import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
|
||||
import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
|
||||
import { plainToEditorInput, toPlainText } from '../../components/editor';
|
||||
import { ShareRoomPicker } from '../../features/ShareRoomPicker';
|
||||
import {
|
||||
isTauri,
|
||||
@@ -46,10 +44,10 @@ import {
|
||||
} from '../../utils/backgroundSync';
|
||||
import {
|
||||
TUploadItem,
|
||||
roomIdToMsgDraftAtomFamily,
|
||||
roomIdToUploadItemsAtomFamily,
|
||||
} from '../../state/room/roomInputDrafts';
|
||||
import { encryptFile } from '../../utils/matrix';
|
||||
import { fulfilledPromiseSettledResult } from '../../utils/common';
|
||||
import { safeFile } from '../../utils/mimeTypes';
|
||||
import {
|
||||
AndroidSharePayload,
|
||||
clearPendingAndroidShare,
|
||||
@@ -517,10 +515,71 @@ function TaskbarFlashStopper() {
|
||||
|
||||
function AndroidShareIntentHandler() {
|
||||
const mx = useMatrixClient();
|
||||
const store = useStore();
|
||||
const navigate = useNavigate();
|
||||
const [pendingShare, setPendingShare] = useState<AndroidSharePayload | null>(null);
|
||||
const mDirects = useAtomValue(mDirectAtom);
|
||||
const roomToParents = useAtomValue(roomToParentsAtom);
|
||||
const selectedRoomId = useSelectedRoom();
|
||||
const selectedRoomIdRef = useRef(selectedRoomId);
|
||||
selectedRoomIdRef.current = selectedRoomId;
|
||||
|
||||
/** Queue shared files into the open room's composer upload board (Gboard / paste / share). */
|
||||
const queueShareAsDrafts = useCallback(
|
||||
async (share: AndroidSharePayload, roomId: string) => {
|
||||
const room = mx.getRoom(roomId);
|
||||
if (!room) return false;
|
||||
|
||||
if (share.files.length > 0) {
|
||||
const originalFiles: File[] = [];
|
||||
for (const sharedFile of share.files) {
|
||||
originalFiles.push(await materializeSharedFile(sharedFile, share.receivedAt));
|
||||
}
|
||||
const safeFiles = originalFiles.map(safeFile);
|
||||
const fileItems: TUploadItem[] = [];
|
||||
|
||||
if (room.hasEncryptionStateEvent()) {
|
||||
const encryptFiles = fulfilledPromiseSettledResult(
|
||||
await Promise.allSettled(safeFiles.map((f) => encryptFile(f)))
|
||||
);
|
||||
encryptFiles.forEach((ef) =>
|
||||
fileItems.push({
|
||||
...ef,
|
||||
metadata: { markedAsSpoiler: false },
|
||||
})
|
||||
);
|
||||
} else {
|
||||
safeFiles.forEach((f) =>
|
||||
fileItems.push({
|
||||
file: f,
|
||||
originalFile: f,
|
||||
encInfo: undefined,
|
||||
metadata: { markedAsSpoiler: false },
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
store.set(roomIdToUploadItemsAtomFamily(roomId), {
|
||||
type: 'PUT',
|
||||
item: fileItems,
|
||||
});
|
||||
}
|
||||
|
||||
const nextParts = [share.subject?.trim(), share.text?.trim()].filter(
|
||||
(value): value is string => !!value
|
||||
);
|
||||
if (nextParts.length > 0) {
|
||||
await mx.sendMessage(roomId, {
|
||||
msgtype: 'm.text' as const,
|
||||
body: nextParts.join('\n'),
|
||||
});
|
||||
}
|
||||
|
||||
await clearPendingAndroidShare();
|
||||
return true;
|
||||
},
|
||||
[mx, store]
|
||||
);
|
||||
|
||||
const applyPendingShare = useCallback(
|
||||
async (share: AndroidSharePayload, roomId: string) => {
|
||||
@@ -594,6 +653,22 @@ function AndroidShareIntentHandler() {
|
||||
[mx]
|
||||
);
|
||||
|
||||
const ingestShare = useCallback(
|
||||
(share: AndroidSharePayload) => {
|
||||
const roomId = selectedRoomIdRef.current;
|
||||
// Already in a room: attach to composer (Gboard GIF / paste / in-app share).
|
||||
if (roomId && share.files.length > 0) {
|
||||
queueShareAsDrafts(share, roomId).catch((err) => {
|
||||
console.error('[AndroidShare] Failed to queue share into room:', err);
|
||||
setPendingShare(share);
|
||||
});
|
||||
return;
|
||||
}
|
||||
setPendingShare(share);
|
||||
},
|
||||
[queueShareAsDrafts]
|
||||
);
|
||||
|
||||
const handlePickRoom = useCallback(
|
||||
(roomId: string) => {
|
||||
if (!pendingShare) return;
|
||||
@@ -640,7 +715,7 @@ function AndroidShareIntentHandler() {
|
||||
getPendingAndroidShare()
|
||||
.then((share) => {
|
||||
if (mounted && share) {
|
||||
setPendingShare(share);
|
||||
ingestShare(share);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
@@ -649,7 +724,7 @@ function AndroidShareIntentHandler() {
|
||||
|
||||
listenForAndroidShares((share) => {
|
||||
if (mounted) {
|
||||
setPendingShare(share);
|
||||
ingestShare(share);
|
||||
}
|
||||
})
|
||||
.then((handle) => {
|
||||
@@ -663,7 +738,7 @@ function AndroidShareIntentHandler() {
|
||||
mounted = false;
|
||||
void listenerHandle?.remove();
|
||||
};
|
||||
}, []);
|
||||
}, [ingestShare]);
|
||||
|
||||
if (!pendingShare) return null;
|
||||
|
||||
|
||||
@@ -7,6 +7,11 @@ export const isCapacitorAndroid = Boolean(
|
||||
cap?.isNativePlatform?.() && cap?.getPlatform?.() === 'android'
|
||||
);
|
||||
|
||||
// Stationery signatures use Caveat on all platforms (including Android WebView).
|
||||
await import('@fontsource/caveat/500.css');
|
||||
await import('@fontsource/caveat/600.css');
|
||||
await import('@fontsource/caveat/700.css');
|
||||
|
||||
if (isCapacitorAndroid) {
|
||||
document.documentElement.classList.add('android-capacitor');
|
||||
document.documentElement.style.setProperty(
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
16
package-lock.json
generated
16
package-lock.json
generated
@@ -1,18 +1,19 @@
|
||||
{
|
||||
"name": "paarrot",
|
||||
"version": "4.11.77",
|
||||
"version": "4.11.121",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "paarrot",
|
||||
"version": "4.11.77",
|
||||
"version": "4.11.121",
|
||||
"license": "AGPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@capacitor/android": "8.3.0",
|
||||
"@capacitor/cli": "8.3.0",
|
||||
"@capacitor/core": "8.3.0",
|
||||
"@capacitor/local-notifications": "8.0.2"
|
||||
"@capacitor/local-notifications": "8.0.2",
|
||||
"@capacitor/status-bar": "8.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"node-fetch": "3.3.2",
|
||||
@@ -82,6 +83,15 @@
|
||||
"@capacitor/core": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@capacitor/status-bar": {
|
||||
"version": "8.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.1.tgz",
|
||||
"integrity": "sha512-OR59dlbwvmrV5dKsC9lvwv48QaGbqcbSTBpk+9/WXWxXYSdXXdzJZU9p8oyNPAkuJhCdnSa3XmU43fZRPBJJ5w==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@capacitor/core": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/runtime": {
|
||||
"version": "1.8.1",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "paarrot",
|
||||
"version": "4.11.120",
|
||||
"version": "4.11.130",
|
||||
"description": "Paarrot - A Matrix client based on Cinny",
|
||||
"engines": {
|
||||
"node": ">=18.0.0"
|
||||
@@ -25,7 +25,8 @@
|
||||
"@capacitor/android": "8.3.0",
|
||||
"@capacitor/cli": "8.3.0",
|
||||
"@capacitor/core": "8.3.0",
|
||||
"@capacitor/local-notifications": "8.0.2"
|
||||
"@capacitor/local-notifications": "8.0.2",
|
||||
"@capacitor/status-bar": "8.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"node-fetch": "3.3.2",
|
||||
|
||||
Reference in New Issue
Block a user