Add tag highlighting

Author: derwebcoder

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "no-inline-styles": "off"
+  }
+}

src/common/components/IconButton/IconButton.tsx

@@ -14,7 +14,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 				{...buttonProps}
 				ref={ref}
 				className={classNames(
-					"size-8 rounded-full stroke-white text-white hover:bg-blue-500 active:bg-blue-600 place-content-center place-items-center flex outline-offset-2",
+					"size-8 rounded-full stroke-white text-white hover:bg-blue-500 active:bg-blue-600 place-content-center place-items-center flex outline-offset-2 shadow-md shadow-blue-400",
 					{
 						"bg-blue-400": relevancy === "primary",
 						"bg-stone-400": relevancy === "secondary",

src/container/SparkList/SparkList.tsx

@@ -2,6 +2,7 @@ import { useLiveQuery } from "dexie-react-hooks";
 import { sparkService } from "../../scripts/db/SparkService";
 import { differenceInCalendarDays, format } from "date-fns";
 import type Spark from "../../interfaces/Spark";
+import { stringToHue } from "../../scripts/utils/stringUtils";
 
 type SparkSection = {
 	key: string;
@@ -100,11 +101,17 @@ export const SparkList = () => {
 							className="grid grid-cols-[25%_1fr] gap-4 mb-6"
 						>
 							<div className="py-2 border-e border-slate-300 pe-4">
-								<div className="sticky top-4 flex flex-col gap-1 text-end">
+								<div className="sticky top-4 flex flex-col gap-1 items-end">
 									{section.prefixTags.map((tag) => (
 										<span
 											key={tag}
-											className="font-semibold text-neutral-400 text-sm"
+											className="font-semibold text-neutral-400 tag w-fit"
+											style={
+												{
+													"--tag-color":
+														stringToHue(tag),
+												} as React.CSSProperties
+											}
 										>
 											{tag}
 										</span>

src/scripts/utils/stringUtils.test.ts

@@ -1,4 +1,4 @@
-import { extractTags } from "./stringUtils";
+import { extractTags, stringToHue } from "./stringUtils";
 
 describe("extractTags", () => {
 	test("returns the correct prefixTags and remainingTags", () => {
@@ -57,3 +57,13 @@ describe("extractTags", () => {
 		expect(strippedContent).toEqual(expectStrippedContent);
 	});
 });
+
+describe("stringToHue", () => {
+	test("Returns a deterministic value", () => {
+		const input = "Heart to heart";
+
+		const hue = stringToHue(input);
+
+		expect(hue).toBe(122);
+	});
+});

src/scripts/utils/stringUtils.ts

@@ -24,3 +24,19 @@ export const extractTags = (content: string): [string[], string[], string] => {
 
 	return [prefixTags, remainingTags, strippedContent];
 };
+
+/**
+ * Returns a deterministic number between 0-360 for a given string.
+ *
+ * @param str The input string
+ * @returns a number between 0 and 360
+ */
+export const stringToHue = (str: string) => {
+	let numberHash = 0;
+
+	for (let i = 0; i < str.length; i++) {
+		numberHash += (i + 1) * str.charCodeAt(i);
+	}
+
+	return numberHash % 360;
+};

src/styles/global.css

@@ -70,3 +70,23 @@ html {
     @apply bg-background text-foreground;
   }
 }
+
+
+.tag::after {
+  /*
+    We use hsl to generate the base color because the hue in hsl has a wider color range than oklch.
+    See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
+    But oklch allows for a consistent lightness perceived by humans.
+    See https://evilmartians.com/chronicles/oklch-in-css-why-quit-rgb-hsl
+    That's why wrap the hsl value in oklch, creating a relative value with constant
+    lightness, chroma and alpha but keep the hue
+  */
+  background: oklch(from hsl(var(--tag-color) 100% 50%) 0.5 0.5 h / 0.4);
+  /* background: linear-gradient(0deg, rgba(255,255,255,0) 0%, oklch(from hsl(var(--tag-color) 100% 50%) 0.5 0.5 h) 80%, rgba(255,255,255,0) 100%); */
+  width: 100%;
+  height: 2px;
+  filter: blur(3px);
+  margin-top: -5px;
+  display: block;
+  content: "";
+}