New Feature

Neues Feature scaffolden

Du erstellst das Grundgerüst für ein neues Feature in der Speicher Analyse Tauri-App.

Argumente

• $ARGUMENTS[0] = Feature-Name (kebab-case, z.B. disk-health)
• $ARGUMENTS[1] = Kurzbeschreibung des Features (optional)

Voranalyse

1. Lies die bestehende Architektur:
   • src-tauri/src/commands/ - Wie Commands definiert werden (8 Module)
   • src-tauri/src/lib.rs - Wie Commands registriert werden
   • src/api/tauri-api.ts - Wie API-Funktionen typisiert werden
   • src/App.tsx - App Shell
   • src/components/TabRouter.tsx - Wie Views lazy-loaded werden
   • src/components/Sidebar.tsx - Wie Sidebar-Tabs definiert sind
2. Prüfe ob ein ähnliches Feature bereits existiert

Dateien erstellen/ändern

1. Rust-Command: src-tauri/src/commands/cmd_*.rs

#[tauri::command]
pub async fn feature_action(param: String) -> Result<serde_json::Value, String> {
    let safe_param = param.replace("'", "''");
    let script = format!(r#"
        $result = Get-Something '{}'
        $result | ConvertTo-Json -Depth 3
    "#, safe_param);
    crate::ps::run_ps_json(&script).await
}

2. Registrierung: src-tauri/src/lib.rs + commands/mod.rs

3. API-Bridge: src/api/tauri-api.ts

export const featureAction = (param: string) =>
  invoke<ReturnType>('feature_action', { param });

4. React-View: src/views/FeatureNameView.tsx

import { useState, useCallback, useEffect } from 'react';
import * as api from '../api/tauri-api';
import { useAppContext } from '../context/AppContext';

export default function FeatureNameView() {
  const { showToast } = useAppContext();
  const [data, setData] = useState<any>(null);
  const [loading, setLoading] = useState(false);
  const [loaded, setLoaded] = useState(false);

  const loadData = useCallback(async () => {
    if (loading) return;
    setLoading(true);
    try {
      const result = await api.featureAction();
      setData(result);
      setLoaded(true);
    } catch (err: any) {
      showToast('Fehler: ' + err.message, 'error');
    } finally {
      setLoading(false);
    }
  }, [loading, showToast]);

  useEffect(() => {
    if (!loaded) loadData();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <div className="feature-page">
      <div className="feature-header"><h2>Feature-Titel</h2></div>
      {loading && <div className="loading-state">Lade Daten...</div>}
      {!loading && loaded && data && (
        <div className="feature-content">{/* Inhalt */}</div>
      )}
      {!loading && !loaded && (
        <div className="tool-placeholder">Noch keine Daten geladen.</div>
      )}
    </div>
  );
}

React-Konventionen:

• Funktionale Komponente mit export default
• State via useState, Side-Effects via useEffect mit Cleanup-Return
• API über import * as api from '../api/tauri-api'
• Context über useAppContext() (showToast, scanId, drives)
• JSX escaped automatisch — KEIN dangerouslySetInnerHTML
• Alle UI-Texte auf Deutsch mit korrekten Umlauten

5. TabRouter: src/components/TabRouter.tsx

const FeatureNameView = lazy(() => import('../views/FeatureNameView'));

6. Sidebar: src/components/Sidebar.tsx

Button in die passende Gruppe einfügen.

Mensch-Checkliste (PFLICHT — Lesson #95)

Ein Feature ist NICHT fertig wenn es technisch funktioniert. Es ist fertig wenn ein Mensch es intuitiv bedienen kann.

Vor dem Commit MUSS jeder Punkt geprüft und umgesetzt werden:

Tastaturkürzel

• Strg+Z/Y (Undo/Redo) wo Aktionen rückgängig gemacht werden können?
• Strg+S (Speichern) wo Daten gespeichert werden?
• Strg+P (Drucken) wo Inhalte gedruckt werden können?
• Escape (Abbrechen/Zurücksetzen) für modale Dialoge und Werkzeuge?
• Entf/Delete für Löschen von ausgewählten Elementen?
• Navigation-Shortcuts (Bild↑/↓, Pos1/Ende) bei langen Listen/Seiten?
• Welche Shortcuts kennt der User von ähnlichen Windows-Programmen?

Undo/Redo

• Kann der User seine letzten Aktionen rückgängig machen?
• Gibt es sichtbare Undo/Redo-Buttons im Toolbar?

Auswahl und Interaktion

• Kann der User Elemente auswählen (Klick)?
• Kann der User ausgewählte Elemente bearbeiten/löschen?
• Gibt es visuelles Feedback welches Element ausgewählt ist?
• Kann der User Text markieren und kopieren wo es Sinn macht?

Navigation

• Gibt es eine Positionsanzeige (z.B. "Seite X von Y", "Element X von Y")?
• Kann der User zu einer bestimmten Position springen?
• Scrollt die Ansicht bei Keyboard-Navigation mit?

Visuelles Feedback

• Ungespeicherte Änderungen sichtbar (z.B. * im Titel)?
• Lade-Zustände bei async Operationen?
• Erfolgs-/Fehler-Toast bei Aktionen?
• Aktives/ausgewähltes Element hervorgehoben?

Denkfrage (VOR dem Coding)

"Wenn ich dieses Feature als normaler Windows-User zum ersten Mal öffne — was erwarte ich? Was würde mich frustrieren wenn es fehlt?"

Security-Checkliste (PFLICHT vor Commit)

• Alle PowerShell-Parameter escaped?
• Pfade vom Frontend validiert?
• Kein dangerouslySetInnerHTML?
• useEffect Cleanup für Timer/Listener/Observer?

Verwandte Skills

• /add-tauri-command - Nur Command ohne View
• /add-sidebar-tab - Nur Sidebar-Tab ohne Backend
• /powershell-cmd - PowerShell-Befehle
• /changelog - Nach Fertigstellung