有人指出创建分类和标签感觉很麻烦，这种阻力可能会阻止新的管理员采用 Discourse。
我让 Gemini 生成了一个分类规划器。结果看起来相当不错。我认为它不应该也不可能按原样添加到 Discourse 中，这有很多（好的）原因，但它仍然很有趣。它可能会激发对 Discourse 未来的一些想法。
背景：https://meta.discourse.org/t/how-to-add-multiple-tags-up-front/390796?u=canapin
将分类移出父级有点别扭。你必须将它拖到父级上，然后再向左移动。这不直观，但同样，这更多的是一个界面概念，而不是一个真正的解决方案。
Discourse 的管理界面一开始可能会让人感到生硬。该软件很复杂，充满了设置，并且多年来变得更加复杂。通过使管理界面的某些部分更具视觉性、交互性和趣味性来进行彻底的改造，特别是人们在尝试配置其社区的基本选项时立即接触到的区域，可能会很有价值。
我想知道有多少人因为被当前界面吓倒而放弃了 Discourse。
在看到 Gemini 的创作有以下反应后，我决定创建这个主题：
我们目前正计划改进类别创建，包括类别可能包含的所有各种功能（投票、解决方案等）——您的所有反馈都非常真实！
哇，这太不可思议了，我正在使用它，这正是我所想的那种东西。现阶段只有一个问题，关于权限，“group”（组）是否意味着所有成员？如果我想给一个子组（例如“vets”）权限，我只需要写“vets”就可以了，是这样吗？
哦，还有：.csv 文件目前是否可以导入到 Discourse 中？（如果不能导入也没什么大不了的，能有一个界面让我可以随意调整我的结构就已经很棒了）
默认情况下是所有人，除非您指定组。当您点击 添加组 时，它应该会检测到您现有的组。
我以为有一种通过 CSV 批量添加的方法，但我没有看到。您会惊讶于可以直接从 CSV 复制/粘贴到该字段中的数量。
我认为我们之间存在一些误解，我问的是 @Canapin 刚刚构建的用户界面……目前我在 Discourse 中没有任何群组或任何设置，我只是想设计结构！
这个工具源于我问 Gemini 的问题：“你会如何想象一个更友好的 Discourse 类别管理界面？”
它真的只是一个可以用来把玩的交互式模型 
。
导入/导出按钮没有经过测试，而且导出的内容绝对不能导入到 Discourse 中。
关于群组：在实际的 Discourse 中，有三种权限（查看、回复和创建），可以分配给内置或自定义群组。在这个工具中，权限字段与其他字段一样，只是一个任意的占位符。
把这个工具看作是一个用于规划类别的精细化的白板，而不是任何与 Discourse 本身相关的东西
真的很令人印象深刻——它已经相当可用了！我已经导出了我所做的一些版本，但还没有尝试导入（我不敢刷新标签页，呵呵）。
感谢您澄清“交互式模型中已经很有帮助的”权限字段 
对我来说现状已经很好了！
不过有个问题：有没有办法将类别列表导入到 Discourse 中，就像可以从 CSV 导入标签一样？
有许多完整的论坛迁移脚本，但我从未听说过仅用于设置空类别的工具。
如果通过界面创建类别让您感觉工作量很大，那么您可能有太多类别了…… 
创建了几个之后，您就会掌握窍门。我有一段时间没做过了，我刚刚用基本的颜色、位置和权限设置添加了一个新类别，并带有一个更新的欢迎主题，大约花了 90 秒：(视频)
（我注意到那里菜单中的几个类别仅限于一个或另一个组。作为管理员，我可以看到所有内容，但大多数成员在他们的列表中只看到 6 或 7 个类别。）
@Canapin 所以，在试玩了一会儿之后，我不小心刷新了浏览器窗口，这让我有机会尝试了“导入”按钮。我可以报告说导出有效（见附件），但导入却静默失败了 
discourse_categories-7.csv (3.4 KB)
我可能是:sweat_smile:，但如果我要缩小它们的范围，界面不是能帮我缩小范围的地方 
你知道，我认为问题不在于创建分类所需的实际时间，而在于需要在屏幕之间来回切换所产生的认知开销，因为在这些屏幕上只能看到整体结构的一小部分（一个分类……及其部分设置）。视觉模型所做的是让我在摆弄分类和设置时能将所有内容都呈现在眼前，这样我就可以迭代并看到什么有效、什么无效。
哦，是的，我完全同意先规划和模拟你的结构。我评论的是将分类列表导入 Discourse 的想法，这对宝洁（Procter & Gamble）来说可能有意义，但对我们大多数人来说，这就像是“为了芝麻，丢了西瓜”（a lot of squeeze for a little juice）。
如果我想尝试修改这个工具，至少让导入功能生效，我该怎么做？我能以某种方式“复制”你制作的工具来对其进行修改吗？你的提示真的就只是那几个词吗？
跟进一下。我现在在 Discourse 中尝试清理我的分类。这是一个非常繁琐的过程。
我对过程中产生的一些期望：
如果你想编辑下一个分类，使用下拉菜单可能会有帮助。
我也不确定你点击“保存”后期望发生什么。在我的论坛上，按钮会变为“正在保存”，完成后会变回“保存”。
哦，你说得对，有人（是你吗？）已经提到了，但我忘了。
如果它正在那样做（它可能在做！），发生得太快了，我什么也没看到。另外，我必须说，一旦我的大脑向我的手指下达了点击的命令，我的眼睛就已经看向别处了。我希望页面顶部能显示一些提示，比如“已保存”——就像在 WordPress 上一样
I gave Gemini the main attributes of a category (name, color, tags, etc) and asked: “Can you output a js/html5 tool to create and organize categories with these attributes? We should also be able to quickly edit and rearrange”.
The produced tool was already great, but I fine-tuned it by asking to remove/add attributes and features as well as tweaking the design.
Probably. You can send the code to Gemini (use the Canvas mode) and ask it to tweak it like you want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discourse Category Planner</title>
<style>
/* Base Styling */
body { font-family: 'Inter', sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #f8f9fa; }
h1 { border-bottom: 2px solid #e9ecef; padding-bottom: 10px; margin-bottom: 20px; color: #343a40; }
/* Layout */
.main-container { display: flex; gap: 30px; }
@media (max-width: 900px) {
.main-container { flex-direction: column; }
}
.form-section { flex: 1.2; padding: 15px; border-radius: 8px; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
.list-section { flex: 1.8; padding: 15px; border-radius: 8px; background: #fff; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
/* Form Controls */
.form-row { display: flex; gap: 15px; margin-bottom: 10px; }
.form-group { flex: 1; display: flex; flex-direction: column; }
label { font-weight: 600; margin-bottom: 3px; font-size: 0.9em; color: #495057; }
input[type="text"], select, textarea { padding: 8px; border: 1px solid #ced4da; border-radius: 4px; }
/* Buttons */
.action-button { padding: 10px 15px; border: none; border-radius: 44px; cursor: pointer; background: #007bff; color: white; margin-top: 10px; transition: background 0.2s; }
.action-button:hover { background: #0056b3; }
.utility-buttons { display: flex; gap: 10px; margin-top: 20px; }
.utility-buttons .action-button { background: #6c757d; }
.utility-buttons .action-button:hover { background: #5a6268; }
/* --- Color Input Styling --- */
input[type="color"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ced4da;
padding: 0;
height: 38px;
cursor: pointer;
border-radius: 4px;
overflow: hidden;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 4px;
height: 100%;
display: block;
}
/* --- End Color Input Styling --- */
/* Management List Styles (Draggable) */
#category-list { list-style: none; padding: 0; margin-top: 15px; }
.category-item {
display: flex;
align-items: center;
padding: 12px;
border: 1px solid #dee2e6;
border-radius: 6px;
margin-bottom: 8px;
cursor: move;
background: #ffffff;
transition: box-shadow 0.2s;
}
.category-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.category-item.dragging { opacity: 0.6; border: 2px dashed #007bff; background: #eaf3ff; }
/* Subcategory Indentation in Management List (Middle Column) */
.category-item.is-sub {
margin-left: 30px;
border-left: 3px solid #ced4da;
background-color: #f7f7f7;
}
/* --- DRAG HINT STYLES --- */
.category-item.drag-over { border-bottom: 2px solid #007bff; }
.category-item.indent-hint {
border-bottom: 2px solid #28a745;
box-shadow: 5px 0 0 0 #28a745 inset;
margin-left: 30px !important;
background-color: #eaf3ff;
}
.category-item.outdent-hint {
border-bottom: 2px solid #dc3545;
box-shadow: -5px 0 0 0 #dc3545 inset;
margin-left: 0 !important;
background-color: #ffeaea;
}
/* --- END DRAG HINT STYLES --- */
.category-actions { flex-shrink: 0; display: flex; gap: 5px; }
/* --- Category Display Container (Applies to both Management List and Preview) --- */
.category-info, .preview-category {
flex-grow: 1;
display: flex;
align-items: flex-start;
padding: 0;
}
/* Wrapper for the colored elements (Vertical Bar + Square + Text) */
.category-display-block {
display: flex;
flex-direction: column;
padding-left: 8px;
border-left: 4px solid transparent;
flex-grow: 1;
}
/* Wrapper for the Square and Name/Text */
.square-and-text-wrapper {
display: flex;
align-items: flex-start;
}
/* Colored Square - Removed border-radius */
.color-square {
width: 12px;
height: 12px;
border-radius: 0;
margin-right: 8px;
flex-shrink: 0;
border: 1px solid rgba(0,0,0,0.1);
margin-top: 3px;
}
/* Category titles use default color (dark gray/black) and are bold */
.category-name {
font-size: 1em;
font-weight: 700;
color: #343a40;
}
.category-desc { font-size: 0.8em; color: #6c757d; }
/* --- Pill Styling --- */
.pill-container, .preview-pill-wrapper {
margin-top: 5px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
/* Permissions - Subtler styling */
.management-permission-pill, .preview-permission-pill {
font-size: 0.7em;
font-weight: 600;
background: #e9ecef; /* Lighter background */
color: #495057; /* Darker text */
padding: 3px 6px;
border-radius: 4px;
text-transform: uppercase;
border: 1px solid #ced4da; /* Add a subtle border for definition */
}
.attr-pill, .preview-tag-pill { /* Tags */
font-size: 0.7em;
background: #f8f9fa; /* Very light background for less emphasis */
color: #495057;
padding: 3px 6px;
border-radius: 4px;
display: inline-block;
border: 1px solid #e9ecef; /* Subtle border */
}
/* Edit/Delete Button Styles */
.edit-btn, .delete-btn {
background: #6c757d;
color: white;
padding: 5px 8px;
font-size: 0.75em;
border-radius: 4px;
border: none;
}
.delete-btn {
background: #dc3545;
}
</style>
</head>
<body>
<h1>📋 Discourse Category & Hierarchy Planner</h1>
<div class="main-container">
<div class="form-section">
<h2>Add/Edit Category Attributes</h2>
<form id="category-form">
<input type="hidden" id="category-id">
<div class="form-row">
<div class="form-group">
<label for="name">1. Name</label>
<input type="text" id="name" required oninput="updateLiveFormPreview()">
</div>
<div class="form-group">
<label for="color">2. Color</label>
<!-- Custom styled color input -->
<input type="color" id="color" value="#007bff" oninput="updateLiveFormPreview()">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="description">3. Description</label>
<textarea id="description" rows="2" oninput="updateLiveFormPreview()"></textarea>
</div>
<div class="form-group">
<label for="permissions">4. Permissions (e.g., public, staff, group)</label>
<input type="text" id="permissions" value="Public" oninput="updateLiveFormPreview()">
</div>
</div>
<div class="form-row">
<div class="form-group" style="flex: 2;">
<label for="tags">5. Tags (Comma separated, e.g., "bug, feature")</label>
<input type="text" id="tags" placeholder="Optional tags for posts in this category" oninput="updateLiveFormPreview()">
</div>
</div>
<input type="hidden" id="parentId" value="">
<div class="form-row">
<div class="form-group" style="flex: 2;">
<button type="submit" id="submit-btn" class="action-button">Add New Category</button>
</div>
</div>
</form>
<div id="live-form-preview" style="padding: 10px; border: 1px dashed #ced4da; border-radius: 6px; background: #fefefe;">
<h3 style="margin-top: 0; font-size: 1em;">Preview</h3>
<div class="preview-category" style="padding: 10px; border: none; align-items: flex-start;">
<div class="category-display-block" id="preview-display-block" style="border-left-color: #007bff; padding-left: 8px;">
<div class="square-and-text-wrapper">
<div class="color-square" id="preview-color-bar-field" style="background-color: #007bff;"></div>
<div class="category-name" id="preview-name-field">[Category Name]</div>
</div>
<div class="category-desc" id="preview-desc-field" style="color: #6c757d;">[Description goes here]</div>
<div class="preview-pill-wrapper" id="preview-pills-field">
<!-- Pills will be inserted here by JS -->
</div>
</div>
</div>
</div>
<div class="utility-buttons">
<button id="export-btn" class="action-button">Export (CSV)</button>
<button id="import-btn" class="action-button">Import (CSV)</button>
<input type="file" id="csv-file-input" accept=".csv" style="display: none;">
</div>
</div>
<div class="list-section">
<h2>Category Management (Drag to Reorder)</h2>
<p style="font-size: 0.85em; color: #6c757d;">
Drag an element to reorder. Drag to the **right** to create a subcategory (Green hint), drag to the **left** to promote (Red hint).
</p>
<ul id="category-list">
<!-- Categories will be rendered here by JavaScript -->
</ul>
<ul id="live-preview-list" style="display: none;"></ul>
</div>
</div>
<script>
let categories = [];
let dragStartX = 0;
const form = document.getElementById('category-form');
const list = document.getElementById('category-list');
const previewList = document.getElementById('live-preview-list');
const submitBtn = document.getElementById('submit-btn');
const exportBtn = document.getElementById('export-btn');
const importBtn = document.getElementById('import-btn');
const csvFileInput = document.getElementById('csv-file-input');
// --- CSV Export/Import Handlers ---
function arrayToCsv(data) {
const headers = ['id', 'name', 'description', 'color', 'permissions', 'tags', 'parentId'];
let csv = headers.join(',') + '\n';
data.forEach(row => {
const values = headers.map(header => {
let value = row[header] || '';
// Escape commas and quotes for CSV format
if (typeof value === 'string') {
value = value.replace(/"/g, '""');
if (value.includes(',') || value.includes('\n')) {
value = `"${value}"`;
}
}
return value;
});
csv += values.join(',') + '\n';
});
return csv;
}
function csvToArray(csv) {
const lines = csv.split('\n').filter(line => line.trim() !== '');
if (lines.length < 2) return [];
const headers = lines[0].split(',');
const data = [];
for (let i = 1; i < lines.length; i++) {
const values = lines[i].match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || lines[i].split(',');
if (values.length === headers.length) {
let row = {};
for (let j = 0; j < headers.length; j++) {
let value = values[j].trim();
if (value.startsWith('"') && value.endsWith('"')) {
value = value.substring(1, value.length - 1).replace(/""/g, '"');
}
row[headers[j]] = value;
}
data.push(row);
}
}
return data;
}
exportBtn.addEventListener('click', () => {
const csvData = arrayToCsv(categories);
const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
const link = document.createElement('a');
if (link.download !== undefined) {
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', 'discourse_categories.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
} else {
alert('Export not supported in this browser.');
}
});
importBtn.addEventListener('click', () => {
csvFileInput.click();
});
csvFileInput.addEventListener('change', (event) => {
const file = event.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const csvContent = e.target.result;
const importedData = csvToArray(csvContent);
if (importedData.length > 0) {
categories = importedData;
renderAll();
alert(`Successfully imported ${importedData.length} categories.`);
} else {
alert('Error importing CSV: Data is empty or incorrectly formatted.');
}
};
reader.readAsText(file);
});
// --- Core Data Management & Rendering ---
const findParent = (parentId) => categories.find(c => c.id === parentId);
// Recursive function to find all descendants of a category ID
function getDescendantIds(parentId) {
let descendants = [];
const children = categories.filter(c => c.parentId === parentId);
children.forEach(child => {
descendants.push(child.id);
descendants = descendants.concat(getDescendantIds(child.id));
});
return descendants;
}
// Function to update the simple preview box next to the form
function updateLiveFormPreview() {
const name = document.getElementById('name').value || '[Category Name]';
const description = document.getElementById('description').value || '[Description goes here]';
const color = document.getElementById('color').value;
const permissions = document.getElementById('permissions').value;
const tagsInput = document.getElementById('tags').value;
// Apply color to the square and left border
document.getElementById('preview-color-bar-field').style.backgroundColor = color;
document.getElementById('preview-display-block').style.borderLeftColor = color;
document.getElementById('preview-name-field').textContent = name;
document.getElementById('preview-desc-field').textContent = description;
// Generate Pills HTML
let pillsHtml = `<span class="preview-permission-pill">${permissions}</span>`;
if (tagsInput) {
const tagsArray = tagsInput.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
tagsArray.forEach(tag => {
pillsHtml += `<span class="preview-tag-pill">${tag}</span>`;
});
}
document.getElementById('preview-pills-field').innerHTML = pillsHtml;
}
// Function to render the management list
function renderAll() {
list.innerHTML = '';
previewList.innerHTML = '';
let finalOrder = [];
const parentCategories = categories.filter(c => !c.parentId);
const subCategories = categories.filter(c => c.parentId);
parentCategories.sort((a, b) => categories.indexOf(a) - categories.indexOf(b)).forEach(parent => {
finalOrder.push(parent);
const children = subCategories.filter(c => c.parentId === parent.id);
children.sort((a, b) => categories.indexOf(a) - categories.indexOf(b)).forEach(child => {
finalOrder.push(child);
});
});
subCategories.filter(c => !findParent(c.parentId)).forEach(orphan => {
finalOrder.push(orphan);
});
finalOrder.forEach(cat => {
const isSub = !!cat.parentId;
// --- 1. Render Management List Item (Draggable) ---
const managementItem = document.createElement('li');
managementItem.className = 'category-item';
if (isSub) {
managementItem.classList.add('is-sub');
}
managementItem.setAttribute('data-id', cat.id);
managementItem.setAttribute('draggable', true);
// Build tags HTML
const tagsHtml = cat.tags ? cat.tags.split(',').map(tag => `<span class="attr-pill">${tag.trim()}</span>`).join('') : '';
managementItem.innerHTML = `
<div class="category-info">
<div class="category-display-block" style="border-left-color: ${cat.color};">
<div class="square-and-text-wrapper">
<span class="color-square" style="background-color: ${cat.color};"></span>
<div class="category-name">${cat.name} ${isSub ? '— Subcategory' : ''}</div>
</div>
<div class="category-desc">${cat.description || ''}</div>
<div class="pill-container">
<span class="management-permission-pill">${cat.permissions}</span>
${tagsHtml}
</div>
</div>
</div>
<div class="category-actions">
<button class="edit-btn" onclick="editCategory('${cat.id}')">Edit</button>
<button class="delete-btn" onclick="deleteCategory('${cat.id}')">Delete</button>
</div>
`;
list.appendChild(managementItem);
});
addDragDropListeners();
}
// Function to handle form submission (Add or Update)
form.addEventListener('submit', (e) => {
e.preventDefault();
const idField = document.getElementById('category-id');
const id = idField.value;
const newCategory = {
id: id || 'cat_' + Date.now(),
name: document.getElementById('name').value,
description: document.getElementById('description').value,
color: document.getElementById('color').value,
permissions: document.getElementById('permissions').value,
tags: document.getElementById('tags').value.trim(),
parentId: '',
};
if (id) {
const index = categories.findIndex(c => c.id === id);
if (index !== -1) {
newCategory.parentId = categories[index].parentId;
categories[index] = newCategory;
}
} else {
categories.push(newCategory);
}
form.reset();
idField.value = '';
submitBtn.textContent = 'Add New Category';
updateLiveFormPreview();
renderAll();
});
// Function to populate the form for editing
function editCategory(id) {
const cat = categories.find(c => c.id === id);
if (!cat) return;
document.getElementById('category-id').value = cat.id;
document.getElementById('name').value = cat.name;
document.getElementById('description').value = cat.description;
document.getElementById('color').value = cat.color;
document.getElementById('permissions').value = cat.permissions;
document.getElementById('tags').value = cat.tags || '';
submitBtn.textContent = 'Update Category';
updateLiveFormPreview();
window.scrollTo(0, 0);
}
// Function to delete a category
function deleteCategory(id) {
// Removed confirm() call to allow execution in sandboxed environment
categories = categories.filter(c => c.id !== id && c.parentId !== id);
renderAll();
}
// --- Drag and Drop Logic for Rearrangement and Nesting ---
let draggedItem = null;
function removeAllDragHints() {
document.querySelectorAll('.category-item').forEach(li => {
li.classList.remove('indent-hint', 'outdent-hint', 'drag-over');
const cat = categories.find(c => c.id === li.dataset.id);
if (cat) {
li.style.marginLeft = cat.parentId ? '30px' : '0';
}
});
}
function addDragDropListeners() {
document.querySelectorAll('.category-item').forEach(item => {
item.addEventListener('dragstart', (e) => {
draggedItem = item;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text/plain', item.dataset.id);
dragStartX = e.clientX; // Capture starting X position
setTimeout(() => item.classList.add('dragging'), 0);
});
item.addEventListener('dragend', () => {
draggedItem.classList.remove('dragging');
draggedItem = null;
removeAllDragHints();
});
item.addEventListener('dragleave', (e) => {
e.currentTarget.classList.remove('indent-hint', 'outdent-hint', 'drag-over');
});
item.addEventListener('dragover', (e) => {
e.preventDefault();
e.dataTransfer.dropEffect = 'move';
const dropTargetElement = e.currentTarget;
const dropTargetId = dropTargetElement.dataset.id;
const dropTargetCat = categories.find(c => c.id === dropTargetId);
const draggedCat = categories.find(c => c.id === draggedItem.dataset.id);
if (draggedItem === dropTargetElement) return;
removeAllDragHints();
dropTargetElement.classList.add('drag-over');
const INDENT_THRESHOLD_PX = 40;
const OUTDENT_SHIFT_PX = 50;
const currentX = e.clientX;
const horizontalShift = currentX - dragStartX;
// --- LOGIC FOR HINT APPLICATION ---
// 1. Check for INDENT (Drag Right)
if (horizontalShift > INDENT_THRESHOLD_PX) {
// Check if the target can accept children (i.e., is not already a child)
if (!dropTargetCat.parentId) {
dropTargetElement.classList.add('indent-hint');
dropTargetElement.classList.remove('drag-over');
}
}
// 2. Check for OUTDENT (Drag Left)
else if (draggedCat.parentId && horizontalShift < -OUTDENT_SHIFT_PX) {
dropTargetElement.classList.add('outdent-hint');
dropTargetElement.classList.remove('drag-over');
}
// 3. Middle Ground: No hint means only vertical reordering occurs on drop.
});
item.addEventListener('drop', (e) => {
e.preventDefault();
if (draggedItem !== e.currentTarget) {
const dropTargetElement = e.currentTarget;
const dropTargetId = dropTargetElement.dataset.id;
const draggedId = draggedItem.dataset.id;
let draggedIndex = categories.findIndex(c => c.id === draggedId);
let dropIndex = categories.findIndex(c => c.id === dropTargetId);
// 1. Re-sequence the categories array (Linear Order)
if (draggedIndex !== -1 && dropIndex !== -1) {
const [temp] = categories.splice(draggedIndex, 1);
categories.splice(dropIndex, 0, temp);
}
// Re-find indices after resequencing
const newDraggedIndex = categories.findIndex(c => c.id === draggedId);
const draggedCat = categories[newDraggedIndex];
// 2. Determine New Parent ID based on the active hint
let newParentId = draggedCat.parentId; // Default: Keep current hierarchy status
let updateDescendants = false;
if (dropTargetElement.classList.contains('indent-hint')) {
// Promoting to child: The dragged category's new parent is the drop target.
newParentId = dropTargetId;
updateDescendants = true;
} else if (dropTargetElement.classList.contains('outdent-hint')) {
// Promoting to parent: The dragged category's new parent is null/empty.
newParentId = '';
updateDescendants = true;
}
draggedCat.parentId = newParentId;
// 3. Update Descendants if hierarchy changed for the dragged parent
if (updateDescendants) {
const descendantIds = getDescendantIds(draggedId);
descendantIds.forEach(descendantId => {
const descendantCat = categories.find(c => c.id === descendantId);
if (descendantCat) {
// Descendants follow the dragged parent's new status
descendantCat.parentId = newParentId;
}
});
}
removeAllDragHints();
renderAll();
}
});
});
}
// --- Initial Load (Updated Categories) ---
categories.push({
id: 'cat_001', name: 'General', description: 'General community discussion and help.', color: '#007bff', permissions: 'Public', parentId: '', tags: 'tag 1, tag 2'
});
categories.push({
id: 'cat_004', name: 'Subcategory Example', description: '', color: '#007bff', permissions: 'Public', parentId: 'cat_001', tags: 'tag 3'
});
categories.push({
id: 'cat_002', name: 'Staff', description: 'Private area for moderation and administration.', color: '#ffc107', permissions: 'Staff Only', parentId: '', tags: ''
});
categories.push({
id: 'cat_003', name: 'Site Feedback', description: 'Discuss the forum itself and suggest improvements.', color: '#28a745', permissions: 'Public', parentId: '', tags: 'site, feedback'
});
renderAll();
updateLiveFormPreview();
</script>
</body>
</html>