chore: Dioxus-0.7-Projekt mit Tailwind-Setup aufsetzen

Cargo-, Dioxus- und Tailwind-Konfiguration, Clippy-Regeln, Assets und Stylesheets (tokens/base/layout/components). Cargo.lock wird eingecheckt, da es sich um ein Binary-Crate handelt. node_modules/ und .idea/ per .gitignore ausgeschlossen.
2026-08-27 13:59:20 +02:00
commit 2a1d5528cd
24 changed files with 9289 additions and 0 deletions
--- a/assets/css/components.css
+++ b/assets/css/components.css
@@ -0,0 +1,205 @@
+/* ==========================================================================
+   Components — the things you click. Each rule owns one class.
+   ========================================================================== */
+
+/* --- File rail entry -------------------------------------------------------
+   An active file is marked by a rule at the left edge, the way an editor marks
+   the current line — not by a filled pill.
+   -------------------------------------------------------------------------- */
+
+.file-selector {
+    position: relative;
+    display: block;
+    padding: var(--dn-space-1) var(--dn-space-2) var(--dn-space-1) var(--dn-space-3);
+    border-radius: var(--dn-radius-sm);
+    color: var(--dn-fg-muted);
+    font-family: var(--dn-font-code);
+    font-size: var(--dn-text-sm);
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transition: color var(--dn-dur-fast) var(--dn-ease),
+                background-color var(--dn-dur-fast) var(--dn-ease);
+}
+
+.file-selector::before {
+    content: "";
+    position: absolute;
+    inset-block: 3px;
+    left: 0;
+    width: 2px;
+    border-radius: 999px;
+    background: var(--dn-accent);
+    transform: scaleY(0);
+    transition: transform var(--dn-dur) var(--dn-ease);
+}
+
+.file-selector:hover {
+    background: var(--dn-bg-raised);
+    color: var(--dn-fg);
+}
+
+.file-selector.active {
+    color: var(--dn-fg);
+    background: var(--dn-bg-raised);
+}
+
+.file-selector.active::before {
+    transform: scaleY(1);
+}
+
+/* --- Workspace selector tab ------------------------------------------------- */
+
+.workspace-selector {
+    padding: var(--dn-space-2) var(--dn-space-4);
+    border-radius: var(--dn-radius);
+    color: var(--dn-fg-muted);
+    font-size: var(--dn-text-base);
+    font-weight: 500;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color var(--dn-dur-fast) var(--dn-ease),
+                background-color var(--dn-dur-fast) var(--dn-ease);
+}
+
+.workspace-selector:hover {
+    color: var(--dn-fg);
+    background: var(--dn-bg-raised);
+}
+
+.workspace-selector.active {
+    color: var(--dn-fg-on-accent);
+    background: var(--dn-accent);
+}
+
+/* --- Buttons ---------------------------------------------------------------- */
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dn-space-2);
+    padding: var(--dn-space-2) var(--dn-space-4);
+    border: 1px solid var(--dn-border-strong);
+    border-radius: var(--dn-radius);
+    background: var(--dn-bg-raised);
+    color: var(--dn-fg);
+    font-size: var(--dn-text-base);
+    font-weight: 500;
+    transition: background-color var(--dn-dur-fast) var(--dn-ease),
+                border-color var(--dn-dur-fast) var(--dn-ease);
+}
+
+.btn:hover:not(:disabled) {
+    background: var(--dn-bg-overlay);
+    border-color: var(--ctp-surface-2);
+}
+
+.btn-primary {
+    background: var(--dn-accent);
+    border-color: var(--dn-accent);
+    color: var(--dn-fg-on-accent);
+}
+
+.btn-primary:hover:not(:disabled) {
+    background: var(--dn-accent-hover);
+    border-color: var(--dn-accent-hover);
+}
+
+.btn-ghost {
+    background: transparent;
+    border-color: transparent;
+}
+
+.btn-ghost:hover:not(:disabled) {
+    background: var(--dn-bg-raised);
+    border-color: transparent;
+}
+
+/* --- Text input --------------------------------------------------------------
+   Workspace names, file names, search.
+   -------------------------------------------------------------------------- */
+
+.input {
+    width: 100%;
+    padding: var(--dn-space-2) var(--dn-space-3);
+    border: 1px solid var(--dn-border-strong);
+    border-radius: var(--dn-radius);
+    background: var(--dn-bg-well);
+    color: var(--dn-fg);
+    font-family: var(--dn-font-code);
+    font-size: var(--dn-text-base);
+    transition: border-color var(--dn-dur-fast) var(--dn-ease);
+}
+
+.input:focus {
+    border-color: var(--dn-accent);
+    outline: none;
+}
+
+.input:focus-visible {
+    outline: 2px solid var(--dn-accent-muted);
+    outline-offset: 0;
+}
+
+/* --- Field ------------------------------------------------------------------- */
+
+.field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--dn-space-2);
+}
+
+.field-label {
+    color: var(--dn-fg-muted);
+    font-family: var(--dn-font-code);
+    font-size: var(--dn-text-xs);
+    letter-spacing: var(--dn-tracking-caps);
+    text-transform: uppercase;
+}
+
+.field-hint {
+    color: var(--dn-fg-faint);
+    font-size: var(--dn-text-xs);
+}
+
+.field-error {
+    color: var(--dn-danger);
+    font-size: var(--dn-text-xs);
+}
+
+/* --- Empty state --------------------------------------------------------------
+   An empty screen is an invitation to act, not a shrug.
+   -------------------------------------------------------------------------- */
+
+.empty-state {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--dn-space-3);
+    height: 100%;
+    padding: var(--dn-space-7) var(--dn-space-4);
+    color: var(--dn-fg-muted);
+    text-align: center;
+}
+
+.empty-state-title {
+    color: var(--dn-fg);
+    font-size: var(--dn-text-md);
+    font-weight: 600;
+}
+
+/* --- Utilities ---------------------------------------------------------------- */
+
+.visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+}