Update custom-folder extension

- chore: metadata update
- chore: re-installed utils
- chore: command description
- feat: create form update
- feat(wip): changelog & readme
- feat(wip): result & replace action
- feat(wip): replaceIcon script
- chore: verifications
- Merge pull request raycast#1 from Ph-lo/feat-image-shades
- feat: image shades option
- feat(wip): image shades
- chore: metadata size & lint
- chore: package.json
- chore: package.json categories
- chore: package.json owner
- chore: organization handle set in package.json
- fix: result view file name
- feat: initial commit

extensions/custom-folder/CHANGELOG.md

@@ -1,7 +1,10 @@
-# Custom Folder Changelog
+# Custom folder Changelog
+
+## [Feat Easily apply the custom icon] - 2024-08-25
+- Added the ability to easily apply the new custom icon to a target folder.
 
 ## [Feat Image shades ] - 2024-08-05
 - Added optional toggle - shading effect on the image, switching between a filled mask and shaded tones.
 
 ## [Initial Version] - 2023-12-16
-- Custom folder extension
+- Custom folder extension

extensions/custom-folder/README.md

@@ -1,6 +1,13 @@
-# Custom Folder
+# Custom folder
 
-Create custom MacOS folder images.
+Customize MacOs folder icons.
 
-![custom-folder-1](metadata/custom-folder-1.png)
-![custom-folder-2](metadata/custom-folder-2.png)
+## Features
+- Create custom folder images.
+- Apply custom folder images to a target folder.
+
+## Options
+- `Target path` - The path to the folder you want to apply the custom image to.
+- `Ouput path` - The path to save the custom folder image (default is `Image path`).
+- `Padding` - The padding around the image.
+- `Shades` - Apply a shading effect to the image to keep shaded tones.

extensions/custom-folder/package.json

@@ -1,8 +1,8 @@
 {
   "$schema": "https://www.raycast.com/schemas/extension.json",
   "name": "custom-folder",
-  "title": "Custom Folder",
-  "description": "Create custom MacOS folder images.",
+  "title": "Custom folder",
+  "description": "Customize MacOS folder icons.",
   "icon": "custom-folder-icon.png",
   "author": "phlo",
   "categories": [
@@ -13,13 +13,14 @@
   "commands": [
     {
       "name": "index",
-      "title": "Create Folder Image",
-      "description": "Create a custom folder image.",
+      "title": "Customize folder",
+      "description": "Create a custom folder image. Allows to save or directly apply.",
       "mode": "view"
     }
   ],
   "dependencies": {
     "@raycast/api": "^1.64.3",
+    "@raycast/utils": "^1.16.5",
     "jimp": "^0.22.10",
     "sharp": "^0.33.0"
   },

extensions/custom-folder/src/createForm.tsx

@@ -10,6 +10,7 @@ export default function CreateForm() {
     imagePath: undefined,
     outputPath: undefined,
   });
+
   const { push } = useNavigation();
   function handleSubmit(values: FolderForm) {
     const file = values.file[0];
@@ -71,6 +72,14 @@ export default function CreateForm() {
           dropPathErrorIfNeeded(event?.target?.value?.[0] || "");
         }}
       />
+      <Form.FilePicker
+        id="targetFolderPath"
+        title="Target path"
+        allowMultipleSelection={false}
+        canChooseDirectories
+        canChooseFiles={false}
+        info={"Optional path to the folder you want to customize."}
+      />
       <Form.FilePicker
         id="output"
         title="Output path"

extensions/custom-folder/src/replaceAction.tsx

@@ -0,0 +1,41 @@
+import { Action, popToRoot } from "@raycast/api";
+import { useExec } from "@raycast/utils";
+import { FC, useEffect, useState } from "react";
+import { replaceIconScript } from "./utils/replaceIconScript";
+
+interface ReplaceActionProps {
+  iconPath: string;
+  targetFolderPath: string;
+  onAction: () => Promise<void>;
+}
+
+export const ReplaceAction: FC<ReplaceActionProps> = ({ iconPath, targetFolderPath, onAction }) => {
+  const [shouldExec, setShouldExec] = useState<boolean>(false);
+  const scriptContent = replaceIconScript(iconPath, targetFolderPath);
+
+  const { error } = useExec(`${scriptContent}`, {
+    shell: true,
+    execute: shouldExec || false,
+    failureToastOptions: {
+      title: "Failed to apply icon",
+      message: "Please try again, or save the icon and apply manually.",
+    },
+    onData: () => popToRoot(),
+  });
+
+  useEffect(() => {
+    // console.error("error: ", error);
+  }, [error]);
+
+  return (
+    <Action
+      title={"Apply to Folder"}
+      icon={"switch-16"}
+      onAction={() => {
+        onAction().then(() => {
+          setShouldExec(true);
+        });
+      }}
+    />
+  );
+};