Help on every option and every page
- Each option's explanation moves from a line of text under its label to a small tooltip on an ⓘ beside it, so forms read calmer and the help is still one hover away. - Help text is ours where written (src/help/texts.ts: domains, people, DNS providers, blocked addresses, and the main pages), and the schema's description elsewhere. - A "?" on every list and form opens a side panel: what the page is for, what people usually do there, and every option explained. - Every tooltip and panel carries a stable help id (x:Domain.dnsManagement, x:Domain), and manual.ts turns an id into a link to the admin manual once one is configured (VITE_MANUAL_URL, or <meta name="manual-url">). Until then no link shows.
This commit is contained in:
@@ -46,7 +46,9 @@ export function IconTile({
|
||||
const box = size === 'sm' ? 'h-6 w-6 rounded-md' : size === 'lg' ? 'h-10 w-10 rounded-xl' : 'h-7 w-7 rounded-lg';
|
||||
const glyph = size === 'sm' ? 'h-3.5 w-3.5' : size === 'lg' ? 'h-5 w-5' : 'h-4 w-4';
|
||||
return (
|
||||
<span className={cn('inline-flex shrink-0 items-center justify-center', box, TONE_CLASSES[toneFor(name)], className)}>
|
||||
<span
|
||||
className={cn('inline-flex shrink-0 items-center justify-center', box, TONE_CLASSES[toneFor(name)], className)}
|
||||
>
|
||||
{createElement(iconComponent(name), { className: glyph, strokeWidth: 2, 'aria-hidden': true })}
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -22,12 +22,36 @@ export function DefaultLogo() {
|
||||
className="h-7 w-auto max-w-[320px]"
|
||||
>
|
||||
<image x="165.85" y="35.00" width="109.39" height="130.00" href={inbuxaMark} />
|
||||
<path className="fill-current" d="M70 0V496H196V0ZM133 554Q99 554 75.5 576.0Q52 598 52 634Q52 670 75.5 692.0Q99 714 133 714Q168 714 191.0 692.0Q214 670 214 634Q214 598 191.0 576.0Q168 554 133 554Z" transform="translate(303.25,151.90) scale(0.150000,-0.150000)" />
|
||||
<path className="fill-current" d="M70 0V496H194V431H212Q224 457 257.0 480.5Q290 504 357 504Q415 504 458.5 477.5Q502 451 526.0 404.5Q550 358 550 296V0H424V286Q424 342 396.5 370.0Q369 398 318 398Q260 398 228.0 359.5Q196 321 196 252V0Z" transform="translate(340.15,151.90) scale(0.150000,-0.150000)" />
|
||||
<path className="fill-current" d="M368 -14Q301 -14 265.0 9.0Q229 32 212 60H194V0H70V700H196V439H214Q225 457 243.5 473.0Q262 489 292.5 499.5Q323 510 368 510Q428 510 479.0 480.5Q530 451 561.0 394.0Q592 337 592 256V240Q592 159 561.0 102.0Q530 45 479.0 15.5Q428 -14 368 -14ZM330 96Q388 96 427.0 133.5Q466 171 466 243V253Q466 325 427.5 362.5Q389 400 330 400Q272 400 233.0 362.5Q194 325 194 253V243Q194 171 233.0 133.5Q272 96 330 96Z" transform="translate(429.55,151.90) scale(0.150000,-0.150000)" />
|
||||
<path className="fill-current" d="M259 -8Q201 -8 157.5 18.5Q114 45 90.0 92.0Q66 139 66 200V496H192V210Q192 154 219.5 126.0Q247 98 298 98Q356 98 388.0 136.5Q420 175 420 244V496H546V0H422V65H404Q392 40 359.0 16.0Q326 -8 259 -8Z" transform="translate(522.25,151.90) scale(0.150000,-0.150000)" />
|
||||
<path className="fill-current" d="M26 0 206 250 28 496H174L287 331H305L418 496H564L386 250L566 0H418L305 167H287L174 0Z" transform="translate(611.65,151.90) scale(0.150000,-0.150000)" />
|
||||
<path className="fill-current" d="M224 -14Q171 -14 129.0 4.5Q87 23 62.5 58.5Q38 94 38 145Q38 196 62.5 230.5Q87 265 130.5 282.5Q174 300 230 300H366V328Q366 363 344.0 385.5Q322 408 274 408Q227 408 204.0 386.5Q181 365 174 331L58 370Q70 408 96.5 439.5Q123 471 167.5 490.5Q212 510 276 510Q374 510 431.0 461.0Q488 412 488 319V134Q488 104 516 104H556V0H472Q435 0 411.0 18.0Q387 36 387 66V67H368Q364 55 350.0 35.5Q336 16 306.0 1.0Q276 -14 224 -14ZM246 88Q299 88 332.5 117.5Q366 147 366 196V206H239Q204 206 184.0 191.0Q164 176 164 149Q164 122 185.0 105.0Q206 88 246 88Z" transform="translate(697.45,151.90) scale(0.150000,-0.150000)" />
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M70 0V496H196V0ZM133 554Q99 554 75.5 576.0Q52 598 52 634Q52 670 75.5 692.0Q99 714 133 714Q168 714 191.0 692.0Q214 670 214 634Q214 598 191.0 576.0Q168 554 133 554Z"
|
||||
transform="translate(303.25,151.90) scale(0.150000,-0.150000)"
|
||||
/>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M70 0V496H194V431H212Q224 457 257.0 480.5Q290 504 357 504Q415 504 458.5 477.5Q502 451 526.0 404.5Q550 358 550 296V0H424V286Q424 342 396.5 370.0Q369 398 318 398Q260 398 228.0 359.5Q196 321 196 252V0Z"
|
||||
transform="translate(340.15,151.90) scale(0.150000,-0.150000)"
|
||||
/>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M368 -14Q301 -14 265.0 9.0Q229 32 212 60H194V0H70V700H196V439H214Q225 457 243.5 473.0Q262 489 292.5 499.5Q323 510 368 510Q428 510 479.0 480.5Q530 451 561.0 394.0Q592 337 592 256V240Q592 159 561.0 102.0Q530 45 479.0 15.5Q428 -14 368 -14ZM330 96Q388 96 427.0 133.5Q466 171 466 243V253Q466 325 427.5 362.5Q389 400 330 400Q272 400 233.0 362.5Q194 325 194 253V243Q194 171 233.0 133.5Q272 96 330 96Z"
|
||||
transform="translate(429.55,151.90) scale(0.150000,-0.150000)"
|
||||
/>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M259 -8Q201 -8 157.5 18.5Q114 45 90.0 92.0Q66 139 66 200V496H192V210Q192 154 219.5 126.0Q247 98 298 98Q356 98 388.0 136.5Q420 175 420 244V496H546V0H422V65H404Q392 40 359.0 16.0Q326 -8 259 -8Z"
|
||||
transform="translate(522.25,151.90) scale(0.150000,-0.150000)"
|
||||
/>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M26 0 206 250 28 496H174L287 331H305L418 496H564L386 250L566 0H418L305 167H287L174 0Z"
|
||||
transform="translate(611.65,151.90) scale(0.150000,-0.150000)"
|
||||
/>
|
||||
<path
|
||||
className="fill-current"
|
||||
d="M224 -14Q171 -14 129.0 4.5Q87 23 62.5 58.5Q38 94 38 145Q38 196 62.5 230.5Q87 265 130.5 282.5Q174 300 230 300H366V328Q366 363 344.0 385.5Q322 408 274 408Q227 408 204.0 386.5Q181 365 174 331L58 370Q70 408 96.5 439.5Q123 471 167.5 490.5Q212 510 276 510Q374 510 431.0 461.0Q488 412 488 319V134Q488 104 516 104H556V0H472Q435 0 411.0 18.0Q387 36 387 66V67H368Q364 55 350.0 35.5Q336 16 306.0 1.0Q276 -14 224 -14ZM246 88Q299 88 332.5 117.5Q366 147 366 196V206H239Q204 206 184.0 191.0Q164 176 164 149Q164 122 185.0 105.0Q206 88 246 88Z"
|
||||
transform="translate(697.45,151.90) scale(0.150000,-0.150000)"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
|
||||
import { humanize } from '@/lib/humanize';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { HelpPanel } from '@/help/HelpPanel';
|
||||
import { iconForView } from '@/lib/viewIcon';
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { flushSync } from 'react-dom';
|
||||
@@ -124,6 +125,15 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
||||
return { ...fields, properties: filtered };
|
||||
}, [resolved, selectedVariant, schema]);
|
||||
|
||||
// INBUXA: whose fields these are, for their help ids: the variant's schema
|
||||
// (x:UserAccount) when the object has variants, else the object (x:Domain).
|
||||
const helpScope = useMemo(() => {
|
||||
if (!resolved) return undefined;
|
||||
const { sch, obj } = resolved;
|
||||
if (sch.type === 'single') return obj.objectName;
|
||||
return sch.variants.find((v) => v.name === selectedVariant)?.schemaName ?? obj.objectName;
|
||||
}, [resolved, selectedVariant]);
|
||||
|
||||
const currentForm = useMemo((): Form | null => {
|
||||
if (!schema || !resolved) return null;
|
||||
const { obj, sch } = resolved;
|
||||
@@ -761,6 +771,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
||||
icon={iconForView(schema, viewName)}
|
||||
title={formTitle}
|
||||
subtitle={formSubtitle}
|
||||
actions={<HelpPanel viewName={viewName} title={String(formTitle ?? '')} />}
|
||||
/>
|
||||
|
||||
{generalError && (
|
||||
@@ -834,6 +845,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
|
||||
sieveScriptName={
|
||||
isSieveScriptField(resolved.obj.objectName, formField.name) ? scriptName : undefined
|
||||
}
|
||||
helpScope={helpScope}
|
||||
/>
|
||||
);
|
||||
|
||||
|
||||
@@ -9,7 +9,8 @@ import { humanize } from '@/lib/humanize';
|
||||
import { useState, useEffect, useMemo, type KeyboardEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useBufferedValue, useResetOnChange } from '@/hooks/useBufferedValue';
|
||||
import ReactMarkdown from 'react-markdown';
|
||||
import { HelpTip } from '@/help/HelpTip';
|
||||
import { fieldHelp } from '@/help/texts';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Button } from '@/components/ui/button';
|
||||
@@ -63,6 +64,8 @@ export interface FieldWidgetProps {
|
||||
error?: string;
|
||||
schema: Schema;
|
||||
sieveScriptName?: string;
|
||||
/** INBUXA: the object or schema that owns this field, for its help id (`scope.field`). */
|
||||
helpScope?: string;
|
||||
}
|
||||
|
||||
function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optional' | null {
|
||||
@@ -83,7 +86,8 @@ function getRequiredMarker(field: Field, readOnly: boolean): 'required' | 'optio
|
||||
|
||||
export function FieldWidget(props: FieldWidgetProps) {
|
||||
const { t } = useTranslation();
|
||||
const { field, formField, value, onChange, readOnly, error, schema, sieveScriptName } = props;
|
||||
const { field, formField, value, onChange, readOnly, error, schema, sieveScriptName, helpScope } = props;
|
||||
const helpId = helpScope ? `${helpScope}.${formField.name}` : undefined;
|
||||
const ft = field.type;
|
||||
const edition = useEffectiveEdition();
|
||||
|
||||
@@ -233,12 +237,8 @@ export function FieldWidget(props: FieldWidgetProps) {
|
||||
</span>
|
||||
)}
|
||||
</Label>
|
||||
<HelpTip id={helpId} text={fieldHelp(helpId, field.description)} />
|
||||
</div>
|
||||
{field.description && (
|
||||
<div className="text-xs text-muted-foreground prose prose-sm max-w-none [&_p]:m-0">
|
||||
<ReactMarkdown>{field.description.replace(/\\n/g, '\n')}</ReactMarkdown>
|
||||
</div>
|
||||
)}
|
||||
{widget}
|
||||
{sieveScriptName !== undefined && ft.type === 'string' && (
|
||||
<SievepadButton scriptName={sieveScriptName} source={typeof value === 'string' ? value : ''} />
|
||||
@@ -1409,6 +1409,7 @@ function EmbeddedObjectField({
|
||||
|
||||
if (resolvedSchema.type === 'single') {
|
||||
const fields = resolvedSchema.fields;
|
||||
const helpScopeHere = resolvedSchema.schemaName ?? objectName;
|
||||
const form = resolveVariantForm(schema, objectName, objectName, resolvedSchema.schemaName);
|
||||
const formFields = form?.sections.flatMap((s) => s.fields) ?? [];
|
||||
|
||||
@@ -1427,6 +1428,7 @@ function EmbeddedObjectField({
|
||||
onChange={(v) => handleFieldChange(ff.name, v)}
|
||||
readOnly={readOnly}
|
||||
schema={schema}
|
||||
helpScope={helpScopeHere}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
@@ -1442,6 +1444,7 @@ function EmbeddedObjectField({
|
||||
onChange={(v) => handleFieldChange(name, v)}
|
||||
readOnly={readOnly}
|
||||
schema={schema}
|
||||
helpScope={helpScopeHere}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
@@ -1451,6 +1454,7 @@ function EmbeddedObjectField({
|
||||
const currentType = (objValue['@type'] as string) ?? resolvedSchema.variants[0]?.name ?? '';
|
||||
const currentVariant = resolvedSchema.variants.find((v) => v.name === currentType);
|
||||
const variantFields = currentVariant?.fields;
|
||||
const helpScopeHere = currentVariant?.schemaName ?? objectName;
|
||||
const variantForm = resolveVariantForm(schema, objectName, objectName, currentVariant?.schemaName);
|
||||
const variantFormFields = variantForm?.sections.flatMap((s) => s.fields) ?? [];
|
||||
|
||||
@@ -1491,6 +1495,7 @@ function EmbeddedObjectField({
|
||||
onChange={(v) => handleFieldChange(ff.name, v)}
|
||||
readOnly={readOnly}
|
||||
schema={schema}
|
||||
helpScope={helpScopeHere}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
@@ -1507,6 +1512,7 @@ function EmbeddedObjectField({
|
||||
onChange={(v) => handleFieldChange(name, v)}
|
||||
readOnly={readOnly}
|
||||
schema={schema}
|
||||
helpScope={helpScopeHere}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -427,9 +427,9 @@ export function Sidebar() {
|
||||
const layout: Layout | undefined = layouts.find((l) => l.name === activeSection);
|
||||
if (!layout) return null;
|
||||
|
||||
|
||||
// Folding to a rail is for wide screens; a phone keeps the slide-over.
|
||||
const collapsed = sidebarCollapsed && typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches;
|
||||
const collapsed =
|
||||
sidebarCollapsed && typeof window !== 'undefined' && window.matchMedia('(min-width: 768px)').matches;
|
||||
|
||||
if (collapsed) {
|
||||
return (
|
||||
@@ -476,7 +476,9 @@ export function Sidebar() {
|
||||
/>
|
||||
<aside className="fixed top-14 left-0 bottom-0 z-30 flex w-64 flex-col border-r bg-background">
|
||||
<div className="flex items-center justify-between px-4 pt-3 pb-1">
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{layout.name}</span>
|
||||
<span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{layout.name}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Collapse sidebar"
|
||||
|
||||
@@ -137,7 +137,11 @@ export function TopBar() {
|
||||
{/* INBUXA: the three areas, one click away, where the eye already looks. */}
|
||||
{schema && navigableLayouts.length > 1 && (
|
||||
<TooltipProvider delayDuration={150}>
|
||||
<div className="hidden items-center gap-0.5 rounded-xl bg-muted p-1 sm:flex" role="tablist" aria-label={t('sections', 'Sections')}>
|
||||
<div
|
||||
className="hidden items-center gap-0.5 rounded-xl bg-muted p-1 sm:flex"
|
||||
role="tablist"
|
||||
aria-label={t('sections', 'Sections')}
|
||||
>
|
||||
{navigableLayouts.map((layout) => {
|
||||
const isActive = layout.name === activeSection;
|
||||
return (
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
|
||||
import { EmptyState } from '@/components/common/EmptyState';
|
||||
import { PageHeader } from '@/components/common/PageHeader';
|
||||
import { HelpPanel } from '@/help/HelpPanel';
|
||||
import { iconForView } from '@/lib/viewIcon';
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useNavigate, useSearchParams } from 'react-router-dom';
|
||||
@@ -1113,6 +1114,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
||||
<div className="flex flex-wrap items-start justify-between gap-4">
|
||||
<PageHeader icon={iconForView(schema, viewName)} title={list.title} subtitle={list.subtitle} />
|
||||
<div className="flex items-center gap-2">
|
||||
<HelpPanel viewName={viewName} title={list.title} />
|
||||
{hasMassActions && selectedIds.size > 0 && (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
|
||||
Reference in New Issue
Block a user