From f811c24f57f900c7d71eef4944e51daff3e37803 Mon Sep 17 00:00:00 2001
From: "Mark R. Florkowski" <mark.florkowski@gmail.com>
Date: Wed, 8 Mar 2023 13:34:51 -0800
Subject: [PATCH 1/5] add logs for directory creation (#90)

---
 apps/cli/cli/src/utils/forceThingExists.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/cli/cli/src/utils/forceThingExists.ts b/apps/cli/cli/src/utils/forceThingExists.ts
index eef5dfbb..b3c99172 100644
--- a/apps/cli/cli/src/utils/forceThingExists.ts
+++ b/apps/cli/cli/src/utils/forceThingExists.ts
@@ -1,6 +1,8 @@
 import fs from "fs/promises";
 import path from "path";
 
+import logger from "@captain/logger";
+
 const THING_PATH = path.join(process.cwd(), ".thing");
 const HOOK_PATH = path.join(THING_PATH, "hooks");
 
@@ -8,12 +10,14 @@ export default async function forceThingExists() {
   try {
     await fs.access(THING_PATH);
   } catch (error) {
+    logger.warn("No .thing directory found, creating one now.");
     await fs.mkdir(THING_PATH);
   }
 
   try {
     await fs.access(HOOK_PATH);
   } catch (error) {
+    logger.warn("No .thing/hooks directory found, creating one now.");
     await fs.mkdir(HOOK_PATH);
   }
 }

From b8d801671e1affc656c5786645c890a4f3151e22 Mon Sep 17 00:00:00 2001
From: "Mark R. Florkowski" <mark.florkowski@gmail.com>
Date: Wed, 8 Mar 2023 16:24:34 -0800
Subject: [PATCH 2/5] [W-74] Fix nested folder creation (#93)

* fix

* also fix for file creation
---
 apps/cli/cli-core/src/trpc.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/cli/cli-core/src/trpc.ts b/apps/cli/cli-core/src/trpc.ts
index e913bda9..2f3be660 100644
--- a/apps/cli/cli-core/src/trpc.ts
+++ b/apps/cli/cli-core/src/trpc.ts
@@ -343,7 +343,7 @@ export const cliApiRouter = t.router({
       fs.mkdirSync(fullPath);
 
       return {
-        route,
+        route: `/${route}/`,
       };
     }),
 
@@ -367,7 +367,7 @@ export const cliApiRouter = t.router({
       fs.writeFileSync(fullPath, "{}");
 
       return {
-        route,
+        route: `/${route}`,
       };
     }),
 

From 44a2d78b2734d2dc85c50b6763b81ccf8a279036 Mon Sep 17 00:00:00 2001
From: "Mark R. Florkowski" <mark.florkowski@gmail.com>
Date: Thu, 9 Mar 2023 14:40:28 -0800
Subject: [PATCH 3/5] only show debug logs in dev (#86)

---
 packages/logger/src/index.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/logger/src/index.ts b/packages/logger/src/index.ts
index 6cdb168d..470fcaa1 100644
--- a/packages/logger/src/index.ts
+++ b/packages/logger/src/index.ts
@@ -120,7 +120,12 @@ class logger implements Logger {
   private log(level: LogLevels, message: string, optionalParams: any[]) {
     const ts = Date.now();
 
-    console[level](consoleFormat(level, message), ...optionalParams);
+    const defaultLevel =
+      process.env.NODE_ENV === "development" ? "trace" : "info";
+
+    if (getLogLevels(defaultLevel).includes(level)) {
+      console[level](consoleFormat(level, message), ...optionalParams);
+    }
 
     this.subscriptions.forEach(({ fn, level: subLevel }) => {
       if (getLogLevels(subLevel).includes(level)) fn({ message, level, ts });

From 953eff8c559ea844c9ccf137865874a528cb93a2 Mon Sep 17 00:00:00 2001
From: "Mark R. Florkowski" <mark.florkowski@gmail.com>
Date: Thu, 9 Mar 2023 14:40:42 -0800
Subject: [PATCH 4/5] better contrast (#89)

---
 apps/cli/cli-web/src/App.tsx                  |  4 +--
 .../cli-web/src/components/filebrowser.tsx    | 26 +++++++++----------
 .../cli/cli-web/src/components/filerunner.tsx | 19 +++++++-------
 .../src/components/response-viewer.tsx        | 12 ++++-----
 apps/marketing/src/pages/index.tsx            |  3 ++-
 5 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/cli/cli-web/src/App.tsx b/apps/cli/cli-web/src/App.tsx
index d6c51736..bfebf8fa 100644
--- a/apps/cli/cli-web/src/App.tsx
+++ b/apps/cli/cli-web/src/App.tsx
@@ -104,11 +104,11 @@ export default function AppCore() {
 
         <main className="-mt-32 h-[calc(100vh-5rem)]">
           <div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-2 px-2 lg:h-full lg:flex-row">
-            <div className="flex h-3/5 w-full flex-col divide-y divide-gray-200 overflow-y-auto rounded-lg bg-white p-4 shadow lg:h-full lg:w-3/5 ">
+            <div className="flex h-3/5 w-full flex-col divide-y divide-gray-200 overflow-y-auto rounded-lg bg-gray-100 p-4 shadow lg:h-full lg:w-3/5 ">
               {/* File browser / Hook Editor / 404 */}
               <PageContent />
             </div>
-            <div className="flex h-2/5 w-full rounded-lg bg-white p-4 shadow lg:h-full lg:w-2/5">
+            <div className="flex h-2/5 w-full rounded-lg bg-gray-100 p-4 shadow lg:h-full lg:w-2/5">
               {/* Logs */}
               <ResponseViewer />
             </div>
diff --git a/apps/cli/cli-web/src/components/filebrowser.tsx b/apps/cli/cli-web/src/components/filebrowser.tsx
index 7d75c57a..07c54ffe 100644
--- a/apps/cli/cli-web/src/components/filebrowser.tsx
+++ b/apps/cli/cli-web/src/components/filebrowser.tsx
@@ -144,7 +144,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
         </ol>
         <div className="flex flex-row gap-1">
           <button
-            className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
             onClick={() => openFolder({ path })}
           >
             {`Open Folder`}
@@ -154,7 +154,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
           <FileFormModal openState={addHookModalState} path={pathArr} />
           <Menu as="div" className="relative inline-block text-left">
             <div>
-              <Menu.Button className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+              <Menu.Button className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                 <span className="sr-only">{`Open create menu`}</span>
                 <PlusIcon
                   className="h-5 w-5 flex-shrink-0"
@@ -180,7 +180,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                         <button
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-indigo-700"
+                              ? "bg-gray-200 text-indigo-700"
                               : "text-gray-700",
                             "flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
                           )}
@@ -200,7 +200,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                         <button
                           className={classNames(
                             active
-                              ? "bg-gray-100 text-indigo-700"
+                              ? "bg-gray-200 text-indigo-700"
                               : "text-gray-700",
                             "flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
                           )}
@@ -228,12 +228,12 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
         <h3 className="text-lg font-medium leading-6 text-gray-900">
           {`Folders`}
         </h3>
-        <div className="flex h-28 flex-row space-x-3 overflow-x-auto py-2">
+        <div className="flex h-28 flex-row space-x-3 overflow-x-auto px-1 py-2">
           {data.folders.map((folder) => (
             <div key={folder} className="w-1/5 min-w-[8rem]">
               <Tooltip content={folder} placement="bottom">
                 <Link href={pathArrToUrl(pathArr, folder)}>
-                  <div className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md border border-gray-50 px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md">
+                  <button className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                     <FolderIcon
                       className="h-5 w-5 flex-shrink-0"
                       aria-hidden="true"
@@ -241,14 +241,14 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                     <span className="w-full truncate text-center">
                       {folder}
                     </span>
-                  </div>
+                  </button>
                 </Link>
               </Tooltip>
             </div>
           ))}
           <div className="w-1/5 min-w-[8rem]">
             <button
-              className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md border border-gray-50 px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md"
+              className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm  hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
               onClick={() => addFolderModalState[1](true)}
             >
               <FolderPlusOutline
@@ -267,7 +267,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
         <h3 className="text-lg font-medium leading-6 text-gray-900">
           {`Files`}
         </h3>
-        <div className="w-full overflow-y-auto">
+        <div className="w-full overflow-y-auto px-1">
           {data.files.length === 0 ? (
             <div className="text-center">
               <DocumentDuplicateIcon className="mx-auto h-12 w-12 text-gray-400" />
@@ -307,7 +307,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
               {data.files.map((file) => (
                 <li key={file.name} className="flex w-full flex-row gap-2">
                   <Link href={pathArrToUrl(pathArr, file.name)}>
-                    <div className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden rounded-md border border-gray-50 px-6 py-2 font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md">
+                    <button className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden rounded-md bg-white px-6 py-2 font-medium text-gray-600 shadow-sm   hover:text-indigo-600  hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                       {file.name}
                       <div className="flex flex-row gap-2">
                         {!file.config?.url ? (
@@ -325,11 +325,11 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
                           )
                         )}
                       </div>
-                    </div>
+                    </button>
                   </Link>
                   <button
-                    className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-3 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
-                    disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
+                    className="flex items-center justify-center rounded-md border border-transparent bg-white px-3 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
+                    disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
                     onClick={() => {
                       runFile({
                         file: `${path}/${file.name}`,
diff --git a/apps/cli/cli-web/src/components/filerunner.tsx b/apps/cli/cli-web/src/components/filerunner.tsx
index e76c1f4a..3cd203b6 100644
--- a/apps/cli/cli-web/src/components/filerunner.tsx
+++ b/apps/cli/cli-web/src/components/filerunner.tsx
@@ -147,9 +147,10 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                 </p>
               </div>
             </div>
-            <div className="flex h-full flex-col items-start justify-start">
+            <div className="flex h-full flex-col items-start justify-start p-1">
               <button
-                className="flex items-center justify-center gap-2 rounded-md border border-transparent border-gray-50 px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                className="flex items-center justify-center gap-1 rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
+                disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
                 onClick={() => {
                   void trigger();
                   if (JSON.stringify(prefill) !== JSON.stringify(getValues())) {
@@ -192,7 +193,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                 </p>
                 <input
                   id="url"
-                  className="block w-full rounded-md border  border-gray-300 p-1 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                  className="block w-full rounded-md border  border-gray-300 px-3 py-1.5 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                   {...register("config.url", {
                     onBlur: (e: React.FormEvent<HTMLInputElement>) => {
                       void trigger();
@@ -249,7 +250,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             <input
                               id={`config.headers.${index}.key`}
                               className={classNames(
-                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
                                 index === 0 ? "rounded-tl-md" : ""
                               )}
                               {...register(
@@ -268,7 +269,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             </label>
                             <input
                               id={`config.headers.${index}.value`}
-                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               {...register(
                                 `config.headers.${index}.value` as const
                               )}
@@ -294,7 +295,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                   </div>
                   <button
                     className={classNames(
-                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
+                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1.5 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
                       headerFields.length !== 0 ? "rounded-b-md" : "rounded-md"
                     )}
                     type="button"
@@ -327,7 +328,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             <input
                               id={`config.query.${index}.key`}
                               className={classNames(
-                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
+                                "relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
                                 index === 0 ? "rounded-tl-md" : ""
                               )}
                               {...(register(
@@ -355,7 +356,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                             </label>
                             <input
                               id={`config.query.${index}.value`}
-                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                              className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
                               {...register(
                                 `config.query.${index}.value` as const,
                                 {
@@ -395,7 +396,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
                   </div>
                   <button
                     className={classNames(
-                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
+                      "-mt-[1px] flex w-full flex-row items-center gap-1  border border-gray-300 bg-white px-4 py-1.5 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
                       queryFields.length !== 0 ? "rounded-b-md" : "rounded-md"
                     )}
                     type="button"
diff --git a/apps/cli/cli-web/src/components/response-viewer.tsx b/apps/cli/cli-web/src/components/response-viewer.tsx
index d2367159..e46282fd 100644
--- a/apps/cli/cli-web/src/components/response-viewer.tsx
+++ b/apps/cli/cli-web/src/components/response-viewer.tsx
@@ -6,11 +6,11 @@ import { classNames } from "../utils/classnames";
 import { Tooltip } from "./common/tooltip";
 
 const colorMap = {
-  trace: { label: "text-gray-600", body: "text-gray-700" }, // gray
-  debug: { label: "text-cyan-600", body: "text-cyan-700" }, // cyan
-  info: { label: "text-white", body: "text-gray-100" }, // white
-  warn: { label: "text-yellow-600", body: "text-yellow-700" }, // yellow
-  error: { label: "text-red-600", body: "text-red-700" }, // red
+  trace: { label: "text-gray-500", body: "text-gray-500" }, // gray
+  debug: { label: "text-cyan-500", body: "text-cyan-500" }, // cyan
+  info: { label: "text-white", body: "text-gray-50" }, // white
+  warn: { label: "text-yellow-500", body: "text-yellow-500" }, // yellow
+  error: { label: "text-red-400", body: "text-red-400" }, // red
 } as const;
 
 export const ResponseViewer = () => {
@@ -39,7 +39,7 @@ export const ResponseViewer = () => {
         <h3 className="text-lg font-medium leading-6 text-gray-900">{`Log`}</h3>
       </div>
 
-      <div className="h-full w-full overflow-auto rounded-md !bg-gray-900 px-1 py-4">
+      <div className="h-full w-full overflow-auto rounded-md !bg-gray-800 px-1 py-4">
         <table>
           <tbody>
             {messages.map((message, index) => (
diff --git a/apps/marketing/src/pages/index.tsx b/apps/marketing/src/pages/index.tsx
index fc6ea566..a0e78c5e 100644
--- a/apps/marketing/src/pages/index.tsx
+++ b/apps/marketing/src/pages/index.tsx
@@ -55,7 +55,8 @@ const Home: NextPage = () => {
         <div className="container flex h-full w-full flex-col items-center justify-center gap-12 px-4 py-16">
           {!open ? (
             <button
-              className="flex items-center justify-center gap-2 rounded-md border border-transparent border-gray-50 px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+              className="flex items-center justify-center gap-1 rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 
+            disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
               onClick={() => {
                 setOpen(true);
                 window.localStorage.setItem("hasClickedRun", "true");

From b57014cc691953b265a85ab2bf4e7006a1d85f0c Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Thu, 9 Mar 2023 14:47:38 -0800
Subject: [PATCH 5/5] update v0.6.2 (#94)

---
 apps/cli/cli/CHANGELOG.md | 6 ++++++
 apps/cli/cli/package.json | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/cli/cli/CHANGELOG.md b/apps/cli/cli/CHANGELOG.md
index 49402e3b..d432aeca 100644
--- a/apps/cli/cli/CHANGELOG.md
+++ b/apps/cli/cli/CHANGELOG.md
@@ -1,5 +1,11 @@
 # webhookthing
 
+## 0.6.2
+
+### Patch Changes
+
+- Fix nested folder creation on open, ui tidying and contrast improvements
+
 ## 0.6.1
 
 ### Patch Changes
diff --git a/apps/cli/cli/package.json b/apps/cli/cli/package.json
index 78cccb6c..4783d43e 100644
--- a/apps/cli/cli/package.json
+++ b/apps/cli/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "webhookthing",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "main": "./src/index.ts",
   "exports": "./dist/index.js",
   "type": "commonjs",