@@ -524,7 +548,65 @@ const FAQManagement = () => {
) : (
// View Mode
-
+ {/* Mobile: top row — number + movers on left, edit + delete on right */}
+
+
+ {faqs.length > 1 && (
+ <>
+
+ #{index + 1}
+
+
+ handleMoveFaqUp(faq, index)}
+ disabled={index === 0}
+ className={`p-1 rounded-md ${index === 0 ? 'text-zinc-700 cursor-not-allowed' : recentlyMovedFaq === faq.id && moveDirection === 'up' ? 'text-emerald-400' : 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800'} transition-colors`}
+ title="Move up"
+ >
+
+ handleMoveFaqDown(faq, index)}
+ disabled={index === faqs.length - 1}
+ className={`p-1 rounded-md ${index === faqs.length - 1 ? 'text-zinc-700 cursor-not-allowed' : recentlyMovedFaq === faq.id && moveDirection === 'down' ? 'text-emerald-400' : 'text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800'} transition-colors`}
+ title="Move down"
+ >
+
+
+
+ )}
+
+
+ {
+ setEditingFaq(faq.id);
+ setEditForm({ question: faq.question, answer: faq.answer });
+ setOriginalEditForm({ question: faq.question, answer: faq.answer });
+ }}
+ className="p-2 rounded-lg text-zinc-400 hover:text-blue-400 hover:bg-blue-500/10 transition-colors"
+ title="Edit FAQ"
+ >
+
+ setDeletingFaq(faq)}
+ className="p-2 rounded-lg text-zinc-400 hover:text-red-400 hover:bg-red-500/10 transition-colors"
+ title="Delete FAQ"
+ >
+
+
+
+ {/* Mobile: question title */}
+
+ {faq.question}
+
+
+ {/* Desktop: original layout */}
+
{faqs.length > 1 && (
@@ -628,6 +710,14 @@ const FAQManagement = () => {
+
+
setToast((t) => ({ ...t, show: false }))}
+ />
);
};
diff --git a/src/components/staff/PackagesManagement.jsx b/src/components/staff/PackagesManagement.jsx
index 3ca817a..424e692 100644
--- a/src/components/staff/PackagesManagement.jsx
+++ b/src/components/staff/PackagesManagement.jsx
@@ -1,17 +1,9 @@
import { useState } from 'react';
import { Button } from '../shared/Button';
import { Card, CardHeader, CardTitle, CardContent } from '../shared/Card';
+import { Toast } from '../shared/Toast';
import { getVatsimToken } from '../../utils/cookieUtils';
-import {
- Upload,
- Package,
- Check,
- X,
- AlertTriangle,
- Info,
- FileArchive,
- RefreshCw,
-} from 'lucide-react';
+import { Upload, Package, Check, X, Info, FileArchive, RefreshCw } from 'lucide-react';
/**
* PackagesManagement
@@ -60,15 +52,19 @@ const PackagesManagement = () => {
const [selectedType, setSelectedType] = useState('models');
const [file, setFile] = useState(null);
const [dragActive, setDragActive] = useState(false);
- const [error, setError] = useState('');
+ const [toast, setToast] = useState({
+ show: false,
+ title: '',
+ description: '',
+ variant: 'default',
+ });
const [success, setSuccess] = useState(null); // {type,key,size,sha256,url,etag}
const [uploading, setUploading] = useState(false);
const [showMeta, setShowMeta] = useState(false);
const reset = () => {
setFile(null);
- setError('');
- setUploading(false);
+ setToast((t) => ({ ...t, show: false }));
};
const validate = (f) => {
@@ -84,11 +80,10 @@ const PackagesManagement = () => {
if (!f) return;
const v = validate(f);
if (v) {
- setError(v);
+ setToast({ show: true, title: 'Invalid file', description: v, variant: 'destructive' });
return;
}
setFile(f);
- setError('');
};
const onDrop = (e) => {
@@ -99,27 +94,31 @@ const PackagesManagement = () => {
if (!f) return;
const v = validate(f);
if (v) {
- setError(v);
+ setToast({ show: true, title: 'Invalid file', description: v, variant: 'destructive' });
return;
}
setFile(f);
- setError('');
};
const handleUpload = async () => {
if (uploading) return;
const v = validate(file);
if (v) {
- setError(v);
+ setToast({ show: true, title: 'Invalid file', description: v, variant: 'destructive' });
return;
}
- setError('');
+ setToast((t) => ({ ...t, show: false }));
setSuccess(null);
try {
setUploading(true);
const token = getVatsimToken();
if (!token) {
- setError('Missing auth token');
+ setToast({
+ show: true,
+ title: 'Not authenticated',
+ description: 'Missing auth token. Please log in again.',
+ variant: 'destructive',
+ });
setUploading(false);
return;
}
@@ -143,12 +142,24 @@ const PackagesManagement = () => {
}
const data = await res.json();
setSuccess(data.package || null);
+ // Show toast notification
+ setToast({
+ show: true,
+ title: 'Package uploaded',
+ description: 'The package has been uploaded successfully.',
+ variant: 'success',
+ });
// Auto-clear file after success to avoid accidental reupload
setFile(null);
setShowMeta(true);
setTimeout(() => setSuccess(null), 15000); // fade success after 15s
} catch (err) {
- setError(err.message);
+ setToast({
+ show: true,
+ title: 'Upload failed',
+ description: err.message,
+ variant: 'destructive',
+ });
} finally {
setUploading(false);
}
@@ -189,7 +200,6 @@ const PackagesManagement = () => {
key={pt.id}
onClick={() => {
setSelectedType(pt.id);
- setError('');
}}
className={`px-4 py-2 rounded-lg text-sm font-medium border transition-all ${active ? 'bg-blue-600 border-blue-500 text-white' : 'bg-zinc-800 border-zinc-700 text-zinc-300 hover:bg-zinc-700/70'}`}
>
@@ -291,16 +301,6 @@ const PackagesManagement = () => {
/>
- {error && (
-
-
-
{error}
-
setError('')} className="text-red-400/70 hover:text-red-300">
-
-
- )}
-
{success && (
@@ -376,6 +376,14 @@ const PackagesManagement = () => {
+
+
setToast((t) => ({ ...t, show: false }))}
+ />
);
};
diff --git a/src/components/staff/ReleaseManagement.jsx b/src/components/staff/ReleaseManagement.jsx
index 4ef2018..167f23a 100644
--- a/src/components/staff/ReleaseManagement.jsx
+++ b/src/components/staff/ReleaseManagement.jsx
@@ -1,13 +1,13 @@
import { useState, useEffect } from 'react';
import { Card } from '../shared/Card';
import { Dialog } from '../shared/Dialog';
+import { Toast } from '../shared/Toast';
import { getVatsimToken } from '../../utils/cookieUtils';
import {
Upload,
Image as ImageIcon,
Check,
AlertTriangle,
- History,
X,
Plus,
Edit,
@@ -23,7 +23,7 @@ import {
} from 'lucide-react';
import { marked } from 'marked';
// Configure marked to treat single line breaks as
and enable GitHub-flavored markdown.
-marked.setOptions({
+marked.use({
breaks: true, // so a single newline becomes a line break
gfm: true,
});
@@ -56,14 +56,17 @@ const ReleaseManagement = () => {
const [image, setImage] = useState(null);
const [uploading, setUploading] = useState(false);
const [uploadError, setUploadError] = useState('');
- const [uploadSuccess, setUploadSuccess] = useState('');
+ const [toast, setToast] = useState({
+ show: false,
+ title: '',
+ description: '',
+ variant: 'default',
+ });
// Changelog edit state
const [editReleaseId, setEditReleaseId] = useState('');
const [newChangelog, setNewChangelog] = useState('');
const [updating, setUpdating] = useState(false);
- const [updateError, setUpdateError] = useState('');
- const [updateSuccess, setUpdateSuccess] = useState('');
// Releases list state
const [releases, setReleases] = useState([]);
@@ -360,8 +363,6 @@ const ReleaseManagement = () => {
const resetUpdateForm = () => {
setEditReleaseId('');
setNewChangelog('');
- setUpdateError('');
- // Don't clear success message here - let it show for 4 seconds
};
const renderMarkdown = (md) => {
@@ -415,7 +416,6 @@ const ReleaseManagement = () => {
const executeUpload = async () => {
if (!pendingUploadData) return;
setUploadError('');
- setUploadSuccess('');
setConfirmOpen(false);
try {
setUploading(true);
@@ -442,7 +442,12 @@ const ReleaseManagement = () => {
}
throw new Error(message);
}
- setUploadSuccess('Release created successfully');
+ setToast({
+ show: true,
+ title: 'Release Published',
+ description: 'The new release has been published and is now available for download.',
+ variant: 'success',
+ });
resetUploadForm();
setIsAdding(false);
fetchReleases(productFilter); // Refresh the releases list
@@ -451,7 +456,6 @@ const ReleaseManagement = () => {
} finally {
setUploading(false);
setPendingUploadData(null);
- setTimeout(() => setUploadSuccess(''), 4000);
}
};
@@ -462,14 +466,12 @@ const ReleaseManagement = () => {
setShowProductDropdown(false);
setShowFilterDropdown(false);
resetUploadForm();
- setUploadSuccess(''); // Clear any previous success message
};
const handleStartUpdate = () => {
setIsUpdating(true);
setIsAdding(false);
resetUpdateForm();
- setUpdateSuccess(''); // Clear any previous success message
};
const handleCancel = () => {
@@ -479,27 +481,38 @@ const ReleaseManagement = () => {
setShowFilterDropdown(false);
resetUploadForm();
resetUpdateForm();
- setUpdateSuccess(''); // Clear success message when canceling
- setUploadSuccess(''); // Clear upload success message when canceling
};
// submitUpload replaced by confirmation modal flow
const submitChangelogUpdate = async (e) => {
e.preventDefault();
- setUpdateError('');
- setUpdateSuccess('');
if (!editReleaseId.trim()) {
- setUpdateError('Release ID is required');
+ setToast({
+ show: true,
+ title: 'Validation Error',
+ description: 'Release ID is required.',
+ variant: 'destructive',
+ });
return;
}
if (!newChangelog.trim()) {
- setUpdateError('Changelog content is required');
+ setToast({
+ show: true,
+ title: 'Validation Error',
+ description: 'Changelog content is required.',
+ variant: 'destructive',
+ });
return;
}
if (newChangelog.length > 20000) {
- setUpdateError('Changelog exceeds 20,000 character limit');
+ setToast({
+ show: true,
+ title: 'Validation Error',
+ description: 'Changelog exceeds 20,000 character limit.',
+ variant: 'destructive',
+ });
return;
}
@@ -526,16 +539,23 @@ const ReleaseManagement = () => {
throw new Error(message);
}
- setUpdateSuccess('Changelog updated successfully');
+ setToast({
+ show: true,
+ title: 'Changelog Updated',
+ description: 'The release changelog has been updated.',
+ variant: 'success',
+ });
fetchReleases(productFilter); // Refresh the releases list
resetUpdateForm();
} catch (err) {
- setUpdateError(err.message);
+ setToast({
+ show: true,
+ title: 'Update Failed',
+ description: err.message,
+ variant: 'destructive',
+ });
} finally {
setUpdating(false);
- setTimeout(() => {
- setUpdateSuccess('');
- }, 4000);
}
};
@@ -617,7 +637,7 @@ const ReleaseManagement = () => {
e.stopPropagation();
setIsOpen(!isOpen);
}}
- className="flex items-center justify-between w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg focus:outline-none focus:border-zinc-500 text-white transition-all duration-200 hover:border-zinc-600 hover:bg-zinc-750 text-sm min-w-[180px]"
+ className="flex items-center justify-between w-full px-3 py-2 bg-zinc-800 border border-zinc-700 rounded-lg focus:outline-none focus:border-zinc-500 text-white transition-all duration-200 hover:border-zinc-600 hover:bg-zinc-750 text-sm min-w-45"
>
{currentOption?.label || 'All Products'}
@@ -670,7 +690,7 @@ const ReleaseManagement = () => {
{!isAdding && !isUpdating && (