Wichtige Funktionen direkt in der Seitenleiste
Nach dem Umbau lagen alle Funktionen hinter dem Raster — für die vier, fünf, die man dauernd anfasst, ist das ein Umweg zu viel. Oben in der Seitenleiste steht jetzt „Meine Funktionen": ein Klick öffnet die Seite direkt. Welche dort stehen, entscheidet der Stern auf der Modul-Karte oder auf der Seite selbst. Bewusst nicht alle 35: Deckel bei acht, sonst ist der Gewinn gegenüber dem Raster wieder weg. Der Standard ist eine Vermutung (Devlogs, Willkommen, Tickets, Starboard, Galerie) und ausdrücklich zum Ändern gedacht. Die Auswahl liegt als Einstellung in der Datenbank, nicht im Browser — sie gilt damit auf jedem Gerät und fürs ganze Team. Eine geleerte Auswahl wird als solche gespeichert, sonst käme beim nächsten Laden der Standard zurück. Der Stern ist ungeheftet nur angedeutet und wird erst beim Überfahren deutlich — 35 Karten mit vollen Sternen sähen aus wie ein Sternenhimmel. Nebenbei: bei geöffneter Modul-Seite war sowohl „Module" als auch die Funktion in der Leiste hervorgehoben. Jetzt nur noch die Funktion. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Claude Fable 5
@@ -7,7 +7,7 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { apiGet, apiPut, apiPost } from '../api.js';
|
||||
import { moduleIcon } from '../module-icons.jsx';
|
||||
import { IconArrowLeft, IconWarning, IconCheck, IconRefresh, IconChevronDown } from '../icons.jsx';
|
||||
import { IconArrowLeft, IconWarning, IconCheck, IconRefresh, IconChevronDown, IconStar } from '../icons.jsx';
|
||||
|
||||
/** Ein Feld aus dem Register — Art entscheidet über die Darstellung */
|
||||
function Feld({ feld, value, onChange, PickSelect, channelItems, roleItems }) {
|
||||
@@ -64,7 +64,7 @@ function Feld({ feld, value, onChange, PickSelect, channelItems, roleItems }) {
|
||||
*/
|
||||
export default function ModulePage(props) {
|
||||
const { id, onBack, onToggle, form, setForm, PickSelect, channelItems, roleItems,
|
||||
welcomePreviewUrl, flash, goTab, reloadSettings } = props;
|
||||
welcomePreviewUrl, flash, goTab, reloadSettings, favorites, onToggleFavorite } = props;
|
||||
|
||||
const [detail, setDetail] = useState(null);
|
||||
const [fehler, setFehler] = useState(false);
|
||||
@@ -141,6 +141,15 @@ export default function ModulePage(props) {
|
||||
<h2 className="modpage-name">{detail.name}</h2>
|
||||
<p className="modpage-desc">{detail.desc}</p>
|
||||
</div>
|
||||
<button
|
||||
className={`mod-fav${favorites?.includes(detail.id) ? ' on' : ''}`}
|
||||
title={favorites?.includes(detail.id)
|
||||
? 'Aus der Seitenleiste nehmen'
|
||||
: 'In die Seitenleiste heften'}
|
||||
onClick={() => onToggleFavorite(detail.id)}
|
||||
>
|
||||
<IconStar size={17} />
|
||||
</button>
|
||||
<button
|
||||
className={`mod-switch${detail.enabled ? ' on' : ''}`}
|
||||
title={detail.enabled ? 'Ausschalten' : 'Einschalten'}
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
IconApplications, IconComposer, IconServer, IconSystem, IconApi, IconTeam,
|
||||
IconLock, IconBot, IconUpload, IconChevronDown, IconKey, IconPages, IconX,
|
||||
IconHome as IconLayers, IconWarning, IconCheck, IconMessage, IconRefresh,
|
||||
IconSearch, IconSystem as IconTune,
|
||||
IconSearch, IconSystem as IconTune, IconStar,
|
||||
} from '../icons.jsx';
|
||||
import { moduleIcon } from '../module-icons.jsx';
|
||||
import ModulePage from '../components/ModulePage.jsx';
|
||||
@@ -315,6 +315,9 @@ export default function Settings({ me }) {
|
||||
window.history.replaceState(null, '', id ? `#module/${id}` : '#module');
|
||||
};
|
||||
const [creating, setCreating] = useState(null); // Einstellung, die gerade angelegt wird
|
||||
// Funktionen, die in der Seitenleiste stehen
|
||||
const [favorites, setFavorites] = useState([]);
|
||||
const [maxFavorites, setMaxFavorites] = useState(8);
|
||||
// Grundgerüst-Assistent
|
||||
const [plan, setPlan] = useState(null); // Vorschau, null = zu
|
||||
const [setupRunning, setSetupRunning] = useState(false);
|
||||
@@ -425,6 +428,8 @@ export default function Settings({ me }) {
|
||||
apiGet('/api/modules').then((d) => {
|
||||
setModules(d.modules);
|
||||
setModuleGroups(d.groups);
|
||||
setFavorites(d.favorites ?? []);
|
||||
setMaxFavorites(d.maxFavorites ?? 8);
|
||||
}).catch(() => {});
|
||||
apiGet('/api/texts').then((d) => {
|
||||
setTemplates(d.templates);
|
||||
@@ -526,6 +531,21 @@ export default function Settings({ me }) {
|
||||
}
|
||||
}
|
||||
|
||||
/** Funktion in der Seitenleiste an- oder abheften */
|
||||
async function toggleFavorite(id) {
|
||||
const dabei = favorites.includes(id);
|
||||
const neu = dabei ? favorites.filter((f) => f !== id) : [...favorites, id];
|
||||
const vorher = favorites;
|
||||
setFavorites(neu); // sofort umschalten
|
||||
try {
|
||||
const res = await apiPut('/api/module-favorites', { ids: neu });
|
||||
setFavorites(res.favorites);
|
||||
} catch (error) {
|
||||
setFavorites(vorher); // bei Ablehnung zurück
|
||||
flash(`✗ ${error.body?.error ?? 'Fehlgeschlagen'}`);
|
||||
}
|
||||
}
|
||||
|
||||
/** Vorschau holen: was würde der Assistent anlegen? */
|
||||
async function loadPlan() {
|
||||
try {
|
||||
@@ -2387,6 +2407,8 @@ export default function Settings({ me }) {
|
||||
flash={flash}
|
||||
goTab={setTab}
|
||||
reloadSettings={reloadSettings}
|
||||
favorites={favorites}
|
||||
onToggleFavorite={toggleFavorite}
|
||||
/>
|
||||
) : (
|
||||
<div className="settings-section">
|
||||
@@ -2431,6 +2453,15 @@ export default function Settings({ me }) {
|
||||
<span className="mod-group">{groupLabel(m.group)}</span>
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
className={`mod-fav${favorites.includes(m.id) ? ' on' : ''}`}
|
||||
title={favorites.includes(m.id)
|
||||
? 'Aus der Seitenleiste nehmen'
|
||||
: 'In die Seitenleiste heften'}
|
||||
onClick={() => toggleFavorite(m.id)}
|
||||
>
|
||||
<IconStar size={15} />
|
||||
</button>
|
||||
<button
|
||||
className={`mod-switch${m.enabled ? ' on' : ''}`}
|
||||
title={m.enabled ? 'Ausschalten' : 'Einschalten'}
|
||||
@@ -2907,6 +2938,30 @@ export default function Settings({ me }) {
|
||||
<p className="settings-nav-empty">Nichts gefunden.</p>
|
||||
)}
|
||||
|
||||
{/* Angeheftete Funktionen — direkt erreichbar, ohne Umweg
|
||||
übers Raster. Bei aktiver Suche ausgeblendet, dort
|
||||
zählen Treffer. */}
|
||||
{!query && canTab('module') && favorites.length > 0 && (
|
||||
<div className="settings-nav-group">
|
||||
<span className="settings-nav-label">Meine Funktionen</span>
|
||||
{favorites.map((id) => {
|
||||
const m = modules.find((x) => x.id === id);
|
||||
if (!m) return null;
|
||||
const Icon = moduleIcon(id);
|
||||
return (
|
||||
<button
|
||||
key={id}
|
||||
className={`settings-nav-item ${openModule === id ? 'active' : ''}`}
|
||||
onClick={() => { setTabState('module'); setOpenModule(id); }}
|
||||
>
|
||||
<span className="settings-nav-icon"><Icon /></span>
|
||||
{m.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{TAB_SECTIONS.map((section) => {
|
||||
const items = foundTabs.filter((t) => t.section === section.id);
|
||||
if (items.length === 0) return null;
|
||||
@@ -2916,7 +2971,7 @@ export default function Settings({ me }) {
|
||||
{items.map((t) => (
|
||||
<button
|
||||
key={t.id}
|
||||
className={`settings-nav-item ${tab === t.id ? 'active' : ''}`}
|
||||
className={`settings-nav-item ${tab === t.id && !(t.id === 'module' && openModule) ? 'active' : ''}`}
|
||||
onClick={() => setTab(t.id)}
|
||||
>
|
||||
<span className="settings-nav-icon"><t.Icon /></span>
|
||||
|
||||
@@ -726,6 +726,19 @@ a.sha:hover { border-color: var(--neon); background: rgba(245, 197, 24, .07); }
|
||||
.btn-create:hover:not(:disabled) { background: rgba(245, 197, 24, .1); }
|
||||
.btn-create:disabled { opacity: .4; cursor: default; }
|
||||
|
||||
/* Stern: heftet eine Funktion in die Seitenleiste. Ungeheftet nur angedeutet,
|
||||
damit die Karten nicht wie ein Sternenhimmel aussehen. */
|
||||
.mod-fav {
|
||||
flex: none; display: inline-flex; align-items: center; justify-content: center;
|
||||
background: none; border: 0; padding: .15rem;
|
||||
color: var(--muted2); opacity: .35; cursor: pointer;
|
||||
transition: color .15s, opacity .15s;
|
||||
}
|
||||
.mod-card:hover .mod-fav, .modpage-head .mod-fav { opacity: .75; }
|
||||
.mod-fav:hover { color: var(--neon); opacity: 1; }
|
||||
.mod-fav.on { color: var(--neon); opacity: 1; }
|
||||
.mod-fav.on svg { fill: currentColor; }
|
||||
|
||||
/* ── MODUL-SEITE ───────────────────────────────────── */
|
||||
/* Name und Symbol auf der Karte öffnen die Seite der Funktion */
|
||||
.mod-open {
|
||||
|
||||
Reference in New Issue
Block a user