Update dependencies and some minor cleanup

Author: platypii

package.json

@@ -1,7 +1,7 @@
 {
   "name": "parquet-viewer",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -10,28 +10,27 @@
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview",
-    "test": "vitest"
+    "test": "vitest run"
   },
   "dependencies": {
-    "@huggingface/hub": "0.21.0",
-    "@hyparam/components": "0.1.10",
+    "@huggingface/hub": "1.0.0",
+    "@hyparam/components": "0.1.11",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
-    "@eslint/js": "9.16.0",
-    "@types/react": "18.3.12",
+    "@types/react": "18.3.18",
     "@types/react-dom": "18.3.1",
     "@vitejs/plugin-react": "4.3.4",
     "@vitest/coverage-v8": "2.1.8",
-    "eslint": "9.16.0",
+    "eslint": "9.17.0",
     "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-hooks": "5.1.0",
     "eslint-plugin-react-refresh": "0.4.16",
-    "globals": "15.13.0",
+    "globals": "15.14.0",
     "typescript": "5.7.2",
-    "typescript-eslint": "8.17.0",
-    "vite": "5.4.11",
+    "typescript-eslint": "8.18.1",
+    "vite": "6.0.4",
     "vitest": "2.1.8"
   }
 }

src/components/Home.tsx

@@ -9,6 +9,9 @@ import Search from './Search.js'
  * Home page
  */
 export default function Home({ auth }: { auth: OAuthResult | undefined }) {
+  // @ts-expect-error avatarUrl is real
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  const avatarUrl: string | undefined = auth?.userInfo.avatarUrl
 
   function onUrlSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
@@ -27,22 +30,26 @@ export default function Home({ auth }: { auth: OAuthResult | undefined }) {
 
       <section>
         <h3>Select a dataset on Hugging Face</h3>
-        {
-          auth ?
-            <p>Logged in as
-              <img src={auth.userInfo.avatarUrl} alt={auth.userInfo.name} style={{ width: '1rem', height: '1rem', borderRadius: '50%', margin: '0 0.5rem' }} />
-              {auth.userInfo.name} (<a onClick={() => {logout()}}>Log out</a>). You can search your private and gated datasets.</p>
-            : <><p>Log in to search your private and gated datasets</p><p><a
-              onClick={() => {
-                login().catch(() => undefined)
-              }}
-            >
+        {auth &&
+          <p>Logged in as
+            <img src={avatarUrl} alt={auth.userInfo.name} className='avatar' />
+            {auth.userInfo.name} (<a onClick={logout}>Log out</a>).
+            You can search your private and gated datasets.
+          </p>
+        }
+        {!auth && <>
+          <p>Log in to search your private and gated datasets</p>
+          <p>
+            <a onClick={() => {
+              login().catch(() => undefined)
+            }}>
               <img
                 src={HFLoginIcon}
                 alt="Sign in with Hugging Face"
               />
-            </a></p></>
-        }
+            </a>
+          </p>
+        </>}
         <p>Search for dataset:</p>
         <Search accessToken={auth?.accessToken}></Search>
       </section>

src/styles/index.css

@@ -586,37 +586,15 @@ main {
   max-width: 640px;
   margin: 0 auto;
 }
-/* quick link buttons */
-.quick-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  list-style: none;
-}
-.quick-links li {
-  display: flex;
-  flex: 1 1 calc(50% - 10px);
-  min-width: 0;
-}
-.quick-links a {
-  background-position: 10px center;
-  background-size: 18px;
-  border: 1px solid #444;
-  border-radius: 4px;
-  font-size: 8pt;
-  overflow: hidden;
-  padding: 12px;
-  padding-left: 36px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-}
-.quick-links a:hover {
-  background-color: #cec;
-}
 .huggingface {
   background: url('../assets/huggingface.svg') no-repeat 8px center;
 }
+.avatar {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  margin: 0 0.5rem;
+}
 
 h1 {
   font-family: 'Century Gothic', 'Helvetica Neue', Helvetica, Arial, sans-serif;