Neue Komponente hinzufügen

Schritt 1: Datei erstellen

Erstelle die Datei am richtigen Ort:

# Beispiel: Neue UI-Komponente
/home/dreylo-web/packages/client/components/ui/components/MyComponent.tsx

import { JSX, Show } from "solid-js";

interface Props {
  title: string;
  children?: JSX.Element;
}


export function MyComponent(props: Props) {
  return (
    <div>
      <h2>{props.title}</h2>
      <Show when={props.children}>
        {props.children}
      </Show>
    </div>
  );
}

Schritt 2: Importieren

Relativer Import (empfohlen für neue Dateien):

// Von src/interface/something.tsx zu components/:
import { MyComponent } from "../../../../components/ui/components/MyComponent";

// Von components/app/... zu components/ui/:
import { MyComponent } from "../ui/components/MyComponent";

Alias-Import (falls verfügbar):

import { MyComponent } from "@revolt/ui/components/MyComponent";
// Nur wenn in packages/client/components/ui/index.ts exportiert!

Schritt 3: Export prüfen

Falls du via @revolt/ui importieren willst:

// In packages/client/components/ui/index.ts hinzufügen:
export { MyComponent } from "./components/MyComponent";

Schritt 4: Build testen

cd /home/dreylo-web && docker build -t dreylo-web . 2>&1 | tail -10

Häufige Import-Fehler

"Could not resolve"

❌ Error: Could not resolve "@revolt/ui/components/MyComponent"

→ Entweder:

  1. Relativen Pfad verwenden statt Alias

  2. Export in index.ts hinzufügen

"TS2307: Cannot find module"

→ TypeScript-Typen fehlen. Datei-Endung prüfen (.tsx für JSX, .ts für reines TS).

Pfad-Berechnung

Quelldatei: src/interface/navigation/servers/ServerList.tsx
Ziel:        components/ui/components/features/profiles/useDreyloProfile.ts

Schritte rückwärts:
servers/ → navigation/ → interface/ → src/
Dann vorwärts: packages/client/components/...


Ergibt: "../../../../components/ui/components/features/profiles/useDreyloProfile"

Oder einfach zählen:

  • ../ = eine Ebene nach oben

  • Ab packages/client/ = Basis

Portal verwenden (für Overlays)

Für Modals die außerhalb der Sidebar/bestimmter Container gerendert werden müssen:

import { Portal } from "solid-js/web";

// Wird direkt in <body> gerendert, ignoriert overflow:hidden
<Show when={showModal()}>
  <Portal mount={document.body}>
    <div style={{ position: "fixed", inset: 0, "z-index": 9999 }}>
      Modal-Inhalt
    </div>
  </Portal>
</Show>