feat: github fix and ui improvements (#1685)

* feat: Add reusable UI components and fix GitHub repository display

* style: Fix linting issues in UI components

* fix: Add close icon to GitHub Connection Required dialog

* fix: Add CloseButton component to fix white background issue in dialog close icons

* Fix close button styling in dialog components to address ghost white issue in dark mode

* fix: update icon color to tertiary for consistency

The icon color was changed from `text-bolt-elements-icon-info` to `text-bolt-elements-icon-tertiary`

* fix: improve repository selection dialog tab styling for dark mode

- Update tab menu styling to prevent white background in dark mode
- Use explicit color values for better dark/light mode compatibility
- Improve hover and active states for better visual hierarchy
- Remove unused Tabs imports

---------

Co-authored-by: KevIsDev <zennerd404@gmail.com>

app/components/ui/SearchInput.tsx

@@ -0,0 +1,80 @@
+import React, { forwardRef } from 'react';
+import { classNames } from '~/utils/classNames';
+import { Input } from './Input';
+import { motion, AnimatePresence } from 'framer-motion';
+
+interface SearchInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  /** Function to call when the clear button is clicked */
+  onClear?: () => void;
+
+  /** Whether to show the clear button when there is input */
+  showClearButton?: boolean;
+
+  /** Additional class name for the search icon */
+  iconClassName?: string;
+
+  /** Additional class name for the container */
+  containerClassName?: string;
+
+  /** Whether the search is loading */
+  loading?: boolean;
+}
+
+/**
+ * SearchInput component
+ *
+ * A search input field with a search icon and optional clear button.
+ */
+export const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
+  (
+    { className, onClear, showClearButton = true, iconClassName, containerClassName, loading = false, ...props },
+    ref,
+  ) => {
+    const hasValue = Boolean(props.value);
+
+    return (
+      <div className={classNames('relative flex items-center w-full', containerClassName)}>
+        {/* Search icon or loading spinner */}
+        <div
+          className={classNames(
+            'absolute left-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary',
+            iconClassName,
+          )}
+        >
+          {loading ? (
+            <span className="i-ph:spinner-gap animate-spin w-4 h-4" />
+          ) : (
+            <span className="i-ph:magnifying-glass w-4 h-4" />
+          )}
+        </div>
+
+        {/* Input field */}
+        <Input
+          ref={ref}
+          className={classNames('pl-10', hasValue && showClearButton ? 'pr-10' : '', className)}
+          {...props}
+        />
+
+        {/* Clear button */}
+        <AnimatePresence>
+          {hasValue && showClearButton && (
+            <motion.button
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.8 }}
+              transition={{ duration: 0.15 }}
+              type="button"
+              onClick={onClear}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary p-1 rounded-full hover:bg-bolt-elements-background-depth-2"
+              aria-label="Clear search"
+            >
+              <span className="i-ph:x w-3.5 h-3.5" />
+            </motion.button>
+          )}
+        </AnimatePresence>
+      </div>
+    );
+  },
+);
+
+SearchInput.displayName = 'SearchInput';