410 lines
10 KiB
Svelte
410 lines
10 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
import type { ChatService } from "../../services/chat.svelte";
|
|
import { optimizeEmoji, getCustomEmojiUrl } from "../../utils";
|
|
|
|
const chat = getContext<ChatService>("chat");
|
|
|
|
const themes = [
|
|
{ id: "dark", name: "Dark", color: "#5865f2", bg: "#313338" },
|
|
{ id: "light", name: "Light", color: "#5865f2", bg: "#ffffff" },
|
|
{ id: "amethyst", name: "Amethyst", color: "#9d4edd", bg: "#0f0a1a" },
|
|
{ id: "cyan", name: "Cyber Cyan", color: "#00d2ff", bg: "#0c111a" },
|
|
{ id: "emerald", name: "Emerald Sea", color: "#10b981", bg: "#04120e" },
|
|
{ id: "rose", name: "Crimson Rose", color: "#f43f5e", bg: "#12060a" },
|
|
{ id: "amber", name: "Amber Gold", color: "#f59e0b", bg: "#120e03" },
|
|
];
|
|
|
|
let newEmojiName = $state("");
|
|
let newEmojiFile = $state<File | null>(null);
|
|
let isEmojiUploading = $state(false);
|
|
let emojiError = $state<string | null>(null);
|
|
|
|
async function handleEmojiSubmit(e: SubmitEvent) {
|
|
e.preventDefault();
|
|
if (!newEmojiFile || !newEmojiName.trim()) return;
|
|
|
|
isEmojiUploading = true;
|
|
emojiError = null;
|
|
|
|
try {
|
|
const { data } = await optimizeEmoji(newEmojiFile);
|
|
await chat.uploadCustomEmoji(newEmojiName.trim(), "custom", data);
|
|
newEmojiName = "";
|
|
newEmojiFile = null;
|
|
} catch (err) {
|
|
console.error("Failed to upload custom emoji:", err);
|
|
emojiError = "Failed to process emoji image.";
|
|
} finally {
|
|
isEmojiUploading = false;
|
|
}
|
|
}
|
|
|
|
function onEmojiFileChange(e: Event) {
|
|
const file = (e.target as HTMLInputElement).files?.[0];
|
|
if (file) {
|
|
newEmojiFile = file;
|
|
if (!newEmojiName) {
|
|
newEmojiName = file.name.split('.')[0];
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="section">
|
|
<div class="section-header-description">
|
|
<h3>Appearance</h3>
|
|
<p>Choose a color scheme that fits your style.</p>
|
|
</div>
|
|
|
|
<div class="theme-selection-container">
|
|
{#each themes as theme}
|
|
<button
|
|
class="theme-card"
|
|
class:active={chat.ui.theme === theme.id}
|
|
onclick={() => chat.ui.setTheme(theme.id)}
|
|
style="--theme-accent: {theme.color}; --theme-bg: {theme.bg};"
|
|
>
|
|
<div class="theme-preview">
|
|
<div class="theme-preview-sidebar"></div>
|
|
<div class="theme-preview-content">
|
|
<div class="theme-preview-header"></div>
|
|
<div class="theme-preview-msg"></div>
|
|
<div class="theme-preview-msg short"></div>
|
|
</div>
|
|
</div>
|
|
<span class="theme-name">{theme.name}</span>
|
|
{#if chat.ui.theme === theme.id}
|
|
<div class="theme-active-check">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
{/if}
|
|
</button>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section" style="margin-top: 32px;">
|
|
<div class="section-header-description">
|
|
<h3>Custom Emojis</h3>
|
|
<p>Personalize your experience by uploading unique emojis. They'll be automatically optimized for the best performance.</p>
|
|
</div>
|
|
|
|
<div class="emoji-upload-form-box">
|
|
<form class="emoji-upload-form" onsubmit={handleEmojiSubmit}>
|
|
<div class="form-row">
|
|
<div class="form-group" style="flex: 1; margin-bottom: 0;">
|
|
<label for="emoji-name">Emoji Name</label>
|
|
<div class="input-wrapper">
|
|
<span class="emoji-prefix">:</span>
|
|
<input
|
|
id="emoji-name"
|
|
type="text"
|
|
bind:value={newEmojiName}
|
|
placeholder="emoji-name"
|
|
/>
|
|
<span class="emoji-suffix">:</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group" style="margin-bottom: 0;">
|
|
<label>Emoji Image</label>
|
|
<label class="custom-file-upload">
|
|
<i class="fas fa-image"></i>
|
|
<span class="file-name-text">{newEmojiFile ? newEmojiFile.name : "Select Image"}</span>
|
|
<input type="file" accept="image/*" onchange={onEmojiFileChange} style="display: none;" />
|
|
</label>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="btn-success"
|
|
style="align-self: flex-end; height: 38px; padding: 0 20px;"
|
|
disabled={!newEmojiFile || !newEmojiName.trim() || isEmojiUploading}
|
|
>
|
|
{isEmojiUploading ? "Uploading..." : "Upload"}
|
|
</button>
|
|
</div>
|
|
{#if emojiError}
|
|
<div class="form-error" style="color: var(--status-danger); font-size: 0.75rem; margin-top: 8px;">
|
|
<i class="fas fa-exclamation-circle"></i> {emojiError}
|
|
</div>
|
|
{/if}
|
|
</form>
|
|
</div>
|
|
|
|
<div class="emoji-management-container">
|
|
<div class="emoji-management-grid">
|
|
{#each chat.customEmojis as emoji}
|
|
<div class="emoji-item-card" title=":{emoji.name}:">
|
|
<div class="emoji-preview">
|
|
<img src={getCustomEmojiUrl(emoji.data)} alt={emoji.name} />
|
|
</div>
|
|
<span class="emoji-name">:{emoji.name}:</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.section-header-description {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-header-description h3 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 1rem;
|
|
color: var(--header-primary);
|
|
}
|
|
|
|
.section-header-description p {
|
|
margin: 0;
|
|
font-size: 0.85rem;
|
|
color: var(--text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.theme-selection-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.theme-card {
|
|
background-color: var(--background-secondary);
|
|
border: 2px solid transparent;
|
|
border-radius: 8px;
|
|
padding: 12px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
text-align: left;
|
|
}
|
|
|
|
.theme-card:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
border-color: var(--background-modifier-accent);
|
|
}
|
|
|
|
.theme-card.active {
|
|
border-color: var(--theme-accent);
|
|
background-color: var(--background-modifier-selected);
|
|
}
|
|
|
|
.theme-preview {
|
|
height: 60px;
|
|
background-color: var(--theme-bg);
|
|
border-radius: 4px;
|
|
display: flex;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.theme-preview-sidebar {
|
|
width: 20px;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.theme-preview-content {
|
|
flex: 1;
|
|
padding: 6px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
}
|
|
|
|
.theme-preview-header {
|
|
height: 6px;
|
|
width: 60%;
|
|
background-color: var(--theme-accent);
|
|
border-radius: 2px;
|
|
margin-bottom: 4px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.theme-preview-msg {
|
|
height: 4px;
|
|
width: 90%;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.theme-preview-msg.short {
|
|
width: 50%;
|
|
}
|
|
|
|
.theme-name {
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.theme-active-check {
|
|
position: absolute;
|
|
top: 8px;
|
|
right: 8px;
|
|
color: var(--theme-accent);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.emoji-management-container {
|
|
background-color: var(--background-secondary);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.emoji-management-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.emoji-upload-form-box {
|
|
background-color: var(--background-secondary);
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
margin-bottom: 16px;
|
|
border: 1px solid var(--background-modifier-accent);
|
|
}
|
|
|
|
.form-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-group label {
|
|
font-size: 0.75rem;
|
|
font-weight: 700;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.input-wrapper {
|
|
display: flex;
|
|
align-items: center;
|
|
background-color: var(--background-primary);
|
|
border-radius: 4px;
|
|
padding-right: 8px;
|
|
}
|
|
|
|
.form-group input[type="text"] {
|
|
flex: 1;
|
|
padding: 10px;
|
|
background: none;
|
|
color: var(--text-normal);
|
|
border: none;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
}
|
|
|
|
.emoji-prefix, .emoji-suffix {
|
|
padding: 0 8px;
|
|
color: var(--text-muted);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.custom-file-upload {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background-color: var(--background-primary);
|
|
color: var(--text-normal);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
border: 1px solid var(--background-modifier-accent);
|
|
transition: background-color 0.1s;
|
|
height: 38px;
|
|
box-sizing: border-box;
|
|
max-width: 200px;
|
|
}
|
|
|
|
.file-name-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.custom-file-upload:hover {
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.emoji-item-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
background-color: var(--background-tertiary);
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
aspect-ratio: 1;
|
|
transition: transform 0.1s;
|
|
}
|
|
|
|
.emoji-item-card:hover {
|
|
transform: scale(1.05);
|
|
background-color: var(--background-modifier-hover);
|
|
}
|
|
|
|
.emoji-preview {
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.emoji-preview img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.emoji-name {
|
|
font-size: 0.6rem;
|
|
color: var(--text-muted);
|
|
font-family: var(--font-code);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: var(--status-positive);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 20px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: opacity 0.1s;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.btn-success:disabled {
|
|
background-color: var(--background-modifier-accent);
|
|
color: var(--text-muted);
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|