feat: Add option to create icons on the tray

src/App.tsx

@@ -1,5 +1,17 @@
+import { useTrayAppsStore } from "./stores/useTrayAppsStore";
+import { CreateTrayAppForm } from "./components/CreateTrayAppForm";
+import { TrayAppInfo } from "./components/TrayAppInfo";
+
 function App() {
-  return <>Trayfier</>
+  const { trayApps } = useTrayAppsStore()
+
+  return <>
+    <h1>Add a Tray icon to your Tray</h1>
+
+    <CreateTrayAppForm />
+
+    {trayApps.map((trayApp) => <TrayAppInfo key={trayApp.id} trayApp={trayApp} />)}
+  </>
 }
 
 export default App;

src/components/CreateTrayAppForm.tsx

@@ -0,0 +1,28 @@
+import { FormEvent } from "react";
+import { useTrayAppsStore } from "../stores/useTrayAppsStore";
+
+export const CreateTrayAppForm = () => {
+    const { addTrayApp } = useTrayAppsStore()
+
+    const handleCreateTrayApp = async (e: FormEvent) => {
+        e.preventDefault();
+
+        const fields = new FormData(e.target as HTMLFormElement);
+
+        const name = fields.get("trayAppName");
+
+        if (!name) return
+
+        if (typeof name !== "string") return
+
+        addTrayApp({ name })
+    }
+
+    return <form onSubmit={handleCreateTrayApp}>
+
+        <label htmlFor="trayAppName">Name</label>
+        <input id="trayAppName" name="trayAppName" />
+
+        <button type="submit">Add Tray App</button>
+    </form>
+}

src/components/TrayAppInfo.tsx

@@ -0,0 +1,20 @@
+import { TrayApp } from "../features/TrayApp/domain/TrayApp"
+import { useTrayAppsStore } from "../stores/useTrayAppsStore"
+
+type TrayAppInfoProps = {
+    trayApp: TrayApp
+}
+
+export const TrayAppInfo = ({ trayApp }: TrayAppInfoProps) => {
+    const { deleteTrayApp } = useTrayAppsStore()
+
+    const handleDeleteTrayApp = async (trayAppId: TrayApp) => {
+        deleteTrayApp(trayAppId)
+    }
+
+    return <div>
+        <img src={trayApp.icon} alt={trayApp.name} />
+        <span>{trayApp.name}</span>
+        <button onClick={() => handleDeleteTrayApp(trayApp)}>Delete</button>
+    </div>
+}

src/features/TrayApp/application/hideTrayApp.ts

@@ -0,0 +1,6 @@
+import { TrayApp } from "../domain/TrayApp";
+import { TrayAppVisibilityManager } from "../domain/TrayAppVisibilityManager";
+
+export const hideTrayApp = async (trayApp: TrayApp, displayer: TrayAppVisibilityManager) => {
+    await displayer.hide(trayApp);
+}

src/features/TrayApp/application/showTrayApp.ts

@@ -0,0 +1,6 @@
+import { TrayApp } from "../domain/TrayApp";
+import { TrayAppVisibilityManager } from "../domain/TrayAppVisibilityManager";
+
+export const showTrayApp = async (trayApp: TrayApp, displayer: TrayAppVisibilityManager) => {
+    await displayer.show(trayApp);
+}

src/features/TrayApp/domain/TrayApp.ts

@@ -0,0 +1,11 @@
+export class TrayApp {
+    private constructor(
+        readonly id: string,
+        readonly icon: string = "./icons/icon.png",
+        readonly name: string,
+    ) { }
+
+    static create({ id, icon, name }: { id: string, icon?: string, name: string }) {
+        return new TrayApp(id, icon, name);
+    }
+}

src/features/TrayApp/domain/TrayAppHider.ts

@@ -0,0 +1,5 @@
+import { TrayApp } from "./TrayApp";
+
+export interface TrayAppHider {
+    run: (trayApp: TrayApp) => Promise<void>
+}

src/features/TrayApp/domain/TrayAppRepository.ts

@@ -0,0 +1,11 @@
+import { TrayApp } from "./TrayApp";
+
+export interface TrayAppRepository {
+    subscribers: ((trayApps: TrayApp[]) => void)[];
+    subscribeToTrayApps(callback: (trayApps: TrayApp[]) => void): void;
+
+    addTrayApp(trayApp: TrayApp): void;
+    getTrayApps(): TrayApp[];
+
+    deleteTrayApp(trayAppId: string): void;
+}

src/features/TrayApp/domain/TrayAppVisibilityManager.ts

@@ -0,0 +1,6 @@
+import { TrayApp } from "./TrayApp";
+
+export interface TrayAppVisibilityManager {
+    show: (trayApp: TrayApp) => Promise<void>
+    hide: (trayApp: TrayApp) => Promise<void>
+}

src/features/TrayApp/infrastructure/TauriTrayAppDisplayer.ts

@@ -0,0 +1,23 @@
+import { TrayIcon } from "@tauri-apps/api/tray";
+import { TrayApp } from "../domain/TrayApp";
+import { TrayAppVisibilityManager } from "../domain/TrayAppVisibilityManager";
+
+export class TauriTrayAppVisibilityManager implements TrayAppVisibilityManager {
+    async show(trayApp: TrayApp) {
+        await TrayIcon.new({
+            icon: trayApp.icon,
+            tooltip: trayApp.name,
+            id: trayApp.id,
+        })
+    }
+
+    async hide(trayApp: TrayApp) {
+        const tray = await TrayIcon.getById(trayApp.id)
+
+        console.log(tray)
+
+        if (!tray) return
+
+        await tray.close().then(console.log).catch(console.error)
+    }
+}

src/services/createTrayApp.ts

@@ -0,0 +1,14 @@
+import { TrayApp } from "../features/TrayApp/domain/TrayApp";
+
+export interface TrayAppParams {
+    name: string;
+}
+
+export const createTrayApp = (trayApp: TrayAppParams) => {
+    return TrayApp.create({
+        name: trayApp.name,
+        id: crypto.randomUUID(),
+        icon: "./icons/icon.png"
+    })
+
+}

src/stores/useTrayAppsStore.ts

@@ -0,0 +1,32 @@
+import { create } from "zustand";
+import { TrayApp } from "../features/TrayApp/domain/TrayApp";
+import { showTrayApp } from "../features/TrayApp/application/showTrayApp";
+import { TauriTrayAppVisibilityManager } from "../features/TrayApp/infrastructure/TauriTrayAppDisplayer";
+import { hideTrayApp } from "../features/TrayApp/application/hideTrayApp";
+import { TrayAppParams, createTrayApp } from "../services/createTrayApp";
+
+type TrayAppStore = {
+    trayApps: TrayApp[];
+    addTrayApp: (trayApp: TrayAppParams) => void;
+    deleteTrayApp: (trayAppId: TrayApp) => void;
+}
+
+const trayAppVisibilityManager = new TauriTrayAppVisibilityManager()
+
+export const useTrayAppsStore = create<TrayAppStore>()((set) => ({
+    trayApps: [],
+
+    addTrayApp: (trayInfo: TrayAppParams) => {
+        const trayApp = createTrayApp(trayInfo)
+
+        set((state) => ({ trayApps: [...state.trayApps, trayApp] }))
+
+        showTrayApp(trayApp, trayAppVisibilityManager)
+    },
+
+    deleteTrayApp: (trayApp: TrayApp) => {
+        set((state) => ({ trayApps: state.trayApps.filter(app => app !== trayApp) }))
+
+        hideTrayApp(trayApp, trayAppVisibilityManager)
+    }
+}));