Linkliste: Button-Styling fix, legacy Quick-Links im Dashboard loeschbar

frontend/src/App.jsx

@@ -525,25 +525,67 @@ function FolderModal({ folder, onClose }) {
 function QuickLinks({ toast, mobile }) {
   const [links,       setLinks]       = useState([]);
   const [folderModal, setFolderModal] = useState(null);
+  const [editMode,    setEditMode]    = useState(false);
 
   useEffect(() => { api('/dashboard/links').then(setLinks).catch(() => {}); }, []);
 
-  // Links die kein Ordner sind
-  const regularLinks = links.filter(l => l.item_type !== 'folder');
-  // Ordner-Items
-  const folderItems  = links.filter(l => l.item_type === 'folder');
-  // Alles zusammen für Carousel/Grid
+  const legacyItems = links.filter(l => l.item_type === 'quicklink' || !l.item_type);
+  const hasLegacy   = legacyItems.length > 0;
+
+  const deleteLegacy = async id => {
+    try {
+      await api(`/dashboard/links/${id}`, { method:'DELETE' });
+      setLinks(p => p.filter(l => l.id !== id));
+      toast('Entfernt');
+    } catch(e) { toast(e.message,'error'); }
+  };
+
   const allItems = links.map(l => l.item_type === 'folder'
-    ? { ...l, id: `folder-${l.id}`, isFolder: true, icon: l.icon||'📁', title: l.name }
+    ? { ...l, id:`folder-${l.id}`, isFolder:true, icon:l.icon||'📁', title:l.name }
     : l
   );
 
   return (
     <div style={{ ...S.card, marginBottom:10 }}>
       {folderModal && <FolderModal folder={folderModal} onClose={()=>setFolderModal(null)}/>}
-      <div style={{ marginBottom:10 }}>
+      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:10 }}>
         <div style={S.head}>SCHNELLZUGRIFF</div>
+        {hasLegacy && (
+          <button onClick={()=>setEditMode(p=>!p)} style={{
+            background:'transparent', border:'none', color:'rgba(255,255,255,0.3)',
+            cursor:'pointer', fontFamily:'monospace', fontSize:10, padding:'2px 6px'}}>
+            {editMode ? '✓ Fertig' : '✎'}
+          </button>
+        )}
       </div>
+
+      {/* Edit-Modus: alte Quick-Links verwalten */}
+      {editMode && hasLegacy && (
+        <div style={{marginBottom:12,padding:'10px 12px',background:'rgba(255,255,255,0.03)',
+          borderRadius:8,border:'1px solid rgba(255,255,255,0.07)'}}>
+          <div style={{color:'rgba(255,255,255,0.4)',fontFamily:'monospace',fontSize:9,marginBottom:8}}>
+            ÄLTERE LINKS (aus Einstellungen) — können hier gelöscht werden
+          </div>
+          {legacyItems.map(l=>(
+            <div key={l.id} style={{display:'flex',alignItems:'center',gap:8,padding:'5px 0',
+              borderBottom:'1px solid rgba(255,255,255,0.04)'}}>
+              <span style={{fontSize:14,flexShrink:0}}>{l.icon?.startsWith('http')
+                ? <img src={l.icon} style={{width:14,height:14,objectFit:'contain',verticalAlign:'middle'}} alt=""/>
+                : l.icon||'🔗'}</span>
+              <div style={{flex:1,minWidth:0}}>
+                <div style={{color:'#fff',fontFamily:'monospace',fontSize:12,
+                  overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{l.title}</div>
+              </div>
+              <button onClick={()=>deleteLegacy(l.id)}
+                style={{...S.btn('#ff6b9d',true),fontSize:10,padding:'3px 8px',flexShrink:0}}>✕</button>
+            </div>
+          ))}
+          <div style={{color:'rgba(255,255,255,0.3)',fontFamily:'monospace',fontSize:9,marginTop:8,lineHeight:1.6}}>
+            Neue Links über Linkliste → ● Schnellzugriff verwalten
+          </div>
+        </div>
+      )}
+
       {allItems.length === 0
         ? <div style={{ color:'rgba(255,255,255,0.5)', fontSize:11, fontFamily:'monospace', padding:'6px 0' }}>
             Links oder Ordner in der Linkliste mit ● Schnellzugriff aktivieren.

frontend/src/tools/linkliste.jsx

@@ -332,9 +332,12 @@ export default function Linkliste({ toast, mobile }) {
         {!sortMode && (
           <div style={{display:'flex',gap:5,marginTop:8,flexWrap:'wrap'}}>
             {!isShared && !isByMe && (
-              <button onClick={()=>toggleQA(link)}
-                style={{...S.btn(link.in_quickaccess?'#4ecdc4':'rgba(255,255,255,0.15)',!!link.in_quickaccess),
-                  fontSize:10,padding:'4px 10px',display:'flex',alignItems:'center',gap:4}}>
+              <button onClick={()=>toggleQA(link)} style={{
+                background: link.in_quickaccess?'rgba(78,205,196,0.15)':'rgba(255,255,255,0.04)',
+                border: `1px solid ${link.in_quickaccess?'#4ecdc4':'rgba(255,255,255,0.15)'}`,
+                borderRadius:6,color:link.in_quickaccess?'#4ecdc4':'rgba(255,255,255,0.5)',
+                cursor:'pointer',fontFamily:'monospace',fontSize:10,padding:'4px 10px',
+                display:'flex',alignItems:'center',gap:4,whiteSpace:'nowrap'}}>
                 <QABadge active={!!link.in_quickaccess}/> Schnellzugriff
               </button>
             )}
@@ -388,9 +391,12 @@ export default function Linkliste({ toast, mobile }) {
             )}
             {!sortMode && (
               <div style={{display:'flex',gap:5,flexShrink:0}}>
-                <button onClick={()=>toggleFolderQA(folder)}
-                  style={{...S.btn(folder.in_quickaccess?'#4ecdc4':'rgba(255,255,255,0.15)',!!folder.in_quickaccess),
-                    fontSize:10,padding:'4px 10px',display:'flex',alignItems:'center',gap:4}}>
+                <button onClick={()=>toggleFolderQA(folder)} style={{
+                  background: folder.in_quickaccess?'rgba(78,205,196,0.15)':'rgba(255,255,255,0.04)',
+                  border: `1px solid ${folder.in_quickaccess?'#4ecdc4':'rgba(255,255,255,0.15)'}`,
+                  borderRadius:6,color:folder.in_quickaccess?'#4ecdc4':'rgba(255,255,255,0.5)',
+                  cursor:'pointer',fontFamily:'monospace',fontSize:10,padding:'4px 10px',
+                  display:'flex',alignItems:'center',gap:4,whiteSpace:'nowrap'}}>
                   <QABadge active={!!folder.in_quickaccess}/> Schnellzugriff
                 </button>
                 <button onClick={()=>setEditFolder(folder)} style={{...S.btn('#4ecdc4',true),fontSize:10,padding:'4px 10px'}}>✎</button>
@@ -436,8 +442,11 @@ export default function Linkliste({ toast, mobile }) {
             borderRadius:8,color:'rgba(255,255,255,0.4)',cursor:'pointer',padding:'6px 10px',fontSize:14,fontFamily:'monospace'}}>↺</button>
           {tab==='own' && (
             <>
-              <button onClick={()=>setSortMode(p=>!p)}
-                style={{...S.btn(sortMode?'#ffe66d':'rgba(255,255,255,0.1)',!sortMode),fontSize:11,padding:'6px 12px'}}>
+              <button onClick={()=>setSortMode(p=>!p)} style={{
+                background: sortMode?'rgba(255,230,109,0.15)':'rgba(255,255,255,0.04)',
+                border: `1px solid ${sortMode?'#ffe66d':'rgba(255,255,255,0.15)'}`,
+                borderRadius:6,color:sortMode?'#ffe66d':'rgba(255,255,255,0.6)',
+                cursor:'pointer',fontFamily:'monospace',fontSize:11,padding:'6px 12px',whiteSpace:'nowrap'}}>
                 {sortMode?'✓ Fertig':'⇅ Sortieren'}
               </button>
               {!showFolderForm && !editFolder && !sortMode && (