refactor: code optimization and better UX (#75)

* feat: implement theme provider and mode toggle for light/dark mode support

* fix: update icon color from 'text-secondary' to 'text-foreground' in multiple preview tables

* feat: update styles for improved UI consistency across components

* fix: reduce transition duration for improved responsiveness across components

* feat: enhance ModeToggle component with system theme option and improve button styling

* feat: update borderTypeColor to include background colors and dark mode support

* feat: enhance CopyButton tooltip styling and improve TableBody dark mode support

* feat: update component styles for improved UI consistency and responsiveness

* refactor: simplify header layout in account route component

* feat: update brand and muted foreground colors for improved accessibility

* feat: update InteractiveJsonViewer styles for improved color consistency and accessibility

* feat: update AddressChip button styles for improved visual consistency and accessibility; refine SchemaSearch layout for better readability

* feat: update ring color variable to use primary color for improved theming consistency

* refactor: update Tabs component layout and styling for improved consistency

* feat: implement dynamic tab indicator positioning and styling

* refactor: improve SchemaSearch component layout and button text for clarity

* feat: add default JSON view styles and integrate into JsonBlock and InteractiveJsonViewer components

* refactor: simplify Button component structure in SmartLinkGroup

* feat: enhance DataTable with row click navigation and keyboard accessibility

* fix: address or id not showing on small screen

* refactor: remove unused imports from account layout component

* refactor: update primary foreground color in Tabs component and CSS

* fix: adjust layout styles for improved responsiveness in account component

* refactor: move My Activity button from SearcherBar to Navbar

* fix: app address overflow

* fix: better navbar responsible

* fix: remove background and border styles from Footer component

* fix: remove unnecessary comments in JsonBlock and DealsRoute components

Author: ErwanDecoster

src/components/DataTable.tsx

@@ -1,3 +1,4 @@
+import { useNavigate, useParams } from '@tanstack/react-router';
 import {
   ColumnDef,
   flexRender,
@@ -12,7 +13,6 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table';
-import { ChainLink } from './ChainLink';
 
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
@@ -27,12 +27,46 @@ export function DataTable<TData, TValue>({
   tableLength = 10,
   isLoading,
 }: DataTableProps<TData, TValue>) {
+  const { chainSlug } = useParams({ from: '/$chainSlug' });
+  const navigate = useNavigate();
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
 
+  const handleRowClick = (
+    destination: string,
+    event: React.MouseEvent | React.KeyboardEvent
+  ) => {
+    // Don't navigate if clicking on buttons, links, or other interactive elements
+    const target = event.target as HTMLElement;
+    if (
+      target.tagName === 'BUTTON' ||
+      target.tagName === 'A' ||
+      target.closest('button, a')
+    ) {
+      return;
+    }
+
+    const path =
+      destination === '/'
+        ? `/${chainSlug}`
+        : `/${chainSlug}${destination.startsWith('/') ? destination : `/${destination}`}`;
+    navigate({ to: path });
+  };
+
+  const handleRowKeyDown = (
+    destination: string,
+    event: React.KeyboardEvent
+  ) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleRowClick(destination, event);
+    }
+  };
+
   return (
     <Table>
       <TableHeader>
@@ -54,22 +88,27 @@ export function DataTable<TData, TValue>({
         ))}
       </TableHeader>
       <TableBody>
-        {table.getRowModel().rows.map((row) => (
-          <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
-            {row.getVisibleCells().map((cell) => (
-              <TableCell key={cell.id}>
-                <ChainLink
-                  to={
-                    (cell.row.original as { destination: string }).destination
-                  }
-                  className="w-full"
-                >
+        {table.getRowModel().rows.map((row) => {
+          const destination = (row.original as { destination: string })
+            .destination;
+
+          return (
+            <TableRow
+              key={row.id}
+              data-state={row.getIsSelected() && 'selected'}
+              className="cursor-pointer"
+              tabIndex={0}
+              onClick={(e) => handleRowClick(destination, e)}
+              onKeyDown={(e) => handleRowKeyDown(destination, e)}
+            >
+              {row.getVisibleCells().map((cell) => (
+                <TableCell key={cell.id}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </ChainLink>
-              </TableCell>
-            ))}
-          </TableRow>
-        ))}
+                </TableCell>
+              ))}
+            </TableRow>
+          );
+        })}
         {data.length === 0 && !isLoading && (
           <TableRow>
             <TableCell colSpan={columns.length} className="text-center">

src/components/Footer.tsx

@@ -73,7 +73,7 @@ export function Footer({ className }: { className?: string }) {
   return (
     <footer
       className={cn(
-        'bg-popover border-muted text-intermediate-foreground flex flex-col gap-6 rounded-3xl border px-6 py-10 sm:px-10 lg:px-20',
+        'text-intermediate-foreground flex flex-col gap-6 py-10',
         className
       )}
     >

src/components/SmartLinkGroup.tsx

@@ -80,7 +80,9 @@ export default function SmartLinkGroup({
           >
             <span className="hidden md:inline">{label ?? addressOrId}</span>
             <span className="inline md:hidden">
-              {(label ? truncateAddress(label) : '') ?? addressOrId}
+              {(label
+                ? truncateAddress(label)
+                : truncateAddress(addressOrId)) ?? addressOrId}
             </span>
             {ens ? `(${ens})` : ''}
           </Link>
@@ -89,7 +91,8 @@ export default function SmartLinkGroup({
         <div>
           <span className="hidden md:inline">{label ?? addressOrId}</span>
           <span className="inline md:hidden">
-            {(label ? truncateAddress(label) : '') ?? addressOrId}
+            {(label ? truncateAddress(label) : truncateAddress(addressOrId)) ??
+              addressOrId}
           </span>
           {ens ? `(${ens})` : ''}
         </div>

src/components/navbar/NavBar.tsx

@@ -10,7 +10,7 @@ import { AddressChip } from './AddressChip.tsx';
 import { ChainSelector } from './ChainSelector.tsx';
 
 export function Navbar() {
-  const { isConnected, address } = useUserStore();
+  const { isConnected, address: userAddress } = useUserStore();
   const { logout, login } = useLoginLogout();
   const [isMenuOpen, setMenuOpen] = useState(false);
   const handleMenuToggle = () => {
@@ -21,11 +21,16 @@ export function Navbar() {
     <nav className="flex items-center justify-between py-6">
       <ChainLink to="/" className="-m-2 flex items-center gap-2 p-2 font-mono">
         <img src={iExecLogo} width="25" height="25" alt="iExec logo" />
-        <span className="hidden sm:block">iExec Explorer</span>
+        <span className="hidden lg:block">iExec Explorer</span>
       </ChainLink>
       <div className="mr-8 flex items-center gap-4 md:mr-0">
         {isConnected && (
           <div className="hidden md:flex">
+            <Button variant="link" asChild className="text-foreground">
+              <ChainLink to={`/address/${userAddress}?from=my_activity`}>
+                My activity
+              </ChainLink>
+            </Button>
             <Button variant="link" asChild className="text-foreground">
               <ChainLink to="/account">iExec Account</ChainLink>
             </Button>
@@ -38,7 +43,7 @@ export function Navbar() {
         </div>
         {isConnected ? (
           <div className="flex max-w-[1260px] items-center gap-2">
-            <AddressChip address={address!} />
+            <AddressChip address={userAddress!} />
 
             <button
               type="button"
@@ -81,7 +86,7 @@ export function Navbar() {
             </ChainLink>
             {isConnected ? (
               <div className="flex max-w-[1260px] items-center gap-2">
-                <AddressChip address={address!} />
+                <AddressChip address={userAddress!} />
 
                 <button
                   type="button"

src/index.css

@@ -259,7 +259,7 @@
   --brand-foreground: var(--color-grey-900);
 
   --primary: #c0cbff;
-  --primary-foreground: #f4f7fc;
+  --primary-foreground: var(--color-muted);
 
   --secondary: var(--color-grey-600);
   --secondary-foreground: var(--color-grey-50);

src/modules/JsonBlock.tsx

@@ -1,32 +1,55 @@
+import JsonView from '@uiw/react-json-view';
 import CopyButton from '@/components/CopyButton';
+import { defaultJsonViewStyle } from '@/utils/jsonViewStyles';
 
 type JsonBlockProps = {
   children: string | object;
+  className?: string;
+  collapsed?: number;
+  enableClipboard?: boolean;
 };
 
-const JsonBlock = ({ children }: JsonBlockProps) => {
-  let display: string;
+const JsonBlock = ({
+  children,
+  className,
+  collapsed = 1,
+  enableClipboard = true,
+}: JsonBlockProps) => {
+  let jsonData: object;
   let rawToCopy: string;
 
   try {
     if (typeof children === 'object') {
+      jsonData = children;
       rawToCopy = JSON.stringify(children);
-      display = JSON.stringify(children, null, 2);
     } else {
+      jsonData = JSON.parse(children);
       rawToCopy = children;
-      display = JSON.stringify(JSON.parse(children), null, 2);
     }
   } catch {
-    display = String(children);
-    rawToCopy = String(children);
+    return (
+      <div className={`flex min-w-0 items-start gap-1 ${className}`}>
+        <code className="min-w-0 overflow-x-auto text-sm whitespace-pre">
+          {String(children)}
+        </code>
+        {enableClipboard && <CopyButton textToCopy={String(children)} />}
+      </div>
+    );
   }
 
   return (
-    <div className="flex min-w-0 items-start gap-1">
-      <code className="min-w-0 overflow-x-auto text-sm whitespace-pre">
-        {display}
-      </code>
-      <CopyButton textToCopy={rawToCopy} />
+    <div className={`flex min-w-0 items-start gap-1 ${className}`}>
+      <div className="min-w-0 flex-1 overflow-x-auto">
+        <JsonView
+          value={jsonData}
+          displayDataTypes={false}
+          displayObjectSize={false}
+          enableClipboard={false}
+          collapsed={collapsed}
+          style={defaultJsonViewStyle}
+        />
+      </div>
+      {enableClipboard && <CopyButton textToCopy={rawToCopy} />}
     </div>
   );
 };

src/modules/Tabs.tsx

@@ -1,4 +1,5 @@
-import clsx from 'clsx';
+import { cn } from '@/lib/utils';
+import { useEffect, useRef, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import {
   Tooltip,
@@ -21,24 +22,65 @@ export function Tabs({
   disabledTabs = [],
   disabledReasons = {},
 }: TabsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+  const [isInitialized, setIsInitialized] = useState(false);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const activeButton = containerRef.current.querySelector(
+      `[data-tab-index="${currentTab}"]`
+    ) as HTMLElement;
+    if (!activeButton) return;
+
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const buttonRect = activeButton.getBoundingClientRect();
+
+    const left = buttonRect.left - containerRect.left;
+    const width = buttonRect.width;
+
+    setIndicatorStyle({ left, width });
+
+    if (!isInitialized) {
+      setIsInitialized(true);
+    }
+  }, [currentTab, isInitialized]);
+
   return (
-    <div className="-mb-4 flex w-full items-center gap-6 overflow-x-auto pb-4">
+    <div
+      ref={containerRef}
+      className="bg-primary-foreground relative flex w-fit max-w-full items-center gap-1 overflow-x-auto rounded-full p-1"
+    >
+      <div
+        className={cn(
+          'bg-background border-border absolute top-1 bottom-1 z-0 rounded-full border transition-all duration-300 ease-out',
+          !isInitialized && 'opacity-0'
+        )}
+        style={{
+          left: `${indicatorStyle.left}px`,
+          width: `${indicatorStyle.width}px`,
+        }}
+      />
+
       {tabLabels.map((label, index) => {
         const isDisabled = disabledTabs.includes(index);
         const reason = disabledReasons[index];
 
         const button = (
           <Button
             key={label}
-            variant={
-              currentTab === index
-                ? 'gradient-outline-active'
-                : 'gradient-outline'
-            }
+            data-tab-index={index}
+            variant="link"
+            size={'none'}
             onClick={() => {
               if (!isDisabled) onTabChange(index);
             }}
-            className={clsx(isDisabled && 'cursor-not-allowed opacity-50')}
+            className={cn(
+              'text-foreground relative z-10 border border-transparent px-8 py-2 transition-colors duration-300 hover:no-underline',
+              isDisabled && 'cursor-not-allowed opacity-50',
+              currentTab === index && 'text-primary'
+            )}
           >
             {label.toUpperCase()}
           </Button>

src/modules/datasets/SchemaSearch.tsx

@@ -49,14 +49,15 @@ export function SchemaSearch({
         className={cn('flex w-full items-center gap-2 px-10 py-6 duration-200')}
         onClick={() => setIsOpen(!isOpen)}
       >
-        <SlidersHorizontal size={16} />
-        <p className="flex-1 text-left font-bold">
-          Schema Search{' '}
-          <span className="text-muted-foreground font-normal">
+        <div>
+          <div className="flex items-center gap-2">
+            <SlidersHorizontal size={16} />
+            <p className="text-left font-bold">Schema Search </p>
+          </div>
+          <p className="text-muted-foreground mt-2 font-normal">
             Add field types to filter datasets by their schema structure.
-            Filters are applied automatically.
-          </span>
-        </p>
+          </p>
+        </div>
         <ChevronDown
           className={cn(
             'ml-auto transition-transform',
@@ -164,7 +165,7 @@ export function SchemaSearch({
               onClick={handleAdd}
               disabled={!inputPathValue.trim() || !selectedType}
             >
-              Add filter
+              {filters.length > 0 ? 'Add filter' : 'Apply filter'}
               <Plus size={20} />
             </Button>
           </div>

src/modules/datasets/dataset/schema/InteractiveJsonViewer.tsx

@@ -1,5 +1,6 @@
 import { DatasetSchemaQuery } from '@/graphql/dataprotector/graphql';
 import JsonView from '@uiw/react-json-view';
+import { defaultJsonViewStyle } from '@/utils/jsonViewStyles';
 
 interface JsonViewerProps {
   schemaPaths?: Array<{ path?: string | null; type?: string | null }>;
@@ -62,18 +63,7 @@ export function InteractiveJsonViewer({
         displayObjectSize={false}
         enableClipboard={false}
         collapsed={2}
-        style={
-          {
-            color: 'var(--color-foreground)',
-            '--w-rjv-key-string': 'var(--color-foreground)', // Override key color to light gray
-            '--w-rjv-line-color': 'var(--color-foreground)',
-            '--w-rjv-quotes-string-color': 'var(--color-primary)', // Override string color to light gray
-            '--w-rjv-type-string-color': 'var(--color-primary)',
-            '--w-rjv-curlybraces-color': '#728cff', // Override curly braces color to light gray
-            '--w-rjv-quotes-color': '#728cff', // Override quotes color to light gray
-            '--w-rjv-indent-width': '24px', // Increase indentation for nested keys
-          } as React.CSSProperties
-        }
+        style={defaultJsonViewStyle}
       />
     </div>
   );