fix: commands sidebar

package.json

@@ -26,7 +26,6 @@
     "i18next": "^26.4.0",
     "i18next-browser-languagedetector": "^8.2.1",
     "lucide-react": "^1.37.0",
-    "or": "^0.2.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",

src/pages/PluginDetail.tsx

@@ -202,7 +202,9 @@ const PluginCommandsSidebarWidget = ({ commands }: { commands?: PluginCommand[]
   const visibleCommands = expanded ? commands : commands.slice(0, 4);
 
   return (
-    <div className="sidebar-widget commands-widget" style={{ marginTop: '1.25rem', position: 'static' }}>
+    <>
+      <div className="divider-sm" />
+      <div className="commands-widget-section">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.85rem' }}>
           <h3 style={{ margin: 0, display: 'flex', alignItems: 'center', gap: '0.45rem', fontSize: '0.82rem' }}>
             <Terminal size={14} color="var(--primary)" />
@@ -369,6 +371,7 @@ const PluginCommandsSidebarWidget = ({ commands }: { commands?: PluginCommand[]
           </button>
         )}
       </div>
+    </>
   );
 };
 
@@ -1503,8 +1506,11 @@ const PluginDetail = () => {
         )}
       </div>
     )}
+    </div>
 
-    <div className="divider-sm" />
+    <PluginCommandsSidebarWidget commands={plugin.commands} />
+
+    {(user || reportDone) && <div className="divider-sm" />}
     {user && !reportDone && (
       <>
       {!reportOpen ? (
@@ -1562,9 +1568,6 @@ const PluginDetail = () => {
       </p>
     )}
     </div>
-    </div>
-
-    <PluginCommandsSidebarWidget commands={plugin.commands} />
     </aside>
     </div>
 

src/pages/dashboard/plugin/AddPlugin.tsx

@@ -252,9 +252,10 @@ const AddPlugin = () => {
     };
 
     const updateCommandField = (index: number, field: 'name' | 'permission', value: string) => {
+        const cleanValue = field === 'name' ? value.replace(/^\/+/, '') : value;
         setCommands(prev => {
             const next = [...prev];
-            next[index] = { ...next[index], [field]: value };
+            next[index] = { ...next[index], [field]: cleanValue };
             return next;
         });
     };
@@ -460,9 +461,9 @@ const AddPlugin = () => {
         setSubmitting(true);
         try {
             const validCommands = commands
-                .filter(c => c.name.trim().length > 0)
+                .filter(c => c.name.trim().replace(/^\/+/, '').length > 0)
                 .map((c, idx) => ({
-                    name: c.name.trim(),
+                    name: c.name.trim().replace(/^\/+/, ''),
                     permission: c.permission.trim() || undefined,
                     description: c.descriptions,
                     display_order: idx,
@@ -864,8 +865,9 @@ const AddPlugin = () => {
                                                         <input
                                                             className="mp-input"
                                                             style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', padding: '0.45rem 0.65rem' }}
-                                                            placeholder="/spawn [player]"
+                                                            placeholder="spawn [player]"
                                                             value={cmd.name}
+                                                            maxLength={64}
                                                             onChange={e => updateCommandField(idx, 'name', e.target.value)}
                                                             required
                                                         />
@@ -879,6 +881,7 @@ const AddPlugin = () => {
                                                             style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', padding: '0.45rem 0.65rem' }}
                                                             placeholder="pumpkin.command.spawn"
                                                             value={cmd.permission}
+                                                            maxLength={128}
                                                             onChange={e => updateCommandField(idx, 'permission', e.target.value)}
                                                         />
                                                     </div>

src/pages/dashboard/plugin/StoreListing.tsx

@@ -234,7 +234,7 @@ const StoreListing = ({ plugin, onSaved }: Props) => {
             }
             return {
                 id: cmd.id,
-                name: cmd.name || '',
+                name: (cmd.name || '').replace(/^\/+/, ''),
                 permission: cmd.permission || '',
                 descriptions: descMap,
             };
@@ -253,9 +253,10 @@ const StoreListing = ({ plugin, onSaved }: Props) => {
     };
 
     const updateCommandField = (index: number, field: 'name' | 'permission', value: string) => {
+        const cleanValue = field === 'name' ? value.replace(/^\/+/, '') : value;
         setCommands(prev => {
             const next = [...prev];
-            next[index] = { ...next[index], [field]: value };
+            next[index] = { ...next[index], [field]: cleanValue };
             return next;
         });
     };
@@ -311,10 +312,10 @@ const StoreListing = ({ plugin, onSaved }: Props) => {
         setSaveError(null);
         setSaveSuccess(false);
         const validCommands = commands
-            .filter(c => c.name.trim().length > 0)
+            .filter(c => c.name.trim().replace(/^\/+/, '').length > 0)
             .map((c, idx) => ({
                 id: c.id,
-                name: c.name.trim(),
+                name: c.name.trim().replace(/^\/+/, ''),
                 permission: c.permission.trim() || undefined,
                 description: c.descriptions,
                 display_order: idx,
@@ -685,8 +686,9 @@ const StoreListing = ({ plugin, onSaved }: Props) => {
                                             <input
                                                 className="mp-input"
                                                 style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', padding: '0.45rem 0.65rem' }}
-                                                placeholder="/spawn [player]"
+                                                placeholder="spawn [player]"
                                                 value={cmd.name}
+                                                maxLength={64}
                                                 onChange={e => updateCommandField(idx, 'name', e.target.value)}
                                                 required
                                             />
@@ -700,6 +702,7 @@ const StoreListing = ({ plugin, onSaved }: Props) => {
                                                 style={{ fontFamily: 'var(--font-mono)', fontSize: '0.82rem', padding: '0.45rem 0.65rem' }}
                                                 placeholder="pumpkin.command.spawn"
                                                 value={cmd.permission}
+                                                maxLength={128}
                                                 onChange={e => updateCommandField(idx, 'permission', e.target.value)}
                                             />
                                         </div>