doomtube/beeta
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixes lol
All checks were successful
Build and Push / build-all (push) Successful in 9m32s
Details

Browse source
This commit is contained in:
doomtube 2026-01-07 16:27:43 -05:00
parent c2bfa06faa
commit a56ca40204
16 changed files with 816 additions and 234 deletions
Download patch file Download diff file Expand all files Collapse all files

143
frontend/src/lib/components/chat/ChatInput.svelte
View file

@ -5,6 +5,7 @@
export let disabled = false;
export let username = '';
export let isGuest = false;
const dispatch = createEventDispatcher();
@ -266,38 +267,40 @@
<form class="chat-input" on:submit={handleSubmit}>
<div class="input-wrapper">
<div class="input-icons">
<div class="timer-container">
<button
type="button"
class="timer-btn"
class:active={selfDestructSeconds > 0}
on:click={() => showTimerMenu = !showTimerMenu}
title="Self-destruct timer"
{disabled}
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg>
{#if selfDestructSeconds > 0}
<span class="timer-value">{activeTimerLabel}</span>
{#if !isGuest}
<div class="timer-container">
<button
type="button"
class="timer-btn"
class:active={selfDestructSeconds > 0}
on:click={() => showTimerMenu = !showTimerMenu}
title="Self-destruct timer"
{disabled}
>
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg>
{#if selfDestructSeconds > 0}
<span class="timer-value">{activeTimerLabel}</span>
{/if}
</button>
{#if showTimerMenu}
<div class="timer-menu">
{#each timerOptions as option}
<button
type="button"
class="timer-option"
class:selected={selfDestructSeconds === option.value}
on:click={() => selectTimer(option.value)}
>
{option.label}
</button>
{/each}
</div>
{/if}
</button>
{#if showTimerMenu}
<div class="timer-menu">
{#each timerOptions as option}
<button
type="button"
class="timer-option"
class:selected={selfDestructSeconds === option.value}
on:click={() => selectTimer(option.value)}
>
{option.label}
</button>
{/each}
</div>
{/if}
</div>
</div>
{/if}
{#if $stickerFavorites.length > 0}
<div class="favorites-container">
<button
@ -405,8 +408,8 @@
display: flex;
gap: 0.5rem;
padding: 0;
border-top: 1px solid #333;
background: #0d0d0d;
border-top: 1px solid var(--border);
background: var(--bg-surface);
flex-shrink: 0; /* Prevent input from shrinking */
}
@ -415,14 +418,14 @@
position: relative;
display: flex;
align-items: center;
background: #222;
border: 1px solid #333;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 4px;
overflow: visible;
}
.input-wrapper:focus-within {
border-color: #4a9eff;
border-color: var(--accent-blue);
}
.input-icons {
@ -439,7 +442,7 @@
padding-right: 4rem;
background: transparent;
border: none;
color: #fff;
color: var(--text-primary);
font-size: 0.875rem;
}
@ -458,12 +461,12 @@
top: 50%;
transform: translateY(-50%);
font-size: 0.75rem;
color: #666;
color: var(--text-faint);
pointer-events: none;
}
.char-count.warning {
color: #ff9800;
color: var(--accent-orange);
}
/* Sticker autocomplete dropdown */
@ -473,8 +476,8 @@
left: 0;
right: 0;
margin-bottom: 0.5rem;
background: #1a1a1a;
border: 1px solid #333;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
@ -490,7 +493,7 @@
padding: 0.5rem 0.75rem;
background: none;
border: none;
color: #ccc;
color: var(--text-secondary);
font-size: 0.85rem;
cursor: pointer;
text-align: left;
@ -500,7 +503,7 @@
.autocomplete-item:hover,
.autocomplete-item.selected {
background: rgba(74, 158, 255, 0.15);
color: #fff;
color: var(--text-primary);
}
.autocomplete-preview {
@ -530,19 +533,19 @@
background: transparent;
border: none;
border-radius: 4px;
color: #666;
color: var(--text-faint);
cursor: pointer;
transition: all 0.2s;
}
.timer-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
color: #999;
background: var(--bg-hover-light);
color: var(--text-muted);
}
.timer-btn.active {
background: rgba(255, 152, 0, 0.15);
color: #ff9800;
color: var(--accent-orange);
}
.timer-btn:disabled {
@ -560,8 +563,8 @@
bottom: 100%;
left: 0;
margin-bottom: 0.5rem;
background: #1a1a1a;
border: 1px solid #333;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
z-index: 100;
@ -574,7 +577,7 @@
padding: 0.5rem 1rem;
background: none;
border: none;
color: #ccc;
color: var(--text-secondary);
font-size: 0.8rem;
cursor: pointer;
text-align: left;
@ -582,13 +585,13 @@
}
.timer-option:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
background: var(--bg-hover-light);
color: var(--text-primary);
}
.timer-option.selected {
background: rgba(255, 152, 0, 0.2);
color: #ff9800;
color: var(--accent-orange);
}
.favorites-container {
@ -603,14 +606,14 @@
background: transparent;
border: none;
border-radius: 4px;
color: #666;
color: var(--text-faint);
cursor: pointer;
transition: all 0.2s;
}
.favorites-btn:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.1);
color: #f5c518;
background: var(--bg-hover-light);
color: var(--accent-gold);
}
.favorites-btn:disabled {
@ -623,8 +626,8 @@
bottom: 100%;
left: 0;
margin-bottom: 0.5rem;
background: #1a1a1a;
border: 1px solid #333;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
z-index: 100;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
@ -648,8 +651,8 @@
}
.favorite-item:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #444;
background: var(--bg-hover-light);
border-color: var(--border-hover);
}
.favorite-item img {
@ -660,13 +663,13 @@
.favorite-item .sticker-name {
font-size: 0.7rem;
color: #999;
color: var(--text-muted);
}
.favorite-context-menu {
position: fixed;
background: #1a1a1a;
border: 1px solid #333;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
z-index: 1000;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
@ -682,7 +685,7 @@
padding: 0.6rem 0.75rem;
background: none;
border: none;
color: #ccc;
color: var(--text-secondary);
font-size: 0.85rem;
cursor: pointer;
text-align: left;
@ -690,22 +693,22 @@
}
.favorite-context-menu button:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
background: var(--bg-hover-light);
color: var(--text-primary);
}
.favorite-context-menu button.danger {
color: #ff6b6b;
color: var(--error-light);
}
.favorite-context-menu button.danger:hover {
background: rgba(255, 107, 107, 0.15);
color: #ff6b6b;
background: rgba(248, 81, 73, 0.15);
color: var(--error-light);
}
.context-menu-divider {
height: 1px;
background: #333;
background: var(--border);
margin: 0.25rem 0;
}
</style>

76
frontend/src/lib/components/chat/ChatMessage.svelte
View file

@ -485,17 +485,17 @@
flex-direction: column;
padding: 0.1rem 0.2rem;
border-radius: 2px;
background: #000;
background: var(--bg-base);
transition: background 0.2s;
position: relative;
}
.chat-message:hover {
background: #111;
background: var(--bg-elevated);
}
.chat-message.own-message {
background: #000;
background: var(--bg-base);
}
.chat-message.compact {
@ -546,9 +546,9 @@
justify-content: center;
font-size: 0.55rem;
font-weight: 700;
color: #fff;
color: var(--text-primary);
flex-shrink: 0;
background: #666;
background: var(--text-faint);
cursor: pointer;
transition: all 0.2s ease;
position: relative;
@ -605,8 +605,8 @@
}
.badge.guest {
background: #666;
color: #fff;
background: var(--text-faint);
color: var(--text-primary);
}
.cmd-tag {
@ -614,12 +614,12 @@
padding: 0.05rem 0.25rem;
border-radius: 2px;
font-weight: 700;
background: #888;
color: #000;
background: var(--text-muted);
color: var(--bg-base);
}
.realm-link {
color: #888;
color: var(--text-muted);
font-size: 0.6rem;
text-decoration: none;
padding: 0.05rem 0.25rem;
@ -643,12 +643,12 @@
}
.timestamp {
color: #666;
color: var(--text-faint);
font-size: 0.65rem;
}
.epoch {
color: #555;
color: var(--text-faint);
font-size: 0.6rem;
font-family: monospace;
}
@ -657,7 +657,7 @@
display: flex;
align-items: center;
gap: 0.25rem;
color: #ff9800;
color: var(--accent-orange);
font-size: 0.7rem;
font-weight: 600;
padding: 0.125rem 0.375rem;
@ -679,7 +679,7 @@
.mod-button {
background: none;
border: none;
color: #666;
color: var(--text-faint);
cursor: pointer;
padding: 0 0.25rem;
font-size: 1rem;
@ -693,7 +693,7 @@
}
.mod-button:hover {
color: #fff;
color: var(--text-primary);
}
.message-row {
@ -711,7 +711,7 @@
}
.message-content {
color: #ddd;
color: var(--text-secondary);
line-height: 1.25;
word-wrap: break-word;
flex: 1;
@ -771,7 +771,7 @@
.message-content :global(blockquote p) {
font-weight: 500;
color: #789922;
color: var(--greentext);
margin: 0;
padding: 0;
display: block;
@ -785,7 +785,7 @@
.message-content :global(blockquote h1) {
font-weight: bold;
color: #789922;
color: var(--greentext);
margin: 0;
padding: 0;
display: block;
@ -800,7 +800,7 @@
/* Redtext - custom syntax */
.message-content :global(.redtext) {
font-weight: 500;
color: #cc1105;
color: var(--redtext);
display: block;
}
@ -904,8 +904,8 @@
position: absolute;
right: 0;
top: 100%;
background: #333;
border: 1px solid #444;
background: var(--border);
border: 1px solid var(--border-hover);
border-radius: 4px;
padding: 0.25rem;
z-index: 10;
@ -916,9 +916,9 @@
}
.mod-menu button {
background: #444;
background: var(--border-hover);
border: none;
color: #fff;
color: var(--text-primary);
padding: 0.5rem;
border-radius: 3px;
cursor: pointer;
@ -934,7 +934,7 @@
.tts-mute-btn {
background: none;
border: none;
color: #666;
color: var(--text-faint);
cursor: pointer;
padding: 2px;
display: flex;
@ -950,24 +950,24 @@
}
.tts-mute-btn:hover {
color: #999;
background: rgba(255, 255, 255, 0.1);
color: var(--text-muted);
background: var(--bg-hover-light);
}
.tts-mute-btn.muted {
color: #f44336;
color: var(--error);
opacity: 1;
}
.tts-mute-btn.muted:hover {
color: #ff6659;
color: var(--error-light);
}
/* Self-delete button for mods */
.self-delete-btn {
background: none;
border: none;
color: #666;
color: var(--text-faint);
cursor: pointer;
padding: 2px;
display: flex;
@ -983,15 +983,15 @@
}
.self-delete-btn:hover {
color: #f44336;
color: var(--error);
background: rgba(244, 67, 54, 0.1);
}
/* Sticker context menu - must be global since it's outside the component div */
:global(.sticker-context-menu) {
position: fixed;
background: #1a1a1a;
border: 1px solid #333;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
z-index: 1000;
@ -1006,7 +1006,7 @@
padding: 0.6rem 0.75rem;
background: none;
border: none;
color: #ccc;
color: var(--text-secondary);
font-size: 0.85rem;
cursor: pointer;
text-align: left;
@ -1014,14 +1014,14 @@
}
:global(.sticker-context-menu button:hover) {
background: rgba(255, 255, 255, 0.1);
color: #fff;
background: var(--bg-hover-light);
color: var(--text-primary);
}
/* Mentioned message styling */
.chat-message.mentioned {
background: rgba(255, 215, 0, 0.1);
border-left: 2px solid #ffd700;
border-left: 2px solid var(--mention);
}
.chat-message.mentioned:hover {
@ -1029,13 +1029,13 @@
}
.chat-message.mentioned .message-content {
color: #fff;
color: var(--text-primary);
font-weight: 600;
}
/* @mention highlighting */
.message-content :global(.mention) {
color: #ffd700;
color: var(--mention);
font-weight: 700;
background: rgba(255, 215, 0, 0.2);
padding: 0 0.25rem;

1
frontend/src/lib/components/chat/ChatPanel.svelte
View file

@ -666,6 +666,7 @@
bind:this={chatInputRef}
disabled={!isConnected}
username={$chatUserInfo.username}
isGuest={$chatUserInfo.isGuest}
on:send={handleSendMessage}
/>
{/if}