set and get provider priority

frontend/libs/components/settings-modal/src/lib/panes/ProviderPrioritySettingsPane.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   DndContext,
   closestCenter,
@@ -21,7 +21,7 @@ import {
   faGripVertical,
   faSpinnerThird,
 } from "@fortawesome/pro-solid-svg-icons";
-import { SetProviderOrder, Provider } from "@storyteller/tauri-api";
+import { SetProviderOrder, Provider, GetProviderOrder } from "@storyteller/tauri-api";
 
 interface ProviderItem {
   id: Provider;
@@ -82,14 +82,40 @@ const SortableItem = ({
   );
 };
 
+const ProviderItemMap = {
+  [Provider.ArtCraft]: { id: Provider.ArtCraft, name: "ArtCraft", emoji: "🎨" },
+  [Provider.Fal]: { id: Provider.Fal, name: "Fal", emoji: "🤖" },
+  [Provider.Sora]: { id: Provider.Sora, name: "Sora / ChatGPT", emoji: "⚡" },
+};
+
 export const ProviderPrioritySettingsPane = () => {
-  const [items, setItems] = useState<ProviderItem[]>([
-    { id: Provider.ArtCraft, name: "ArtCraft", emoji: "🎨" },
-    { id: Provider.Fal, name: "Fal", emoji: "🤖" },
-    { id: Provider.Sora, name: "Sora / ChatGPT", emoji: "⚡" },
-  ]);
+  const [items, setItems] = useState<ProviderItem[]>([]);
+
   const [isUpdating, setIsUpdating] = useState(false);
 
+  useEffect(() => {
+    const fetchData = async () => {
+      const providers = await GetProviderOrder();
+
+      let items: ProviderItem[] = [];
+
+      // Add providers from backend (in order)
+      for (let provider of providers.payload.providers) {
+        items.push(ProviderItemMap[provider]);
+      }
+
+      // Add providers not in backend (in order)
+      for (const [key, value] of Object.entries(ProviderItemMap)) {
+        if (!providers.payload.providers.includes(key as Provider)) {
+          items.push(value)
+        }
+      }
+
+      setItems(items);
+    };
+    fetchData();
+  }, []);
+
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -107,7 +133,6 @@ export const ProviderPrioritySettingsPane = () => {
 
       await SetProviderOrder({ providers: ordering });
 
-
       console.log("Provider priority updated successfully");
     } catch (error) {
       console.error("Failed to update provider priority:", error);

frontend/libs/tauri-api/src/index.ts

@@ -19,4 +19,5 @@ export * from "./lib/sora/waitForSoraLogin.js";
 export * from "./lib/system/GetAppInfo.js";
 export * from "./lib/providers/SetProviderOrder.js";
 export * from "./lib/providers/Provider.js";
+export * from "./lib/providers/GetProviderOrder.js";
 

frontend/libs/tauri-api/src/lib/providers/GetProviderOrder.ts

@@ -0,0 +1,22 @@
+import { invoke } from "@tauri-apps/api/core";
+import { CommandResult } from "../common/CommandStatus";
+import { Provider } from "./Provider";
+
+export interface GetProviderOrderSuccess extends CommandResult {
+  payload: GetProviderOrderPayload;
+}
+
+export interface GetProviderOrderPayload {
+  providers: Provider[];
+}
+
+// Returns the Success and Error variants directly.
+// Throws on Network/Tauri errors.
+export const GetProviderOrder = async () : Promise<GetProviderOrderSuccess> => {
+  try {
+    return await invoke("get_provider_order_command") as GetProviderOrderSuccess;
+  } catch (error) {
+    // NB: Endpoint should be infalliable
+    throw error;
+  }
+}