@if (isThemeStudioFullscreen()) {
diff --git a/toju-app/src/app/app.ts b/toju-app/src/app/app.ts
index ce00862..ecd925c 100644
--- a/toju-app/src/app/app.ts
+++ b/toju-app/src/app/app.ts
@@ -30,7 +30,7 @@ import { ServerDirectoryFacade } from './domains/server-directory';
import { NotificationsFacade } from './domains/notifications';
import { TimeSyncService } from './core/services/time-sync.service';
import { VoiceSessionFacade } from './domains/voice-session';
-import { ExternalLinkService } from './core/platform';
+import { ExternalLinkService, ViewportService } from './core/platform';
import { SettingsModalService } from './core/services/settings-modal.service';
import { ElectronBridgeService } from './core/platform/electron/electron-bridge.service';
import { UserStatusService } from './core/services/user-status.service';
@@ -99,6 +99,8 @@ export class App implements OnInit, OnDestroy {
readonly theme = inject(ThemeService);
readonly voiceSession = inject(VoiceSessionFacade);
readonly externalLinks = inject(ExternalLinkService);
+ readonly viewport = inject(ViewportService);
+ readonly isMobile = this.viewport.isMobile;
readonly electronBridge = inject(ElectronBridgeService);
readonly userStatus = inject(UserStatusService);
readonly gameActivity = inject(GameActivityService);
diff --git a/toju-app/src/app/core/platform/index.ts b/toju-app/src/app/core/platform/index.ts
index 0165723..72e022d 100644
--- a/toju-app/src/app/core/platform/index.ts
+++ b/toju-app/src/app/core/platform/index.ts
@@ -1,2 +1,3 @@
export * from './platform.service';
export * from './external-link.service';
+export * from './viewport.service';
diff --git a/toju-app/src/app/core/platform/viewport.service.ts b/toju-app/src/app/core/platform/viewport.service.ts
new file mode 100644
index 0000000..0b111c8
--- /dev/null
+++ b/toju-app/src/app/core/platform/viewport.service.ts
@@ -0,0 +1,69 @@
+import {
+ DestroyRef,
+ Injectable,
+ NgZone,
+ computed,
+ inject,
+ signal
+} from '@angular/core';
+
+/**
+ * Tracks viewport-level UX traits used to switch between desktop and mobile layouts.
+ *
+ * `isMobile` follows the Tailwind `md` breakpoint (max-width: 767.98px). It is the
+ * single source of truth for whether the UI should render in mobile mode - components
+ * and templates should use this signal rather than ad-hoc `window.innerWidth` checks.
+ *
+ * `isTouch` is a best-effort hint indicating coarse pointer / touch capability. It is
+ * stable for the lifetime of the page and does not flip when devices are connected.
+ */
+@Injectable({ providedIn: 'root' })
+export class ViewportService {
+ /** Pixel breakpoint that separates mobile from tablet/desktop layouts. Matches Tailwind `md`. */
+ static readonly MOBILE_MAX_WIDTH = 767.98;
+
+ /** True when the viewport is in mobile mode (width <= MOBILE_MAX_WIDTH). */
+ readonly isMobile = computed(() => this.isMobileSignal());
+ /** True when the primary pointer is coarse (touch screen). */
+ readonly isTouch = computed(() => this.isTouchSignal());
+ /** Convenience: true when running on a non-mobile viewport. */
+ readonly isDesktop = computed(() => !this.isMobileSignal());
+
+ private readonly zone = inject(NgZone);
+ private readonly destroyRef = inject(DestroyRef);
+
+ private readonly mobileQuery: MediaQueryList | null;
+ private readonly touchQuery: MediaQueryList | null;
+
+ private readonly isMobileSignal = signal(false);
+ private readonly isTouchSignal = signal(false);
+
+ constructor() {
+ if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+ this.mobileQuery = null;
+ this.touchQuery = null;
+ return;
+ }
+
+ this.mobileQuery = window.matchMedia(`(max-width: ${ViewportService.MOBILE_MAX_WIDTH}px)`);
+ this.touchQuery = window.matchMedia('(pointer: coarse)');
+
+ this.isMobileSignal.set(this.mobileQuery.matches);
+ this.isTouchSignal.set(this.touchQuery.matches);
+
+ const onMobileChange = (event: MediaQueryListEvent) => {
+ this.zone.run(() => this.isMobileSignal.set(event.matches));
+ };
+ const onTouchChange = (event: MediaQueryListEvent) => {
+ this.zone.run(() => this.isTouchSignal.set(event.matches));
+ };
+
+ this.mobileQuery.addEventListener('change', onMobileChange);
+ this.touchQuery.addEventListener('change', onTouchChange);
+
+ this.destroyRef.onDestroy(() => {
+ this.mobileQuery?.removeEventListener('change', onMobileChange);
+ this.touchQuery?.removeEventListener('change', onTouchChange);
+ });
+ }
+}
diff --git a/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html b/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html
index eff42d5..e1a5ac3 100644
--- a/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/chat-messages.component.html
@@ -40,31 +40,43 @@
@if (showKlipyGifPicker()) {
-
-
-
+ @if (isMobile()) {
+
+
+ } @else {
+ }
}
+
+
-
+
+
+
-
+
- @if (!msg.isDeleted) {
+ @if (!msg.isDeleted && !isMobile()) {
;
+ @ViewChild('mobileSheetTpl') mobileSheetTpl?: TemplateRef;
private readonly attachmentsSvc = inject(AttachmentFacade);
private readonly klipy = inject(KlipyService);
@@ -160,6 +170,13 @@ export class ChatMessageItemComponent {
private readonly experimentalMedia = inject(ExperimentalMediaSettingsService);
private readonly profileCard = inject(ProfileCardService);
private readonly router = inject(Router);
+ private readonly viewport = inject(ViewportService);
+ private readonly overlay = inject(Overlay);
+ private readonly viewContainerRef = inject(ViewContainerRef);
+ private mobileSheetOverlayRef: OverlayRef | null = null;
+ private longPressTimer: number | null = null;
+ readonly isMobile = this.viewport.isMobile;
+ readonly mobileSheetOpen = signal(false);
private readonly attachmentVersion = signal(this.attachmentsSvc.updated());
private readonly experimentalPlayerAttachmentId = signal(null);
private readonly mediaSupportCache = new Map();
@@ -360,6 +377,116 @@ export class ChatMessageItemComponent {
this.deleteRequested.emit(this.message());
}
+ onMessageTouchStart(event: TouchEvent): void {
+ if (!this.isMobile() || this.message().isDeleted) {
+ return;
+ }
+
+ if (event.touches.length !== 1) {
+ this.clearLongPressTimer();
+ return;
+ }
+
+ if (this.isEditableTarget(event.target)) {
+ this.clearLongPressTimer();
+ return;
+ }
+
+ this.clearLongPressTimer();
+ this.longPressTimer = window.setTimeout(() => {
+ this.longPressTimer = null;
+ this.openMobileSheet();
+ }, 500);
+ }
+
+ onMessageTouchEnd(): void {
+ this.clearLongPressTimer();
+ }
+
+ private clearLongPressTimer(): void {
+ if (this.longPressTimer !== null) {
+ window.clearTimeout(this.longPressTimer);
+ this.longPressTimer = null;
+ }
+ }
+
+ private isEditableTarget(target: EventTarget | null): boolean {
+ if (!(target instanceof Element)) {
+ return false;
+ }
+
+ return target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]') !== null;
+ }
+
+ closeMobileActions(): void {
+ this.detachMobileSheet();
+ }
+
+ private openMobileSheet(): void {
+ if (this.mobileSheetOverlayRef || !this.mobileSheetTpl) {
+ this.mobileSheetOpen.set(true);
+ return;
+ }
+
+ const overlayRef = this.overlay.create({
+ positionStrategy: this.overlay.position().global(),
+ scrollStrategy: this.overlay.scrollStrategies.block(),
+ hasBackdrop: false,
+ panelClass: 'metoyou-chat-actions-sheet-pane'
+ });
+ const portal = new TemplatePortal(this.mobileSheetTpl, this.viewContainerRef);
+
+ overlayRef.attach(portal);
+ this.mobileSheetOverlayRef = overlayRef;
+ this.mobileSheetOpen.set(true);
+ }
+
+ private detachMobileSheet(): void {
+ this.mobileSheetOpen.set(false);
+
+ if (this.mobileSheetOverlayRef) {
+ this.mobileSheetOverlayRef.dispose();
+ this.mobileSheetOverlayRef = null;
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.clearLongPressTimer();
+ this.detachMobileSheet();
+ }
+
+ onMobileReact(emoji: string): void {
+ this.addReaction(emoji);
+ this.closeMobileActions();
+ }
+
+ onMobileReply(): void {
+ this.requestReply();
+ this.closeMobileActions();
+ }
+
+ onMobileEdit(): void {
+ this.startEdit();
+ this.closeMobileActions();
+ }
+
+ onMobileDelete(): void {
+ this.requestDelete();
+ this.closeMobileActions();
+ }
+
+ async onMobileCopy(): Promise {
+ const text = this.message().content;
+
+ try {
+ await navigator.clipboard.writeText(text);
+ } catch {
+ // Clipboard API unavailable; silently ignore.
+ }
+
+ this.closeMobileActions();
+ }
+
removeEmbed(url: string): void {
this.embedRemoved.emit({
messageId: this.message().id,
diff --git a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
index aafd437..ea999b4 100644
--- a/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
+++ b/toju-app/src/app/domains/chat/feature/klipy-gif-picker/klipy-gif-picker.component.html
@@ -4,27 +4,29 @@
aria-label="KLIPY GIF picker"
style="background: hsl(var(--background) / 0.85); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px)"
>
-
} @else {
-
}
+
+
+
+
+
diff --git a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts
index 526252e..2efdcfc 100644
--- a/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts
+++ b/toju-app/src/app/domains/chat/feature/chat-messages/components/message-item/chat-message-item.component.ts
@@ -8,15 +8,21 @@ import {
effect,
inject,
input,
+ OnDestroy,
output,
signal,
- ViewChild
+ TemplateRef,
+ ViewChild,
+ ViewContainerRef
} from '@angular/core';
+import { Overlay, OverlayRef } from '@angular/cdk/overlay';
+import { TemplatePortal } from '@angular/cdk/portal';
import { Router } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import {
lucideCheck,
+ lucideCopy,
lucideDownload,
lucideEdit,
lucideExpand,
@@ -34,7 +40,7 @@ import {
MAX_BROWSER_INLINE_MEDIA_SIZE_BYTES,
MAX_AUTO_SAVE_SIZE_BYTES
} from '../../../../../attachment';
-import { PlatformService } from '../../../../../../core/platform';
+import { PlatformService, ViewportService } from '../../../../../../core/platform';
import { ElectronBridgeService } from '../../../../../../core/platform/electron/electron-bridge.service';
import {
ExperimentalMediaSettingsService
@@ -52,6 +58,7 @@ import { PluginRenderHostComponent } from '../../../../../plugins/feature/plugin
import { PluginRequirementStateService, PluginUiRegistryService } from '../../../../../plugins';
import {
+ BottomSheetComponent,
ChatAudioPlayerComponent,
ChatVideoPlayerComponent,
ProfileCardService,
@@ -125,11 +132,13 @@ interface MissingPluginEmbedFallback {
UserAvatarComponent,
PluginRenderHostComponent,
ExperimentalVlcPlayerComponent,
- ThemeNodeDirective
+ ThemeNodeDirective,
+ BottomSheetComponent
],
viewProviders: [
provideIcons({
lucideCheck,
+ lucideCopy,
lucideDownload,
lucideEdit,
lucideExpand,
@@ -148,8 +157,9 @@ interface MissingPluginEmbedFallback {
style: 'display: contents;'
}
})
-export class ChatMessageItemComponent {
+export class ChatMessageItemComponent implements OnDestroy {
@ViewChild('editTextareaRef') editTextareaRef?: ElementRef
+
+
+
+
+
+
+
+
+
+
+ @if (isOwnMessage()) {
+
+ }
+
+ @if (isOwnMessage() || isAdmin()) {
+
+ }
+ React
+
+ @for (emoji of commonEmojis; track emoji) {
+
+ }
+
+
-
+ }
-
+ @if (!isMobile()) {
+ KLIPY
- Choose a GIF
-- {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }} -
-
+
+
+
+
-
- KLIPY
+ Choose a GIF
++ {{ searchQuery.trim() ? 'Search results from KLIPY.' : 'Trending GIFs from KLIPY.' }} +
+
@@ -80,12 +82,14 @@
+
-
@for (gif of results(); track gif.id) {
}
+
+ @if (isMobile() && hasNext()) {
+
+
+
+ }
}
-
+ }
Click a GIF to select it. Powered by KLIPY.
+ @if (!isMobile()) { +
+
+ @if (hasNext()) {
+
+ }
+ Click a GIF to select it. Powered by KLIPY.
- @if (hasNext()) { - - } -