Add Missing Theme Tab Labels

.github/workflows/test.yml

@@ -8,7 +8,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 22
       - uses: pnpm/action-setup@v3
         name: Install pnpm
         id: pnpm-install

.node-version

@@ -1 +1 @@
-v18.17.1
+v22.13.0

api/_lib/_notion.ts

@@ -66,14 +66,15 @@ export async function getPostHtmlFromId(id: string) {
           type: "html",
           parent: videoHtml,
           children: [],
+          blockId: block.blockId,
         };
       }
     }
     return block;
   });
 
   const mdString = n2m.toMarkdownString(mdblocks);
-  const html = marked(mdString);
+  const html = marked(mdString.parent);
   return html;
 }
 
@@ -95,6 +96,7 @@ Takes a block in the format
   and returns an HTML <video /> element with audio muted and autoplay, looping enabled
 
  */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function videoBlockToHtml(block: any) {
   const markdown = block.parent;
   const url = markdown.match(/\(([^)]+)\)/)[1];

api/package.json

@@ -47,6 +47,6 @@
     "@vercel/node": "^2.15.10",
     "eslint": "^8.3.0",
     "jest": "^29.4.3",
-    "typescript": "^5.5.3"
+    "typescript": "5.5.3"
   }
 }

app/package.json

@@ -202,7 +202,7 @@
     "tailwindcss": "^3.2.6",
     "ts-node": "^10.9.1",
     "ts-unused-exports": "^7.0.3",
-    "typescript": "^5.5.3",
+    "typescript": "5.5.3",
     "web-worker": "^1.2.0"
   },
   "jest": {
@@ -217,5 +217,8 @@
   },
   "overrides": {
     "fork-ts-checker-webpack-plugin": "^6.5.3"
+  },
+  "engines": {
+    "node": "^22"
   }
 }

app/scripts/autotranslations.mjs

@@ -1,7 +1,9 @@
+import { Configuration, OpenAIApi } from "openai";
+
 import dotenv from "dotenv";
 import fs from "fs";
-import { Configuration, OpenAIApi } from "openai";
 import path from "path";
+
 dotenv.config("./env");
 
 // Between Calls To Avoid Rate Limiting
@@ -124,7 +126,7 @@ for (const locale of locales) {
     /** pop off the first 6 phrases  */
     const batch = phrases.splice(0, 6);
 
-    const prompt = `Translate phrases from en to ${locale}\n\nEN\n${batch
+    const prompt = `Translate the following UI text strings for a flowcharting app from English to ${locale}.\n\nEN\n${batch
       .map((phrase) => `- ${phrase.text}`)
       .join("\n")}\n\n${locale.toUpperCase()}\n`;
 

app/src/components/LoadTemplateDialog.tsx

@@ -24,7 +24,7 @@ function getContentInitialValue() {
 
 export function LoadTemplateDialog() {
   const [open, setOpen] = useState(false);
-  const [template, setTemplate] = useState<null | typeof templates[number]>(
+  const [template, setTemplate] = useState<null | (typeof templates)[number]>(
     null
   );
   const [layout, setLayout] = useState(true);

app/src/components/RenameButton.tsx

@@ -121,11 +121,13 @@ export const RenameButton = memo(function RenameButton({
                 <Trans>Rename</Trans>
               </SectionTitle>
               {hasProAccess && !isHosted ? (
-                <label className="flex gap-2 item-center mt-2">
-                  <span className="text-xs opacity-80">
-                    <Trans>Convert to hosted chart?</Trans>
-                  </span>
+                <label
+                  htmlFor="convert-to-hosted"
+                  className="flex gap-2 items-center mt-2 text-xs opacity-80"
+                >
+                  <Trans>Convert to hosted chart?</Trans>
                   <input
+                    id="convert-to-hosted"
                     type="checkbox"
                     checked={convertToHosted}
                     onChange={(e) => {

app/src/components/Tabs/ThemeTab.tsx

@@ -303,7 +303,19 @@ const Form = createForm<{
         },
         {
           label: t`Text Max Width`,
-          title: () => <Article className="w-5 h-5" />,
+          title: () => (
+            <div className="grid gap-1">
+              <div className="flex items-center gap-2">
+                <Article className="w-5 h-5" />
+                <span className="font-semibold">
+                  <Trans>Text Max Width</Trans>
+                </span>
+              </div>
+              <span className="text-xs text-neutral-500 font-normal">
+                <Trans>Maximum width of text inside nodes</Trans>
+              </span>
+            </div>
+          ),
           id: "textMaxWidth",
           control: "range",
           value(data) {
@@ -348,7 +360,18 @@ const Form = createForm<{
         },
         {
           label: t`Text Horizontal Offset`,
-          title: () => t`Set Fixed Node Height`,
+          title: () => (
+            <div className="grid gap-1">
+              <div className="flex items-center gap-2">
+                <span className="font-semibold">
+                  <Trans>Fixed Node Height</Trans>
+                </span>
+              </div>
+              <span className="text-xs text-neutral-500 font-normal">
+                <Trans>Enable to set a consistent height for all nodes</Trans>
+              </span>
+            </div>
+          ),
           id: "useFixedHeight",
           control: "checkbox",
           value(data) {
@@ -360,7 +383,19 @@ const Form = createForm<{
         },
         {
           label: t`Fixed Node Height`,
-          title: () => <ArrowsOutLineVertical className="w-5 h-5" />,
+          title: () => (
+            <div className="grid gap-1">
+              <div className="flex items-center gap-2">
+                <ArrowsOutLineVertical className="w-5 h-5" />
+                <span className="font-semibold">
+                  <Trans>Fixed Height</Trans>
+                </span>
+              </div>
+              <span className="text-xs text-neutral-500 font-normal">
+                <Trans>Set a consistent height for all nodes</Trans>
+              </span>
+            </div>
+          ),
           id: "fixedHeight",
           control: "range",
           hidden(data) {
@@ -389,7 +424,19 @@ const Form = createForm<{
       elements: [
         {
           label: t`Curve Style`,
-          title: () => <LineSegment className="w-5 h-5" />,
+          title: () => (
+            <div className="grid gap-1">
+              <div className="flex items-center gap-2">
+                <LineSegment className="w-5 h-5" />
+                <span className="font-semibold">
+                  <Trans>Edge Style</Trans>
+                </span>
+              </div>
+              <span className="text-xs text-neutral-500 font-normal">
+                <Trans>Choose how edges connect between nodes</Trans>
+              </span>
+            </div>
+          ),
           id: "curveStyle",
           control: "select",
           value(data) {

app/src/index.css

@@ -148,7 +148,9 @@ div[data-reach-tooltip] {
   }
 }
 
-.slang-type:not(.size-1):not(.size-2):not(.size-3):not(.size-4):not(.size-5):not(.size-6):not(.size--1) {
+.slang-type:not(.size-1):not(.size-2):not(.size-3):not(.size-4):not(
+    .size-5
+  ):not(.size-6):not(.size--1) {
   letter-spacing: 0.0125em;
 }
 

app/src/lib/loadTemplate.ts

@@ -9,7 +9,7 @@ import { mountGraph, unmountGraph } from "./useUnmountStore";
  * Loads a template given a template key
  */
 export async function loadTemplate(
-  template: typeof templates[number] | null,
+  template: (typeof templates)[number] | null,
   /** Whether to replace the content or not */
   replaceContent: boolean,
   /**

app/src/lib/queries.ts

@@ -298,6 +298,7 @@ export async function makeChartPublic(id: number, isPublic: boolean) {
       message: "Duplicate key value violates unique constraint",
       details: "",
       hint: "",
+      name: "PostgrestError",
     };
     // If unique violation, generate a new public id
     let result;