ui improvements

Surfer-Org · Sep 19, 2024 · a5491e5 · a5491e5
1 parent 4a01c51
commit a5491e5
Show file tree

Hide file tree

Showing 7 changed files with 225 additions and 150 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -103,6 +103,7 @@
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
+    "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@reduxjs/toolkit": "^2.2.5",
     "@supabase/supabase-js": "^2.45.1",

diff --git a/src/main/Scrapers/X Corp/bookmarks.js b/src/main/Scrapers/X Corp/bookmarks.js
@@ -55,7 +55,7 @@ async function exportBookmarks(id, platformId, filename, company, name) {
   if (!window.location.href.includes('x.com')) {
     bigStepper(id, 'Navigating to Twitter');
     customConsoleLog(id, 'Navigating to Twitter');
-    window.location.assign('https://x.com/i/bookmarks');
+    window.location.assign('https://x.com/i/bookmarks/all');
   }
   await wait(5);
   if (document.body.innerText.toLowerCase().includes('sign in to x')) {

diff --git a/src/main/main.ts b/src/main/main.ts
@@ -157,10 +157,6 @@ ipcMain.on('get-files-in-folder', (event, folderPath) => {
   event.reply('files-in-folder', files);
 });
 
-ipcMain.on('open-external', (event, url) => {
-  shell.openExternal(url);
-});
-
 ipcMain.on('get-version-number', (event) => {
   event.reply('version-number', app.getVersion());
 });

diff --git a/src/renderer/components/header/SettingsButton.jsx b/src/renderer/components/header/SettingsButton.jsx
diff --git a/src/renderer/components/header/SurferHeader.jsx b/src/renderer/components/header/SurferHeader.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Eye, Home } from 'lucide-react';
+import { Eye, Home, Moon, Sun } from 'lucide-react';
 import { useSelector, useDispatch } from 'react-redux';
 import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator } from "../ui/breadcrumb";
 import {
@@ -12,9 +12,10 @@ import {
 import { useTheme } from '../ui/theme-provider';
 import { setCurrentRoute, toggleRunVisibility, updateBreadcrumbToIndex, setIsMac, setIsFullScreen } from '../../state/actions';
 import { Button } from '../ui/button';
-import SettingsButton from './SettingsButton';
+import { Toggle } from '../ui/toggle';
 import { setIsRunLayerVisible } from '../../state/actions';
 import SupportButton from './SupportButton';
+import { Settings } from 'lucide-react';
 
 const getStyleHorizontalLock = (style) =>
   style?.transform
@@ -560,7 +561,7 @@ export const SurferHeader = () => {
   const runs = useSelector((state) => state.app.runs);
   const isFullScreen = useSelector((state) => state.app.isFullScreen);
   const isMac = useSelector((state) => state.app.isMac);
-  const { theme } = useTheme();
+  const { theme, setTheme } = useTheme();
   const activeRuns = runs.filter((run) => run.status === 'running').length;
   const [allPlatforms, setAllPlatforms] = useState([]); 
   const [platformLogos, setPlatformLogos] = useState({});
@@ -691,7 +692,15 @@ export const SurferHeader = () => {
   };
 
   const handleViewRuns = () => {
-    dispatch(toggleRunVisibility());
+    dispatch(toggleRunVisibility()); 
+  };
+
+  const handleThemeToggle = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
+  const handleSettingsClick = () => {
+    dispatch(setCurrentRoute('/settings'));
   };
 
   return (
@@ -759,7 +768,30 @@ export const SurferHeader = () => {
           <TooltipProvider>
             <Tooltip>
               <TooltipTrigger asChild>
-                <SettingsButton />
+                <Toggle
+                  pressed={theme === 'dark'}
+                  onPressedChange={handleThemeToggle}
+                  aria-label="Toggle theme"
+                >
+                  {theme === 'dark' ? <Moon size={18} /> : <Sun size={18} />}
+                </Toggle>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Toggle {theme === 'dark' ? 'Light' : 'Dark'} Mode</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+          <TooltipProvider>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleSettingsClick}
+                  className="history-button"
+                >
+                  <Settings size={18} />
+                </Button>
               </TooltipTrigger>
               <TooltipContent>
                 <p>Settings</p>

diff --git a/src/renderer/components/profile/DataExtractionTable.jsx b/src/renderer/components/profile/DataExtractionTable.jsx
@@ -16,6 +16,9 @@ import { platform } from 'os';
 import { MoonLoader } from 'react-spinners';
 import ConfettiExplosion from 'react-confetti-explosion';
 import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from "../ui/tooltip";
+import { Info } from 'lucide-react';
+import { Alert, AlertTitle, AlertDescription } from "../ui/alert";
+import { Card } from "../ui/card";
 
 const DataExtractionTable = ({ onPlatformClick, webviewRef }) => {
   const dispatch = useDispatch();
@@ -441,27 +444,47 @@ const showLogs = (platform) => {
     <div className="w-full h-full flex-col px-[50px] pt-6 pb-6 select-none">
       <div className="flex-shrink-0 mb-4">
         <div className="relative w-full max-w-2xl">
-
-          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
-          <Input
-            type="text"
-            placeholder="Search company or platform..."
-            value={searchTerm}
-            onChange={(e) => {
-              setSearchTerm(e.target.value);
-              setCurrentPage(1);
-            }}
-            className="pl-10 pr-10 w-full"
-          />
-
-          {searchTerm && (
-            <button
-              onClick={clearSearch}
-              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-            >
-              <X size={20} />
-            </button>
-          )}
+          <div className="flex items-center mb-2 space-x-4">
+            <div className="flex justify-between items-center w-full">
+              <div className="relative flex-grow mr-4">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+                <Input
+                  type="text"
+                  placeholder="Search company or platform..."
+                  value={searchTerm}
+                  onChange={(e) => {
+                    setSearchTerm(e.target.value);
+                    setCurrentPage(1);
+                  }}
+                  className="pl-10 pr-10 w-full"
+                />
+                {searchTerm && (
+                  <button
+                    onClick={clearSearch}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  >
+                    <X size={20} />
+                  </button>
+                )}
+              </div>
+
+              {/* <Card className="p-4 flex items-center flex-shrink-0" style={{ maxWidth: '300px' }}>
+                <Info size={16} className="mr-2 flex-shrink-0" />
+                <div>
+                  <AlertTitle className="mb-2">Can't find a platform?</AlertTitle>
+                  <AlertDescription>
+                    <Button
+                      variant="link"
+                      className="p-0 h-auto underline"
+                      onClick={() => window.electron.ipcRenderer.send('open-external', 'https://github.com/CEREBRUS-MAXIMUS/Surfer-Data/blob/main/docs/ADD_PLATFORMS.md')}
+                    >
+                      Build a scraper for it!
+                    </Button>
+                  </AlertDescription>
+                </div>
+              </Card> */}
+            </div>
+          </div>
         </div>
       </div>
       {paginatedPlatforms.length > 0 ? (
@@ -564,7 +587,7 @@ const showLogs = (platform) => {
       ) : (
         <div className="flex-grow flex items-center justify-center">
           <div className="text-center py-8 bg-gray-100 rounded-md">
-            <p className="text-gray-500 text-lg">No platforms found matching "{searchTerm}"</p>
+            <p className="text-gray-500 text-lg">Didn't find anything? <a className="underline cursor-pointer" onClick={() => window.electron.ipcRenderer.send('open-external', 'https://github.com/CEREBRUS-MAXIMUS/Surfer-Data/blob/main/docs/ADD_PLATFORMS.md')}>Build a scraper for "{searchTerm}"</a></p>
             <button
               onClick={clearSearch}
               className="mt-2 text-blue-500 hover:underline"