bkg and ui tweaks

src/app/(private)/saved-themes/page.tsx

@@ -8,8 +8,7 @@ export default async function SavedThemesPage() {
   const themes = userId ? await getThemesByUserId(userId) : []
 
   return (
-    <main className="mx-auto container py-8">
-      <h1 className="text-3xl font-bold mb-8">Your Saved Themes</h1>
+    <main className="mx-auto p-20">
       <SavedThemesContent initialThemes={themes} />
     </main>
   )

src/app/discover/page.tsx

@@ -7,8 +7,17 @@ export default async function DiscoverPage() {
   const themes = await getPublicThemes()
   return (
     <div>
-      <main className="mx-auto container">
-        <div className="flex flex-col gap-10 items-center w-full mt-10">
+      <main className="mx-auto">
+        <div className="flex flex-col gap-10 items-center w-full">
+          <div className="relative w-full">
+            <DotPattern cr={0.3} className="absolute top-0 z-20" />
+            <div className="h-[500px] flex flex-col items-center justify-center w-full">
+              <h1 className="text-5xl font-bold mb-4">Discover new themes</h1>
+              <h2 className="text-3xl font-semibold text-muted-foreground">
+                made by the community
+              </h2>
+            </div>
+          </div>
           <Discover themes={themes} />
         </div>
       </main>

src/app/globals.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 70 0% 96%;
     --foreground: 0 0% 3.9%;
     --card: 0 0% 100%;
     --card-foreground: 0 0% 3.9%;
@@ -27,10 +27,10 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
-    --radius: 0.5rem
+    --radius: 0.5rem;
   }
   .dark {
-    --background: 0 0% 3.9%;
+    --background: 70 0% 32%;
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
@@ -53,7 +53,7 @@
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%
+    --chart-5: 340 75% 55%;
   }
 }
 @layer base {

src/components/Discover.tsx

@@ -10,19 +10,11 @@ export default function Discover({ themes }: { themes: SavedTheme[] }) {
   const [selectedTheme, setSelectedTheme] = useState(themes[0])
   return (
     <section className="flex flex-col gap-10 w-full">
-      <div className="relative py-5">
-        <DotPattern cr={0.5} className="absolute inset-0" />
-        <div className="h-[500px] flex flex-col items-center justify-center w-full">
-          <h1 className="text-5xl font-bold mb-4">Discover new themes</h1>
-          <h2 className="text-3xl font-semibold text-muted-foreground">
-            made by the community
-          </h2>
-        </div>
-      </div>
-      <div className="-mt-36">
+      <div className="sticky top-[3.5rem] py-5 z-20 bg-background/70 shadow-sm backdrop-blur backdrop w-full">
         <ThemePreviewSmall theme={selectedTheme} />
       </div>
-      <div className="mt-10 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-10">
+
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-16 p-20">
         {themes.map((theme) => (
           <ThemeCardPublic
             key={theme.id}

src/components/Navigation.tsx

@@ -10,7 +10,7 @@ import { Button } from './ui/button'
 
 const Navigation = () => {
   return (
-    <nav className="bg-background text-foreground p-4">
+    <nav className="bg-background text-foreground p-4 sticky top-0 z-50 shadow-b-xl border-b border-border">
       <div className="mx-auto flex justify-between items-center">
         <Link href="/" className="text-xl font-bold">
           VSCode Themes Community

src/components/SavedThemes.tsx

@@ -23,8 +23,10 @@ export function SavedThemesContent({
 
   return (
     <section className="flex flex-col gap-10">
-      <ThemePreviewSmall theme={selectedTheme} />
-      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
+      <div className="sticky top-[3.5rem] py-5 z-20 bg-background/70 shadow-sm backdrop-blur backdrop w-full">
+        <ThemePreviewSmall theme={selectedTheme} />
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-16">
         {themes.map((theme) => (
           <ThemeCard
             key={theme.id}

src/components/ThemeCard.tsx

@@ -12,6 +12,7 @@ import {
   downloadThemeVSIX,
 } from '@/lib/db/themes'
 import { useTheme } from '@/contexts/ThemeContext'
+import { useRouter } from 'next/navigation'
 
 interface ThemeCardProps {
   theme: SavedTheme
@@ -24,12 +25,24 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
   onPreview,
   onDelete,
 }) => {
-  const { updateSelectedThemeType, deleteSavedTheme } = useTheme()
+  const router = useRouter()
+  const {
+    updateSelectedThemeType,
+    deleteSavedTheme,
+    setCurrentThemeId,
+    loadTheme,
+    savedThemes,
+  } = useTheme()
   const [isPublic, setIsPublic] = useState(theme.public)
   const [isDelPending, startDelTransition] = useTransition()
   const [isDownPending, startDownTransition] = useTransition()
   const [isPublPending, startPublTransition] = useTransition()
 
+  const handleEdit = () => {
+    setCurrentThemeId(theme.id)
+    router.push('/generator')
+  }
+
   const handleDelete = () => {
     if (window.confirm('Are you sure you want to delete this theme?')) {
       startDelTransition(async () => {
@@ -155,7 +168,7 @@ const ThemeCard: React.FC<ThemeCardProps> = ({
             <Button
               variant="default"
               className="flex-1"
-              // onClick={handleEdit}
+              onClick={handleEdit}
               // disabled={}
             >
               <Edit className="h-4 w-4 mr-2" /> Edit

src/components/ThemeControls.tsx

@@ -48,10 +48,6 @@ const ThemeControls: React.FC = () => {
     setCurrentThemeId,
   } = useTheme()
 
-  useEffect(() => {
-    handleRandomize()
-  }, [])
-
   const handleRandomize = (few = false) => {
     const newBaseHue = Math.floor(Math.random() * 360)
     const newUiSaturation = randomInteger(15, 65)

src/components/ThemeLoader.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useTransition, useEffect } from 'react'
+import React, { useState, useTransition, useEffect, useCallback } from 'react'
 import { useTheme } from '@/contexts/ThemeContext'
 import {
   Select,
@@ -22,24 +22,30 @@ export const ThemeLoader: React.FC<ThemeLoaderProps> = ({
   )
   const [isPending, startTransition] = useTransition()
 
+  const handleLoad = useCallback(
+    (value: string) => {
+      if (value === '') return
+      startTransition(async () => {
+        const themeToLoad = savedThemes.find(
+          (theme) => theme.id.toString() === value
+        )
+        if (themeToLoad) {
+          loadTheme(themeToLoad)
+          setThemeName(themeToLoad.name)
+        }
+      })
+    },
+    [loadTheme, savedThemes, setThemeName]
+  )
+
   useEffect(() => {
     if (currentThemeId === null) {
       setSelectedThemeId('')
+    } else {
+      setSelectedThemeId(currentThemeId.toString())
+      handleLoad(currentThemeId.toString())
     }
-  }, [currentThemeId])
-
-  const handleLoad = (value: string) => {
-    if (value === '') return
-    startTransition(async () => {
-      const themeToLoad = savedThemes.find(
-        (theme) => theme.id.toString() === value
-      )
-      if (themeToLoad) {
-        loadTheme(themeToLoad)
-        setThemeName(themeToLoad.name)
-      }
-    })
-  }
+  }, [currentThemeId, handleLoad])
 
   return (
     <div className="flex gap-4">
@@ -64,12 +70,6 @@ export const ThemeLoader: React.FC<ThemeLoaderProps> = ({
           </SelectContent>
         </Select>
       </div>
-      {/* <ActionButton
-        label="Load"
-        onClick={handleLoad}
-        pending={isPending}
-        disabled={!selectedThemeId}
-      /> */}
     </div>
   )
 }