feat: add bookmark widget (#964)

* feat: add bookmark widget

* fix: item component type issue, widget-ordered-object-list-input item component issue

* feat: add button in items list

* wip

* wip: bookmark options dnd

* wip: improve widget sortable item list

* feat: add sortable item list input to widget edit modal

* feat: implement bookmark widget

* chore: address pull request feedback

* fix: format issues

* fix: lockfile not up to date

* fix: import configuration missing and apps not imported

* fix: bookmark items not sorted

* feat: add flex layouts to bookmark widget

* fix: deepsource issue

* fix: add missing layout bookmarks old-import options mapping

---------

Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/old-import/src/import-apps.ts

@@ -1,49 +1,57 @@
 import { createId, inArray } from "@homarr/db";
-import type { Database, InferInsertModel } from "@homarr/db";
+import type { Database, InferInsertModel, InferSelectModel } from "@homarr/db";
 import { apps as appsTable } from "@homarr/db/schema/sqlite";
 import { logger } from "@homarr/log";
 import type { OldmarrApp } from "@homarr/old-schema";
 
+import type { BookmarkApp } from "./widgets/definitions/bookmark";
+
+type DbAppWithoutId = Omit<InferSelectModel<typeof appsTable>, "id">;
+
+interface AppMapping extends DbAppWithoutId {
+  ids: string[];
+  newId: string;
+  exists: boolean;
+}
+
 export const insertAppsAsync = async (
   db: Database,
   apps: OldmarrApp[],
+  bookmarkApps: BookmarkApp[],
   distinctAppsByHref: boolean,
   configName: string,
 ) => {
   logger.info(
     `Importing old homarr apps configuration=${configName} distinctAppsByHref=${distinctAppsByHref} apps=${apps.length}`,
   );
+
   const existingAppsWithHref = distinctAppsByHref
     ? await db.query.apps.findMany({
-        where: inArray(appsTable.href, [...new Set(apps.map((app) => app.url))]),
+        where: inArray(appsTable.href, [
+          ...new Set(apps.map((app) => app.url).concat(bookmarkApps.map((app) => app.href))),
+        ]),
       })
     : [];
 
   logger.debug(`Found existing apps with href count=${existingAppsWithHref.length}`);
 
-  const mappedApps = apps.map((app) => ({
-    // Use id of existing app when it has the same href and distinctAppsByHref is true
-    newId: distinctAppsByHref
-      ? (existingAppsWithHref.find(
-          (existingApp) =>
-            existingApp.href === (app.behaviour.externalUrl === "" ? app.url : app.behaviour.externalUrl) &&
-            existingApp.name === app.name &&
-            existingApp.iconUrl === app.appearance.iconUrl,
-        )?.id ?? createId())
-      : createId(),
-    ...app,
-  }));
+  // Generate mappings for all apps from old to new ids
+  const appMappings: AppMapping[] = [];
+  addMappingFor(apps, appMappings, existingAppsWithHref, convertApp);
+  addMappingFor(bookmarkApps, appMappings, existingAppsWithHref, convertBookmarkApp);
 
-  const appsToCreate = mappedApps
-    .filter((app) => !existingAppsWithHref.some((existingApp) => existingApp.id === app.newId))
+  logger.debug(`Mapping apps count=${appMappings.length}`);
+
+  const appsToCreate = appMappings
+    .filter((app) => !app.exists)
     .map(
       (app) =>
         ({
           id: app.newId,
           name: app.name,
-          iconUrl: app.appearance.iconUrl,
-          href: app.behaviour.externalUrl === "" ? app.url : app.behaviour.externalUrl,
-          description: app.behaviour.tooltipDescription,
+          iconUrl: app.iconUrl,
+          href: app.href,
+          description: app.description,
         }) satisfies InferInsertModel<typeof appsTable>,
     );
 
@@ -55,5 +63,95 @@ export const insertAppsAsync = async (
 
   logger.info(`Imported apps count=${appsToCreate.length}`);
 
-  return mappedApps;
+  // Generates a map from old key to new key for all apps
+  return new Map(
+    appMappings
+      .map((app) => app.ids.map((id) => ({ id, newId: app.newId })))
+      .flat()
+      .map(({ id, newId }) => [id, newId]),
+  );
 };
+
+/**
+ * Creates a callback to be used in a find method that compares the old app with the new app
+ * @param app either an oldmarr app or a bookmark app
+ * @param convertApp a function that converts the app to a new app
+ * @returns a callback that compares the old app with the new app and returns true if they are the same
+ */
+const createFindCallback = <TApp extends OldmarrApp | BookmarkApp>(
+  app: TApp,
+  convertApp: (app: TApp) => DbAppWithoutId,
+) => {
+  const oldApp = convertApp(app);
+
+  return (dbApp: DbAppWithoutId) =>
+    oldApp.href === dbApp.href &&
+    oldApp.name === dbApp.name &&
+    oldApp.iconUrl === dbApp.iconUrl &&
+    oldApp.description === dbApp.description;
+};
+
+/**
+ * Adds mappings for the given apps to the appMappings array
+ * @param apps apps to add mappings for
+ * @param appMappings existing app mappings
+ * @param existingAppsWithHref existing apps with href
+ * @param convertApp a function that converts the app to a new app
+ */
+const addMappingFor = <TApp extends OldmarrApp | BookmarkApp>(
+  apps: TApp[],
+  appMappings: AppMapping[],
+  existingAppsWithHref: InferSelectModel<typeof appsTable>[],
+  convertApp: (app: TApp) => DbAppWithoutId,
+) => {
+  for (const app of apps) {
+    const previous = appMappings.find(createFindCallback(app, convertApp));
+    if (previous) {
+      previous.ids.push(app.id);
+      continue;
+    }
+
+    const existing = existingAppsWithHref.find(createFindCallback(app, convertApp));
+    if (existing) {
+      appMappings.push({
+        ids: [app.id],
+        newId: existing.id,
+        name: existing.name,
+        href: existing.href,
+        iconUrl: existing.iconUrl,
+        description: existing.description,
+        exists: true,
+      });
+      continue;
+    }
+
+    appMappings.push({
+      ids: [app.id],
+      newId: createId(),
+      ...convertApp(app),
+      exists: false,
+    });
+  }
+};
+
+/**
+ * Converts an oldmarr app to a new app
+ * @param app oldmarr app
+ * @returns new app
+ */
+const convertApp = (app: OldmarrApp): DbAppWithoutId => ({
+  name: app.name,
+  href: app.behaviour.externalUrl === "" ? app.url : app.behaviour.externalUrl,
+  iconUrl: app.appearance.iconUrl,
+  description: app.behaviour.tooltipDescription ?? null,
+});
+
+/**
+ * Converts a bookmark app to a new app
+ * @param app bookmark app
+ * @returns new app
+ */
+const convertBookmarkApp = (app: BookmarkApp): DbAppWithoutId => ({
+  ...app,
+  description: null,
+});

packages/old-import/src/import-items.ts

@@ -15,11 +15,12 @@ import { mapOptions } from "./widgets/options";
 export const insertItemsAsync = async (
   db: Database,
   widgets: OldmarrWidget[],
-  mappedApps: (OldmarrApp & { newId: string })[],
+  apps: OldmarrApp[],
+  appsMap: Map<string, string>,
   sectionIdMaps: Map<string, string>,
   configuration: OldmarrImportConfiguration,
 ) => {
-  logger.info(`Importing old homarr items widgets=${widgets.length} apps=${mappedApps.length}`);
+  logger.info(`Importing old homarr items widgets=${widgets.length} apps=${apps.length}`);
 
   for (const widget of widgets) {
     // All items should have been moved to the last wrapper
@@ -54,13 +55,13 @@ export const insertItemsAsync = async (
       xOffset: screenSizeShape.location.x,
       yOffset: screenSizeShape.location.y,
       kind,
-      options: SuperJSON.stringify(mapOptions(kind, widget.properties)),
+      options: SuperJSON.stringify(mapOptions(kind, widget.properties, appsMap)),
     });
 
     logger.debug(`Inserted widget id=${widget.id} sectionId=${sectionId}`);
   }
 
-  for (const app of mappedApps) {
+  for (const app of apps) {
     // All items should have been moved to the last wrapper
     if (app.area.type === "sidebar") {
       continue;
@@ -85,7 +86,9 @@ export const insertItemsAsync = async (
       yOffset: screenSizeShape.location.y,
       kind: "app",
       options: SuperJSON.stringify({
-        appId: app.newId,
+        // it's safe to assume that the app exists in the map
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        appId: appsMap.get(app.id)!,
         openInNewTab: app.behaviour.isOpeningNewTab,
         pingEnabled: app.network.enabledStatusChecker,
         showDescriptionTooltip: app.behaviour.tooltipDescription !== "",

packages/old-import/src/index.ts

@@ -9,12 +9,24 @@ import { OldHomarrImportError, OldHomarrScreenSizeError } from "./import-error";
 import { insertItemsAsync } from "./import-items";
 import { insertSectionsAsync } from "./import-sections";
 import { moveWidgetsAndAppsIfMerge } from "./move-widgets-and-apps-merge";
+import type { BookmarkApp } from "./widgets/definitions/bookmark";
 
 export const importAsync = async (db: Database, old: OldmarrConfig, configuration: OldmarrImportConfiguration) => {
+  const bookmarkApps = old.widgets
+    .filter((widget) => widget.type === "bookmark")
+    .map((widget) => widget.properties.items)
+    .flat() as BookmarkApp[];
+
   if (configuration.onlyImportApps) {
     await db
       .transaction(async (trasaction) => {
-        await insertAppsAsync(trasaction, old.apps, configuration.distinctAppsByHref, old.configProperties.name);
+        await insertAppsAsync(
+          trasaction,
+          old.apps,
+          bookmarkApps,
+          configuration.distinctAppsByHref,
+          old.configProperties.name,
+        );
       })
       .catch((error) => {
         throw new OldHomarrImportError(old, error);
@@ -29,13 +41,14 @@ export const importAsync = async (db: Database, old: OldmarrConfig, configuratio
 
       const boardId = await insertBoardAsync(trasaction, old, configuration);
       const sectionIdMaps = await insertSectionsAsync(trasaction, categories, wrappers, boardId);
-      const mappedApps = await insertAppsAsync(
+      const appsMap = await insertAppsAsync(
         trasaction,
         apps,
+        bookmarkApps,
         configuration.distinctAppsByHref,
         old.configProperties.name,
       );
-      await insertItemsAsync(trasaction, widgets, mappedApps, sectionIdMaps, configuration);
+      await insertItemsAsync(trasaction, widgets, apps, appsMap, sectionIdMaps, configuration);
     })
     .catch((error) => {
       if (error instanceof OldHomarrScreenSizeError) {

packages/old-import/src/widgets/definitions/bookmark.ts

@@ -16,3 +16,5 @@ export type OldmarrBookmarkDefinition = CommonOldmarrWidgetDefinition<
     layout: "autoGrid" | "horizontal" | "vertical";
   }
 >;
+
+export type BookmarkApp = OldmarrBookmarkDefinition["options"]["items"][number];

packages/old-import/src/widgets/definitions/index.ts

@@ -66,6 +66,7 @@ export const widgetKindMapping = {
   "mediaRequests-requestList": "media-requests-list",
   "mediaRequests-requestStats": "media-requests-stats",
   indexerManager: "indexer-manager",
+  bookmarks: "bookmark",
   healthMonitoring: "health-monitoring",
 } satisfies Record<WidgetKind, OldmarrWidgetDefinitions["id"] | null>;
 // Use null for widgets that did not exist in oldmarr

packages/old-import/src/widgets/options.ts

@@ -13,6 +13,7 @@ type OptionMapping = {
     : {
         [OptionsKey in keyof WidgetComponentProps<WidgetKey>["options"]]: (
           oldOptions: Extract<OldmarrWidgetDefinitions, { id: WidgetMapping[WidgetKey] }>["options"],
+          appsMap: Map<string, string>,
         ) => WidgetComponentProps<WidgetKey>["options"][OptionsKey] | undefined;
       };
 };
@@ -22,6 +23,22 @@ const optionMapping: OptionMapping = {
     linksTargetNewTab: (oldOptions) => oldOptions.openInNewTab,
   },
   "mediaRequests-requestStats": {},
+  bookmarks: {
+    title: (oldOptions) => oldOptions.name,
+    // It's safe to assume that the app exists, because the app is always created before the widget
+    // And the mapping is created in insertAppsAsync
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    items: (oldOptions, appsMap) => oldOptions.items.map((item) => appsMap.get(item.id)!),
+    layout: (oldOptions) => {
+      const mappedLayouts: Record<typeof oldOptions.layout, WidgetComponentProps<"bookmarks">["options"]["layout"]> = {
+        autoGrid: "grid",
+        horizontal: "row",
+        vertical: "column",
+      };
+
+      return mappedLayouts[oldOptions.layout];
+    },
+  },
   calendar: {
     releaseType: (oldOptions) => [oldOptions.radarrReleaseType],
     filterFutureMonths: () => undefined,
@@ -118,11 +135,13 @@ const optionMapping: OptionMapping = {
  * Maps the oldmarr options to the newmarr options
  * @param kind item kind to map
  * @param oldOptions oldmarr options for this item
+ * @param appsMap map of old app ids to new app ids
  * @returns newmarr options for this item or null if the item did not exist in oldmarr
  */
 export const mapOptions = <K extends WidgetKind>(
   kind: K,
   oldOptions: Extract<OldmarrWidgetDefinitions, { id: WidgetMapping[K] }>["options"],
+  appsMap: Map<string, string>,
 ) => {
   logger.debug(`Mapping old homarr options for widget kind=${kind} options=${JSON.stringify(oldOptions)}`);
   if (optionMapping[kind] === null) {
@@ -132,7 +151,7 @@ export const mapOptions = <K extends WidgetKind>(
   const mapping = optionMapping[kind];
   return objectEntries(mapping).reduce(
     (acc, [key, value]) => {
-      const newValue = value(oldOptions as never);
+      const newValue = value(oldOptions as never, appsMap);
       logger.debug(`Mapping old homarr option kind=${kind} key=${key as string} newValue=${newValue as string}`);
       if (newValue !== undefined) {
         acc[key as string] = newValue;