tsondb 0.7.6 → 0.7.8

package/dist/src/web/routes/CreateInstance.js

@@ -11,29 +11,31 @@ const titleBuilder = ({ entity }) => {
     const entityName = entity.name;
     return "New " + toTitleCase(entityName) + " — TSONDB";
 };
-const onSubmit = async ({ locales, entity, buttonName, instanceContent, isLocaleEntity, customId, childInstances, setInstanceContent, setCustomId, route, getDeclFromDeclName, }) => {
+const onSubmit = async ({ locales, entity, buttonName, instanceContent, isLocaleEntity, customId, childInstances, setInstanceContent, setCustomId, route, getDeclFromDeclName, updateLocalGitState, }) => {
     try {
-        const createdInstance = await createInstanceByEntityNameAndId(locales, entity.name, {
-            childInstances,
-            entityName: entity.name,
-            content: instanceContent,
-            id: undefined,
-        }, isLocaleEntity ? customId : undefined);
-        switch (buttonName) {
-            case "saveandcontinue": {
-                route(`/entities/${entity.name}/instances/${createdInstance.instance.id}`);
-                break;
-            }
-            case "saveandaddanother": {
-                setInstanceContent(createTypeSkeleton(getDeclFromDeclName, entity.type));
-                setCustomId("");
-                alert(`Instance of entity ${entity.name} created successfully with identifier ${createdInstance.instance.id}. You can add another instance now.`);
-                break;
-            }
-            case "save":
-            default: {
-                route(`/entities/${entity.name}?created=${encodeURIComponent(createdInstance.instance.id)}`);
-                break;
+        if (buttonName) {
+            const createdInstance = await createInstanceByEntityNameAndId(locales, entity.name, {
+                childInstances,
+                entityName: entity.name,
+                content: instanceContent,
+                id: undefined,
+            }, isLocaleEntity ? customId : undefined);
+            await updateLocalGitState?.();
+            switch (buttonName) {
+                case "saveandcontinue": {
+                    route(`/entities/${entity.name}/instances/${createdInstance.instance.id}`);
+                    break;
+                }
+                case "saveandaddanother": {
+                    setInstanceContent(createTypeSkeleton(getDeclFromDeclName, entity.type));
+                    setCustomId("");
+                    alert(`Instance of entity ${entity.name} created successfully with identifier ${createdInstance.instance.id}. You can add another instance now.`);
+                    break;
+                }
+                case "save": {
+                    route(`/entities/${entity.name}?created=${encodeURIComponent(createdInstance.instance.id)}`);
+                    break;
+                }
             }
         }
     }
@@ -43,4 +45,8 @@ const onSubmit = async ({ locales, entity, buttonName, instanceContent, isLocale
         }
     }
 };
-export const CreateInstance = () => (_jsx(InstanceRouteSkeleton, { mode: "create", init: init, titleBuilder: titleBuilder, onSubmit: onSubmit }));
+export const CreateInstance = () => (_jsx(InstanceRouteSkeleton, { mode: "create", buttons: [
+        { label: "Save", name: "save", primary: true },
+        { label: "Save and continue", name: "saveandcontinue" },
+        { label: "Save and add another", name: "saveandaddanother" },
+    ], init: init, titleBuilder: titleBuilder, onSubmit: onSubmit }));

package/dist/src/web/routes/Entity.js

@@ -1,12 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
 import { useRoute } from "preact-iso";
 import { useContext, useEffect, useState } from "preact/hooks";
-import { getGitStatusForDisplay, getLabelForGitStatus } from "../../shared/utils/git.js";
+import { getGitStatusForDisplay } from "../../shared/utils/git.js";
 import { toTitleCase } from "../../shared/utils/string.js";
 import { deleteInstanceByEntityNameAndId, getInstancesByEntityName, getLocaleInstances, } from "../api/declarations.js";
+import { GitStatusIndicator } from "../components/git/GitStatusIndicator.js";
 import { Layout } from "../components/Layout.js";
 import { ConfigContext } from "../context/config.js";
 import { EntitiesContext } from "../context/entities.js";
+import { GitClientContext } from "../context/gitClient.js";
 import { useEntityFromRoute } from "../hooks/useEntityFromRoute.js";
 import { useMappedAPIResource } from "../hooks/useMappedAPIResource.js";
 import { useSetting } from "../hooks/useSettings.js";
@@ -21,6 +23,7 @@ export const Entity = () => {
     const [searchText, setSearchText] = useState("");
     const entityFromRoute = useEntityFromRoute();
     const config = useContext(ConfigContext);
+    const gitClient = useContext(GitClientContext);
     const { reloadEntities } = useContext(EntitiesContext);
     const { declaration: entity, isLocaleEntity } = entityFromRoute ?? {};
     const [instances, reloadInstances] = useMappedAPIResource(getInstancesByEntityName, mapInstances, locales, name ?? "");
@@ -43,10 +46,13 @@ export const Entity = () => {
         return (_jsxs(Layout, { breadcrumbs: [{ url: "/", label: homeTitle }], children: [_jsxs("div", { class: "header-with-btns", children: [_jsx("h1", { children: toTitleCase(entity?.namePlural ?? name) }), _jsx("a", { class: "btn btn--primary", "aria-disabled": true, children: "Add" })] }), _jsx("p", { class: "loading", children: "Loading \u2026" })] }));
     }
     const lowerSearchText = searchText.toLowerCase();
-    const filteredInstances = searchText.length === 0
+    const filteredInstances = (searchText.length === 0
         ? instances
         : instances.filter(instance => instance.id.includes(searchText) ||
-            instance.displayName.toLowerCase().includes(lowerSearchText));
+            instance.displayName.toLowerCase().includes(lowerSearchText))).map(instance => ({
+        ...instance,
+        gitStatus: gitClient?.getGitStatusOfInstance(entity.name, instance.id),
+    }));
     const instancesByLocale = Object.groupBy(filteredInstances, instance => instance.displayNameLocaleId ?? "undefined");
     const groupedInstances = [...locales, "undefined"]
         .map(key => ({
@@ -59,7 +65,7 @@ export const Entity = () => {
         .filter(group => group.instances.length > 0);
     const instanceMapper = (instance) => {
         const gitStatusForDisplay = getGitStatusForDisplay(instance.gitStatus);
-        return (_jsxs("li", { id: `instance-${instance.id}`, class: `entries-item ${created === instance.id ? "entries-item--created" : ""} ${gitStatusForDisplay === undefined ? "" : `git-status--${gitStatusForDisplay}`}`, children: [_jsx("h2", { class: "entries-item__title", children: instance.displayName }), _jsx("p", { "aria-hidden": true, class: "entries-item__subtitle entries-item__subtitle--id", children: instance.id }), _jsxs("div", { class: "entries-item__side", children: [gitStatusForDisplay !== undefined && (_jsx("p", { class: `git-status git-status--${gitStatusForDisplay}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay })), _jsxs("div", { class: "btns", children: [_jsx("a", { href: `/entities/${entity.name}/instances/${instance.id}`, class: "btn", children: "Edit" }), _jsx("button", { class: "destructive", onClick: () => {
+        return (_jsxs("li", { id: `instance-${instance.id}`, class: `entries-item ${created === instance.id ? "entries-item--created" : ""} ${gitStatusForDisplay === undefined ? "" : `git-status--${gitStatusForDisplay}`}`, children: [_jsx("h2", { class: "entries-item__title", children: instance.displayName }), _jsx("p", { "aria-hidden": true, class: "entries-item__subtitle entries-item__subtitle--id", children: instance.id }), _jsxs("div", { class: "entries-item__side", children: [_jsx(GitStatusIndicator, { status: instance.gitStatus }), _jsxs("div", { class: "btns", children: [_jsx("a", { href: `/entities/${entity.name}/instances/${instance.id}`, class: "btn", children: "Edit" }), _jsx("button", { class: "destructive", onClick: () => {
                                         if (confirm("Are you sure you want to delete this instance?")) {
                                             deleteInstanceByEntityNameAndId(locales, entity.name, instance.id)
                                                 .then(() => reloadInstances())

package/dist/src/web/routes/Instance.js

@@ -21,23 +21,36 @@ const titleBuilder = ({ locales, entity, instanceId, instanceContent, }) => {
     }
     return undefined;
 };
-const onSubmit = async ({ locales, entity, instanceId, instanceContent, buttonName, childInstances, }) => {
-    if (instanceId && buttonName === "save") {
-        try {
+const onSubmit = async ({ locales, entity, instanceId, instanceContent, buttonName, childInstances, route, updateLocalGitState, }) => {
+    try {
+        if (instanceId && buttonName) {
             await updateInstanceByEntityNameAndId(locales, entity.name, instanceId, {
                 childInstances,
                 entityName: entity.name,
                 content: instanceContent,
                 id: instanceId,
             });
-        }
-        catch (error) {
-            if (error instanceof Error) {
-                alert(`Error updating instance:\n\n${error}`);
+            await updateLocalGitState?.();
+            switch (buttonName) {
+                case "saveandcontinue": {
+                    break;
+                }
+                case "save": {
+                    route(`/entities/${entity.name}`);
+                    break;
+                }
             }
         }
     }
+    catch (error) {
+        if (error instanceof Error) {
+            alert(`Error updating instance:\n\n${error}`);
+        }
+    }
 };
 export const Instance = () => {
-    return (_jsx(InstanceRouteSkeleton, { mode: "edit", init: init, titleBuilder: titleBuilder, onSubmit: onSubmit }));
+    return (_jsx(InstanceRouteSkeleton, { mode: "edit", buttons: [
+            { label: "Save", name: "save", primary: true },
+            { label: "Save and continue", name: "saveandcontinue" },
+        ], init: init, titleBuilder: titleBuilder, onSubmit: onSubmit }));
 };

package/dist/src/web/signals/loading.d.ts

@@ -0,0 +1,2 @@
+export declare const loading: import("@preact/signals-core").Signal<boolean>;
+export declare const runWithLoading: <T>(fn: () => Promise<T>) => Promise<T>;

package/dist/src/web/signals/loading.js

@@ -0,0 +1,11 @@
+import { signal } from "@preact/signals";
+export const loading = signal(false);
+export const runWithLoading = async (fn) => {
+    loading.value = true;
+    try {
+        return await fn();
+    }
+    finally {
+        loading.value = false;
+    }
+};

package/dist/src/web/utils/BlockMarkdown.js

@@ -15,7 +15,7 @@ export const BlockMarkdown = ({ node, outerHeadingLevel = 0 }) => {
                 return (_jsx("ul", { children: node.content.map((item, ii) => (_jsx("li", { children: item.content.map((inline, iii) => (_jsx(InlineMarkdown, { node: inline }, iii))) }, ii))) }));
             }
         case "table":
-            return (_jsxs("table", { children: [_jsx("thead", { children: _jsx("tr", { children: node.header.map((th, hi) => (_jsx("th", { children: th.map((inline, hii) => (_jsx(InlineMarkdown, { node: inline }, hii))) }, hi))) }) }), _jsx("tbody", { children: node.rows.map((tr, ri) => (_jsx("tr", { children: tr.map((tc, ci) => (_jsx("td", { children: tc.map((inline, cii) => (_jsx(InlineMarkdown, { node: inline }, cii))) }, ci))) }, ri))) })] }));
+            return (_jsxs("table", { children: [node.caption !== undefined && (_jsx("caption", { children: node.caption.map((inline, ci) => (_jsx(InlineMarkdown, { node: inline }, ci))) })), _jsx("thead", { children: _jsx("tr", { children: node.header.map((th, hi) => (_jsx("th", { children: th.map((inline, hii) => (_jsx(InlineMarkdown, { node: inline }, hii))) }, hi))) }) }), _jsx("tbody", { children: node.rows.map((tr, ri) => (_jsx("tr", { children: tr.map((tc, ci) => (_jsx("td", { children: tc.map((inline, cii) => (_jsx(InlineMarkdown, { node: inline }, cii))) }, ci))) }, ri))) })] }));
         default:
             return null;
     }

package/dist/src/web/utils/debug.d.ts

@@ -1 +1,2 @@
 export declare const printJson: (data: unknown) => string;
+export declare const logAndAlertError: (error: unknown, prependedMessage?: string) => void;

package/dist/src/web/utils/debug.js

@@ -3,3 +3,7 @@ export const printJson = (data) => JSON.stringify(data, undefined, 2)
     .replace(/((?:^|\n *)[{[])\n +/g, "$1 ")
     .replace(/"(.+?)":/g, '<span style="color: darkorange">$1</span>:')
     .replace(/ "(.*?)"([ ,])/g, ' <span style="color: darkgreen">"$1"</span>$2');
+export const logAndAlertError = (error, prependedMessage) => {
+    console.error(error);
+    alert((prependedMessage ?? "") + (error instanceof Error ? error.toString() : String(error)));
+};

package/dist/src/web/utils/typeSkeleton.js

@@ -43,7 +43,7 @@ export const createTypeSkeleton = (getDeclFromDeclName, type) => {
             };
         }
         case "ChildEntitiesType":
-            return [];
+            return undefined;
         default:
             return assertExhaustive(type);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsondb",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "description": "",
   "license": "ISC",
   "author": "Lukas Obermann",
@@ -47,13 +47,13 @@
     "typescript-eslint": "^8.45.0"
   },
   "dependencies": {
+    "@preact/signals": "^2.3.2",
     "debug": "^4.4.3",
     "express": "^5.1.0",
     "preact": "^10.27.2",
     "preact-iso": "^2.11.0",
     "simple-cli-args": "^0.1.3",
-    "simple-git": "^3.28.0",
-    "uuid": "^13.0.0"
+    "simple-git": "^3.28.0"
   },
   "repository": "github:elyukai/tsondb",
   "bugs": {

package/public/css/styles.css

@@ -81,6 +81,7 @@
     --button-color-destructive: #fff;
     --button-color-destructive-hover: #fff;
     --button-color-disabled: hsl(260, 6%, 54%);
+    --disabled-color: #606164;
     --highlight-color: #f2d600;
     --highlight-background: #333300;
     --highlight-color-bold: rgb(236, 170, 105);
@@ -722,43 +723,43 @@ form > .field--container {
   color: var(--disabled-color);
 }
 
-.field--string .preview {
+.preview {
   padding: 1rem;
   background: var(--markdown-background);
   flex: 1 1 0;
 }
 
-.field--string .preview p {
+.preview p {
   margin: 0.5rem 0 0;
 }
 
-.field--string .preview > :first-child {
+.preview > :first-child {
   margin-top: 0;
 }
 
-.field--string .preview > :last-child {
+.preview > :last-child {
   margin-bottom: 0;
 }
 
-.field--string .preview table {
+.preview table {
   border-collapse: collapse;
   margin: 0.5rem 0;
 }
 
-.field--string .preview table :is(th, td) {
+.preview table :is(th, td) {
   vertical-align: top;
   padding: 0.25rem 0.5rem;
 }
 
-.field--string .preview table :is(th, td):first-child {
+.preview table :is(th, td):first-child {
   padding-left: 0;
 }
 
-.field--string .preview table :is(th, td):last-child {
+.preview table :is(th, td):last-child {
   padding-right: 0;
 }
 
-.field--string .preview table tbody tr {
+.preview table tbody tr {
   border-top: 1px solid var(--tertiary-color);
 }
 
@@ -886,12 +887,7 @@ main:has(.form-footer) {
 
 aside.git {
   grid-area: aside;
-  position: absolute;
-  top: 5rem;
-  right: 0;
-  width: 30rem;
-  max-width: calc(100% - 1.5rem);
-  max-height: calc(100% - 6.5rem);
+  display: none;
 }
 
 aside.git h2 {
@@ -900,14 +896,10 @@ aside.git h2 {
 
 @media (min-width: 80rem) {
   aside.git {
+    display: block;
     width: 30rem;
     border-left: 1px solid var(--separator-color);
     padding-left: 1rem;
-    top: unset;
-    right: unset;
-    position: static;
-    max-height: none;
-    max-width: none;
   }
 
   aside.git h2 {
@@ -919,103 +911,80 @@ aside.git h2 {
   }
 }
 
-aside.git h3 {
+.git-files h3 {
   font-size: 1.25rem;
   margin: 0;
 }
 
-aside.git ul {
+.git-files ul {
   list-style-type: " ";
   padding: 0;
   margin: 0;
   display: block;
 }
 
-aside.git .git-entity-list-item > .title {
-  margin: 1rem 0 0.5rem;
-}
-
-aside.git .git-instance-list-item {
-  display: flex;
-  justify-content: space-between;
-  margin: 0.25rem 0 0;
-  gap: 0.25rem;
+.git-files .git-entity-list-item > .title {
+  margin: 1.5rem 0 0.75rem;
 }
 
-aside.git li .title {
+.git-files li .title {
   display: block;
   margin: 0.25rem 0;
   flex: 1 1 0;
 }
 
-aside.git li.git-entity-list-item > .title {
+.git-files li.git-entity-list-item > .title {
   font-weight: 600;
 }
 
-aside.git li button {
+.git-files li button {
   padding: 0 0.5rem;
   line-height: 1.75rem;
   height: 1.75rem;
 }
 
-aside.git .git-section-title {
+.git-files .git-section-title {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 0.5rem;
-  margin: 1rem 0 0.5rem;
+  margin: 2rem 0 1rem;
 }
 
-aside.git .git-section-title h2 {
+.git-files .git-section-title h2 {
   margin: 0;
 }
 
-aside.git p.no-changes {
+.git-files p.no-changes {
   color: var(--tertiary-color);
   margin: 0;
 }
 
-aside.git .commit,
-aside.git .sync,
-aside.git .branch {
-  display: flex;
-  gap: 0.5rem;
+.git-branches ul {
+  padding: 0;
+  margin: 0;
 }
 
-aside.git .sync,
-aside.git .branch {
-  margin-bottom: 1rem;
+.git-branches ul li {
+  display: flex;
+  align-items: start;
+  margin-top: 0.5rem;
 }
 
-aside.git .commit input,
-aside.git .branch .select-wrapper {
+.branch__full-name {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
   flex: 1 1 0;
 }
 
-.git-overlay {
-  display: none;
-  position: absolute;
-  right: 1.5rem;
-  box-shadow: 0 0.5rem 2rem var(--shadow-color);
-  z-index: 1000;
-  padding: 1rem;
-  background: var(--background);
-  overflow-y: auto;
-  max-height: calc(90vh - 5rem);
-}
-
-@media (min-width: 80rem) {
-  .git-overlay {
-    display: block;
-    position: static;
-    box-shadow: none;
-    padding: 0.5rem 0 0;
-    max-height: none;
-  }
+.branch__origin {
+  color: var(--secondary-color);
 }
 
-.git-overlay.git-overlay--open {
-  display: block;
+.branch__current-indicator {
+  color: var(--secondary-color);
+  flex: none;
 }
 
 dialog {
@@ -1026,14 +995,24 @@ dialog {
   padding: 1.6rem 1.5rem;
   max-height: calc(100% - 2rem);
   max-width: calc(100% - 2rem);
+  overscroll-behavior: contain;
 }
 
 dialog::backdrop {
   background: rgba(0, 0, 0, 0.5);
+  transition: background 0.25s ease-in-out;
+}
+
+dialog header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1.6rem;
 }
 
 dialog header :is(h1, h2, h3, h4, h5, h6) {
   margin: 0;
+  flex: 1 1 0;
 }
 
 dialog.settings {
@@ -1049,6 +1028,17 @@ dialog.settings section.locale-settings ol li:not(:first-child) {
   margin-top: 0.5rem;
 }
 
+dialog.git {
+  max-width: min(calc(100% - 2rem), 36rem);
+  width: 100%;
+}
+
+@media (min-width: 80rem) {
+  dialog.git header .git__tab--files {
+    display: none;
+  }
+}
+
 .locale-content {
   display: flex;
   gap: 0.25rem;
@@ -1058,3 +1048,75 @@ dialog.settings section.locale-settings ol li:not(:first-child) {
 .locale-content span {
   flex: 1 1 0;
 }
+
+.form-row {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-block: 1rem;
+}
+
+.form-row--sides {
+  justify-content: space-between;
+}
+
+.form-row--compact {
+  gap: 0.25rem;
+  margin-block: 0.5rem;
+}
+
+.form-row__group {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.form-row--compact .form-row__group {
+  gap: 0.25rem;
+}
+
+.form-row__text {
+  padding-block: 0.5rem;
+}
+
+.form-row--compact .form-row__text {
+  padding-block: 0.175rem;
+}
+
+.form-row__fill {
+  flex: 1 1 0;
+}
+
+.form-row--compact button {
+  padding: 0.175rem 0.5rem;
+  height: 1.75rem;
+}
+
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 2rem;
+  z-index: 1000;
+  font-weight: 200;
+  letter-spacing: 0.05em;
+  transition: opacity 0.25s ease-in-out;
+  opacity: 0;
+  pointer-events: none;
+}
+
+#app:not(:has(dialog[open])) > .loading-overlay--open,
+dialog[open] > .loading-overlay--open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+dialog[open]:has(> .loading-overlay--open)::backdrop {
+  background: rgba(0, 0, 0, 0.75);
+}