diff --git a/app/globals.css b/app/globals.css index cb2c866..a53633a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,6 +1,64 @@ @import "tailwindcss"; @import "../ui/theme.css"; +/* + * Schrift: Instrument Sans, selbst gehostet — identisch zur Software. + * + * Die Dateien stammen aus `apps/web/public/fonts/` von HiveGrid Cloud, damit + * Schriftschnitt und Metrik exakt übereinstimmen. Variable Schrift (400–700). + * + * Warum das nötig war: `ui/theme.css` verlangt für alle Subframe-Typo-Token + * bereits "Instrument Sans", die Schrift wurde aber nie geladen — und der + * Fließtext war zusätzlich auf Inter gesetzt. Ergebnis waren zwei verschiedene + * Schriften auf einer Seite, keine davon die der Software. + */ +@font-face { + font-family: "Instrument Sans"; + font-style: normal; + font-weight: 400 700; + font-stretch: 100%; + font-display: swap; + src: url("/fonts/instrument-sans-latin.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, + U+2212, U+2215, U+FEFF, U+FFFD; +} +@font-face { + font-family: "Instrument Sans"; + font-style: normal; + font-weight: 400 700; + font-stretch: 100%; + font-display: swap; + src: url("/fonts/instrument-sans-latin-ext.woff2") format("woff2"); + unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, + U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, + U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* + * Einige Subframe-Komponenten verweisen noch direkt auf Inter. Damit sie nicht + * auf die Systemschrift zurückfallen, zeigt der Name auf dieselbe Datei — + * so hält es die Software auch. + */ +@font-face { + font-family: "Inter"; + font-style: normal; + font-weight: 400 700; + font-stretch: 100%; + font-display: swap; + src: url("/fonts/instrument-sans-latin.woff2") format("woff2"); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, + U+2212, U+2215, U+FEFF, U+FFFD; +} + +@theme { + --default-font-family: "Instrument Sans", ui-sans-serif, system-ui, + -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + --font-inter: var(--default-font-family); + --font-sans: var(--default-font-family); +} + /* * HiveGrid Analytics Dashboard * --------------------------------------------------------------- @@ -28,7 +86,7 @@ body { background: var(--color-neutral-50, #fafafa); color: var(--color-text-neutral-primary); - font-family: "Inter", system-ui, -apple-system, sans-serif; + font-family: var(--default-font-family); font-variant-numeric: tabular-nums; } diff --git a/app/layout.tsx b/app/layout.tsx index b0709b1..c2e5dc8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,15 +1,8 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; import { AppShell } from "@/features/dashboard/components/layout/AppShell"; import { DashboardProviders } from "@/features/dashboard/context/DashboardProviders"; import "./globals.css"; -const inter = Inter({ - variable: "--font-inter", - subsets: ["latin"], - weight: ["400", "500", "600", "700"], -}); - export const metadata: Metadata = { title: "HiveGrid · Analytics Dashboard", description: @@ -20,7 +13,7 @@ export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( - + {children} diff --git a/docs/DESIGN-SYSTEM.md b/docs/DESIGN-SYSTEM.md index cdda7c5..d8b159e 100644 --- a/docs/DESIGN-SYSTEM.md +++ b/docs/DESIGN-SYSTEM.md @@ -236,7 +236,11 @@ zwischen den Karten, zerfällt das Raster optisch. | Label, Achsen, Legende | 12 px | 400–500 | | Kleinstschrift (Meta) | 11 px | 400 | -Eine Schriftfamilie (Inter). Zahlen immer in Tabellenziffern +Eine Schriftfamilie: **Instrument Sans**, selbst gehostet aus denselben +Schriftdateien wie die Software (`public/fonts/`, variabel 400–700). Vorher lief +der Prototyp auf Inter, während `ui/theme.css` für alle Subframe-Typo-Token +bereits „Instrument Sans" verlangte — zwei Schriften auf einer Seite, keine +davon die der Software. Zahlen immer in Tabellenziffern (`font-variant-numeric: tabular-nums`, global gesetzt), damit Spalten untereinander stehen. diff --git a/docs/NAVIGATION.md b/docs/NAVIGATION.md index 1ed53e3..6eb115c 100644 --- a/docs/NAVIGATION.md +++ b/docs/NAVIGATION.md @@ -2,27 +2,23 @@ ## Struktur -Die Seitenleiste **spiegelt die von HiveGrid Cloud** — dieselbe Komponente -(`ui/components/SidebarWithSections`), dieselben Gruppen, dieselbe Reihenfolge: +Die Seitenleiste zeigt **nur unsere beiden Features**. Kontakte, Leads, +Pipelines, Postfach, Termine und Einstellungen stehen bereits in der +Seitenleiste der Software und werden hier nicht verdoppelt — der Prototyp zeigt, +was dazukommt, nicht was schon da ist. ``` HIVEGRID -├── Dashboard gehört zur Software, hier nicht enthalten -├── Analytics ◄── der Prototyp lebt hier /analytics -├── Aufgaben gehört zur Software -├── Kunden -│ ├── Kontakte · Leads -├── Projekte -│ ├── Pipelines · Plantafel · Dateien -├── Kommunikation -│ ├── Postfach · Formulare · Telefonie -├── Organisation -│ └── Termine +├── Dashboard eigenes Feature, nicht Teil dieses Prototyps +└── Analytics ◄── der Prototyp lebt hier /analytics ├───────────────────── -├── Komponenten Bausteingalerie des Prototyps /komponenten -└── Einstellungen gehört zur Software +└── Komponenten Bausteingalerie des Prototyps /komponenten ``` +Gerendert wird mit derselben Komponente wie in der Software +(`ui/components/SidebarWithSections`, aus der Cloud-Fassung portiert) und +derselben Schrift (Instrument Sans, selbst gehostet aus denselben Dateien). + **Analytics ist ein einzelner Menüpunkt**, kein aufklappbarer Bereich. Die fünf Analyse-Seiten sind darin über **Reiter** erreichbar: @@ -39,10 +35,8 @@ Zwei Navigationsebenen für dieselbe Sache — Unterpunkte in der Seitenleiste `SettingsHubShell.tsx` im Zielsystem: ein `Link` um ein `Tabs.Item`, damit jeder Reiter eine echte Adresse hat und mittelklickbar bleibt. -**Nur Analytics und Komponenten führen hier irgendwohin.** Die übrigen Einträge -zeigen, wo die Analyse in der fertigen Anwendung sitzt, und melden beim Klick, -dass sie zur Software gehören. Eine tote Schaltfläche ohne Rückmeldung wäre -schlechter als gar keine. +„Dashboard" führt hier nirgendwohin und meldet das beim Klick — es ist ein +eigenes Feature, siehe [SCOPE-ANALYTICS-DASHBOARD.md](SCOPE-ANALYTICS-DASHBOARD.md). --- diff --git a/features/dashboard/components/layout/navigation.ts b/features/dashboard/components/layout/navigation.ts index b983ef1..93299a8 100644 --- a/features/dashboard/components/layout/navigation.ts +++ b/features/dashboard/components/layout/navigation.ts @@ -1,21 +1,20 @@ import type { SeitenId } from "../../data/filtering"; /** - * Navigationsstruktur — Spiegel der Seitenleiste von HiveGrid Cloud. + * Navigationsstruktur des Prototyps. * - * Die Gruppen, ihre Reihenfolge und die Einträge entsprechen - * `apps/web/app/application/sidebar/AppSidebar.tsx` im Zielsystem. Der Grund - * ist die Übergabe: Wer diesen Prototyp neben der Software öffnet, soll dieselbe - * Navigation sehen und nicht erst übersetzen müssen. + * Hier stehen **nur unsere beiden Features**: Dashboard und Analytics. Alles + * andere — Kontakte, Leads, Pipelines, Postfach, Termine, Einstellungen — ist + * in der Seitenleiste der Software bereits vorhanden und wird hier nicht + * verdoppelt. Der Prototyp zeigt, was dazukommt, nicht was schon da ist. * - * **Nur „Analytics" ist in diesem Prototyp echt.** Alle anderen Einträge sind - * Kontext — sie zeigen, wo die Analyse in der fertigen Anwendung sitzt. Sie - * führen bewusst nirgendwohin und melden das beim Klick, statt still zu bleiben. + * Gerendert wird mit derselben Komponente wie in der Software + * (`ui/components/SidebarWithSections`, aus der Cloud-Fassung portiert), damit + * Aussehen und Verhalten übereinstimmen. * - * Icons: Die Software nutzt eigene Icon-Komponenten (`AddressBookIcon`, - * `BoardIcon` …), die auf einem hausinternen Set aufsetzen. Hier stehen die - * nächstliegenden Feather-Icons aus `@subframe/core`, das beide Repos teilen — - * optisch praktisch deckungsgleich, ohne ein ganzes Icon-Set mitzuschleppen. + * „Dashboard" führt hier nirgendwohin: Es ist ein eigenes Feature und nicht + * Teil dieses Prototyps (siehe `docs/SCOPE-ANALYTICS-DASHBOARD.md`). Der + * Eintrag meldet das beim Klick, statt still zu bleiben. */ export type NavZiel = { art: "route"; href: string } | { art: "software" }; @@ -44,69 +43,37 @@ export const NAV_GRUPPEN: NavGruppe[] = [ titel: "", eintraege: [ { + // Gehört zu uns, ist aber ein eigenes Feature und nicht Teil dieses + // Prototyps — siehe docs/SCOPE-ANALYTICS-DASHBOARD.md. id: "dashboard", label: "Dashboard", icon: "LayoutDashboard", ziel: { art: "software" }, }, { - // Der neue Menüpunkt. In der Software gibt es ihn noch nicht — die - // fünf Analyse-Seiten sind ausschließlich hier drin navigierbar, - // nicht als Unterpunkte in der Seitenleiste. + // Der neue Menüpunkt. Die fünf Analyse-Seiten sind ausschließlich hier + // drin über Reiter navigierbar, nicht als Unterpunkte in der Leiste. id: "analytics", label: "Analytics", icon: "BarChart", ziel: { art: "route", href: ANALYTICS_START }, }, - { id: "aufgaben", label: "Aufgaben", icon: "Clipboard", ziel: { art: "software" } }, - ], - }, - { - id: "kunden", - titel: "Kunden", - eintraege: [ - { id: "kontakte", label: "Kontakte", icon: "Contact", ziel: { art: "software" } }, - { id: "leads", label: "Leads", icon: "TrendingUp", ziel: { art: "software" } }, - ], - }, - { - id: "projekte", - titel: "Projekte", - eintraege: [ - { id: "pipelines", label: "Pipelines", icon: "Trello", ziel: { art: "software" } }, - { id: "plantafel", label: "Plantafel", icon: "CalendarRange", ziel: { art: "software" } }, - { id: "dateien", label: "Dateien", icon: "FileText", ziel: { art: "software" } }, - ], - }, - { - id: "kommunikation", - titel: "Kommunikation", - eintraege: [ - { id: "postfach", label: "Postfach", icon: "Mail", ziel: { art: "software" } }, - { id: "formulare", label: "Formulare", icon: "Table", ziel: { art: "software" } }, - { id: "telefonie", label: "Telefonie", icon: "Phone", ziel: { art: "software" } }, - ], - }, - { - id: "organisation", - titel: "Organisation", - eintraege: [ - { id: "termine", label: "Termine", icon: "CalendarDays", ziel: { art: "software" } }, ], }, ]; -/** Unterer Bereich, durch einen Trenner abgesetzt — wie in der Software. */ +/** + * Unterer Bereich, durch einen Trenner abgesetzt — wie in der Software. + * Hier steht nur, was zum Prototyp gehört: die Bausteingalerie für die + * Entwicklung. Sie ist kein Produktfeature und wandert beim Einbau nicht mit. + */ export const NAV_SEKUNDAER: NavEintrag[] = [ { - // Gehört nicht zur Software, sondern zum Prototyp: die Bausteingalerie - // für die Entwicklung. id: "komponenten", label: "Komponenten", icon: "Component", ziel: { art: "route", href: "/komponenten" }, }, - { id: "einstellungen", label: "Einstellungen", icon: "Settings", ziel: { art: "software" } }, ]; /** diff --git a/public/fonts/instrument-sans-latin-ext.woff2 b/public/fonts/instrument-sans-latin-ext.woff2 new file mode 100644 index 0000000..0ea0da0 Binary files /dev/null and b/public/fonts/instrument-sans-latin-ext.woff2 differ diff --git a/public/fonts/instrument-sans-latin.woff2 b/public/fonts/instrument-sans-latin.woff2 new file mode 100644 index 0000000..8611e41 Binary files /dev/null and b/public/fonts/instrument-sans-latin.woff2 differ