feat: BorderColor option for dynamic section

[jackwellerreal]

Homarr

Thank you for your contribution. Please ensure that your pull request meets the following pull request:

• Builds without warnings or errors (pnpm buid, autofix with pnpm format:fix)
• Pull request targets dev branch
• Commits follow the conventional commits guideline
• No shorthand variable names are used (eg. x, y, i or any abbrevation)

Closes #2235

[deepsource-io]

Here's the code health analysis summary for commits 62c83b7..0f5c62b. View details on DeepSource ↗.

Analysis Summary

Analyzer	Status	Summary	Link
JavaScript	✅ Success		View Check ↗

---

💡 If you’re a repository administrator, you can configure the quality gates from the settings.

[jackwellerreal]

Hi, the code I just committed keeps the options for a dynamic section but doesn't save it once exiting edit mode. I didn't want to try and figure out how to save it to the SQL document because I am not that familiar with the language and didn't want to accidentally break something or jerry-rig a poor solution. Could someone who knows how I should implement it please guide me. Thanks

[Meierschlumpf]

Sure!
First of thank you for taking the time to implement this feature. I would suggest that we create a new field in the sections table. You can find the definition of the tables for sqlite and mysql in sqlite.ts / mysql.ts. They will look similar to

export const sections = sqliteTable("section", {
  id: text().notNull().primaryKey(),
  boardId: text()
    .notNull()
    .references(() => boards.id, { onDelete: "cascade" }),
  kind: text().$type<SectionKind>().notNull(),
  xOffset: int().notNull(),
  yOffset: int().notNull(),
  width: int(),
  height: int(),
  name: text(),
  parentSectionId: text().references((): AnySQLiteColumn => sections.id, {
    onDelete: "cascade",
  }),
});

You can simply add a new field for the border-color and make it nullable (not using notNull). So for sqlite something like:

export const sections = sqliteTable("section", {
  id: text().notNull().primaryKey(),
  boardId: text()
    .notNull()
    .references(() => boards.id, { onDelete: "cascade" }),
  kind: text().$type<SectionKind>().notNull(),
  xOffset: int().notNull(),
  yOffset: int().notNull(),
  width: int(),
  height: int(),
  name: text(),
  borderColor: text(), // would be varchar({length: 7}) for mysql (7 for hex in format "#000000")
  parentSectionId: text().references((): AnySQLiteColumn => sections.id, {
    onDelete: "cascade",
  }),
});

Then you can create a db migration and run it locally:
https://homarr.dev/docs/advanced/development/getting-started#useful-npm-scripts

Useful for you are pnpm db:migration:sqlite:generate to create a new sqlite migration and pnpm db:migration:sqlite:run to run the migration once you are happy with it

[jackwellerreal]

Will I also need to edit the saveBoard function in board.ts to recognise borderColor as a field that should be changed.

Something like this?

await transaction
  .update(schema.sections)
  .set({
    yOffset: section.yOffset,
    xOffset: section.xOffset,
    height: prev?.kind === "dynamic" && "height" in section ? section.height : null,
    width: prev?.kind === "dynamic" && "width" in section ? section.width : null,
    parentSectionId: prev?.kind === "dynamic" && "parentSectionId" in section ? section.parentSectionId : null,
    borderColor: prev?.kind === "dynamic" && section.kind === "dynamic" ? section.borderColor : null, // <--
    name: prev?.kind === "category" && "name" in section ? section.name : null,
  })
  .where(eq(sections.id, section.id));

[Meierschlumpf]

Yes exactly 👍

[jackwellerreal]

[jackwellerreal]

When editing the border colour option and saving the board. It doesn't apply automatically, the user will need to refresh the page. Does anyone know how I can make it refresh the css automatically?