diff --git a/packages/db/migrations/custom/0002_app_widget_show_description_tooltip_to_display_mode.ts b/packages/db/migrations/custom/0002_app_widget_show_description_tooltip_to_display_mode.ts new file mode 100644 index 000000000..6934878a2 --- /dev/null +++ b/packages/db/migrations/custom/0002_app_widget_show_description_tooltip_to_display_mode.ts @@ -0,0 +1,43 @@ +import SuperJSON from "superjson"; + +import { eq } from "../.."; +import type { Database } from "../.."; +import { items } from "../../schema"; + +/** + * To support showing the description in the widget itself we replaced + * the tooltip show option with display mode. + */ +export async function migrateAppWidgetShowDescriptionTooltipToDisplayModeAsync(db: Database) { + const existingAppItems = await db.query.items.findMany({ + where: (table, { eq }) => eq(table.kind, "app"), + }); + + const itemsToUpdate = existingAppItems + .map((item) => ({ + id: item.id, + options: SuperJSON.parse<{ showDescriptionTooltip?: boolean }>(item.options), + })) + .filter((item) => item.options.showDescriptionTooltip !== undefined); + + console.log( + `Migrating app items with showDescriptionTooltip to descriptionDisplayMode count=${itemsToUpdate.length}`, + ); + + await Promise.all( + itemsToUpdate.map(async (item) => { + const { showDescriptionTooltip, ...options } = item.options; + await db + .update(items) + .set({ + options: SuperJSON.stringify({ + ...options, + descriptionDisplayMode: showDescriptionTooltip ? "tooltip" : "hidden", + }), + }) + .where(eq(items.id, item.id)); + }), + ); + + console.log(`Migrated app items with showDescriptionTooltip to descriptionDisplayMode count=${itemsToUpdate.length}`); +} diff --git a/packages/db/migrations/custom/index.ts b/packages/db/migrations/custom/index.ts index 03a48cbbd..a6a002733 100644 --- a/packages/db/migrations/custom/index.ts +++ b/packages/db/migrations/custom/index.ts @@ -1,8 +1,10 @@ import type { Database } from "../.."; import { migrateReleaseWidgetProviderToOptionsAsync } from "./0000_release_widget_provider_to_options"; import { migrateOpnsenseCredentialsAsync } from "./0001_opnsense_credentials"; +import { migrateAppWidgetShowDescriptionTooltipToDisplayModeAsync } from "./0002_app_widget_show_description_tooltip_to_display_mode"; export const applyCustomMigrationsAsync = async (db: Database) => { await migrateReleaseWidgetProviderToOptionsAsync(db); await migrateOpnsenseCredentialsAsync(db); + await migrateAppWidgetShowDescriptionTooltipToDisplayModeAsync(db); }; diff --git a/packages/old-import/src/mappers/map-item.ts b/packages/old-import/src/mappers/map-item.ts index b31344925..f4c471728 100644 --- a/packages/old-import/src/mappers/map-item.ts +++ b/packages/old-import/src/mappers/map-item.ts @@ -37,9 +37,9 @@ export const mapApp = ( appId: appsMap.get(app.id)?.id!, openInNewTab: app.behaviour.isOpeningNewTab, pingEnabled: app.network.enabledStatusChecker, - showDescriptionTooltip: app.behaviour.tooltipDescription !== "", showTitle: app.appearance.appNameStatus === "normal", layout: app.appearance.positionAppName, + descriptionDisplayMode: app.behaviour.tooltipDescription !== "" ? "tooltip" : "hidden", } satisfies WidgetComponentProps<"app">["options"]), layouts: boardSizes.map((size) => { const shapeForSize = app.shape[size]; diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index e360b8446..cfd2eabb3 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -1266,9 +1266,6 @@ "showTitle": { "label": "Show app name" }, - "showDescriptionTooltip": { - "label": "Show description tooltip" - }, "pingEnabled": { "label": "Enable status check" }, @@ -1280,6 +1277,15 @@ "column": "Vertical", "column-reverse": "Vertical (reversed)" } + }, + "descriptionDisplayMode": { + "label": "Description display mode", + "description": "Choose how to display the app description", + "option": { + "normal": "Within widget", + "tooltip": "As tooltip", + "hidden": "Hidden" + } } }, "error": { diff --git a/packages/widgets/src/app/component.tsx b/packages/widgets/src/app/component.tsx index 2ad1a27fc..8511eb7b0 100644 --- a/packages/widgets/src/app/component.tsx +++ b/packages/widgets/src/app/component.tsx @@ -2,7 +2,7 @@ import type { PropsWithChildren } from "react"; import { Fragment, Suspense } from "react"; -import { Flex, Text, Tooltip, UnstyledButton } from "@mantine/core"; +import { Flex, rem, Stack, Text, Tooltip, UnstyledButton } from "@mantine/core"; import { IconLoader } from "@tabler/icons-react"; import combineClasses from "clsx"; @@ -74,7 +74,7 @@ export default function AppWidget({ options, isEditMode, height, width }: Widget ))} position="right-start" multiline - disabled={!options.showDescriptionTooltip || !app.description} + disabled={options.descriptionDisplayMode !== "tooltip" || !app.description || isEditMode} styles={{ tooltip: { maxWidth: 300 } }} > - {options.showTitle && ( - - {app.name} - - )} + + {options.showTitle && ( + + {app.name} + + )} + {options.descriptionDisplayMode === "normal" && ( + + {app.description?.split("\n").map((line, index) => ( + + {line} +
+
+ ))} +
+ )} +