376ed9a98d
All checks were successful
Test Asgard Runner / test (push) Successful in 2s
10 plugin-config views (LootBuilder, RaidableBases, Teleport, Kits, Gather, AutoDoors, FurnaceSplitter, BetterChat, TimedExecute, PluginConfigs landing) + 5 child components (loot sidebar/item-editor/group-editor/item-picker, teleport PermissionGroupEditor) re-skinned onto DS components + tokens. All config logic preserved (path-traversal get/set, apply-to-server, import-from-server, CRUD, multiplier logic, per-store status derivation). Presentation-only. Build green. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
831 lines
31 KiB
Vue
831 lines
31 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, computed } from 'vue'
|
|
import { useBetterChatStore } from '@/stores/betterchat'
|
|
|
|
import Panel from '@/components/ds/data/Panel.vue'
|
|
import Button from '@/components/ds/core/Button.vue'
|
|
import Icon from '@/components/ds/core/Icon.vue'
|
|
import Badge from '@/components/ds/core/Badge.vue'
|
|
import Tabs from '@/components/ds/navigation/Tabs.vue'
|
|
import Input from '@/components/ds/forms/Input.vue'
|
|
import Select from '@/components/ds/forms/Select.vue'
|
|
import Switch from '@/components/ds/forms/Switch.vue'
|
|
import EmptyState from '@/components/ds/feedback/EmptyState.vue'
|
|
|
|
const store = useBetterChatStore()
|
|
|
|
const activeTab = ref<string>('groups')
|
|
const showCreateModal = ref(false)
|
|
const showImportModal = ref(false)
|
|
const showGroupModal = ref(false)
|
|
const newConfigName = ref('')
|
|
const newConfigDesc = ref('')
|
|
const importConfigName = ref('')
|
|
const editingGroupIndex = ref<number | null>(null)
|
|
|
|
const tabItems = [
|
|
{ value: 'groups', label: 'Chat groups', icon: 'message-square' },
|
|
{ value: 'settings', label: 'Settings', icon: 'settings' },
|
|
]
|
|
|
|
// Default group template matching BetterChat actual format
|
|
const defaultGroup = {
|
|
GroupName: 'newgroup',
|
|
Priority: 0,
|
|
Title: {
|
|
Text: '[Player]',
|
|
Color: '#55aaff',
|
|
Size: 15,
|
|
Hidden: false,
|
|
HiddenIfNotPrimary: false,
|
|
},
|
|
Username: {
|
|
Color: '#55aaff',
|
|
Size: 15,
|
|
},
|
|
Message: {
|
|
Color: '#ffffff',
|
|
Size: 15,
|
|
},
|
|
Format: {
|
|
Chat: '{Title} {Username}: {Message}',
|
|
Console: '{Title} {Username}: {Message}',
|
|
},
|
|
}
|
|
|
|
// Editing group state
|
|
const editGroup = ref<Record<string, any>>({ ...JSON.parse(JSON.stringify(defaultGroup)) })
|
|
|
|
onMounted(async () => {
|
|
await store.fetchConfigs()
|
|
if (store.configs.length > 0 && store.configs[0]) {
|
|
await store.loadConfig(store.configs[0].id)
|
|
}
|
|
})
|
|
|
|
// --- Config data helpers ---
|
|
|
|
function getConfigValue(path: string, defaultValue: any = false): any {
|
|
if (!store.currentConfig?.config_data) return defaultValue
|
|
const parts = path.split('.')
|
|
let current: any = store.currentConfig.config_data
|
|
for (const part of parts) {
|
|
if (current == null || typeof current !== 'object') return defaultValue
|
|
current = current[part]
|
|
}
|
|
return current ?? defaultValue
|
|
}
|
|
|
|
function setConfigValue(path: string, value: any) {
|
|
if (!store.currentConfig) return
|
|
if (!store.currentConfig.config_data) store.currentConfig.config_data = {}
|
|
const parts = path.split('.')
|
|
let current: any = store.currentConfig.config_data
|
|
for (let i = 0; i < parts.length - 1; i++) {
|
|
const part = parts[i]!
|
|
if (current[part] == null || typeof current[part] !== 'object') {
|
|
current[part] = {}
|
|
}
|
|
current = current[part]
|
|
}
|
|
current[parts[parts.length - 1]!] = value
|
|
store.markDirty()
|
|
}
|
|
|
|
// --- Chat Groups helpers ---
|
|
|
|
const chatGroups = computed<Record<string, any>[]>(() => {
|
|
if (!store.currentConfig?.config_data) return []
|
|
// BetterChat stores groups in oxide/data, but config has a ChatGroup array
|
|
// The actual config format uses a top-level array for groups in the data file
|
|
// We support both: config_data as array or config_data.ChatGroups as array
|
|
if (Array.isArray(store.currentConfig.config_data)) {
|
|
return store.currentConfig.config_data
|
|
}
|
|
return getConfigValue('ChatGroups', []) as Record<string, any>[]
|
|
})
|
|
|
|
function addGroup() {
|
|
editingGroupIndex.value = null
|
|
editGroup.value = JSON.parse(JSON.stringify(defaultGroup))
|
|
showGroupModal.value = true
|
|
}
|
|
|
|
function editGroupAt(index: number) {
|
|
editingGroupIndex.value = index
|
|
editGroup.value = JSON.parse(JSON.stringify(chatGroups.value[index]))
|
|
showGroupModal.value = true
|
|
}
|
|
|
|
function saveGroup() {
|
|
if (!store.currentConfig) return
|
|
if (!store.currentConfig.config_data) store.currentConfig.config_data = {}
|
|
|
|
const groups = [...chatGroups.value]
|
|
if (editingGroupIndex.value !== null) {
|
|
groups[editingGroupIndex.value] = JSON.parse(JSON.stringify(editGroup.value))
|
|
} else {
|
|
groups.push(JSON.parse(JSON.stringify(editGroup.value)))
|
|
}
|
|
|
|
if (Array.isArray(store.currentConfig.config_data)) {
|
|
store.currentConfig.config_data = groups as any
|
|
} else {
|
|
store.currentConfig.config_data.ChatGroups = groups
|
|
}
|
|
store.markDirty()
|
|
showGroupModal.value = false
|
|
}
|
|
|
|
function deleteGroup(index: number) {
|
|
if (!store.currentConfig) return
|
|
if (!confirm('Remove this chat group?')) return
|
|
|
|
const groups = [...chatGroups.value]
|
|
groups.splice(index, 1)
|
|
|
|
if (Array.isArray(store.currentConfig.config_data)) {
|
|
store.currentConfig.config_data = groups as any
|
|
} else {
|
|
store.currentConfig.config_data.ChatGroups = groups
|
|
}
|
|
store.markDirty()
|
|
}
|
|
|
|
// --- Action handlers ---
|
|
|
|
async function handleConfigChange(id: string) {
|
|
if (store.isDirty) {
|
|
if (!confirm('Unsaved changes will be lost. Continue?')) return
|
|
}
|
|
await store.loadConfig(id)
|
|
}
|
|
|
|
async function handleCreateConfig() {
|
|
if (!newConfigName.value.trim()) return
|
|
const config = await store.createConfig(
|
|
newConfigName.value.trim(),
|
|
newConfigDesc.value.trim() || undefined,
|
|
)
|
|
if (config) {
|
|
showCreateModal.value = false
|
|
newConfigName.value = ''
|
|
newConfigDesc.value = ''
|
|
}
|
|
}
|
|
|
|
async function handleDeleteConfig() {
|
|
if (!store.currentConfig) return
|
|
if (!confirm(`Delete "${store.currentConfig.config_name}"? This cannot be undone.`)) return
|
|
await store.deleteConfig(store.currentConfig.id)
|
|
}
|
|
|
|
async function handleApply() {
|
|
if (!store.currentConfig) return
|
|
if (!confirm('Apply this BetterChat config to the server? This will overwrite the current config.')) return
|
|
if (store.isDirty) {
|
|
await store.saveCurrentConfig()
|
|
}
|
|
await store.applyToServer(store.currentConfig.id)
|
|
}
|
|
|
|
async function handleImport() {
|
|
if (!importConfigName.value.trim()) return
|
|
const config = await store.importFromServer(importConfigName.value.trim())
|
|
if (config) {
|
|
showImportModal.value = false
|
|
importConfigName.value = ''
|
|
}
|
|
}
|
|
|
|
// DS Select model — current config id
|
|
const selectedConfigId = computed<string>({
|
|
get: () => store.currentConfig?.id ?? '',
|
|
set: (v: string | undefined) => { handleConfigChange(v ?? '') },
|
|
})
|
|
|
|
const configSelectOptions = computed(() =>
|
|
store.configs.map(c => ({
|
|
value: c.id,
|
|
label: c.config_name + (c.is_active ? ' (active)' : ''),
|
|
}))
|
|
)
|
|
|
|
// Switch computed wrappers (setConfigValue is not reactive-friendly with direct v-model)
|
|
const wordFilterEnabled = computed<boolean>({
|
|
get: () => getConfigValue('Word Filter.Enabled', false) as boolean,
|
|
set: (v: boolean) => setConfigValue('Word Filter.Enabled', v),
|
|
})
|
|
const antiFloodEnabled = computed<boolean>({
|
|
get: () => getConfigValue('Anti Flood.Enabled', true) as boolean,
|
|
set: (v: boolean) => setConfigValue('Anti Flood.Enabled', v),
|
|
})
|
|
const reverseTitleOrder = computed<boolean>({
|
|
get: () => getConfigValue('General.Reverse Title Order', false) as boolean,
|
|
set: (v: boolean) => setConfigValue('General.Reverse Title Order', v),
|
|
})
|
|
const useCustomReplacement = computed<boolean>({
|
|
get: () => getConfigValue('Word Filter.Use Custom Replacement', false) as boolean,
|
|
set: (v: boolean) => setConfigValue('Word Filter.Use Custom Replacement', v),
|
|
})
|
|
const enablePlayerTagging = computed<boolean>({
|
|
get: () => getConfigValue('General.Enable Player Tagging', false) as boolean,
|
|
set: (v: boolean) => setConfigValue('General.Enable Player Tagging', v),
|
|
})
|
|
|
|
// Modal input bindings
|
|
const newConfigNameModel = computed<string>({
|
|
get: () => newConfigName.value,
|
|
set: (v: string | undefined) => { newConfigName.value = v ?? '' },
|
|
})
|
|
const importConfigNameModel = computed<string>({
|
|
get: () => importConfigName.value,
|
|
set: (v: string | undefined) => { importConfigName.value = v ?? '' },
|
|
})
|
|
|
|
// Group modal field bindings
|
|
const editGroupName = computed<string>({
|
|
get: () => editGroup.value.GroupName ?? '',
|
|
set: (v: string | undefined) => { editGroup.value.GroupName = v ?? '' },
|
|
})
|
|
const editGroupTitleText = computed<string>({
|
|
get: () => editGroup.value.Title?.Text ?? '',
|
|
set: (v: string | undefined) => { editGroup.value.Title.Text = v ?? '' },
|
|
})
|
|
const editGroupTitleColor = computed<string>({
|
|
get: () => editGroup.value.Title?.Color ?? '#55aaff',
|
|
set: (v: string | undefined) => { editGroup.value.Title.Color = v ?? '#55aaff' },
|
|
})
|
|
const editGroupUsernameColor = computed<string>({
|
|
get: () => editGroup.value.Username?.Color ?? '#55aaff',
|
|
set: (v: string | undefined) => { editGroup.value.Username.Color = v ?? '#55aaff' },
|
|
})
|
|
const editGroupMessageColor = computed<string>({
|
|
get: () => editGroup.value.Message?.Color ?? '#ffffff',
|
|
set: (v: string | undefined) => { editGroup.value.Message.Color = v ?? '#ffffff' },
|
|
})
|
|
const editGroupFormatChat = computed<string>({
|
|
get: () => editGroup.value.Format?.Chat ?? '',
|
|
set: (v: string | undefined) => { editGroup.value.Format.Chat = v ?? '' },
|
|
})
|
|
const editGroupFormatConsole = computed<string>({
|
|
get: () => editGroup.value.Format?.Console ?? '',
|
|
set: (v: string | undefined) => { editGroup.value.Format.Console = v ?? '' },
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="bch">
|
|
<!-- Page head -->
|
|
<div class="bch__head">
|
|
<div class="bch__head-id">
|
|
<div class="bch__head-chip">
|
|
<Icon name="message-square" :size="20" :stroke-width="2" />
|
|
</div>
|
|
<div>
|
|
<div class="t-eyebrow">Plugin configuration</div>
|
|
<h1 class="bch__title">Better Chat</h1>
|
|
</div>
|
|
</div>
|
|
<div class="bch__head-actions">
|
|
<Button size="sm" icon="plus" @click="showCreateModal = true">New config</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toolbar panel -->
|
|
<Panel>
|
|
<div class="bch__toolbar">
|
|
<!-- Config selector -->
|
|
<Select
|
|
v-if="store.configs.length > 0"
|
|
v-model="selectedConfigId"
|
|
:options="configSelectOptions"
|
|
size="sm"
|
|
style="min-width: 200px"
|
|
/>
|
|
<span v-else class="bch__no-configs">No configs yet</span>
|
|
|
|
<div class="bch__toolbar-actions">
|
|
<!-- Save -->
|
|
<Button
|
|
size="sm"
|
|
icon="save"
|
|
:loading="store.isSaving"
|
|
:disabled="!store.currentConfig || !store.isDirty || store.isSaving"
|
|
@click="store.saveCurrentConfig()"
|
|
>{{ store.isSaving ? 'Saving…' : 'Save' }}</Button>
|
|
|
|
<!-- Apply to server -->
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
icon="play"
|
|
:loading="store.isApplying"
|
|
:disabled="!store.currentConfig || store.isApplying"
|
|
@click="handleApply"
|
|
>{{ store.isApplying ? 'Applying…' : 'Apply to server' }}</Button>
|
|
|
|
<!-- Import from server -->
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
icon="download"
|
|
@click="showImportModal = true"
|
|
>Import from server</Button>
|
|
|
|
<!-- Delete -->
|
|
<Button
|
|
size="sm"
|
|
variant="danger-soft"
|
|
icon="trash-2"
|
|
:disabled="!store.currentConfig"
|
|
@click="handleDeleteConfig"
|
|
>Delete</Button>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="store.isLoading" class="bch__loading">
|
|
<span class="bch__spinner" />
|
|
</div>
|
|
|
|
<!-- Empty — no config -->
|
|
<Panel v-else-if="!store.currentConfig">
|
|
<EmptyState
|
|
icon="message-square"
|
|
title="No BetterChat config selected"
|
|
description="Create a new config, import from server, or select one from the dropdown above."
|
|
>
|
|
<template #action>
|
|
<Button icon="plus" @click="showCreateModal = true">Create first config</Button>
|
|
</template>
|
|
</EmptyState>
|
|
</Panel>
|
|
|
|
<!-- Config editor -->
|
|
<template v-else>
|
|
<!-- Tab bar -->
|
|
<Tabs v-model="activeTab" :items="tabItems" variant="line" />
|
|
|
|
<!-- Chat groups tab -->
|
|
<Panel v-if="activeTab === 'groups'" title="Chat groups">
|
|
<template #actions>
|
|
<Button size="sm" variant="secondary" icon="plus" @click="addGroup">Add group</Button>
|
|
</template>
|
|
|
|
<!-- Empty groups -->
|
|
<EmptyState
|
|
v-if="chatGroups.length === 0"
|
|
icon="message-square"
|
|
title="No chat groups configured"
|
|
description="Add a group to get started."
|
|
/>
|
|
|
|
<!-- Groups list -->
|
|
<div v-else class="bch__groups">
|
|
<div
|
|
v-for="(group, index) in chatGroups"
|
|
:key="index"
|
|
class="bch__group"
|
|
>
|
|
<div class="bch__group-main">
|
|
<div class="bch__group-header">
|
|
<span class="bch__group-name">{{ group.GroupName || group.groupName || 'Unnamed' }}</span>
|
|
<Badge tone="neutral" :mono="true">Priority: {{ group.Priority ?? 0 }}</Badge>
|
|
</div>
|
|
|
|
<div class="bch__group-meta">
|
|
<!-- Title -->
|
|
<div class="bch__meta-item">
|
|
<span class="bch__meta-label">Title</span>
|
|
<div class="bch__meta-val">
|
|
<span
|
|
class="bch__color-dot"
|
|
:style="{ backgroundColor: group.Title?.Color || group.TitleColor || '#55aaff' }"
|
|
/>
|
|
<span>{{ group.Title?.Text || group.Title || '[Player]' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Name color -->
|
|
<div class="bch__meta-item">
|
|
<span class="bch__meta-label">Name color</span>
|
|
<div class="bch__meta-val">
|
|
<span
|
|
class="bch__color-dot"
|
|
:style="{ backgroundColor: group.Username?.Color || group.NameColor || '#55aaff' }"
|
|
/>
|
|
<span class="bch__mono">{{ group.Username?.Color || group.NameColor || '#55aaff' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Message color -->
|
|
<div class="bch__meta-item">
|
|
<span class="bch__meta-label">Message color</span>
|
|
<div class="bch__meta-val">
|
|
<span
|
|
class="bch__color-dot"
|
|
:style="{ backgroundColor: group.Message?.Color || group.MessageColor || '#ffffff' }"
|
|
/>
|
|
<span class="bch__mono">{{ group.Message?.Color || group.MessageColor || '#ffffff' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Format -->
|
|
<div class="bch__meta-item">
|
|
<span class="bch__meta-label">Format</span>
|
|
<div class="bch__meta-val bch__mono bch__truncate">{{ group.Format?.Chat || group.Format || '{Title} {Username}: {Message}' }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bch__group-actions">
|
|
<Button variant="ghost" size="sm" icon="pencil" @click="editGroupAt(index)" />
|
|
<Button variant="danger-soft" size="sm" icon="trash-2" @click="deleteGroup(index)" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
|
|
<!-- Settings tab -->
|
|
<Panel v-else-if="activeTab === 'settings'" title="General settings">
|
|
<div class="bch__settings">
|
|
<!-- Toggle rows -->
|
|
<div class="bch__toggles">
|
|
<div class="bch__toggle-row">
|
|
<div class="bch__toggle-body">
|
|
<div class="bch__toggle-label">Word filter</div>
|
|
<div class="bch__toggle-sub">Enable profanity / word filtering in chat</div>
|
|
</div>
|
|
<Switch v-model="wordFilterEnabled" />
|
|
</div>
|
|
<div class="bch__toggle-row">
|
|
<div class="bch__toggle-body">
|
|
<div class="bch__toggle-label">Anti flood</div>
|
|
<div class="bch__toggle-sub">Prevent message spamming</div>
|
|
</div>
|
|
<Switch v-model="antiFloodEnabled" />
|
|
</div>
|
|
<div class="bch__toggle-row">
|
|
<div class="bch__toggle-body">
|
|
<div class="bch__toggle-label">Reverse title order</div>
|
|
<div class="bch__toggle-sub">Reverse the display order of chat titles</div>
|
|
</div>
|
|
<Switch v-model="reverseTitleOrder" />
|
|
</div>
|
|
<div class="bch__toggle-row">
|
|
<div class="bch__toggle-body">
|
|
<div class="bch__toggle-label">Use custom replacement</div>
|
|
<div class="bch__toggle-sub">Use a custom word instead of * for filtered words</div>
|
|
</div>
|
|
<Switch v-model="useCustomReplacement" />
|
|
</div>
|
|
<div class="bch__toggle-row">
|
|
<div class="bch__toggle-body">
|
|
<div class="bch__toggle-label">Enable player tagging</div>
|
|
<div class="bch__toggle-sub">Allow @mentions to highlight players in chat</div>
|
|
</div>
|
|
<Switch v-model="enablePlayerTagging" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Number / text inputs -->
|
|
<div class="bch__inputs">
|
|
<div class="bch__input-field">
|
|
<Input
|
|
label="Anti flood seconds"
|
|
hint="Minimum seconds between messages"
|
|
type="number"
|
|
:mono="true"
|
|
:model-value="String(getConfigValue('Anti Flood.Seconds', 1.5))"
|
|
@update:model-value="v => setConfigValue('Anti Flood.Seconds', Number(v ?? 1.5))"
|
|
/>
|
|
</div>
|
|
<div class="bch__input-field">
|
|
<Input
|
|
label="Minimal tag characters"
|
|
hint="Minimum characters for player tag matching"
|
|
type="number"
|
|
:mono="true"
|
|
:model-value="String(getConfigValue('General.Minimal Characters', 2))"
|
|
@update:model-value="v => setConfigValue('General.Minimal Characters', Number(v ?? 2))"
|
|
/>
|
|
</div>
|
|
<div class="bch__input-field">
|
|
<Input
|
|
label="Filter replacement"
|
|
hint="Character used to replace filtered words"
|
|
:mono="true"
|
|
:model-value="String(getConfigValue('Word Filter.Replacement', '*'))"
|
|
@update:model-value="v => setConfigValue('Word Filter.Replacement', v ?? '*')"
|
|
/>
|
|
</div>
|
|
<div class="bch__input-field">
|
|
<Input
|
|
label="Custom replacement word"
|
|
hint="Custom word to replace filtered content"
|
|
:model-value="String(getConfigValue('Word Filter.Custom Replacement', 'Unicorn'))"
|
|
@update:model-value="v => setConfigValue('Word Filter.Custom Replacement', v ?? 'Unicorn')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Panel>
|
|
</template>
|
|
|
|
<!-- Create config modal -->
|
|
<div v-if="showCreateModal" class="bch__modal-backdrop" @click.self="showCreateModal = false">
|
|
<div class="bch__modal">
|
|
<div class="bch__modal-head">
|
|
<h2 class="bch__modal-title">New BetterChat config</h2>
|
|
</div>
|
|
<div class="bch__modal-body">
|
|
<Input
|
|
v-model="newConfigNameModel"
|
|
label="Config name"
|
|
placeholder="e.g. Default Chat Settings"
|
|
@keydown.enter="handleCreateConfig"
|
|
/>
|
|
<div class="bch__field">
|
|
<span class="bch__field-label">Description (optional)</span>
|
|
<textarea
|
|
v-model="newConfigDesc"
|
|
rows="2"
|
|
placeholder="What is this config for?"
|
|
class="cc-textarea"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="bch__modal-foot">
|
|
<Button variant="ghost" @click="showCreateModal = false">Cancel</Button>
|
|
<Button :disabled="!newConfigName.trim()" @click="handleCreateConfig">Create</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Import from server modal -->
|
|
<div v-if="showImportModal" class="bch__modal-backdrop" @click.self="showImportModal = false">
|
|
<div class="bch__modal">
|
|
<div class="bch__modal-head">
|
|
<h2 class="bch__modal-title">Import from server</h2>
|
|
</div>
|
|
<div class="bch__modal-body">
|
|
<p class="bch__modal-desc">Import the current BetterChat config from your live server. This will create a new config profile.</p>
|
|
<Input
|
|
v-model="importConfigNameModel"
|
|
label="Config name"
|
|
placeholder="e.g. Imported server config"
|
|
@keydown.enter="handleImport"
|
|
/>
|
|
</div>
|
|
<div class="bch__modal-foot">
|
|
<Button variant="ghost" @click="showImportModal = false">Cancel</Button>
|
|
<Button :disabled="!importConfigName.trim()" @click="handleImport">Import</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Group edit modal -->
|
|
<div v-if="showGroupModal" class="bch__modal-backdrop" @click.self="showGroupModal = false">
|
|
<div class="bch__modal bch__modal--lg">
|
|
<div class="bch__modal-head">
|
|
<h2 class="bch__modal-title">{{ editingGroupIndex !== null ? 'Edit group' : 'Add group' }}</h2>
|
|
<Button variant="ghost" size="sm" icon="x" @click="showGroupModal = false" />
|
|
</div>
|
|
<div class="bch__modal-body bch__modal-body--scroll">
|
|
<Input
|
|
v-model="editGroupName"
|
|
label="Group name"
|
|
placeholder="e.g. default, admin, vip"
|
|
:mono="true"
|
|
/>
|
|
|
|
<Input
|
|
label="Priority"
|
|
hint="Higher priority groups display first (0 = highest)"
|
|
type="number"
|
|
:mono="true"
|
|
:model-value="String(editGroup.Priority ?? 0)"
|
|
@update:model-value="v => { editGroup.Priority = Number(v ?? 0) }"
|
|
/>
|
|
|
|
<Input
|
|
v-model="editGroupTitleText"
|
|
label="Title text"
|
|
placeholder="e.g. [Admin]"
|
|
/>
|
|
|
|
<!-- Colors -->
|
|
<div class="bch__colors">
|
|
<div class="bch__color-field">
|
|
<span class="bch__field-label">Title color</span>
|
|
<div class="bch__color-row">
|
|
<input type="color" v-model="editGroup.Title.Color" class="bch__color-picker" />
|
|
<Input v-model="editGroupTitleColor" :mono="true" size="sm" />
|
|
</div>
|
|
</div>
|
|
<div class="bch__color-field">
|
|
<span class="bch__field-label">Name color</span>
|
|
<div class="bch__color-row">
|
|
<input type="color" v-model="editGroup.Username.Color" class="bch__color-picker" />
|
|
<Input v-model="editGroupUsernameColor" :mono="true" size="sm" />
|
|
</div>
|
|
</div>
|
|
<div class="bch__color-field">
|
|
<span class="bch__field-label">Message color</span>
|
|
<div class="bch__color-row">
|
|
<input type="color" v-model="editGroup.Message.Color" class="bch__color-picker" />
|
|
<Input v-model="editGroupMessageColor" :mono="true" size="sm" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Font sizes -->
|
|
<div class="bch__sizes">
|
|
<Input
|
|
label="Title size"
|
|
type="number"
|
|
:mono="true"
|
|
:model-value="String(editGroup.Title?.Size ?? 15)"
|
|
@update:model-value="v => { editGroup.Title.Size = Number(v ?? 15) }"
|
|
/>
|
|
<Input
|
|
label="Name size"
|
|
type="number"
|
|
:mono="true"
|
|
:model-value="String(editGroup.Username?.Size ?? 15)"
|
|
@update:model-value="v => { editGroup.Username.Size = Number(v ?? 15) }"
|
|
/>
|
|
<Input
|
|
label="Message size"
|
|
type="number"
|
|
:mono="true"
|
|
:model-value="String(editGroup.Message?.Size ?? 15)"
|
|
@update:model-value="v => { editGroup.Message.Size = Number(v ?? 15) }"
|
|
/>
|
|
</div>
|
|
|
|
<Input
|
|
v-model="editGroupFormatChat"
|
|
label="Chat format"
|
|
hint="Variables: {Title} {Username} {Message}"
|
|
:mono="true"
|
|
/>
|
|
<Input
|
|
v-model="editGroupFormatConsole"
|
|
label="Console format"
|
|
:mono="true"
|
|
/>
|
|
|
|
<!-- Hidden toggles -->
|
|
<div class="bch__hidden-toggles">
|
|
<label class="bch__check-label">
|
|
<input type="checkbox" v-model="editGroup.Title.Hidden" class="bch__check" />
|
|
Hidden
|
|
</label>
|
|
<label class="bch__check-label">
|
|
<input type="checkbox" v-model="editGroup.Title.HiddenIfNotPrimary" class="bch__check" />
|
|
Hidden if not primary
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="bch__modal-foot">
|
|
<Button variant="ghost" @click="showGroupModal = false">Cancel</Button>
|
|
<Button icon="check" @click="saveGroup">{{ editingGroupIndex !== null ? 'Update' : 'Add' }}</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ---- Page shell ---- */
|
|
.bch { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
|
|
|
|
/* ---- Page head ---- */
|
|
.bch__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
|
|
.bch__head-id { display: flex; align-items: center; gap: 12px; }
|
|
.bch__head-chip {
|
|
width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
|
|
display: flex; align-items: center; justify-content: center;
|
|
color: var(--accent); background: var(--accent-soft);
|
|
box-shadow: inset 0 0 0 1px var(--accent-border);
|
|
}
|
|
.bch__title {
|
|
font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
|
|
color: var(--text-primary); margin-top: 3px;
|
|
}
|
|
.bch__head-actions { display: flex; align-items: center; gap: 8px; }
|
|
|
|
/* ---- Toolbar ---- */
|
|
.bch__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
|
|
.bch__toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; }
|
|
.bch__no-configs { font-size: var(--text-sm); color: var(--text-muted); }
|
|
|
|
/* ---- Loading ---- */
|
|
.bch__loading { display: flex; justify-content: center; padding: 48px 0; }
|
|
.bch__spinner {
|
|
width: 28px; height: 28px; border-radius: 50%;
|
|
border: 2px solid var(--accent); border-top-color: transparent;
|
|
animation: bch-spin 0.6s linear infinite;
|
|
}
|
|
@keyframes bch-spin { to { transform: rotate(360deg); } }
|
|
|
|
/* ---- Groups list ---- */
|
|
.bch__groups { display: flex; flex-direction: column; gap: 10px; }
|
|
.bch__group {
|
|
display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
|
|
padding: 14px; border-radius: var(--radius-md);
|
|
background: var(--surface-raised-2); box-shadow: var(--ring-default);
|
|
}
|
|
.bch__group-main { flex: 1; min-width: 0; }
|
|
.bch__group-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
|
|
.bch__group-name { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); }
|
|
.bch__group-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
|
|
@media (max-width: 768px) { .bch__group-meta { grid-template-columns: repeat(2, 1fr); } }
|
|
.bch__meta-item { min-width: 0; }
|
|
.bch__meta-label { font-size: var(--text-2xs); color: var(--text-muted); display: block; margin-bottom: 3px; }
|
|
.bch__meta-val { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-secondary); }
|
|
.bch__group-actions { display: flex; align-items: center; gap: 6px; flex: none; }
|
|
|
|
/* ---- Misc helpers ---- */
|
|
.bch__mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
|
.bch__truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.bch__color-dot {
|
|
width: 12px; height: 12px; border-radius: var(--radius-sm);
|
|
border: 1px solid var(--border-default); flex: none;
|
|
}
|
|
|
|
/* ---- Settings ---- */
|
|
.bch__settings { display: flex; flex-direction: column; gap: 24px; }
|
|
.bch__toggles { display: flex; flex-direction: column; }
|
|
.bch__toggle-row {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
gap: 16px; padding: 14px 0;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
.bch__toggle-row:last-child { border-bottom: 0; padding-bottom: 0; }
|
|
.bch__toggle-row:first-child { padding-top: 0; }
|
|
.bch__toggle-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
|
|
.bch__toggle-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px; }
|
|
.bch__inputs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
|
|
@media (max-width: 640px) { .bch__inputs { grid-template-columns: 1fr; } }
|
|
.bch__input-field { display: flex; flex-direction: column; }
|
|
|
|
/* ---- Modal ---- */
|
|
.bch__modal-backdrop {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 50;
|
|
display: flex; align-items: center; justify-content: center; padding: 16px;
|
|
}
|
|
.bch__modal {
|
|
background: var(--surface-base); border-radius: var(--radius-lg); box-shadow: var(--ring-default);
|
|
width: 100%; max-width: 440px; display: flex; flex-direction: column;
|
|
}
|
|
.bch__modal--lg { max-width: 560px; }
|
|
.bch__modal-head {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
padding: 16px 20px; border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
.bch__modal-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); }
|
|
.bch__modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
|
|
.bch__modal-body--scroll { max-height: 70vh; overflow-y: auto; }
|
|
.bch__modal-desc { font-size: var(--text-sm); color: var(--text-tertiary); line-height: 1.5; }
|
|
.bch__modal-foot {
|
|
display: flex; justify-content: flex-end; gap: 8px;
|
|
padding: 14px 20px; border-top: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
/* ---- Color pickers ---- */
|
|
.bch__colors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
@media (max-width: 480px) { .bch__colors { grid-template-columns: 1fr; } }
|
|
.bch__color-field { display: flex; flex-direction: column; gap: 6px; }
|
|
.bch__field-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); }
|
|
.bch__color-row { display: flex; align-items: center; gap: 8px; }
|
|
.bch__color-picker {
|
|
width: 32px; height: 32px; border-radius: var(--radius-sm); flex: none;
|
|
border: 1px solid var(--border-default); background: transparent; cursor: pointer; padding: 2px;
|
|
}
|
|
|
|
/* ---- Font sizes ---- */
|
|
.bch__sizes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
|
|
|
|
/* ---- Hidden checkboxes ---- */
|
|
.bch__hidden-toggles { display: flex; gap: 24px; }
|
|
.bch__check-label { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; user-select: none; }
|
|
.bch__check { accent-color: var(--accent); cursor: pointer; }
|
|
|
|
/* ---- Generic field label ---- */
|
|
.bch__field { display: flex; flex-direction: column; gap: 6px; }
|
|
|
|
/* ---- Textarea ---- */
|
|
.cc-textarea {
|
|
background: var(--surface-inset); border-radius: var(--radius-md); box-shadow: var(--ring-default);
|
|
border: 0; outline: 0; padding: 9px 11px; resize: none; width: 100%;
|
|
font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-primary);
|
|
transition: var(--transition-colors);
|
|
}
|
|
.cc-textarea::placeholder { color: var(--text-muted); }
|
|
.cc-textarea:focus { box-shadow: inset 0 0 0 1px var(--accent), var(--glow-accent-sm); }
|
|
</style>
|