) => {
13 | e.preventDefault();
14 | if (!snippetName || snippetName === "") {
15 | // alert("Please write a snippet name");
16 | toast.error("Please write a snippet name", {
17 | duration: 2000,
18 | position: "bottom-right",
19 | style: {
20 | background: "#202020",
21 | color: "#fff",
22 | },
23 | });
24 | return;
25 | }
26 |
27 | // file already exists
28 | if (snippetNames.includes(snippetName)) {
29 | toast.error("Snippet already exists", {
30 | duration: 2000,
31 | position: "bottom-right",
32 | style: {
33 | background: "#202020",
34 | color: "#fff",
35 | },
36 | });
37 | return;
38 | }
39 |
40 | const desktopPath = await desktopDir();
41 | writeTextFile(`${desktopPath}/taurifiles/${snippetName}.json`, "");
42 | addSnippetName(snippetName);
43 | setSnippetName("");
44 |
45 | toast.success("Snippet saved", {
46 | duration: 2000,
47 | position: "bottom-right",
48 | style: {
49 | background: "#202020",
50 | color: "#fff",
51 | },
52 | });
53 | };
54 | return (
55 |
66 | );
67 | }
68 |
69 | export default SnippetForm;
70 |
--------------------------------------------------------------------------------
/src/components/SnippetItem.tsx:
--------------------------------------------------------------------------------
1 | import { FiTrash, FiX } from "react-icons/fi";
2 | import { toast } from "react-hot-toast";
3 | import { useSnippetStore } from "../store/snippetsStore";
4 | import { desktopDir, join } from "@tauri-apps/api/path";
5 | import { removeFile, readTextFile } from "@tauri-apps/api/fs";
6 | import { twMerge } from "tailwind-merge";
7 |
8 | type SnippetItemProps = {
9 | file: string;
10 | };
11 |
12 | function SnippetItem({ file }: SnippetItemProps) {
13 | const removeSnippetName = useSnippetStore((state) => state.removeSnippetName);
14 | const setSelectSnippet = useSnippetStore((state) => state.setSelectedSnippet);
15 | const selectedSnippetName = useSnippetStore((state) => state.selectedSnippet);
16 | console.log(selectedSnippetName);
17 |
18 | const handleDelete = async (file: string) => {
19 | const accept = await window.confirm(
20 | "Are you sure you want to delete this snippet?"
21 | );
22 | if (!accept) return;
23 |
24 | const desktopPath = await desktopDir();
25 | const filePath = await join(desktopPath, "taurifiles", `${file}.json`);
26 | await removeFile(filePath);
27 |
28 | removeSnippetName(file);
29 |
30 | toast.success("Snippet deleted", {
31 | duration: 2000,
32 | position: "bottom-right",
33 | style: {
34 | background: "#202020",
35 | color: "#fff",
36 | },
37 | });
38 | };
39 |
40 | return (
41 | {
47 |
48 | setSelectSnippet(null);
49 |
50 | const desktopPath = await desktopDir();
51 | const filePath = await join(desktopPath, "taurifiles", `${file}.json`);
52 | const snippet = await readTextFile(filePath);
53 | console.log(snippet)
54 | setSelectSnippet({
55 | name: file,
56 | code: snippet,
57 | });
58 | }}
59 | >
60 | {file}
61 |
62 | {setSelectSnippet && (
63 |
64 | {
67 | e.stopPropagation();
68 | handleDelete(file);
69 | }}
70 | />
71 | {
74 | e.stopPropagation();
75 | setSelectSnippet(null);
76 | }}
77 | />
78 |
79 | )}
80 |
81 | );
82 | }
83 |
84 | export default SnippetItem;
85 |
--------------------------------------------------------------------------------
/src/components/SnippetList.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "react";
2 | import { desktopDir } from "@tauri-apps/api/path";
3 | import { readDir } from "@tauri-apps/api/fs";
4 | import { useSnippetStore } from "../store/snippetsStore";
5 | import SnippetItem from "./SnippetItem";
6 |
7 | function SnippetList() {
8 | const setSnippetNames = useSnippetStore((state) => state.setSnippetsNames);
9 | const snippetNames = useSnippetStore((state) => state.snippetsNames);
10 |
11 | useEffect(() => {
12 | async function loadFiles() {
13 | const desktopPath = await desktopDir();
14 | const result = await readDir(`${desktopPath}/taurifiles`);
15 | const filenames = result.map((file) => file.name!.split(".")[0]);
16 | setSnippetNames(filenames);
17 | }
18 | loadFiles();
19 | }, []);
20 |
21 | return (
22 |
23 | {snippetNames.map((file, i) => (
24 |
25 | ))}
26 |
27 | );
28 | }
29 |
30 | export default SnippetList;
31 |
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom/client";
3 | import App from "./App";
4 | import "./styles.css";
5 |
6 | ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
7 |
8 |
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/src/store/snippetsStore.ts:
--------------------------------------------------------------------------------
1 | import { create } from "zustand";
2 | import { devtools } from "zustand/middleware";
3 |
4 | interface Snippet {
5 | name: string;
6 | code: string | null;
7 | }
8 |
9 | interface SnippetState {
10 | snippetsNames: string[];
11 | selectedSnippet: Snippet | null;
12 | addSnippetName: (name: string) => void;
13 | setSnippetsNames: (names: string[]) => void;
14 | removeSnippetName: (name: string) => void;
15 | setSelectedSnippet: (snippet: Snippet | null) => void;
16 | }
17 |
18 | export const useSnippetStore = create()(
19 | devtools((set) => ({
20 | snippetsNames: [],
21 | selectedSnippet: null,
22 | addSnippetName: (name) =>
23 | set((state) => ({ snippetsNames: [...state.snippetsNames, name] })),
24 | setSnippetsNames: (names) => set({ snippetsNames: names }),
25 | removeSnippetName: (name) =>
26 | set((state) => ({
27 | snippetsNames: state.snippetsNames.filter((n) => n !== name),
28 | })),
29 | setSelectedSnippet: (snippet) => set({ selectedSnippet: snippet }),
30 | }))
31 | );
32 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | color: white;
7 | background-color: #202020;
8 | }
9 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | export default {
3 | content: [
4 | "./index.html",
5 | "./src/**/*.{js,ts,jsx,tsx}",
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
13 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ESNext",
4 | "useDefineForClassFields": true,
5 | "lib": ["DOM", "DOM.Iterable", "ESNext"],
6 | "allowJs": false,
7 | "skipLibCheck": true,
8 | "esModuleInterop": false,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "ESNext",
13 | "moduleResolution": "Node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx"
18 | },
19 | "include": ["src"],
20 | "references": [{ "path": "./tsconfig.node.json" }]
21 | }
22 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "module": "ESNext",
5 | "moduleResolution": "Node",
6 | "allowSyntheticDefaultImports": true
7 | },
8 | "include": ["vite.config.ts"]
9 | }
10 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "vite";
2 | import react from "@vitejs/plugin-react";
3 |
4 | // https://vitejs.dev/config/
5 | export default defineConfig(async () => ({
6 | plugins: [react()],
7 |
8 | // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
9 | // prevent vite from obscuring rust errors
10 | clearScreen: false,
11 | // tauri expects a fixed port, fail if that port is not available
12 | server: {
13 | port: 1420,
14 | strictPort: true,
15 | },
16 | // to make use of `TAURI_DEBUG` and other env variables
17 | // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
18 | envPrefix: ["VITE_", "TAURI_"],
19 | build: {
20 | // Tauri supports es2021
21 | target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
22 | // don't minify for debug builds
23 | minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
24 | // produce sourcemaps for debug builds
25 | sourcemap: !!process.env.TAURI_DEBUG,
26 | },
27 | }));
28 |
--------------------------------------------------------------------------------