myxelium/Toju
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects 1 Releases 14 Wiki Activity

Chat message placeholder adjustment

Browse Source
This commit is contained in:
SocksOnHead
2026-03-19 21:39:47 +01:00
parent b5d676fb78
commit 429bb9d8ff
3 changed files with 33 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/features/chat/chat-messages/components/message-composer/chat-message-composer.component.html
View File

@@ -132,7 +132,7 @@
(dragleave)="onDragLeave($event)"
(drop)="onDrop($event)"
>
<div class="absolute bottom-3 right-3 z-10 flex items-center gap-2">
<div class="absolute bottom-3 right-3 z-10 flex items-center gap-2 m-0.5">
@if (klipy.isEnabled()) {
<button
#klipyTrigger
@@ -184,9 +184,10 @@
(dragleave)="onDragLeave($event)"
(drop)="onDrop($event)"
placeholder="Type a message..."
class="chat-textarea w-full rounded-[1.35rem] border border-border py-2 pl-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
class="chat-textarea w-full rounded-[1.35rem] border border-border pl-4 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
[class.border-dashed]="dragActive()"
[class.border-primary]="dragActive()"
[class.chat-textarea-expanded]="textareaExpanded()"
[class.ctrl-resize]="ctrlHeld()"
[class.pr-16]="!klipy.isEnabled()"
[class.pr-40]="klipy.isEnabled()"

16
src/app/features/chat/chat-messages/components/message-composer/chat-message-composer.component.scss
View File

@@ -1,12 +1,24 @@
.chat-textarea {
--textarea-bg: hsl(40deg 3.7% 15.9% / 87%);
--textarea-bg: hsl(40deg 3.7% 15.9% / 25%);
--textarea-collapsed-padding-y: 18px;
--textarea-expanded-padding-y: 8px;
background: var(--textarea-bg);
height: 62px;
min-height: 62px;
max-height: 520px;
overflow-y: hidden;
padding-top: var(--textarea-collapsed-padding-y);
padding-bottom: var(--textarea-collapsed-padding-y);
resize: none;
transition: height 0.12s ease;
transition:
height 0.12s ease,
padding 0.12s ease;
&.chat-textarea-expanded {
padding-top: var(--textarea-expanded-padding-y);
padding-bottom: var(--textarea-expanded-padding-y);
}
&.ctrl-resize {
resize: vertical;

17
src/app/features/chat/chat-messages/components/message-composer/chat-message-composer.component.ts
View File

@@ -45,6 +45,8 @@ type LocalFileWithPath = File & {
path?: string;
};
const DEFAULT_TEXTAREA_HEIGHT = 62;
@Component({
selector: 'app-chat-message-composer',
standalone: true,
@@ -91,6 +93,7 @@ export class ChatMessageComposerComponent implements AfterViewInit, OnDestroy {
readonly dragActive = signal(false);
readonly inputHovered = signal(false);
readonly ctrlHeld = signal(false);
readonly textareaExpanded = signal(false);
messageContent = '';
pendingFiles: File[] = [];
@@ -351,6 +354,7 @@ export class ChatMessageComposerComponent implements AfterViewInit, OnDestroy {
element.style.height = 'auto';
element.style.height = Math.min(element.scrollHeight, 520) + 'px';
element.style.overflowY = element.scrollHeight > 520 ? 'auto' : 'hidden';
this.syncTextareaExpandedState();
}
onInputFocus(): void {
@@ -621,15 +625,26 @@ export class ChatMessageComposerComponent implements AfterViewInit, OnDestroy {
if (!root)
return;
this.syncTextareaExpandedState();
this.emitHeight();
if (typeof ResizeObserver === 'undefined')
return;
this.resizeObserver = new ResizeObserver(() => this.emitHeight());
this.resizeObserver = new ResizeObserver(() => {
this.syncTextareaExpandedState();
this.emitHeight();
});
this.resizeObserver.observe(root);
}
private syncTextareaExpandedState(): void {
const textarea = this.messageInputRef?.nativeElement;
this.textareaExpanded.set(Boolean(textarea && textarea.offsetHeight > DEFAULT_TEXTAREA_HEIGHT));
}
private emitHeight(): void {
const root = this.composerRoot?.nativeElement;