Stirling-Tools/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Stirling-Tools/Stirling-PDF.git synced 2026-09-02 21:03:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make the editor and settings menu mobile friendly-er (#7518)

Browse Source 
Co-authored-by: EthanHealy01 <80844253+EthanHealy01@users.noreply.github.com>
This commit is contained in:
Anthony Stirling
2026-08-22 18:47:14 +01:00
committed by GitHub
co-authored by EthanHealy01
parent 41e4b67f1d
commit 4457260c60
40 changed files with 2045 additions and 709 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/editor/index.html
+4 -1
View File
@@ -4,7 +4,10 @@
<meta charset="UTF-8" />
<base href="%BASE_URL%" />
<link rel="icon" href="modern-logo/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>
<meta name="theme-color" content="#000000" />
<meta
name="description"
frontend/editor/public/locales/en-US/translation.toml
+16
View File
@@ -3969,6 +3969,7 @@ back = "Back"
backToFolder = "Back to {{folder}}"
backToMyFiles = "Back to My Files"
breadcrumbs = "Folder path"
bulkActions = "Actions"
cancel = "Cancel"
classification = "Classification"
clearSelection = "Clear selection"
@@ -4142,6 +4143,11 @@ totalSize = "Total size"
type = "Type"
versionHistory = "Version journey"
[filesPage.filters]
activeCount = "{{count}} filters active"
clearAll = "Clear filters"
label = "Filters"
[filesPage.folderName]
cancel = "Cancel"
error = "Could not save folder. Try again."
@@ -4176,6 +4182,7 @@ label = "Filter files by name"
placeholder = "Filter files…"
[filesPage.sort]
label = "Sort files"
modifiedAsc = "Oldest first"
modifiedDesc = "Recent first"
nameAsc = "Name A→Z"
@@ -9696,7 +9703,9 @@ toolNotAvailableLocally = "Your Stirling-PDF server is offline and \"{{endpoint}
expired = "Your session has expired. Please refresh the page and try again."
[settings]
backToSections = "All settings"
close = "Close"
title = "Settings"
[settings.ai]
documents = "Documents & RAG"
@@ -10635,6 +10644,7 @@ ariaLabel = "Super search"
filtersAriaLabel = "Search filters"
hint = "Type to search"
placeholder = "Search Stirling"
placeholderShort = "Search"
showLess = "Show less"
showMore = "Show {{count}} more"
@@ -11335,8 +11345,11 @@ columnDefault = "Column {{index}}"
convertToPdf = "Convert to PDF"
csvStats = "{{rows}} rows · {{columns}} columns · {{size}}"
emptyFile = "Empty file"
htmlHidePreview = "Hide preview"
htmlPreview = "HTML preview"
htmlPreviewMobileHidden = "HTML pages are laid out for desktop widths, so the preview is off by default here."
htmlPreviewWarning = "HTML preview - external resources may not load · {{size}}"
htmlShowPreview = "Show preview anyway"
invalidJson = "Invalid JSON - showing raw content"
lineNumbers = "Line numbers"
loading = "Loading..."
@@ -11683,6 +11696,7 @@ exportAll = "Export PDF"
exportSelected = "Export Selected Pages"
formFill = "Fill Form"
hideToolbar = "Hide toolbar"
moreActions = "More actions"
multiTool = "Multi-Tool"
panMode = "Pan Mode"
print = "Print PDF"
@@ -11703,6 +11717,8 @@ selectAll = "Select All"
selectByNumber = "Select by Page Numbers"
selectLanguage = "Select language"
share = "Share"
showAllTools = "Show all tools"
showFewerTools = "Collapse toolbar"
showToolbar = "Show toolbar"
toggleAnnotations = "Toggle Annotations Visibility"
toggleAttachments = "Toggle Attachments"
frontend/editor/src/core/components/AppLayout.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export function AppLayout({ children }: AppLayoutProps) {
}
`}</style>
<div
style={{ height: "100vh", display: "flex", flexDirection: "column" }}
style={{ height: "100dvh", display: "flex", flexDirection: "column" }}
>
{banner}
<div style={{ flex: 1, minHeight: 0, height: 0 }}>{children}</div>
frontend/editor/src/core/components/filesPage/FileGrid.tsx
+3 -1
View File
@@ -978,7 +978,9 @@ function FileCard({
)}
<div className="files-page-card-meta">
<span>{fileSize}</span>
<span>·</span>
<span className="files-page-card-meta-sep" aria-hidden="true">
·
</span>
<span>{fileDate}</span>
<PolicyBadges fileId={file.id as string} />
</div>
frontend/editor/src/core/components/filesPage/FileManagerView.tsx
+373 -283
View File
@@ -33,6 +33,10 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
import RefreshIcon from "@mui/icons-material/Refresh";
import { FilesToolbarBulkMenu } from "@app/components/filesPage/FilesToolbarBulkMenu";
import { FilesToolbarCount } from "@app/components/filesPage/FilesToolbarCount";
import { FilesToolbarFilterMenu } from "@app/components/filesPage/FilesToolbarFilterMenu";
import { FilesToolbarSortMenu } from "@app/components/filesPage/FilesToolbarSortMenu";
import { stripBasePath } from "@app/constants/app";
import { useAuth } from "@app/auth/UseSession";
@@ -893,6 +897,9 @@ export default function FileManagerView() {
() => Array.from(selectedFileIds),
[selectedFileIds],
);
// A phone with files selected shows a contextual selection bar instead of the
// full toolbar - five bulk buttons plus filters cannot fit the width.
const mobileSelection = isMobile && selectedFiles.length > 0;
// Local-only subset of selection; drives Save-to-server visibility.
const localOnlySelectedStubs = useMemo(
@@ -1210,22 +1217,12 @@ export default function FileManagerView() {
})()}
<div className="files-page-toolbar">
<span className="files-page-toolbar-info">
{loading
? t("filesPage.loading", "Loading…")
: t("filesPage.summary", "{{count}} items", {
count: totalCount,
})}
{selectedFiles.length > 0 && (
<span>
{" "}
·{" "}
{t("filesPage.selectedCount", "{{count}} selected", {
count: selectedFiles.length,
})}
</span>
)}
</span>
<FilesToolbarCount
loading={loading}
totalCount={totalCount}
selectedCount={selectedFiles.length}
selectionOnly={mobileSelection}
/>
{(() => {
// Select all / Clear toggle over visible files.
if (visibleFiles.length === 0) return null;
@@ -1265,289 +1262,382 @@ export default function FileManagerView() {
);
})()}
<div className="files-page-toolbar-actions">
{selectedFiles.length > 0 &&
(() => {
// Bulk-action labels; CSS collapses to icon-only below 900px.
const addLabel =
{mobileSelection ? (
<FilesToolbarBulkMenu
selectedCount={selectedFiles.length}
onAddToWorkspace={() => handleAddToWorkspace(selectedFiles)}
onSaveToServer={
localOnlySelectedStubs.length > 0
? () => setSaveToServerTarget(localOnlySelectedStubs)
: undefined
}
saveToServerDisabledReason={
saveToServerDisabledReason ?? undefined
}
onShowDetails={
selectedFiles.length === 1
? t("filesPage.addToWorkspace", "Add to workspace")
: t(
"filesPage.addToWorkspaceCount",
"Add {{count}} to workspace",
{ count: selectedFiles.length },
);
const moveLabel = t("filesPage.moveTo", "Move to…");
const removeLabel = t("filesPage.remove", "Remove");
return (
// wrap="nowrap" keeps the row single-line.
<Group gap="xs" wrap="nowrap">
<Tooltip label={addLabel} withinPortal>
<Button
size="sm"
leftSection={<OpenInNewIcon fontSize="small" />}
onClick={() => handleAddToWorkspace(selectedFiles)}
aria-label={addLabel}
data-testid="add-to-workspace"
>
{addLabel}
</Button>
</Tooltip>
{/* Save to server; shown whenever local-only files are
? () => setMobileDetailsOpen(true)
: undefined
}
onMove={() => promptMoveFiles(selectedFiles)}
onRemove={() => handleRemoveFiles(selectedFiles)}
/>
) : (
<>
{selectedFiles.length > 0 &&
(() => {
// Bulk-action labels; CSS collapses to icon-only below 900px.
const addLabel =
selectedFiles.length === 1
? t("filesPage.addToWorkspace", "Add to workspace")
: t(
"filesPage.addToWorkspaceCount",
"Add {{count}} to workspace",
{ count: selectedFiles.length },
);
const moveLabel = t("filesPage.moveTo", "Move to…");
const removeLabel = t("filesPage.remove", "Remove");
return (
// wrap="nowrap" keeps the row single-line.
<Group gap="xs" wrap="nowrap">
<Tooltip label={addLabel} withinPortal>
<Button
size="sm"
leftSection={<OpenInNewIcon fontSize="small" />}
onClick={() =>
handleAddToWorkspace(selectedFiles)
}
aria-label={addLabel}
data-testid="add-to-workspace"
>
{addLabel}
</Button>
</Tooltip>
{/* Save to server; shown whenever local-only files are
selected. When storage is off it stays visible but
disabled, tooltip pointing at the admin. */}
{localOnlySelectedStubs.length > 0 && (
<Tooltip
label={
saveToServerDisabledReason ??
t("filesPage.saveToServer", "Save to server")
}
withinPortal
multiline={Boolean(saveToServerDisabledReason)}
w={saveToServerDisabledReason ? 240 : undefined}
>
<Button
size="sm"
variant="secondary"
leftSection={<CloudUploadIcon fontSize="small" />}
disabled={Boolean(saveToServerDisabledReason)}
onClick={() =>
setSaveToServerTarget(localOnlySelectedStubs)
}
style={{
// Keep the tooltip hoverable while disabled.
pointerEvents: saveToServerDisabledReason
? "auto"
: undefined,
}}
aria-label={t(
"filesPage.saveToServer",
"Save to server",
{localOnlySelectedStubs.length > 0 && (
<Tooltip
label={
saveToServerDisabledReason ??
t("filesPage.saveToServer", "Save to server")
}
withinPortal
multiline={Boolean(saveToServerDisabledReason)}
w={saveToServerDisabledReason ? 240 : undefined}
>
<Button
size="sm"
variant="secondary"
leftSection={
<CloudUploadIcon fontSize="small" />
}
disabled={Boolean(saveToServerDisabledReason)}
onClick={() =>
setSaveToServerTarget(localOnlySelectedStubs)
}
style={{
// Keep the tooltip hoverable while disabled.
pointerEvents: saveToServerDisabledReason
? "auto"
: undefined,
}}
aria-label={t(
"filesPage.saveToServer",
"Save to server",
)}
>
{t("filesPage.saveToServer", "Save to server")}
</Button>
</Tooltip>
)}
{/* Show details button on compact viewports. */}
{selectedFiles.length === 1 &&
isCompactDetailsViewport && (
<Tooltip
label={t(
"filesPage.showDetails",
"Show details",
)}
withinPortal
>
<Button
size="sm"
variant="secondary"
leftSection={
<InfoOutlinedIcon fontSize="small" />
}
onClick={() => setMobileDetailsOpen(true)}
aria-label={t(
"filesPage.showDetails",
"Show details",
)}
>
{t("filesPage.showDetails", "Show details")}
</Button>
</Tooltip>
)}
>
{t("filesPage.saveToServer", "Save to server")}
</Button>
</Tooltip>
)}
{/* Show details button on compact viewports. */}
{selectedFiles.length === 1 &&
isCompactDetailsViewport && (
<Tooltip
label={t("filesPage.showDetails", "Show details")}
withinPortal
>
<Tooltip label={moveLabel} withinPortal>
<Button
size="sm"
variant="secondary"
leftSection={
<InfoOutlinedIcon fontSize="small" />
<DriveFileMoveIcon fontSize="small" />
}
onClick={() => setMobileDetailsOpen(true)}
aria-label={t(
"filesPage.showDetails",
"Show details",
)}
onClick={() => promptMoveFiles(selectedFiles)}
aria-label={moveLabel}
>
{t("filesPage.showDetails", "Show details")}
{moveLabel}
</Button>
</Tooltip>
<Tooltip label={removeLabel} withinPortal>
<Button
size="sm"
accent="danger"
variant="secondary"
leftSection={<DeleteIcon fontSize="small" />}
onClick={() => handleRemoveFiles(selectedFiles)}
aria-label={removeLabel}
>
{removeLabel}
</Button>
</Tooltip>
<Tooltip
label={t(
"filesPage.clearSelection",
"Clear selection",
)}
withinPortal
>
<ActionIcon
variant="tertiary"
size="md"
onClick={() => clearSelection()}
aria-label={t(
"filesPage.clearSelection",
"Clear selection",
)}
>
&times;
</ActionIcon>
</Tooltip>
</Group>
);
})()}
{selectedFiles.length > 0 && (
<span
className="files-page-toolbar-divider"
aria-hidden="true"
/>
)}
{isMobile ? (
/* Side by side these need ~480px and were truncating to
stubs like "All sour"; collapsed they read in full. */
<>
<FilesToolbarFilterMenu
originFilter={originFilter}
onOriginChange={setOriginFilter}
availableTypes={availableTypes}
typeFilter={typeFilter}
onTypeChange={setTypeFilter}
search={search}
onSearchChange={setSearch}
/>
<FilesToolbarSortMenu
value={sortMode}
onChange={setSortMode}
/>
</>
) : (
<>
<Select
size="xs"
value={originFilter}
onChange={(value) =>
value &&
setOriginFilter(value as FilesPageOriginFilter)
}
data={[
{
value: "all",
label: t("filesPage.origin.all", "All sources"),
},
{
value: "local",
label: t("filesPage.origin.local", "Local"),
},
{
value: "cloud",
label: t("filesPage.origin.cloud", "Cloud"),
},
{
value: "shared-with-me",
label: t("filesPage.origin.shared", "Shared"),
},
]}
style={{ width: 140 }}
aria-label={t(
"filesPage.originFilter",
"Filter by source",
)}
<Tooltip label={moveLabel} withinPortal>
<Button
size="sm"
variant="secondary"
leftSection={<DriveFileMoveIcon fontSize="small" />}
onClick={() => promptMoveFiles(selectedFiles)}
aria-label={moveLabel}
>
{moveLabel}
</Button>
</Tooltip>
<Tooltip label={removeLabel} withinPortal>
<Button
size="sm"
accent="danger"
variant="secondary"
leftSection={<DeleteIcon fontSize="small" />}
onClick={() => handleRemoveFiles(selectedFiles)}
aria-label={removeLabel}
>
{removeLabel}
</Button>
</Tooltip>
<Tooltip
label={t("filesPage.clearSelection", "Clear selection")}
withinPortal
>
<ActionIcon
variant="tertiary"
size="md"
onClick={() => clearSelection()}
/>
{availableTypes.length > 1 && (
<MultiSelect
size="xs"
value={typeFilter}
onChange={setTypeFilter}
data={availableTypes.map((ext) => ({
value: ext,
label: ext,
}))}
placeholder={
typeFilter.length === 0
? t("filesPage.typeFilter.allTypes", "All types")
: undefined
}
clearable
hidePickedOptions
searchable={false}
style={{ width: 160 }}
aria-label={t(
"filesPage.clearSelection",
"Clear selection",
"filesPage.typeFilter.label",
"Filter by type",
)}
>
&times;
</ActionIcon>
</Tooltip>
</Group>
);
})()}
{selectedFiles.length > 0 && (
<span
className="files-page-toolbar-divider"
aria-hidden="true"
/>
/>
)}
<TextInput
size="xs"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
placeholder={t(
"filesPage.search.placeholder",
"Filter files…",
)}
leftSection={<SearchIcon sx={{ fontSize: "1rem" }} />}
rightSection={
search ? (
<ActionIcon
variant="tertiary"
size="sm"
onClick={() => setSearch("")}
aria-label={t(
"filesPage.search.clear",
"Clear filter",
)}
>
<CloseIcon sx={{ fontSize: "0.9rem" }} />
</ActionIcon>
) : null
}
aria-label={t(
"filesPage.search.label",
"Filter files by name",
)}
style={{ width: 180 }}
/>
<Select
size="xs"
value={sortMode}
onChange={(value) =>
value && setSortMode(value as FilesPageSortMode)
}
data={[
{
value: "modified-desc",
label: t(
"filesPage.sort.modifiedDesc",
"Recent first",
),
},
{
value: "modified-asc",
label: t(
"filesPage.sort.modifiedAsc",
"Oldest first",
),
},
{
value: "name-asc",
label: t("filesPage.sort.nameAsc", "Name A→Z"),
},
{
value: "name-desc",
label: t("filesPage.sort.nameDesc", "Name Z→A"),
},
{
value: "size-desc",
label: t(
"filesPage.sort.sizeDesc",
"Largest first",
),
},
{
value: "size-asc",
label: t(
"filesPage.sort.sizeAsc",
"Smallest first",
),
},
]}
style={{ width: 160 }}
/>
</>
)}
<span
className="files-page-toolbar-divider"
aria-hidden="true"
/>
<SegmentedControl
size="sm"
value={viewMode}
onChange={(v) => {
// Mantine only emits values declared in `data[].value`, but
// narrow defensively so a future third option can't silently
// bypass the FilesPageViewMode contract. Derived from the
// `as const` tuple so adding a mode anywhere in the code
// base automatically widens the guard here.
if (
!(FILES_PAGE_VIEW_MODES as readonly string[]).includes(
v,
)
)
return;
setViewMode(v as (typeof FILES_PAGE_VIEW_MODES)[number]);
}}
aria-label={t("filesPage.viewMode.label", "View mode")}
options={[
{
value: "grid",
label: (
<span
className="files-page-view-toggle-icon"
title={t("filesPage.viewMode.grid", "Grid view")}
>
<GridViewIcon fontSize="small" />
<span className="files-page-sr-only">
{t("filesPage.viewMode.grid", "Grid view")}
</span>
</span>
),
},
{
value: "list",
label: (
<span
className="files-page-view-toggle-icon"
title={t("filesPage.viewMode.list", "List view")}
>
<ViewListIcon fontSize="small" />
<span className="files-page-sr-only">
{t("filesPage.viewMode.list", "List view")}
</span>
</span>
),
},
]}
/>
</>
)}
<Select
size="xs"
value={originFilter}
onChange={(value) =>
value && setOriginFilter(value as FilesPageOriginFilter)
}
data={[
{
value: "all",
label: t("filesPage.origin.all", "All sources"),
},
{
value: "local",
label: t("filesPage.origin.local", "Local"),
},
{
value: "cloud",
label: t("filesPage.origin.cloud", "Cloud"),
},
{
value: "shared-with-me",
label: t("filesPage.origin.shared", "Shared"),
},
]}
style={{ width: 140 }}
aria-label={t("filesPage.originFilter", "Filter by source")}
/>
{availableTypes.length > 1 && (
<MultiSelect
size="xs"
value={typeFilter}
onChange={setTypeFilter}
data={availableTypes.map((ext) => ({
value: ext,
label: ext,
}))}
placeholder={
typeFilter.length === 0
? t("filesPage.typeFilter.allTypes", "All types")
: undefined
}
clearable
hidePickedOptions
searchable={false}
style={{ width: 160 }}
aria-label={t("filesPage.typeFilter.label", "Filter by type")}
/>
)}
<TextInput
size="xs"
value={search}
onChange={(e) => setSearch(e.currentTarget.value)}
placeholder={t("filesPage.search.placeholder", "Filter files…")}
leftSection={<SearchIcon sx={{ fontSize: "1rem" }} />}
rightSection={
search ? (
<ActionIcon
variant="tertiary"
size="sm"
onClick={() => setSearch("")}
aria-label={t("filesPage.search.clear", "Clear filter")}
>
<CloseIcon sx={{ fontSize: "0.9rem" }} />
</ActionIcon>
) : null
}
aria-label={t("filesPage.search.label", "Filter files by name")}
style={{ width: 180 }}
/>
<Select
size="xs"
value={sortMode}
onChange={(value) =>
value && setSortMode(value as FilesPageSortMode)
}
data={[
{
value: "modified-desc",
label: t("filesPage.sort.modifiedDesc", "Recent first"),
},
{
value: "modified-asc",
label: t("filesPage.sort.modifiedAsc", "Oldest first"),
},
{
value: "name-asc",
label: t("filesPage.sort.nameAsc", "Name A→Z"),
},
{
value: "name-desc",
label: t("filesPage.sort.nameDesc", "Name Z→A"),
},
{
value: "size-desc",
label: t("filesPage.sort.sizeDesc", "Largest first"),
},
{
value: "size-asc",
label: t("filesPage.sort.sizeAsc", "Smallest first"),
},
]}
style={{ width: 160 }}
/>
<span className="files-page-toolbar-divider" aria-hidden="true" />
<SegmentedControl
size="sm"
value={viewMode}
onChange={(v) => {
// Mantine only emits values declared in `data[].value`, but
// narrow defensively so a future third option can't silently
// bypass the FilesPageViewMode contract. Derived from the
// `as const` tuple so adding a mode anywhere in the code
// base automatically widens the guard here.
if (!(FILES_PAGE_VIEW_MODES as readonly string[]).includes(v))
return;
setViewMode(v as (typeof FILES_PAGE_VIEW_MODES)[number]);
}}
aria-label={t("filesPage.viewMode.label", "View mode")}
options={[
{
value: "grid",
label: (
<span
className="files-page-view-toggle-icon"
title={t("filesPage.viewMode.grid", "Grid view")}
>
<GridViewIcon fontSize="small" />
<span className="files-page-sr-only">
{t("filesPage.viewMode.grid", "Grid view")}
</span>
</span>
),
},
{
value: "list",
label: (
<span
className="files-page-view-toggle-icon"
title={t("filesPage.viewMode.list", "List view")}
>
<ViewListIcon fontSize="small" />
<span className="files-page-sr-only">
{t("filesPage.viewMode.list", "List view")}
</span>
</span>
),
},
]}
/>
</div>
</div>
frontend/editor/src/core/components/filesPage/FilesPage.css
+77 -31
View File
@@ -215,6 +215,17 @@
.files-page-toolbar-actions .mantine-Button-label {
display: none;
}
/* Exception: the bulk-actions trigger IS its label. Collapsed to an icon it
would read as a bare chevron with nothing to say what it opens. */
.files-page-toolbar-actions
.files-page-toolbar-bulk-trigger
.mantine-Button-label {
display: inline;
}
.files-page-toolbar-actions .files-page-toolbar-bulk-trigger {
padding-left: 0.75rem;
padding-right: 0.5rem;
}
/* Pin the view toggle: never let it clip off the right. flex-shrink:0
keeps its width fixed; the rest of the row shrinks around it. */
.files-page-toolbar-actions .mantine-SegmentedControl-root {
@@ -476,6 +487,23 @@
gap: 0.4rem;
}
/* Narrow cards: let the values wrap as whole units onto their own lines rather
than breaking mid-value ("239.26 / KB") around a stranded separator. */
@media (max-width: 64rem) {
.files-page-card-meta {
flex-wrap: wrap;
align-items: baseline;
column-gap: 0.4rem;
row-gap: 0.05rem;
}
.files-page-card-meta > span {
white-space: nowrap;
}
.files-page-card-meta-sep {
display: none;
}
}
/* Parent-folder breadcrumb shown on cards/rows during recursive search so
the user can tell which folder each hit lives in without navigating. */
.files-page-card-path {
@@ -1295,30 +1323,38 @@
sits next to the Upload button without breaking the action row. */
display: none;
}
@media (max-width: 900px) {
@media (max-width: 1024px) {
.files-page-toolbar {
/* nowrap so "7 items" + "Select all" sit on the same row as the
filter dropdowns and view-toggle instead of stacking on three
separate lines. Per-child min-width:0 lets them shrink as needed.
Used to only kick in at ≤640px which left a broken zone where
both side panels were hidden but the toolbar was still wrapping
to multiple rows. */
separate lines. Runs to the app's mobile breakpoint: capping it at
900px left 901-1024px wrapping to two rows, which is the band the
mobile layout actually renders in.
Scrolls rather than clips. With a selection active the bulk-action
strip cannot fit any phone width, and `overflow-x: hidden` put those
buttons permanently out of reach behind the edge. */
flex-wrap: nowrap;
gap: 0.35rem;
padding: 0.35rem 0.5rem;
min-height: auto;
overflow-x: hidden;
overflow-x: auto;
scrollbar-width: none;
}
.files-page-toolbar::-webkit-scrollbar {
display: none;
}
.files-page-toolbar-info {
/* Was `flex-basis: 100%` which forced a row break. Let it share
the row, shrink hard if needed, and ellipsize so the count line
collapses gracefully (was overlapping the bulk-action buttons
at ~400px because no truncation rule existed). */
flex: 0 1 auto;
/* The toolbar's only status text. Pinned, because against nowrap
siblings it lost every shrink round and rendered as "3 i". */
flex-shrink: 0;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Filter and sort collapse to icon triggers here (see FilesToolbar*Menu);
they are the whole control, so they never shrink. */
.files-page-toolbar-icon-btn {
flex-shrink: 0;
}
.files-page-toolbar-actions {
flex-wrap: nowrap;
@@ -1350,41 +1386,48 @@
navigation, so the in-header Home/Apps/Close trio is duplicated
and the first to go. Same for "Upload" - the user can use the
centre drop overlay. */
@media (max-width: 640px) {
/* Drop the 3-column grid on phones; flex-wrap lets the search slip onto
* its own row when chrome is too cramped to share. */
/* ── Mobile + tablet chrome (≤1024px = useIsMobile) ──────────────────
The desktop header is a 3-column grid whose middle track can grow to
40rem. Below ~1024px that track eats the row: the breadcrumb column
collapsed to ~36px (wrapping "All files" to two lines) and the action
column overflowed, pushing Upload off the right edge. One flex row
instead - breadcrumb and actions keep their intrinsic width and the
search takes whatever is left. Ends at the app's mobile breakpoint so
it matches the layout HomePage is already rendering. */
@media (max-width: 1024px) {
.files-page-header {
display: flex;
flex-wrap: wrap;
flex-wrap: nowrap;
align-items: center;
gap: 0.4rem;
padding: 0 0.4rem;
padding: 0.25rem 0.4rem;
overflow-x: hidden;
}
.files-page-header [data-mobile-hide="true"] {
display: none !important;
.files-page-header-search {
flex: 1 1 auto;
min-width: 0;
justify-content: flex-start;
}
.files-page-header [data-desktop-hide="true"] {
display: inline-flex !important;
}
/* Mobile-hide for sub-toolbar create buttons. */
.files-page-toolbar [data-mobile-hide="true"] {
display: none !important;
/* Undo the fixed 24rem basis so the pill tracks the row's spare width. */
.files-page-header-search .super-search {
flex: 1 1 auto;
width: 100%;
max-width: none;
}
.files-page-header-actions {
flex: 0 0 auto;
margin-left: auto;
gap: 0.3rem;
gap: 0.25rem;
flex-wrap: nowrap;
}
.files-page-breadcrumbs {
flex: 0 1 auto;
font-size: 0.85rem;
flex-wrap: nowrap;
overflow-x: auto;
min-width: 0;
}
/* Upload becomes an icon-only square button on mobile so the action
row stops getting clipped. Scoped to `.files-page-header-actions`
so the Back button at the header level keeps its visible "Back"
label (Back has no other on-screen indicator that it's about leaving). */
/* Icon-only actions: the labels are what pushed Upload past the edge. */
.files-page-header-actions .mantine-Button-root {
padding-left: 0.55rem;
padding-right: 0.55rem;
@@ -1395,6 +1438,9 @@
.files-page-header-actions .mantine-Button-label {
display: none;
}
}
@media (max-width: 640px) {
/* Grid: single column on very narrow phones; two columns from ~440px */
.files-page-grid {
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
frontend/editor/src/core/components/filesPage/FilesToolbarBulkMenu.tsx
+104
View File
@@ -0,0 +1,104 @@
import { Menu } from "@mantine/core";
import { useTranslation } from "react-i18next";
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
import DeleteIcon from "@mui/icons-material/Delete";
import DriveFileMoveIcon from "@mui/icons-material/DriveFileMove";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import OpenInNewIcon from "@mui/icons-material/OpenInNew";
import { Button } from "@app/ui/Button";
interface FilesToolbarBulkMenuProps {
selectedCount: number;
onAddToWorkspace: () => void;
/** Local-only files in the selection; omit when there are none to upload. */
onSaveToServer?: () => void;
/** Set when storage is off - the item stays listed but disabled. */
saveToServerDisabledReason?: string;
onShowDetails?: () => void;
onMove: () => void;
onRemove: () => void;
}
/**
* Bulk actions behind one trigger. The full strip is five buttons wide, which
* no phone can hold alongside the count and the clear control, so rather than
* letting the row scroll them off the edge they collapse into a menu where
* every action keeps its label.
*/
export function FilesToolbarBulkMenu({
selectedCount,
onAddToWorkspace,
onSaveToServer,
saveToServerDisabledReason,
onShowDetails,
onMove,
onRemove,
}: FilesToolbarBulkMenuProps) {
const { t } = useTranslation();
const addLabel =
selectedCount === 1
? t("filesPage.addToWorkspace", "Add to workspace")
: t("filesPage.addToWorkspaceCount", "Add {{count}} to workspace", {
count: selectedCount,
});
return (
<Menu shadow="md" width={230} position="bottom-end" withinPortal>
<Menu.Target>
<Button
size="sm"
variant="secondary"
className="files-page-toolbar-bulk-trigger"
rightSection={<ExpandMoreIcon sx={{ fontSize: "1.1rem" }} />}
aria-label={t("filesPage.bulkActions", "Actions")}
>
{t("filesPage.bulkActions", "Actions")}
</Button>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<OpenInNewIcon sx={{ fontSize: "1.1rem" }} />}
onClick={onAddToWorkspace}
>
{addLabel}
</Menu.Item>
{onSaveToServer && (
<Menu.Item
leftSection={<CloudUploadIcon sx={{ fontSize: "1.1rem" }} />}
disabled={Boolean(saveToServerDisabledReason)}
onClick={onSaveToServer}
>
{t("filesPage.saveToServer", "Save to server")}
</Menu.Item>
)}
{onShowDetails && (
<Menu.Item
leftSection={<InfoOutlinedIcon sx={{ fontSize: "1.1rem" }} />}
onClick={onShowDetails}
>
{t("filesPage.showDetails", "Show details")}
</Menu.Item>
)}
<Menu.Item
leftSection={<DriveFileMoveIcon sx={{ fontSize: "1.1rem" }} />}
onClick={onMove}
>
{t("filesPage.moveTo", "Move to…")}
</Menu.Item>
<Menu.Divider />
<Menu.Item
color="red"
leftSection={<DeleteIcon sx={{ fontSize: "1.1rem" }} />}
onClick={onRemove}
>
{t("filesPage.remove", "Remove")}
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
}
export default FilesToolbarBulkMenu;
frontend/editor/src/core/components/filesPage/FilesToolbarCount.tsx
+41
View File
@@ -0,0 +1,41 @@
import { useTranslation } from "react-i18next";
interface FilesToolbarCountProps {
loading: boolean;
totalCount: number;
selectedCount: number;
/**
* Selection-bar mode: report only the selection. A phone spends the room on
* the actions rather than on "3 items · 3 selected".
*/
selectionOnly: boolean;
}
/** Status text at the head of the files toolbar. */
export function FilesToolbarCount({
loading,
totalCount,
selectedCount,
selectionOnly,
}: FilesToolbarCountProps) {
const { t } = useTranslation();
const selected = t("filesPage.selectedCount", "{{count}} selected", {
count: selectedCount,
});
if (selectionOnly) {
return <span className="files-page-toolbar-info">{selected}</span>;
}
return (
<span className="files-page-toolbar-info">
{loading
? t("filesPage.loading", "Loading…")
: t("filesPage.summary", "{{count}} items", { count: totalCount })}
{selectedCount > 0 && <span> · {selected}</span>}
</span>
);
}
export default FilesToolbarCount;
frontend/editor/src/core/components/filesPage/FilesToolbarFilterMenu.tsx
+149
View File
@@ -0,0 +1,149 @@
import { MultiSelect, Popover, Select, Stack, TextInput } from "@mantine/core";
import { useTranslation } from "react-i18next";
import CloseIcon from "@mui/icons-material/Close";
import SearchIcon from "@mui/icons-material/Search";
import TuneIcon from "@mui/icons-material/Tune";
import { ActionIcon } from "@app/ui/ActionIcon";
import { Button } from "@app/ui/Button";
import { Tooltip } from "@app/components/shared/Tooltip";
import type { FilesPageOriginFilter } from "@app/contexts/FilesPageContext";
interface FilesToolbarFilterMenuProps {
originFilter: FilesPageOriginFilter;
onOriginChange: (value: FilesPageOriginFilter) => void;
availableTypes: string[];
typeFilter: string[];
onTypeChange: (value: string[]) => void;
search: string;
onSearchChange: (value: string) => void;
}
/**
* Source, type and name filters collapsed behind one icon. Side by side these
* three need ~480px, so on narrow viewports they were each truncated to
* unreadable stubs ("All sour"). In the popover they get their full width back,
* and a dot on the trigger keeps an active filter discoverable while hidden.
*/
export function FilesToolbarFilterMenu({
originFilter,
onOriginChange,
availableTypes,
typeFilter,
onTypeChange,
search,
onSearchChange,
}: FilesToolbarFilterMenuProps) {
const { t } = useTranslation();
const activeCount =
(originFilter !== "all" ? 1 : 0) +
(typeFilter.length > 0 ? 1 : 0) +
(search.trim() !== "" ? 1 : 0);
const label = t("filesPage.filters.label", "Filters");
const clearAll = () => {
onOriginChange("all");
onTypeChange([]);
onSearchChange("");
};
return (
<Popover width={260} position="bottom-end" shadow="md" withinPortal>
<Popover.Target>
<div>
<Tooltip
content={
activeCount > 0
? t(
"filesPage.filters.activeCount",
"{{count}} filters active",
{
count: activeCount,
},
)
: label
}
position="bottom"
>
<ActionIcon
variant={activeCount > 0 ? "primary" : "tertiary"}
size="sm"
aria-label={label}
className="files-page-toolbar-icon-btn"
>
<TuneIcon sx={{ fontSize: "1.1rem" }} />
</ActionIcon>
</Tooltip>
</div>
</Popover.Target>
<Popover.Dropdown>
<Stack gap="xs">
<TextInput
size="xs"
value={search}
onChange={(e) => onSearchChange(e.currentTarget.value)}
placeholder={t("filesPage.search.placeholder", "Filter files…")}
leftSection={<SearchIcon sx={{ fontSize: "1rem" }} />}
rightSection={
search ? (
<ActionIcon
variant="tertiary"
size="sm"
onClick={() => onSearchChange("")}
aria-label={t("filesPage.search.clear", "Clear filter")}
>
<CloseIcon sx={{ fontSize: "0.9rem" }} />
</ActionIcon>
) : null
}
aria-label={t("filesPage.search.label", "Filter files by name")}
/>
<Select
size="xs"
value={originFilter}
onChange={(value) =>
value && onOriginChange(value as FilesPageOriginFilter)
}
data={[
{ value: "all", label: t("filesPage.origin.all", "All sources") },
{ value: "local", label: t("filesPage.origin.local", "Local") },
{ value: "cloud", label: t("filesPage.origin.cloud", "Cloud") },
{
value: "shared-with-me",
label: t("filesPage.origin.shared", "Shared"),
},
]}
label={t("filesPage.originFilter", "Filter by source")}
comboboxProps={{ withinPortal: false }}
/>
{availableTypes.length > 1 && (
<MultiSelect
size="xs"
value={typeFilter}
onChange={onTypeChange}
data={availableTypes.map((ext) => ({ value: ext, label: ext }))}
placeholder={
typeFilter.length === 0
? t("filesPage.typeFilter.allTypes", "All types")
: undefined
}
clearable
hidePickedOptions
searchable={false}
label={t("filesPage.typeFilter.label", "Filter by type")}
comboboxProps={{ withinPortal: false }}
/>
)}
{activeCount > 0 && (
<Button variant="tertiary" size="sm" onClick={clearAll}>
{t("filesPage.filters.clearAll", "Clear filters")}
</Button>
)}
</Stack>
</Popover.Dropdown>
</Popover>
);
}
export default FilesToolbarFilterMenu;
frontend/editor/src/core/components/filesPage/FilesToolbarSortMenu.tsx
+86
View File
@@ -0,0 +1,86 @@
import { Menu } from "@mantine/core";
import { useTranslation } from "react-i18next";
import CheckIcon from "@mui/icons-material/Check";
import SwapVertIcon from "@mui/icons-material/SwapVert";
import { ActionIcon } from "@app/ui/ActionIcon";
import { Tooltip } from "@app/components/shared/Tooltip";
import type { FilesPageSortMode } from "@app/contexts/FilesPageContext";
interface FilesToolbarSortMenuProps {
value: FilesPageSortMode;
onChange: (mode: FilesPageSortMode) => void;
}
/**
* Sort control collapsed to a single icon. The desktop Select needs 160px and
* still truncated its longest label ("Recent first" → "Recent fi") once the
* toolbar got tight, so on narrow viewports the options move into a menu where
* they have room to read in full.
*/
export function FilesToolbarSortMenu({
value,
onChange,
}: FilesToolbarSortMenuProps) {
const { t } = useTranslation();
const options: { value: FilesPageSortMode; label: string }[] = [
{
value: "modified-desc",
label: t("filesPage.sort.modifiedDesc", "Recent first"),
},
{
value: "modified-asc",
label: t("filesPage.sort.modifiedAsc", "Oldest first"),
},
{ value: "name-asc", label: t("filesPage.sort.nameAsc", "Name A→Z") },
{ value: "name-desc", label: t("filesPage.sort.nameDesc", "Name Z→A") },
{
value: "size-desc",
label: t("filesPage.sort.sizeDesc", "Largest first"),
},
{ value: "size-asc", label: t("filesPage.sort.sizeAsc", "Smallest first") },
];
const label = t("filesPage.sort.label", "Sort files");
const current = options.find((o) => o.value === value)?.label ?? "";
return (
<Menu shadow="md" width={200} position="bottom-end" withinPortal>
<Menu.Target>
<div>
<Tooltip content={`${label} · ${current}`} position="bottom">
<ActionIcon
variant="tertiary"
size="sm"
aria-label={`${label}: ${current}`}
className="files-page-toolbar-icon-btn"
>
<SwapVertIcon sx={{ fontSize: "1.1rem" }} />
</ActionIcon>
</Tooltip>
</div>
</Menu.Target>
<Menu.Dropdown>
<Menu.Label>{label}</Menu.Label>
{options.map((option) => (
<Menu.Item
key={option.value}
onClick={() => onChange(option.value)}
leftSection={
option.value === value ? (
<CheckIcon sx={{ fontSize: "1rem" }} />
) : (
<span style={{ display: "inline-block", width: "1rem" }} />
)
}
>
{option.label}
</Menu.Item>
))}
</Menu.Dropdown>
</Menu>
);
}
export default FilesToolbarSortMenu;
frontend/editor/src/core/components/layout/Workbench.module.css
+7
View File
@@ -38,6 +38,13 @@
background: var(--c-hover);
}
@media (max-width: 64rem) {
.workbenchBarReopenTab {
width: 3rem;
height: 1.375rem;
}
}
.workbenchBarWrapper {
display: grid;
grid-template-rows: 1fr;
frontend/editor/src/core/components/shared/AppConfigModal.css
+50 -13
View File
@@ -39,41 +39,77 @@
flex-direction: column;
}
/* Mobile: compact icon-only navigation */
/* Mobile: two-level settings navigation */
@media (max-width: 1024px) {
.modal-container {
height: 100vh !important;
flex-direction: column;
height: 100dvh !important;
max-height: none !important;
}
.modal-nav {
width: 5rem; /* 80px - wider for larger icons */
height: 100vh !important;
width: 100%;
flex: 1;
min-height: 0;
height: auto !important;
max-height: none !important;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-radius: 0;
}
.modal-nav-scroll {
padding: 1rem 0.5rem;
padding: 0.75rem 0.75rem 2rem;
}
.modal-nav-section {
margin-bottom: 1.5rem;
margin-bottom: 1.25rem;
}
.modal-nav-section > .mantine-Text-root {
padding: 0 0.5rem;
}
.modal-nav-item.mobile {
padding: 1rem;
justify-content: center;
border-radius: 0.75rem;
margin-bottom: 0.75rem;
padding: 0.75rem 0.625rem;
min-height: 3rem;
border-radius: 0.625rem;
margin-bottom: 0.125rem;
gap: 0.75rem;
}
.modal-nav-item .modal-nav-item-badge {
display: inline-flex;
}
.modal-nav-chevron {
flex-shrink: 0;
color: var(--c-text-subtle);
}
.modal-content {
height: 100vh !important;
height: auto !important;
flex: 1;
min-height: 0;
max-height: none !important;
border-radius: 0;
}
.modal-body {
padding: 1rem;
padding-top: 0.75rem;
}
}
@media (max-width: 48rem) {
.modal-body [id^="setting-"] {
flex-direction: column;
align-items: flex-start !important;
gap: 0.625rem;
}
.modal-body [id^="setting-"]:has(.mantine-Switch-root) {
flex-direction: row;
align-items: center !important;
}
}
.modal-nav-scroll {
@@ -241,6 +277,7 @@
@media (max-width: 1024px) {
.settings-sticky-footer {
padding: 0.75rem 1rem;
padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
margin: 0 -1rem;
margin-bottom: -1rem;
}
frontend/editor/src/core/components/shared/AppConfigModal.tsx
+92 -54
View File
@@ -7,6 +7,9 @@ import React, {
} from "react";
import { Badge, Modal, Text, Tooltip, Group } from "@mantine/core";
import { ActionIcon } from "@app/ui/ActionIcon";
import { SettingsMobileBackButton } from "@app/components/shared/config/SettingsMobileBackButton";
import { SettingsMobileNavHeader } from "@app/components/shared/config/SettingsMobileNavHeader";
import { SettingsNavChevron } from "@app/components/shared/config/SettingsNavChevron";
import { useNavigate, useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import LocalIcon from "@app/components/shared/LocalIcon";
@@ -82,6 +85,7 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
"general",
);
const isMobile = useIsMobile();
const [mobilePane, setMobilePane] = useState<"nav" | "content">("nav");
const navigate = useNavigate();
const location = useLocation();
const { config } = useAppConfig();
@@ -122,6 +126,14 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
}
}, [opened]);
useEffect(() => {
if (!opened) return;
const target = urlSync
? getSectionFromPath(window.location.pathname)
: initialSection;
setMobilePane(target ? "content" : "nav");
}, [opened, urlSync, initialSection]);
// Switch tab without forcing every `useLocation()` subscriber (HomePage and
// its FileSidebar/Workbench/RightSidebar/FileManager tree) to re-render.
//
@@ -306,10 +318,17 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
const canProceed = await confirmIfDirty();
if (!canProceed) return;
switchSection(key);
setMobilePane("content");
},
[confirmIfDirty, switchSection],
);
const handleMobileBack = useCallback(async () => {
const canProceed = await confirmIfDirty();
if (!canProceed) return;
setMobilePane("nav");
}, [confirmIfDirty]);
return (
<Modal
opened={opened}
@@ -332,22 +351,28 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
className={`modal-nav ${isMobile ? "mobile" : ""}`}
style={{
background: colors.navBg,
borderRight: `1px solid ${colors.headerBorder}`,
...(isMobile
? { display: mobilePane === "nav" ? undefined : "none" }
: { borderRight: `1px solid ${colors.headerBorder}` }),
}}
>
<SettingsMobileNavHeader
show={isMobile}
onClose={handleClose}
background={colors.navBg}
borderColor={colors.headerBorder}
/>
<div className="modal-nav-scroll">
{configNavSections.map((section) => (
<div key={section.title} className="modal-nav-section">
{!isMobile && (
<Text
size="xs"
fw={600}
c={colors.sectionTitle}
style={{ textTransform: "uppercase", letterSpacing: 0.4 }}
>
{section.title}
</Text>
)}
<Text
size="xs"
fw={600}
c={colors.sectionTitle}
style={{ textTransform: "uppercase", letterSpacing: 0.4 }}
>
{section.title}
</Text>
<div className="modal-nav-section-items">
{section.items.map((item) => {
const isActive = active === item.key;
@@ -355,7 +380,7 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
const color = isActive
? colors.navItemActive
: colors.navItem;
const iconSize = isMobile ? 28 : 18;
const iconSize = 18;
const showPlanWarning =
item.key === "adminPlan" &&
licenseAlert.active &&
@@ -383,47 +408,46 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
icon={item.icon}
width={iconSize}
height={iconSize}
style={{ color }}
style={{ color, flexShrink: 0 }}
/>
{!isMobile && (
<Group
gap={4}
align="center"
wrap="nowrap"
style={{ minWidth: 0, flex: 1 }}
<Group
gap={4}
align="center"
wrap="nowrap"
style={{ minWidth: 0, flex: 1 }}
>
<Text
size="sm"
fw={500}
truncate
style={{ color, minWidth: 0, flex: 1 }}
title={item.label}
>
<Text
size="sm"
fw={500}
truncate
style={{ color, minWidth: 0, flex: 1 }}
title={item.label}
{item.label}
</Text>
{item.badge && (
<Badge
size="xs"
variant="light"
color={item.badgeColor ?? "orange"}
className="modal-nav-item-badge"
style={{ flexShrink: 0 }}
>
{item.label}
</Text>
{item.badge && (
<Badge
size="xs"
variant="light"
color={item.badgeColor ?? "orange"}
className="modal-nav-item-badge"
style={{ flexShrink: 0 }}
>
{item.badge}
</Badge>
)}
{showPlanWarning && (
<LocalIcon
icon="warning-rounded"
width={14}
height={14}
style={{
color: "var(--mantine-color-orange-7)",
}}
/>
)}
</Group>
)}
{item.badge}
</Badge>
)}
{showPlanWarning && (
<LocalIcon
icon="warning-rounded"
width={14}
height={14}
style={{
color: "var(--mantine-color-orange-7)",
}}
/>
)}
</Group>
<SettingsNavChevron show={isMobile} />
</div>
);
@@ -450,7 +474,15 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
</div>
{/* Right content */}
<div className="modal-content" data-tour="settings-content-area">
<div
className="modal-content"
data-tour="settings-content-area"
style={
isMobile && mobilePane !== "content"
? { display: "none" }
: undefined
}
>
<div className="modal-content-scroll">
{/* Sticky header with section title and small close button */}
<div
@@ -460,9 +492,15 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({
borderBottom: `1px solid ${colors.headerBorder}`,
}}
>
<Text fw={700} size="lg">
{activeLabel}
</Text>
<Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
<SettingsMobileBackButton
show={isMobile}
onClick={() => void handleMobileBack()}
/>
<Text fw={700} size="lg" truncate>
{activeLabel}
</Text>
</Group>
<Group gap="xs" wrap="nowrap">
<ActionIcon
ref={closeButtonRef}
frontend/editor/src/core/components/shared/WorkbenchBar.css
+92 -7
View File
@@ -136,15 +136,15 @@
}
/* Two-row: the tool row scrolls sideways instead of wrapping. */
.workbench-bar[data-wrapped="true"] .workbench-bar-center {
border-top: 1px solid var(--c-border-subtle);
.workbench-bar[data-wrapped="true"] .workbench-bar-center-scroll {
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.workbench-bar[data-wrapped="true"] .workbench-bar-center > * {
.workbench-bar[data-wrapped="true"] .workbench-bar-center-scroll > * {
flex-shrink: 0;
}
@@ -152,16 +152,25 @@
.workbench-bar-center {
order: 4;
flex: 0 0 100%;
min-width: 0;
max-width: 100%;
position: relative;
display: flex;
align-items: center;
/* Symmetric side padding leaves room for the retract handle pinned right
without knocking the centred tool icons off-centre. */
padding: 4px 36px;
border-top: 1px solid var(--c-border-subtle);
}
.workbench-bar-center-scroll {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 2px;
/* Symmetric side padding leaves room for the retract handle pinned right
without knocking the centred tool icons off-centre. */
padding: 4px 36px;
border-top: 1px solid var(--c-border-subtle);
}
/* Retract / reopen handle for the viewer tool row. */
@@ -297,3 +306,79 @@
text-align: right;
white-space: nowrap;
}
/* ---- Mobile layout (matches useIsMobile's 1024px) ---- */
@media (max-width: 64rem) {
.workbench-bar {
margin: var(--nav-gutter) var(--nav-gutter) 0;
}
.workbench-bar-action-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
min-height: 40px !important;
}
.workbench-bar-views,
.workbench-bar-globals {
height: auto;
min-height: 44px;
}
.workbench-bar-center {
padding: 2px 4px 2px 8px;
}
.workbench-bar-center-scroll {
gap: 4px;
}
.workbench-bar[data-wrapped="true"] .workbench-bar-search {
order: 2;
flex: 1 1 0;
min-width: 0;
padding: 4px 0;
}
.workbench-bar[data-wrapped="true"] .workbench-bar-globals {
order: 3;
}
.workbench-bar[data-wrapped="true"] .workbench-bar-center-scroll {
scrollbar-width: none;
/* Wider than one 40px icon plus its gap: a 2rem fade always landed
mid-glyph, which read as a clipping bug rather than "scroll me". */
-webkit-mask-image: linear-gradient(
to right,
#000 calc(100% - 3.5rem),
transparent
);
mask-image: linear-gradient(
to right,
#000 calc(100% - 3.5rem),
transparent
);
}
.workbench-bar[data-wrapped="true"]
.workbench-bar-center--expanded
.workbench-bar-center-scroll {
flex-wrap: wrap;
justify-content: center;
overflow-x: visible;
-webkit-mask-image: none;
mask-image: none;
}
.workbench-bar[data-wrapped="true"]
.workbench-bar-center--expanded
.workbench-bar-divider {
display: none;
}
.workbench-bar-toolbar-handle-expand {
flex-shrink: 0;
align-self: flex-start;
}
}
frontend/editor/src/core/components/shared/WorkbenchBar.tsx
+83 -193
View File
@@ -3,9 +3,9 @@ import React, {
useLayoutEffect,
useMemo,
useRef,
useState,
useSyncExternalStore,
} from "react";
import { Group, Loader, Progress, Stack, Text } from "@mantine/core";
import { Button } from "@app/ui/Button";
import { ActionIcon } from "@app/ui/ActionIcon";
import { SegmentedControl } from "@app/ui/SegmentedControl";
@@ -31,7 +31,6 @@ import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
import { useNavigationState } from "@app/contexts/NavigationContext";
import { ViewerContext, useViewer } from "@app/contexts/ViewerContext";
import { WorkbenchType, isBaseWorkbench } from "@app/types/workbench";
import { Tooltip } from "@app/components/shared/Tooltip";
import LocalIcon from "@app/components/shared/LocalIcon";
import SuperSearch from "@app/components/shared/superSearch/SuperSearch";
import { useEditorSearchScopes } from "@app/hooks/useSuperSearch";
@@ -53,10 +52,12 @@ import {
} from "@app/types/workbenchBar";
import InsertDriveFileOutlinedIcon from "@mui/icons-material/InsertDriveFileOutlined";
import FolderOutlinedIcon from "@mui/icons-material/FolderOutlined";
import CloseIcon from "@mui/icons-material/Close";
import PrintIcon from "@mui/icons-material/Print";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
import WorkbenchBarDesktopActions from "@app/components/shared/workbenchBar/WorkbenchBarDesktopActions";
import WorkbenchBarMobileActions from "@app/components/shared/workbenchBar/WorkbenchBarMobileActions";
import WorkbenchBarToolbarHandle from "@app/components/shared/workbenchBar/WorkbenchBarToolbarHandle";
import { renderWithTooltip } from "@app/components/shared/workbenchBar/workbenchBarTooltip";
import { WorkbenchBarActionsProps } from "@app/components/shared/workbenchBar/types";
import { useIsMobile } from "@app/hooks/useIsMobile";
import "@app/components/shared/WorkbenchBar.css";
const SECTION_ORDER: WorkbenchBarSection[] = ["top", "middle", "bottom"];
@@ -77,24 +78,6 @@ interface WorkbenchBarProps {
onCollapseViewerToolbar?: (collapsed: boolean) => void;
}
function renderWithTooltip(
node: React.ReactNode,
tooltip: React.ReactNode | undefined,
) {
if (!tooltip) return node;
return (
<Tooltip
content={tooltip}
position="bottom"
offset={6}
arrow
portalTarget={typeof document !== "undefined" ? document.body : undefined}
>
<div className="workbench-bar-tooltip-wrapper">{node}</div>
</Tooltip>
);
}
export default function WorkbenchBar({
currentView,
setCurrentView,
@@ -132,6 +115,8 @@ export default function WorkbenchBar({
const icons = useFileActionIcons();
const { sharingEnabled } = useSharingEnabled();
const viewerContext = React.useContext(ViewerContext);
const isMobile = useIsMobile();
const [mobileToolsExpanded, setMobileToolsExpanded] = useState(false);
const selectors = useFileSelectors();
const { selectedFiles, selectedFileIds } = useFileSelection();
@@ -166,32 +151,6 @@ export default function WorkbenchBar({
enforcingRun?.currentStep != null && enforcingRun.stepCount
? Math.round((enforcingRun.currentStep / enforcingRun.stepCount) * 100)
: undefined;
const makeEnforcingTooltip = (action: string): React.ReactNode => (
<Stack gap={6} py={2} w={200}>
<Group gap={6} wrap="nowrap">
<ShieldOutlinedIcon style={{ fontSize: 13 }} />
<Text size="xs" fw={600}>
{t(
"policy.blockingAction",
"{{action}} blocked while enforcing policy, please wait",
{ action },
)}
</Text>
</Group>
{enforcingProgress != null ? (
<Progress
w="100%"
size="xs"
radius="xl"
value={enforcingProgress}
striped
animated
/>
) : (
<Loader size="xs" />
)}
</Stack>
);
const pageEditorTotalPages = pageEditorFunctions?.totalPages ?? 0;
const pageEditorSelectedCount =
pageEditorFunctions?.selectedPageIds?.length ?? 0;
@@ -365,6 +324,33 @@ export default function WorkbenchBar({
return terminology.downloadAll;
}, [currentView, selectedCount, t, terminology]);
const actionsDisabled =
totalItems === 0 || allButtonsDisabled || disableForFullscreen;
// Shared by the mobile overflow menu and the desktop icon cluster so the two
// stay in step; each renders the same actions in its own shape.
const globalActionProps: WorkbenchBarActionsProps = {
currentView,
isCustomView,
actionsDisabled,
policyEnforcing,
downloadLabel: downloadTooltip,
downloadIconName: icons.downloadIconName,
saveAsIconName: icons.saveAsIconName,
onPrint: handlePrint,
onExport: handleExportAll,
onClose: handleClose,
};
const toggleMobileTools = useCallback(
() => setMobileToolsExpanded((v) => !v),
[],
);
const handleRetractToolbar = useCallback(
() => onCollapseViewerToolbar?.(true),
[onCollapseViewerToolbar],
);
const renderButton = useCallback(
(btn: WorkbenchBarButtonConfig) => {
const action = actions[btn.id];
@@ -560,38 +546,44 @@ export default function WorkbenchBar({
whole row; Workbench then shows a tab below the bar to bring it back. */}
{sectionsWithButtons.length > 0 &&
!(isViewer && viewerToolbarCollapsed) && (
<div className="workbench-bar-center">
{sectionsWithButtons.map(
({ section, buttons: sectionButtons }, idx) => (
<React.Fragment key={section}>
{idx > 0 && <div className="workbench-bar-divider" />}
{sectionButtons.map((btn) => {
const content = renderButton(btn);
if (!content) return null;
return (
<div
key={btn.id}
className="workbench-bar-action-wrapper"
>
{content}
</div>
);
})}
</React.Fragment>
),
)}
{isViewer && onCollapseViewerToolbar && (
<Button
type="button"
variant="quiet"
className="workbench-bar-toolbar-handle workbench-bar-toolbar-handle-retract"
onClick={() => onCollapseViewerToolbar(true)}
aria-expanded
aria-label={t("workbenchBar.hideToolbar", "Hide toolbar")}
title={t("workbenchBar.hideToolbar", "Hide toolbar")}
leftSection={<KeyboardArrowUpIcon sx={{ fontSize: "1rem" }} />}
/>
)}
<div
className={`workbench-bar-center${
isMobile && mobileToolsExpanded
? " workbench-bar-center--expanded"
: ""
}`}
>
<div className="workbench-bar-center-scroll">
{sectionsWithButtons.map(
({ section, buttons: sectionButtons }, idx) => (
<React.Fragment key={section}>
{idx > 0 && <div className="workbench-bar-divider" />}
{sectionButtons.map((btn) => {
const content = renderButton(btn);
if (!content) return null;
return (
<div
key={btn.id}
className="workbench-bar-action-wrapper"
>
{content}
</div>
);
})}
</React.Fragment>
),
)}
</div>
<WorkbenchBarToolbarHandle
isMobile={isMobile}
expanded={mobileToolsExpanded}
onToggleExpanded={toggleMobileTools}
onRetract={
isViewer && onCollapseViewerToolbar
? handleRetractToolbar
: undefined
}
/>
</div>
)}
@@ -599,119 +591,17 @@ export default function WorkbenchBar({
<div className="workbench-bar-globals">
{/* Share (viewer only; opens the same modal as My Files "Manage sharing") */}
{currentView === "viewer" && sharingEnabled && (
<ViewerShareButton
disabled={
totalItems === 0 || allButtonsDisabled || disableForFullscreen
}
<ViewerShareButton disabled={actionsDisabled} />
)}
{isMobile ? (
<WorkbenchBarMobileActions {...globalActionProps} />
) : (
<WorkbenchBarDesktopActions
{...globalActionProps}
enforcingProgress={enforcingProgress}
/>
)}
{/* Print */}
{currentView === "viewer" &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={handlePrint}
disabled={
totalItems === 0 ||
allButtonsDisabled ||
disableForFullscreen ||
policyEnforcing
}
aria-label={t("workbenchBar.print", "Print PDF")}
>
<PrintIcon sx={{ fontSize: "1rem" }} />
</ActionIcon>,
policyEnforcing
? makeEnforcingTooltip(t("workbenchBar.print", "Print PDF"))
: t("workbenchBar.print", "Print PDF"),
)}
{/* Download (file-level action — not relevant in custom views) */}
{!isCustomView &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={() => handleExportAll()}
disabled={
disableForFullscreen ||
totalItems === 0 ||
allButtonsDisabled ||
policyEnforcing
}
aria-label={downloadTooltip}
>
<LocalIcon
icon={icons.downloadIconName}
width="1rem"
height="1rem"
/>
</ActionIcon>,
policyEnforcing
? makeEnforcingTooltip(downloadTooltip)
: downloadTooltip,
)}
{/* Save As */}
{!isCustomView &&
icons.saveAsIconName &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={() => handleExportAll(true)}
disabled={
disableForFullscreen ||
totalItems === 0 ||
allButtonsDisabled ||
policyEnforcing
}
aria-label={t("workbenchBar.saveAs", "Save As")}
>
<LocalIcon
icon={icons.saveAsIconName}
width="1rem"
height="1rem"
/>
</ActionIcon>,
policyEnforcing
? makeEnforcingTooltip(t("workbenchBar.saveAs", "Save As"))
: t("workbenchBar.saveAs", "Save As"),
)}
{/* Separator: export group | close */}
{!isCustomView && (
<div className="workbench-bar-divider workbench-bar-globals-sep" />
)}
{/* Close (context-aware: close all / close viewer file / close page editor) */}
{!isCustomView &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={handleClose}
disabled={
totalItems === 0 || allButtonsDisabled || disableForFullscreen
}
aria-label={
currentView === "fileEditor"
? t("workbenchBar.closeAll", "Close All")
: t("workbenchBar.closePdf", "Close PDF")
}
>
<CloseIcon sx={{ fontSize: "1rem" }} />
</ActionIcon>,
currentView === "fileEditor"
? t("workbenchBar.closeAll", "Close All")
: t("workbenchBar.closePdf", "Close PDF"),
)}
</div>
</div>
);
frontend/editor/src/core/components/shared/config/SettingsMobileBackButton.stories.tsx
+17
View File
@@ -0,0 +1,17 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { SettingsMobileBackButton } from "@app/components/shared/config/SettingsMobileBackButton";
const meta = {
title: "Shared/Config/SettingsMobileBackButton",
component: SettingsMobileBackButton,
parameters: { layout: "padded" },
args: { show: true, onClick: () => {} },
} satisfies Meta<typeof SettingsMobileBackButton>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};
export const Hidden: Story = {
args: { show: false },
};
frontend/editor/src/core/components/shared/config/SettingsMobileBackButton.tsx
+31
View File
@@ -0,0 +1,31 @@
import { useTranslation } from "react-i18next";
import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
import { ActionIcon } from "@app/ui/ActionIcon";
interface SettingsMobileBackButtonProps {
/** Only the mobile two-pane layout has a nav pane to go back to. */
show: boolean;
onClick: () => void;
}
/** Returns the settings modal from a section back to the section list. */
export function SettingsMobileBackButton({
show,
onClick,
}: SettingsMobileBackButtonProps) {
const { t } = useTranslation();
if (!show) return null;
return (
<ActionIcon
variant="tertiary"
onClick={onClick}
aria-label={t("settings.backToSections", "All settings")}
>
<ArrowBackRoundedIcon sx={{ fontSize: "1.25rem" }} />
</ActionIcon>
);
}
export default SettingsMobileBackButton;
frontend/editor/src/core/components/shared/config/SettingsMobileNavHeader.stories.tsx
+23
View File
@@ -0,0 +1,23 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { SettingsMobileNavHeader } from "@app/components/shared/config/SettingsMobileNavHeader";
import "@app/components/shared/AppConfigModal.css";
const meta = {
title: "Shared/Config/SettingsMobileNavHeader",
component: SettingsMobileNavHeader,
parameters: { layout: "padded" },
args: {
show: true,
onClose: () => {},
background: "var(--c-bg-raised)",
borderColor: "var(--c-border-subtle)",
},
} satisfies Meta<typeof SettingsMobileNavHeader>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};
export const Hidden: Story = {
args: { show: false },
};
frontend/editor/src/core/components/shared/config/SettingsMobileNavHeader.tsx
+44
View File
@@ -0,0 +1,44 @@
import { Text } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { ActionIcon } from "@app/ui/ActionIcon";
import LocalIcon from "@app/components/shared/LocalIcon";
interface SettingsMobileNavHeaderProps {
/** Mobile shows nav and content as separate panes, so the nav needs its own header. */
show: boolean;
onClose: () => void;
background: string;
borderColor: string;
}
/** Header for the settings nav pane: the modal title plus a close button. */
export function SettingsMobileNavHeader({
show,
onClose,
background,
borderColor,
}: SettingsMobileNavHeaderProps) {
const { t } = useTranslation();
if (!show) return null;
return (
<div
className="modal-header modal-nav-header"
style={{ background, borderBottom: `1px solid ${borderColor}` }}
>
<Text fw={700} size="lg">
{t("settings.title", "Settings")}
</Text>
<ActionIcon
variant="tertiary"
onClick={onClose}
aria-label={t("settings.close", "Close")}
>
<LocalIcon icon="close-rounded" width={18} height={18} />
</ActionIcon>
</div>
);
}
export default SettingsMobileNavHeader;
frontend/editor/src/core/components/shared/config/SettingsNavChevron.stories.tsx
+18
View File
@@ -0,0 +1,18 @@
import type { Meta, StoryObj } from "@storybook/react-vite";
import { SettingsNavChevron } from "@app/components/shared/config/SettingsNavChevron";
import "@app/components/shared/AppConfigModal.css";
const meta = {
title: "Shared/Config/SettingsNavChevron",
component: SettingsNavChevron,
parameters: { layout: "padded" },
args: { show: true },
} satisfies Meta<typeof SettingsNavChevron>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};
export const Hidden: Story = {
args: { show: false },
};
frontend/editor/src/core/components/shared/config/SettingsNavChevron.tsx
+20
View File
@@ -0,0 +1,20 @@
import ChevronRightRoundedIcon from "@mui/icons-material/ChevronRightRounded";
interface SettingsNavChevronProps {
/** Mobile nav items drill into a second pane, so they get an affordance. */
show: boolean;
}
/** Drill-in affordance on a settings nav item. */
export function SettingsNavChevron({ show }: SettingsNavChevronProps) {
if (!show) return null;
return (
<ChevronRightRoundedIcon
className="modal-nav-chevron"
sx={{ fontSize: "1.25rem" }}
/>
);
}
export default SettingsNavChevron;
frontend/editor/src/core/components/shared/config/configNavSections.tsx
+2 -2
View File
@@ -44,7 +44,7 @@ export const useConfigNavSections = (
key: "general",
label: t("settings.general.title", "General"),
icon: "settings-rounded",
component: <GeneralSection />,
component: <GeneralSection hideTitle />,
},
{
key: "hotkeys",
@@ -112,7 +112,7 @@ export const createConfigNavSections = (
key: "general",
label: "General",
icon: "settings-rounded",
component: <GeneralSection />,
component: <GeneralSection hideTitle />,
},
{
key: "hotkeys",
frontend/editor/src/core/components/shared/superSearch/SuperSearch.css
+13 -1
View File
@@ -36,8 +36,11 @@
border-color: var(--c-primary);
}
/* Keyboard-shortcut hint pinned to the right of the input. */
/* Keyboard-shortcut hint pinned to the right of the input. Hidden by default
and opted back in below, so the two rules that must agree - showing the chip
and reserving room for it - are keyed on one condition and cannot drift. */
.super-search-kbd {
display: none;
position: absolute;
right: 0.5rem;
top: 50%;
@@ -54,6 +57,15 @@
letter-spacing: 0.06em;
}
/* Only where the shortcut is pressable and the pill has room for it. Below the
mobile breakpoint the chip used to sit over the input - it has no padding of
its own - so the placeholder ran underneath it instead of ellipsising. */
@media (min-width: 64.0625rem) and (not (pointer: coarse)) {
.super-search-kbd {
display: inline-block;
}
}
/* Portalled to <body>; coords are set inline from the input's viewport rect. */
.super-search-dropdown {
position: fixed;
frontend/editor/src/core/components/shared/superSearch/SuperSearch.tsx
+7 -1
View File
@@ -14,6 +14,7 @@ import { Chip } from "@app/ui/Chip";
import { TextInput } from "@app/components/shared/TextInput";
import LocalIcon from "@app/components/shared/LocalIcon";
import { isMacLike } from "@app/utils/hotkeys";
import { useIsMobile } from "@app/hooks/useIsMobile";
import {
useSuperSearch,
SuperSearchResult,
@@ -373,6 +374,7 @@ export default function SuperSearch({
}
};
const isMobile = useIsMobile();
const shortcutHint = useMemo(() => (isMacLike() ? "⌘K" : "Ctrl+K"), []);
const toggleScope = useCallback(
@@ -627,7 +629,11 @@ export default function SuperSearch({
ref={inputRef}
value={query}
onChange={setQuery}
placeholder={t("superSearch.placeholder", "Search Stirling")}
placeholder={
isMobile
? t("superSearch.placeholderShort", "Search")
: t("superSearch.placeholder", "Search Stirling")
}
icon={
<LocalIcon icon="search-rounded" width="1.1rem" height="1.1rem" />
}
frontend/editor/src/core/components/shared/workbenchBar/WorkbenchBarDesktopActions.tsx
+121
View File
@@ -0,0 +1,121 @@
import React from "react";
import { useTranslation } from "react-i18next";
import CloseIcon from "@mui/icons-material/Close";
import PrintIcon from "@mui/icons-material/Print";
import { ActionIcon } from "@app/ui/ActionIcon";
import LocalIcon from "@app/components/shared/LocalIcon";
import {
PolicyEnforcingTooltip,
renderWithTooltip,
} from "@app/components/shared/workbenchBar/workbenchBarTooltip";
import { WorkbenchBarActionsProps } from "@app/components/shared/workbenchBar/types";
interface WorkbenchBarDesktopActionsProps extends WorkbenchBarActionsProps {
/** Percentage through the enforcing policy run, when it reports steps. */
enforcingProgress?: number;
}
/**
* Desktop version of the workbench bar's global actions: print / export /
* save-as sit as icons, with close split off behind a separator.
*/
export default function WorkbenchBarDesktopActions({
currentView,
isCustomView,
actionsDisabled,
policyEnforcing,
downloadLabel,
downloadIconName,
saveAsIconName,
onPrint,
onExport,
onClose,
enforcingProgress,
}: WorkbenchBarDesktopActionsProps) {
const { t } = useTranslation();
const exportDisabled = actionsDisabled || policyEnforcing;
const closeLabel =
currentView === "fileEditor"
? t("workbenchBar.closeAll", "Close All")
: t("workbenchBar.closePdf", "Close PDF");
// Policy enforcement replaces the plain label with a "why is this blocked" card.
const tooltipFor = (label: string): React.ReactNode =>
policyEnforcing ? (
<PolicyEnforcingTooltip action={label} progress={enforcingProgress} />
) : (
label
);
return (
<>
{currentView === "viewer" &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={onPrint}
disabled={exportDisabled}
aria-label={t("workbenchBar.print", "Print PDF")}
>
<PrintIcon sx={{ fontSize: "1rem" }} />
</ActionIcon>,
tooltipFor(t("workbenchBar.print", "Print PDF")),
)}
{/* Download (file-level action — not relevant in custom views) */}
{!isCustomView &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={() => onExport()}
disabled={exportDisabled}
aria-label={downloadLabel}
>
<LocalIcon icon={downloadIconName} width="1rem" height="1rem" />
</ActionIcon>,
tooltipFor(downloadLabel),
)}
{!isCustomView &&
saveAsIconName &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={() => onExport(true)}
disabled={exportDisabled}
aria-label={t("workbenchBar.saveAs", "Save As")}
>
<LocalIcon icon={saveAsIconName} width="1rem" height="1rem" />
</ActionIcon>,
tooltipFor(t("workbenchBar.saveAs", "Save As")),
)}
{/* Separator: export group | close */}
{!isCustomView && (
<div className="workbench-bar-divider workbench-bar-globals-sep" />
)}
{/* Close (context-aware: close all / close viewer file / close page editor) */}
{!isCustomView &&
renderWithTooltip(
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
onClick={onClose}
disabled={actionsDisabled}
aria-label={closeLabel}
>
<CloseIcon sx={{ fontSize: "1rem" }} />
</ActionIcon>,
closeLabel,
)}
</>
);
}
frontend/editor/src/core/components/shared/workbenchBar/WorkbenchBarMobileActions.tsx
+94
View File
@@ -0,0 +1,94 @@
import { Menu } from "@mantine/core";
import { useTranslation } from "react-i18next";
import CloseIcon from "@mui/icons-material/Close";
import MoreVertIcon from "@mui/icons-material/MoreVert";
import PrintIcon from "@mui/icons-material/Print";
import { ActionIcon } from "@app/ui/ActionIcon";
import LocalIcon from "@app/components/shared/LocalIcon";
import { WorkbenchBarActionsProps } from "@app/components/shared/workbenchBar/types";
/**
* Mobile version of the workbench bar's global actions: the icon row won't fit
* on a phone, so print / export / save-as / close collapse into one overflow menu.
*/
export default function WorkbenchBarMobileActions({
currentView,
isCustomView,
actionsDisabled,
policyEnforcing,
downloadLabel,
downloadIconName,
saveAsIconName,
onPrint,
onExport,
onClose,
}: WorkbenchBarActionsProps) {
const { t } = useTranslation();
const exportDisabled = actionsDisabled || policyEnforcing;
return (
<Menu shadow="md" width={230} position="bottom-end">
<Menu.Target>
<ActionIcon
variant="tertiary"
hover={false}
className="workbench-bar-action-icon"
aria-label={t("workbenchBar.moreActions", "More actions")}
>
<MoreVertIcon sx={{ fontSize: "1.25rem" }} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
{currentView === "viewer" && (
<Menu.Item
leftSection={<PrintIcon sx={{ fontSize: "1.1rem" }} />}
disabled={exportDisabled}
onClick={onPrint}
>
{t("workbenchBar.print", "Print PDF")}
</Menu.Item>
)}
{!isCustomView && (
<Menu.Item
leftSection={
<LocalIcon
icon={downloadIconName}
width="1.1rem"
height="1.1rem"
/>
}
disabled={exportDisabled}
onClick={() => void onExport()}
>
{downloadLabel}
</Menu.Item>
)}
{!isCustomView && saveAsIconName && (
<Menu.Item
leftSection={
<LocalIcon icon={saveAsIconName} width="1.1rem" height="1.1rem" />
}
disabled={exportDisabled}
onClick={() => void onExport(true)}
>
{t("workbenchBar.saveAs", "Save As")}
</Menu.Item>
)}
{!isCustomView && (
<>
<Menu.Divider />
<Menu.Item
leftSection={<CloseIcon sx={{ fontSize: "1.1rem" }} />}
disabled={actionsDisabled}
onClick={() => void onClose()}
>
{currentView === "fileEditor"
? t("workbenchBar.closeAll", "Close All")
: t("workbenchBar.closePdf", "Close PDF")}
</Menu.Item>
</>
)}
</Menu.Dropdown>
</Menu>
);
}
frontend/editor/src/core/components/shared/workbenchBar/WorkbenchBarToolbarHandle.tsx
+67
View File
@@ -0,0 +1,67 @@
import { useTranslation } from "react-i18next";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { Button } from "@app/ui/Button";
interface WorkbenchBarToolbarHandleProps {
isMobile: boolean;
/** Mobile only: whether the tool row is showing every tool rather than scrolling. */
expanded: boolean;
onToggleExpanded: () => void;
/** Desktop viewer only: retracts the whole tool row. Omit to render no handle. */
onRetract?: () => void;
}
/**
* Handle pinned to the right of the tool row. On mobile it expands the row from
* a single scrolling line to a wrapped grid; on the desktop viewer it retracts
* the row entirely.
*/
export default function WorkbenchBarToolbarHandle({
isMobile,
expanded,
onToggleExpanded,
onRetract,
}: WorkbenchBarToolbarHandleProps) {
const { t } = useTranslation();
if (isMobile) {
return (
<Button
type="button"
variant="quiet"
size="lg"
className="workbench-bar-toolbar-handle workbench-bar-toolbar-handle-expand"
onClick={onToggleExpanded}
aria-expanded={expanded}
aria-label={
expanded
? t("workbenchBar.showFewerTools", "Collapse toolbar")
: t("workbenchBar.showAllTools", "Show all tools")
}
leftSection={
expanded ? (
<KeyboardArrowUpIcon sx={{ fontSize: "1.25rem" }} />
) : (
<KeyboardArrowDownIcon sx={{ fontSize: "1.25rem" }} />
)
}
/>
);
}
if (!onRetract) return null;
return (
<Button
type="button"
variant="quiet"
className="workbench-bar-toolbar-handle workbench-bar-toolbar-handle-retract"
onClick={onRetract}
aria-expanded
aria-label={t("workbenchBar.hideToolbar", "Hide toolbar")}
title={t("workbenchBar.hideToolbar", "Hide toolbar")}
leftSection={<KeyboardArrowUpIcon sx={{ fontSize: "1rem" }} />}
/>
);
}
frontend/editor/src/core/components/shared/workbenchBar/types.ts
+20
View File
@@ -0,0 +1,20 @@
import { WorkbenchType } from "@app/types/workbench";
/** Shared shape for the workbench bar's file-level global actions (print,
* export, save-as, close) so the mobile and desktop clusters stay in step. */
export interface WorkbenchBarActionsProps {
currentView: WorkbenchType;
/** Custom workbench views own their content, so file actions don't apply. */
isCustomView: boolean;
/** No files to act on, or the bar is globally locked out. */
actionsDisabled: boolean;
/** A policy run is enforcing on a file the export would touch. */
policyEnforcing: boolean;
/** Context-aware label for the download/export action. */
downloadLabel: string;
downloadIconName: string;
saveAsIconName?: string;
onPrint: () => void;
onExport: (forceNewFile?: boolean) => void;
onClose: () => void;
}
frontend/editor/src/core/components/shared/workbenchBar/workbenchBarTooltip.tsx
+66
View File
@@ -0,0 +1,66 @@
import React from "react";
import { Group, Loader, Progress, Stack, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";
import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
import { Tooltip } from "@app/components/shared/Tooltip";
/** Wrap a bar control in the bar's standard tooltip, or pass it through when
* the caller has no tooltip to show. */
export function renderWithTooltip(
node: React.ReactNode,
tooltip: React.ReactNode | undefined,
) {
if (!tooltip) return node;
return (
<Tooltip
content={tooltip}
position="bottom"
offset={6}
arrow
portalTarget={typeof document !== "undefined" ? document.body : undefined}
>
<div className="workbench-bar-tooltip-wrapper">{node}</div>
</Tooltip>
);
}
interface PolicyEnforcingTooltipProps {
/** The blocked action's label, e.g. "Print PDF". */
action: string;
/** Percentage through the enforcing run, when the run reports steps. */
progress?: number;
}
/** Tooltip body explaining that a file action is blocked by a policy run. */
export function PolicyEnforcingTooltip({
action,
progress,
}: PolicyEnforcingTooltipProps) {
const { t } = useTranslation();
return (
<Stack gap={6} py={2} w={200}>
<Group gap={6} wrap="nowrap">
<ShieldOutlinedIcon style={{ fontSize: 13 }} />
<Text size="xs" fw={600}>
{t(
"policy.blockingAction",
"{{action}} blocked while enforcing policy, please wait",
{ action },
)}
</Text>
</Group>
{progress != null ? (
<Progress
w="100%"
size="xs"
radius="xl"
value={progress}
striped
animated
/>
) : (
<Loader size="xs" />
)}
</Stack>
);
}
frontend/editor/src/core/components/tools/RightSidebar.tsx
+5 -2
View File
@@ -237,7 +237,10 @@ export default function RightSidebar() {
: t("toolPanel.goBack", "Go back")
}
/>
) : (
) : showCloseButton || !isMobile ? (
/* Without a back button this header is just the collapse control,
which has no meaning on mobile - the slider switches panes. Drop
it there so the tool list starts under the tabs. */
<div className="tool-panel__compact-header">
<span className="tool-panel__compact-title">
{t("toolPanel.pdfTools", "PDF Tools")}
@@ -272,7 +275,7 @@ export default function RightSidebar() {
)}
</div>
</div>
)}
) : null}
<ToolPanel
allToolsView={allToolsView}
frontend/editor/src/core/components/tools/ToolPanel.css
+14
View File
@@ -169,6 +169,20 @@
color: var(--c-text);
}
/* On mobile the "Tools" tab sits directly above this panel, so the heading
just repeats it. The header stays for its actions, but shrinks to fit them -
at the desktop 52px it would read as an empty band once the title is gone. */
@media (max-width: 64rem) {
.tool-panel__compact-title {
display: none;
}
.tool-panel__compact-header {
min-height: 44px;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
}
.tool-panel__compact-header-actions {
display: flex;
align-items: center;
frontend/editor/src/core/components/viewer/NonPdfViewer.tsx
+12 -7
View File
@@ -1,4 +1,4 @@
import { useCallback, useMemo } from "react";
import React, { useCallback, useMemo } from "react";
import { Box, Center, Stack, Text } from "@mantine/core";
import { Button } from "@app/ui/Button";
import ArticleIcon from "@mui/icons-material/Article";
@@ -99,12 +99,17 @@ export function NonPdfViewer({ file }: NonPdfViewerProps) {
return (
<Stack
gap={0}
style={{
height: "100%",
flex: 1,
overflow: "hidden",
position: "relative",
}}
style={
{
height: "100%",
flex: 1,
overflow: "hidden",
position: "relative",
// The Convert button floats over the content; viewers that draw their
// own top bar read this to keep their text clear of it.
"--nonpdf-action-inset": isConvertAvailable ? "11rem" : "0rem",
} as React.CSSProperties
}
>
<NonPdfBanner
onConvertToPdf={isConvertAvailable ? handleConvertToPdf : undefined}
frontend/editor/src/core/components/viewer/nonpdf/HtmlViewer.tsx
+59 -15
View File
@@ -1,7 +1,9 @@
import { useEffect, useState } from "react";
import { Box, Paper, Text } from "@mantine/core";
import { Box, Center, Group, Paper, Stack, Text } from "@mantine/core";
import { useTranslation } from "react-i18next";
import { Button } from "@app/ui/Button";
import { useIsMobile } from "@app/hooks/useIsMobile";
import { formatFileSize } from "@app/utils/fileUtils";
interface HtmlViewerProps {
@@ -10,37 +12,79 @@ interface HtmlViewerProps {
export function HtmlViewer({ file }: HtmlViewerProps) {
const { t } = useTranslation();
const isMobile = useIsMobile();
const [objectUrl, setObjectUrl] = useState<string | null>(null);
// Phones render a desktop-width document into ~400px, which reads as a blank
// column, so the iframe is opt-in there. Derived rather than seeded into
// state because useIsMobile resolves after first paint.
const [optedIn, setOptedIn] = useState(false);
const showPreview = !isMobile || optedIn;
useEffect(() => {
if (!showPreview) return;
const url = URL.createObjectURL(file);
setObjectUrl(url);
return () => URL.revokeObjectURL(url);
}, [file]);
}, [file, showPreview]);
return (
<Box style={{ flex: 1, display: "flex", flexDirection: "column" }}>
<Paper
radius={0}
p="xs"
style={{
borderBottom: "1px solid var(--mantine-color-gray-2)",
flexShrink: 0,
// Padding set here rather than via `p`, whose shorthand would reset
// the right inset below. NonPdfViewer floats its "Convert to PDF"
// button over this row, so keep the notice clear of it instead of
// running underneath.
padding: "0.5rem",
paddingRight: "max(0.5rem, var(--nonpdf-action-inset, 0rem))",
}}
>
<Text size="xs" c="dimmed">
{t("viewer.nonPdf.htmlPreviewWarning", {
size: formatFileSize(file.size),
})}
</Text>
<Group gap="xs" wrap="nowrap" align="center">
<Text size="xs" c="dimmed" style={{ minWidth: 0, flex: 1 }}>
{t("viewer.nonPdf.htmlPreviewWarning", {
size: formatFileSize(file.size),
})}
</Text>
{/* Opting in used to be one-way: the only way back was closing and
reopening the file. */}
{isMobile && optedIn && (
<Button
variant="tertiary"
size="sm"
onClick={() => setOptedIn(false)}
style={{ flexShrink: 0 }}
>
{t("viewer.nonPdf.htmlHidePreview", "Hide preview")}
</Button>
)}
</Group>
</Paper>
{objectUrl && (
<iframe
src={objectUrl}
title={t("viewer.nonPdf.htmlPreview")}
sandbox="allow-scripts"
style={{ flex: 1, border: "none", background: "#fff" }}
/>
{showPreview ? (
objectUrl && (
<iframe
src={objectUrl}
title={t("viewer.nonPdf.htmlPreview")}
sandbox="allow-scripts"
style={{ flex: 1, border: "none", background: "#fff" }}
/>
)
) : (
<Center style={{ flex: 1, padding: "1.5rem" }}>
<Stack align="center" gap="sm" style={{ maxWidth: "22rem" }}>
<Text size="sm" c="dimmed" ta="center">
{t(
"viewer.nonPdf.htmlPreviewMobileHidden",
"HTML pages are laid out for desktop widths, so the preview is off by default here.",
)}
</Text>
<Button variant="secondary" onClick={() => setOptedIn(true)}>
{t("viewer.nonPdf.htmlShowPreview", "Show preview anyway")}
</Button>
</Stack>
</Center>
)}
</Box>
);
frontend/editor/src/core/pages/HomePage.css
+50 -10
View File
@@ -10,16 +10,9 @@
padding: 0.5rem 0.75rem;
border-bottom: 1px solid var(--c-border-subtle);
background: var(--c-bg-raised);
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.mobile-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
gap: 0.75rem;
}
.mobile-brand {
@@ -27,6 +20,7 @@
align-items: center;
gap: 0.5rem;
min-width: 0;
flex-shrink: 0;
}
.mobile-brand-icon {
@@ -49,6 +43,14 @@
border-radius: 9999px;
background: var(--c-bg);
border: 1px solid var(--c-border-subtle);
flex: 1;
min-width: 0;
}
@media (max-width: 25rem) {
.mobile-brand-text {
display: none;
}
}
.mobile-toggle-button {
@@ -74,10 +76,46 @@
color: var(--c-text);
}
.mobile-toggle-hint {
.mobile-slider-wrap {
position: relative;
display: flex;
flex: 1 1 auto;
min-height: 0;
width: 100%;
}
.mobile-swipe-hint {
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.35rem 0.85rem;
border-radius: 9999px;
background: color-mix(in srgb, var(--c-bg-raised) 88%, transparent);
border: 1px solid var(--c-border-subtle);
font-size: 0.7rem;
color: var(--c-text-subtle);
text-align: center;
white-space: nowrap;
pointer-events: none;
z-index: 20;
animation: mobile-swipe-hint-in 0.4s ease 1s both;
}
@keyframes mobile-swipe-hint-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(-0.25rem);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.mobile-swipe-hint {
animation: none;
}
}
.mobile-slider {
@@ -134,6 +172,7 @@
align-items: center;
justify-content: space-around;
padding: 0.5rem;
padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
border-top: 1px solid var(--c-border-subtle);
background: var(--c-bg-raised);
gap: 0.5rem;
@@ -177,4 +216,5 @@
font-size: 0.75rem;
font-weight: 500;
color: var(--c-text-subtle);
margin-inline-start: 0.25rem;
}
frontend/editor/src/core/pages/HomePage.tsx
+93 -46
View File
@@ -43,6 +43,15 @@ import { Button } from "@app/ui/Button";
import "@app/pages/HomePage.css";
const SIDEBAR_COLLAPSED_STORAGE_KEY = "stirling.fileSidebarCollapsed";
const SWIPE_HINT_SEEN_STORAGE_KEY = "stirling.mobileSwipeHintSeen";
function readSwipeHintSeen(): boolean {
try {
return window.localStorage.getItem(SWIPE_HINT_SEEN_STORAGE_KEY) === "true";
} catch {
return true;
}
}
function readPersistedSidebarCollapsed(): boolean {
try {
@@ -181,6 +190,9 @@ export default function HomePage() {
if (typeof action.activeFileIndex === "number") {
setActiveFileIndex(action.activeFileIndex);
}
if (isMobile) {
setActiveMobileView("workbench");
}
}
prevFileCountRef.current = currentCount;
@@ -190,6 +202,7 @@ export default function HomePage() {
setActiveFileIndex,
selectedToolKey,
navigationState.workbench,
isMobile,
]);
const hideToolPanel =
@@ -201,10 +214,44 @@ export default function HomePage() {
const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
const handleSelectMobileView = useCallback((view: MobileView) => {
setActiveMobileView(view);
const [showSwipeHint, setShowSwipeHint] = useState(
() => !readSwipeHintSeen(),
);
const dismissSwipeHint = useCallback(() => {
setShowSwipeHint((shown) => {
if (shown) {
try {
window.localStorage.setItem(SWIPE_HINT_SEEN_STORAGE_KEY, "true");
} catch {
// private mode / quota: silently no-op
}
}
return false;
});
}, []);
useEffect(() => {
if (!isMobile || !isTouch || !showSwipeHint) return;
const timer = window.setTimeout(dismissSwipeHint, 8000);
return () => window.clearTimeout(timer);
}, [isMobile, isTouch, showSwipeHint, dismissSwipeHint]);
const handleSelectMobileView = useCallback(
(view: MobileView) => {
setActiveMobileView(view);
dismissSwipeHint();
},
[dismissSwipeHint],
);
// The /files URL pins the workbench to myFiles, so changing view while the
// file manager is open does nothing until we navigate off it. Desktop leaves
// via the sidebar's back arrow; mobile renders no sidebar, so without this the
// bottom bar could not get out of My Files at all.
const leaveMyFiles = useCallback(() => {
if (navigationState.workbench === "myFiles") navigate(EDITOR_BASENAME);
}, [navigationState.workbench, navigate]);
useEffect(() => {
if (isMobile) {
const container = sliderRef.current;
@@ -250,9 +297,10 @@ export default function HomePage() {
const threshold = offsetWidth / 2;
const nextView: MobileView =
scrollLeft >= threshold ? "workbench" : "tools";
setActiveMobileView((current) =>
current === nextView ? current : nextView,
);
setActiveMobileView((current) => {
if (current !== nextView) dismissSwipeHint();
return current === nextView ? current : nextView;
});
});
};
@@ -264,7 +312,7 @@ export default function HomePage() {
cancelAnimationFrame(animationFrame);
}
};
}, [isMobile]);
}, [isMobile, dismissSwipeHint]);
// Automatically switch to workbench when read mode or multiTool is activated in mobile
useEffect(() => {
@@ -331,14 +379,9 @@ export default function HomePage() {
other route. */}
{navigationState.workbench !== "myFiles" && (
<div className="mobile-toggle">
<div className="mobile-header">
<div className="mobile-brand">
<LogoIcon className="mobile-brand-icon" />
<Wordmark
alt={brandAltText}
className="mobile-brand-text"
/>
</div>
<div className="mobile-brand">
<LogoIcon className="mobile-brand-icon" />
<Wordmark alt={brandAltText} className="mobile-brand-text" />
</div>
<div
className="mobile-toggle-buttons"
@@ -367,14 +410,6 @@ export default function HomePage() {
{t("home.mobile.workspace", "Workspace")}
</button>
</div>
{isTouch && (
<span className="mobile-toggle-hint">
{t(
"home.mobile.swipeHint",
"Swipe left or right to switch views",
)}
</span>
)}
</div>
)}
{navigationState.workbench === "myFiles" ? (
@@ -388,34 +423,44 @@ export default function HomePage() {
</div>
</div>
) : (
<div ref={sliderRef} className="mobile-slider">
<div
className="mobile-slide"
aria-label={t(
"home.mobile.toolsSlide",
"Tool selection panel",
)}
>
<div className="mobile-slide-content">
<RightSidebar />
<div className="mobile-slider-wrap">
<div ref={sliderRef} className="mobile-slider">
<div
className="mobile-slide"
aria-label={t(
"home.mobile.toolsSlide",
"Tool selection panel",
)}
>
<div className="mobile-slide-content">
<RightSidebar />
</div>
</div>
</div>
<div
className="mobile-slide"
aria-label={t(
"home.mobile.workbenchSlide",
"Workspace panel",
)}
>
<div className="mobile-slide-content">
<div
className="flex-1 min-h-0 flex"
style={{ minWidth: 0 }}
>
<Workbench />
<div
className="mobile-slide"
aria-label={t(
"home.mobile.workbenchSlide",
"Workspace panel",
)}
>
<div className="mobile-slide-content">
<div
className="flex-1 min-h-0 flex"
style={{ minWidth: 0 }}
>
<Workbench />
</div>
</div>
</div>
</div>
{isTouch && showSwipeHint && (
<span className="mobile-swipe-hint" aria-hidden="true">
{t(
"home.mobile.swipeHint",
"Swipe left or right to switch views",
)}
</span>
)}
</div>
)}
<div className="mobile-bottom-bar">
@@ -424,6 +469,7 @@ export default function HomePage() {
className="mobile-bottom-button"
aria-label={t("quickAccess.allTools", "Tools")}
onClick={() => {
leaveMyFiles();
handleBackToTools();
if (isMobile) {
setActiveMobileView("tools");
@@ -441,6 +487,7 @@ export default function HomePage() {
className="mobile-bottom-button"
aria-label={t("quickAccess.automate", "Automate")}
onClick={() => {
leaveMyFiles();
handleToolSelect("automate");
if (isMobile) {
setActiveMobileView("tools");
frontend/editor/src/core/tests/stubbed/files-page.spec.ts
+4 -1
View File
@@ -471,7 +471,10 @@ test.describe("Files page", () => {
.locator(".files-page-card:not(.is-folder)")
.filter({ hasText: "phone-a.pdf" })
.click();
await page.getByRole("button", { name: /Show details/i }).click();
// On a phone a selection swaps the toolbar for a contextual bar, so the
// bulk actions - Show details among them - live behind one trigger.
await page.locator(".files-page-toolbar-bulk-trigger").click();
await page.getByRole("menuitem", { name: /Show details/i }).click();
// Drawer opens, file name shown inside it.
await expect(page.locator(".mantine-Drawer-content")).toBeVisible({
timeout: 3_000,
frontend/editor/src/desktop/components/shared/config/configSections/GeneralSection.tsx
+9 -1
View File
@@ -11,6 +11,11 @@ import {
type UpdateModeInfo,
} from "@app/services/desktopUpdateService";
interface GeneralSectionProps {
/** Forwarded to the core section; the settings modal header already names it. */
hideTitle?: boolean;
}
/**
* Desktop extension of GeneralSection.
*
@@ -20,7 +25,9 @@ import {
* still rendered but disabled, with a "Managed by administrator" hint, so
* managed-deployment users can see what policy is in effect.
*/
const GeneralSection: React.FC = () => {
const GeneralSection: React.FC<GeneralSectionProps> = ({
hideTitle = false,
}) => {
const { t } = useTranslation();
const install = useDesktopInstall();
// In SaaS connection mode the cloud owns app versioning — hide the update
@@ -96,6 +103,7 @@ const GeneralSection: React.FC = () => {
</Alert>
)}
<CoreGeneralSection
hideTitle={hideTitle}
hideUpdateSection={
isSaaSMode ||
(updateModeInfo.mode === "disabled" && updateModeInfo.locked)
frontend/editor/src/proprietary/components/shared/config/LoginLandingSetting.tsx
+1
View File
@@ -42,6 +42,7 @@ export function LoginLandingSetting() {
return (
<Paper withBorder p="md" radius="md">
<div
id="setting-login-landing"
style={{
display: "flex",
alignItems: "center",
frontend/editor/src/proprietary/components/shared/config/configNavSections.tsx
+1 -1
View File
@@ -57,7 +57,7 @@ export const useConfigNavSections = (
if (preferencesSection) {
preferencesSection.items = preferencesSection.items.map((item) =>
item.key === "general"
? { ...item, component: <GeneralWithLoginLanding /> }
? { ...item, component: <GeneralWithLoginLanding hideTitle /> }
: item,
);
frontend/editor/src/saas/components/shared/AppConfigModal.tsx
+76 -38
View File
@@ -1,13 +1,16 @@
import React, { useCallback, useMemo, useState, useEffect } from "react";
import { Modal, Text } from "@mantine/core";
import { Group, Modal, Text } from "@mantine/core";
import { Button } from "@app/ui/Button";
import { ActionIcon } from "@app/ui/ActionIcon";
import { useMediaQuery } from "@mantine/hooks";
import { useIsMobile } from "@app/hooks/useIsMobile";
import { useLocation } from "react-router-dom";
import { useAuth } from "@app/auth/UseSession";
import { isUserAnonymous } from "@app/auth/supabase";
import { useTranslation } from "react-i18next";
import LocalIcon from "@app/components/shared/LocalIcon";
import { SettingsMobileBackButton } from "@app/components/shared/config/SettingsMobileBackButton";
import { SettingsMobileNavHeader } from "@app/components/shared/config/SettingsMobileNavHeader";
import { SettingsNavChevron } from "@app/components/shared/config/SettingsNavChevron";
import Overview from "@app/components/shared/config/configSections/Overview";
import { createSaasConfigNavSections } from "@app/components/shared/config/saasConfigNavSections";
import { consumePendingSettingsNav } from "@app/utils/appSettings";
@@ -46,12 +49,13 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
extraSections,
hiddenSectionKeys,
}) => {
const isMobile = useMediaQuery("(max-width: 1024px)");
const isMobile = useIsMobile();
const { signOut, user } = useAuth();
const { t } = useTranslation();
const [confirmOpen, setConfirmOpen] = useState(false);
const [active, setActive] = useState<NavKey>("overview");
const [mobilePane, setMobilePane] = useState<"nav" | "content">("nav");
const [notice, setNotice] = useState<string | null>(null);
const location = useLocation();
@@ -60,7 +64,10 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
// Consume any section stashed by openAppSettings on mount to land on it.
useEffect(() => {
const pending = consumePendingSettingsNav();
if (pending) setActive(pending);
if (pending) {
setActive(pending);
setMobilePane("content");
}
}, []);
// Check if user can access billing features (non-anonymous users only)
@@ -70,6 +77,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
const detail = (ev as CustomEvent).detail as { key?: NavKey } | undefined;
if (detail?.key) {
setActive(detail.key);
setMobilePane("content");
}
};
window.addEventListener("appConfig:navigate", handler as EventListener);
@@ -90,6 +98,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
if (!opened) return;
if (initialSection) {
setActive(initialSection);
setMobilePane("content");
return;
}
const match = stripBasePath(location.pathname).match(
@@ -97,6 +106,9 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
);
if (match) {
setActive(match[1] as NavKey);
setMobilePane("content");
} else {
setMobilePane("nav");
}
}, [opened, initialSection, location.pathname]);
@@ -225,34 +237,43 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
className={`modal-nav ${isMobile ? "mobile" : ""}`}
style={{
background: colors.navBg,
borderRight: `1px solid ${colors.headerBorder}`,
...(isMobile
? { display: mobilePane === "nav" ? undefined : "none" }
: { borderRight: `1px solid ${colors.headerBorder}` }),
}}
>
<SettingsMobileNavHeader
show={isMobile}
onClose={onClose}
background={colors.navBg}
borderColor={colors.headerBorder}
/>
<div className="modal-nav-scroll">
{configNavSections.map((section) => (
<div key={section.title} className="modal-nav-section">
{!isMobile && (
<Text
size="xs"
fw={600}
c={colors.sectionTitle}
style={{ textTransform: "uppercase", letterSpacing: 0.4 }}
>
{section.title}
</Text>
)}
<Text
size="xs"
fw={600}
c={colors.sectionTitle}
style={{ textTransform: "uppercase", letterSpacing: 0.4 }}
>
{section.title}
</Text>
<div className="modal-nav-section-items">
{section.items.map((item) => {
const isActive = active === item.key;
const color = isActive
? colors.navItemActive
: colors.navItem;
const iconSize = isMobile ? 28 : 18;
const iconSize = 18;
return (
<div
key={item.key}
data-tour={`admin-${item.key}-nav`}
onClick={() => setActive(item.key)}
onClick={() => {
setActive(item.key);
setMobilePane("content");
}}
className={`modal-nav-item ${isMobile ? "mobile" : ""}`}
style={{
background: isActive
@@ -264,13 +285,17 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
icon={item.icon}
width={iconSize}
height={iconSize}
style={{ color }}
style={{ color, flexShrink: 0 }}
/>
{!isMobile && (
<Text size="sm" fw={500} style={{ color }}>
{item.label}
</Text>
)}
<Text
size="sm"
fw={500}
truncate
style={{ color, minWidth: 0, flex: 1 }}
>
{item.label}
</Text>
<SettingsNavChevron show={isMobile} />
</div>
);
})}
@@ -281,7 +306,14 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
</div>
{/* Right content */}
<div className="modal-content">
<div
className="modal-content"
style={
isMobile && mobilePane !== "content"
? { display: "none" }
: undefined
}
>
<div className="modal-content-scroll">
{/* Sticky header with section title and small close button */}
<div
@@ -291,20 +323,26 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({
borderBottom: `1px solid ${colors.headerBorder}`,
}}
>
<Text fw={700} size="lg">
{activeLabel}
{active === "plan" && notice ? (
<span
style={{
marginLeft: 8,
fontWeight: 600,
color: "var(--mantine-color-yellow-7)",
}}
>
– {notice}
</span>
) : null}
</Text>
<Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
<SettingsMobileBackButton
show={isMobile}
onClick={() => setMobilePane("nav")}
/>
<Text fw={700} size="lg" truncate>
{activeLabel}
{active === "plan" && notice ? (
<span
style={{
marginLeft: 8,
fontWeight: 600,
color: "var(--mantine-color-yellow-7)",
}}
>
– {notice}
</span>
) : null}
</Text>
</Group>
<ActionIcon
variant="tertiary"
onClick={onClose}