tsondb 0.7.7 → 0.7.8

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);
+}

package/dist/src/web/components/Git.js

@@ -1,164 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
-import { useLocation } from "preact-iso";
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
-import { getGitStatusForDisplay, getLabelForGitStatus, isChangedInIndex, isChangedInWorkingDir, } from "../../shared/utils/git.js";
-import { getAllEntities } from "../api/declarations.js";
-import { commitStagedFiles, createBranch, getBranches, getStatus, pullCommits, pushCommits, stageAllFiles, stageFileOfEntity, switchBranch, unstageAllFiles, unstageFileOfEntity, } from "../api/git.js";
-import { GitContext } from "../context/git.js";
-import { useSetting } from "../hooks/useSettings.js";
-const filterFilesForDisplay = (predicate, entities, data) => Object.entries(data.instances)
-    .map(([entityName, instances]) => [
-    entityName,
-    entities.find(entity => entity.name === entityName)?.namePlural ?? entityName,
-    instances
-        .filter(instance => instance.gitStatus !== undefined && predicate(instance.gitStatus))
-        .sort((a, b) => a.displayName.localeCompare(b.displayName, undefined, { numeric: true })),
-])
-    .filter(([_1, _2, instances]) => instances.length > 0)
-    .sort((a, b) => a[1].localeCompare(b[1]));
-const GitFileList = ({ filesByEntity, onFile, isIndex = false }) => filesByEntity.length === 0 ? (_jsx("p", { class: "no-changes", children: "No changes" })) : (_jsx("ul", { class: "git-entity-list", children: filesByEntity.map(([entityName, entityNamePlural, instances]) => (_jsxs("li", { class: "git-entity-list-item", children: [_jsx("span", { class: "title", children: entityNamePlural }), _jsx("ul", { class: "git-instance-list", children: instances.map(instance => {
-                    const gitStatusForDisplay = getGitStatusForDisplay(instance.gitStatus);
-                    return (_jsxs("li", { class: "git-instance-list-item", children: [_jsx("span", { class: "title", children: instance.displayName }), _jsx("span", { class: `git-status git-status--${gitStatusForDisplay ?? ""}`, title: getLabelForGitStatus(gitStatusForDisplay), children: gitStatusForDisplay }), _jsx("button", { onClick: () => {
-                                    onFile(entityName, instance);
-                                }, children: isIndex ? "Unstage" : "Stage" })] }, instance.id));
-                }) })] }, entityName))) }));
-export const Git = () => {
-    const [locales] = useSetting("displayedLocales");
-    const [isOpen] = useContext(GitContext);
-    const [commitsAhead, setCommitsAhead] = useState(0);
-    const [commitsBehind, setCommitsBehind] = useState(0);
-    const [commitMessage, setCommitMessage] = useState("");
-    const [indexFiles, setIndexFiles] = useState([]);
-    const [workingTreeFiles, setWorkingTreeFiles] = useState([]);
-    const [entities, setEntities] = useState([]);
-    const [allBranches, setAllBranches] = useState([]);
-    const [currentBranch, setCurrentBranch] = useState("");
-    const updateGitStatus = useCallback((localEntities) => Promise.all([getStatus(locales), getBranches(locales)]).then(([statusData, branchesData]) => {
-        setIndexFiles(filterFilesForDisplay(isChangedInIndex, localEntities, statusData));
-        setWorkingTreeFiles(filterFilesForDisplay(isChangedInWorkingDir, localEntities, statusData));
-        setCommitsAhead(statusData.commitsAhead);
-        setCommitsBehind(statusData.commitsBehind);
-        setAllBranches(branchesData.allBranches);
-        setCurrentBranch(branchesData.currentBranch);
-    }), [locales]);
-    const location = useLocation();
-    useEffect(() => {
-        getAllEntities(locales)
-            .then(async (data) => {
-            const entitiesFromServer = data.declarations.map(decl => decl.declaration);
-            setEntities(entitiesFromServer);
-            return updateGitStatus(entitiesFromServer);
-        })
-            .catch((error) => {
-            if (error instanceof Error) {
-                console.error("Error fetching entities:", error.toString());
-            }
-        });
-    }, [location.path, locales, updateGitStatus]);
-    const stage = (entityName, instance) => {
-        stageFileOfEntity(locales, entityName, instance.id)
-            .then(() => updateGitStatus(entities))
-            .catch((error) => {
-            if (error instanceof Error) {
-                console.error("Error staging instance:", error.toString());
-            }
-        });
-    };
-    const stageAll = () => {
-        stageAllFiles(locales)
-            .then(() => updateGitStatus(entities))
-            .catch((error) => {
-            if (error instanceof Error) {
-                console.error("Error staging all instances:", error.toString());
-            }
-        });
-    };
-    const unstage = (entityName, instance) => {
-        unstageFileOfEntity(locales, entityName, instance.id)
-            .then(() => updateGitStatus(entities))
-            .catch((error) => {
-            if (error instanceof Error) {
-                console.error("Error unstaging instance:", error.toString());
-            }
-        });
-    };
-    const unstageAll = () => {
-        unstageAllFiles(locales)
-            .then(() => updateGitStatus(entities))
-            .catch((error) => {
-            if (error instanceof Error) {
-                console.error("Error unstaging all instances:", error.toString());
-            }
-        });
-    };
-    const commit = () => {
-        if (commitMessage.length > 0 &&
-            indexFiles.length > 0 &&
-            confirm("Do you want to commit all staged files?")) {
-            commitStagedFiles(locales, commitMessage)
-                .then(() => {
-                setCommitMessage("");
-                return updateGitStatus(entities);
-            })
-                .catch((error) => {
-                if (error instanceof Error) {
-                    console.error("Error committing instances:", error.toString());
-                }
-            });
-        }
-    };
-    const push = () => {
-        pushCommits(locales)
-            .then(() => {
-            alert("Pushed commits successfully");
-            return updateGitStatus(entities);
-        })
-            .catch((error) => {
-            console.error("Error pushing commits:", error);
-        });
-    };
-    const pull = () => {
-        pullCommits(locales)
-            .then(() => {
-            alert("Pulled commits successfully");
-            return updateGitStatus(entities);
-        })
-            .catch((error) => {
-            console.error("Error pulling commits:", error);
-        });
-    };
-    const onCreateBranch = () => {
-        const newBranchName = prompt("Enter new branch name:");
-        if (!newBranchName) {
-            alert("Branch name cannot be empty");
-            return;
-        }
-        if (allBranches.includes(newBranchName)) {
-            alert("Branch name already exists");
-            return;
-        }
-        createBranch(locales, newBranchName)
-            .then(() => {
-            return updateGitStatus(entities);
-        })
-            .catch((error) => {
-            if (error instanceof Error) {
-                alert("Error switching branch:" + error.toString());
-            }
-        });
-    };
-    const onSwitchBranch = (event) => {
-        switchBranch(locales, event.currentTarget.value)
-            .then(() => {
-            return updateGitStatus(entities);
-        })
-            .catch((error) => {
-            if (error instanceof Error) {
-                alert("Error switching branch: " + error.toString());
-            }
-        });
-    };
-    return (_jsxs("aside", { class: "git", children: [_jsx("h2", { class: "h1-faded", children: "Version Control" }), _jsxs("div", { className: `git-overlay ${isOpen ? "git-overlay--open" : ""}`, children: [_jsxs("div", { class: "sync", children: [_jsxs("button", { onClick: push, children: ["Push", commitsAhead > 0 ? ` (${commitsAhead.toString()})` : ""] }), _jsxs("button", { onClick: pull, children: ["Pull", commitsBehind > 0 ? ` (${commitsBehind.toString()})` : ""] })] }), _jsxs("div", { className: "branch", children: [_jsx("div", { className: "select-wrapper", children: _jsx("select", { value: currentBranch, onInput: onSwitchBranch, children: allBranches.map(branch => (_jsx("option", { value: branch, children: branch }, branch))) }) }), _jsx("button", { onClick: onCreateBranch, children: "New branch" })] }), _jsxs("div", { class: "commit", children: [_jsx("input", { type: "text", value: commitMessage, onInput: event => {
-                                    setCommitMessage(event.currentTarget.value);
-                                }, placeholder: "added X to instance Y, \u2026" }), _jsx("button", { onClick: commit, disabled: commitMessage.length === 0 || indexFiles.length === 0, children: "Commit" })] }), _jsxs("div", { className: "git-section-title", children: [_jsx("h3", { children: "Files to be committed" }), _jsx("button", { onClick: unstageAll, children: "Unstage all" })] }), _jsx(GitFileList, { filesByEntity: indexFiles, isIndex: true, onFile: unstage }), _jsxs("div", { className: "git-section-title", children: [_jsx("h3", { children: "Working tree changes" }), _jsx("button", { onClick: stageAll, children: "Stage all" })] }), _jsx(GitFileList, { filesByEntity: workingTreeFiles, onFile: stage })] })] }));
-};