🚀 feat: enhance Sources component with search and reload functionality

- Integrated search functionality in `Sources.tsx`. This allows users to filter the displayed sources based on their query, improving the usability of the component.
- Added a reload button with a `RotateCcw` icon from `lucide-react` to re-fetch sources. This provides a convenient way for users to refresh the list of sources without reloading the entire page.
- Implemented loading state management with `sourcesLoading` state variable. It enhances user experience by indicating when sources are being loaded.
- Created a new `Input` component in `ui/input.tsx`. This modular approach improves code reusability and maintainability by providing a standard input component for the application.

Author: mangledbottles

src/components/Sources.tsx

@@ -1,5 +1,8 @@
 import { useMemo, useState } from "react";
 import { Source, SourceType } from "../utils";
+import { Input } from "./ui/input";
+import { Button } from "./ui/button";
+import { RotateCcw } from "lucide-react";
 
 async function getScreenSources() {
   try {
@@ -20,39 +23,82 @@ export function ScreenSources({
   selectedSource: Source | null;
   setSelectedSource: (source: Source) => void;
 }) {
-  const [sources, setSources] = useState<any[]>([]);
+  const [sources, setSources] = useState<Source[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [sourcesLoading, setSourcesLoading] = useState(true);
 
-  useMemo(() => {
+  const getSources = async () => {
+    setSourcesLoading(true);
     getScreenSources().then((newSources) => {
       const uniqueSources = Array.from(
         new Set(newSources.map((source) => JSON.stringify(source)))
       ).map((source) => JSON.parse(source));
+      setSourcesLoading(false);
       setSources(uniqueSources);
     });
-  }, []);
+  };
 
-  if (!sources.length) return <SourcesSkeleton />;
+  useMemo(() => {
+    getSources();
+  }, []);
 
   return (
-    <div className="not-prose my-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
-      {sources.map((source) => (
-        <QuickLink
-          key={source.id}
-          title={source.name}
-          applicationName={source.applicationName}
-          imageUrl={source.thumbnail}
-          source={source}
-          selectedSource={selectedSource}
-          setSelectedSource={setSelectedSource}
+    <>
+      <div className="flex justify-between items-center space-x-2 mt-4">
+        <Input
+          placeholder="Search"
+          className="h-8 w-[150px] lg:w-[250px]"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
         />
-      ))}
-    </div>
+        <Button
+          variant="outline"
+          size="sm"
+          className={`h-8`}
+          onClick={() => getSources()}
+        >
+          <RotateCcw
+            className={`h-4 w-4 ${
+              sourcesLoading ? "animate-spin-reverse" : ""
+            }`}
+          />
+        </Button>
+      </div>
+      {!sources.length || sourcesLoading ? (
+        <SourcesSkeleton />
+      ) : (
+        <div className="not-prose mb-6 mt-2 grid grid-cols-1 gap-4 sm:grid-cols-3">
+          {sources
+            .filter((source) => {
+              if (!searchQuery) return true;
+              const regex = new RegExp(searchQuery, "i");
+              return (
+                (source?.applicationName &&
+                  regex.test(source?.applicationName)) ||
+                regex.test(source?.name) ||
+                regex.test(source?.id)
+              );
+            })
+            .map((source) => (
+              <QuickLink
+                key={source.id}
+                title={source.name}
+                applicationName={source.applicationName ?? source.name}
+                imageUrl={source.thumbnail}
+                source={source}
+                selectedSource={selectedSource}
+                setSelectedSource={setSelectedSource}
+              />
+            ))}
+        </div>
+      )}
+    </>
   );
 }
 
 const SourcesSkeleton = () => {
   return (
-    <div className="not-prose my-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
+    <div className="not-prose mb-6 mt-2 grid grid-cols-1 gap-4 sm:grid-cols-3">
       {Array.from({ length: 6 }).map((_, i) => (
         <div
           key={i}

src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }