diff --git a/assets/supabase/connect-supabase-dark.svg b/assets/supabase/connect-supabase-dark.svg new file mode 100644 index 0000000..73da0b1 --- /dev/null +++ b/assets/supabase/connect-supabase-dark.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/supabase/connect-supabase-light.svg b/assets/supabase/connect-supabase-light.svg new file mode 100644 index 0000000..ecdd633 --- /dev/null +++ b/assets/supabase/connect-supabase-light.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/supabase/supabase-logo-wordmark--dark.svg b/assets/supabase/supabase-logo-wordmark--dark.svg new file mode 100644 index 0000000..9e96fab --- /dev/null +++ b/assets/supabase/supabase-logo-wordmark--dark.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/supabase/supabase-logo-wordmark--light.svg b/assets/supabase/supabase-logo-wordmark--light.svg new file mode 100644 index 0000000..60cbc71 --- /dev/null +++ b/assets/supabase/supabase-logo-wordmark--light.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/GitHubConnector.tsx b/src/components/GitHubConnector.tsx index 71a8033..b37d755 100644 --- a/src/components/GitHubConnector.tsx +++ b/src/components/GitHubConnector.tsx @@ -173,11 +173,11 @@ export function GitHubConnector({ appId, folderName }: GitHubConnectorProps) { if (!settings?.githubAccessToken) { return ( -
+
{" "} + This app is connected to project: {app.supabaseProjectName} @@ -119,7 +126,7 @@ export function SupabaseConnector({ appId }: { appId: number }) { ); } return ( - + Supabase Projects @@ -188,15 +195,20 @@ export function SupabaseConnector({ appId }: { appId: number }) { return (
-

Supabase Integration

- - +
+

Integrations

+ { + IpcClient.getInstance().openExternalUrl( + "https://supabase-oauth.dyad.sh/api/connect-supabase/login" + ); + }} + src={isDarkMode ? connectSupabaseDark : connectSupabaseLight} + alt="Connect to Supabase" + className="w-full h-10 min-h-8 min-w-20 cursor-pointer" + // className="h-10" + /> +
); } diff --git a/src/components/chat/CodeHighlight.tsx b/src/components/chat/CodeHighlight.tsx index 51eb446..b26e43b 100644 --- a/src/components/chat/CodeHighlight.tsx +++ b/src/components/chat/CodeHighlight.tsx @@ -17,28 +17,7 @@ export const CodeHighlight = memo( const language = className?.match(/language-(\w+)/)?.[1]; const isInline = node ? isInlineCode(node) : false; - // Get the current theme setting - const { theme } = useTheme(); - - // State to track if dark mode is active - const [isDarkMode, setIsDarkMode] = React.useState(false); - - // Determine if dark mode is active when component mounts or theme changes - useEffect(() => { - const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); - const updateTheme = () => { - setIsDarkMode( - theme === "dark" || (theme === "system" && darkModeQuery.matches) - ); - }; - - updateTheme(); - darkModeQuery.addEventListener("change", updateTheme); - - return () => { - darkModeQuery.removeEventListener("change", updateTheme); - }; - }, [theme]); + const { isDarkMode } = useTheme(); // Cache for the highlighted code const highlightedCodeCache = useRef(null); diff --git a/src/contexts/ThemeContext.tsx b/src/contexts/ThemeContext.tsx index 4064040..66b790a 100644 --- a/src/contexts/ThemeContext.tsx +++ b/src/contexts/ThemeContext.tsx @@ -53,5 +53,24 @@ export function useTheme() { if (context === undefined) { throw new Error("useTheme must be used within a ThemeProvider"); } - return context; + const [isDarkMode, setIsDarkMode] = useState(false); + const { theme, setTheme } = context; + + // Determine if dark mode is active when component mounts or theme changes + useEffect(() => { + const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)"); + const updateTheme = () => { + setIsDarkMode( + theme === "dark" || (theme === "system" && darkModeQuery.matches) + ); + }; + + updateTheme(); + darkModeQuery.addEventListener("change", updateTheme); + + return () => { + darkModeQuery.removeEventListener("change", updateTheme); + }; + }, [theme]); + return { theme, isDarkMode, setTheme }; } diff --git a/src/pages/app-details.tsx b/src/pages/app-details.tsx index 9f47e70..bbc260a 100644 --- a/src/pages/app-details.tsx +++ b/src/pages/app-details.tsx @@ -147,59 +147,66 @@ export default function AppDetailsPage() { onClick={() => router.history.back()} variant="outline" size="sm" - className="absolute top-4 left-4 flex items-center gap-2 bg-(--background-lightest) py-5" + className="absolute top-4 left-4 flex items-center gap-1 bg-(--background-lightest) py-5" > - - Go Back + + Back
-

App not found

+

App not found

); } return ( -
+
-
-
-

{selectedApp.name}

+
+
+

{selectedApp.name}

{/* Overflow Menu in top right */} -
+
- - -
- @@ -208,38 +215,38 @@ export default function AppDetailsPage() {
-
+
- + Created {new Date().toLocaleString()}
- + Last Updated {new Date().toLocaleString()}
- + Path - + {appBasePath.replace("$APP_BASE_PATH", selectedApp.path)}
-
+
{appId && settings?.experiments?.enableSupabaseIntegration && ( @@ -249,22 +256,23 @@ export default function AppDetailsPage() { {/* Rename Dialog */} - - + + Rename App setNewAppName(e.target.value)} placeholder="Enter new app name" - className="my-4" + className="my-2" autoFocus /> - + @@ -274,6 +282,7 @@ export default function AppDetailsPage() { setIsRenameConfirmDialogOpen(true); }} disabled={isRenaming || !newAppName.trim()} + size="sm" > Continue @@ -286,10 +295,10 @@ export default function AppDetailsPage() { open={isRenameFolderDialogOpen} onOpenChange={setIsRenameFolderDialogOpen} > - - + + Rename app folder - + This will change only the folder name, not the app name. @@ -297,25 +306,27 @@ export default function AppDetailsPage() { value={newFolderName} onChange={(e) => setNewFolderName(e.target.value)} placeholder="Enter new folder name" - className="my-4" + className="my-2" autoFocus /> - +
- + @@ -404,19 +418,20 @@ export default function AppDetailsPage() { {/* Delete Confirmation Dialog */} - - + + Delete "{selectedApp.name}"? - + This action is irreversible. All app files and chat history will be permanently deleted. - + @@ -424,12 +439,13 @@ export default function AppDetailsPage() { variant="destructive" onClick={handleDeleteApp} disabled={isDeleting} - className="flex items-center gap-2" + className="flex items-center gap-1" + size="sm" > {isDeleting ? ( <>