Feat/theme

frontend/index.html

@@ -1,10 +1,23 @@
 <!doctype html>
-<html lang="en">
+<html lang="no">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Damp</title>
+
+    <script>
+      // Setter tema før siden tegnes, så den ikke blinker lyst først i mørkt tema.
+      // Lagret valg vinner, ellers brukes systemets innstilling.
+      (function () {
+        var saved = null;
+        try {
+          saved = localStorage.getItem('theme');
+        } catch (e) {}
+        var dark = saved ? saved === 'dark' : matchMedia('(prefers-color-scheme: dark)').matches;
+        document.documentElement.dataset.theme = dark ? 'dark' : 'light';
+      })();
+    </script>
   </head>
   <body>
     <div id="root"></div>

frontend/src/App.css

@@ -1,182 +1,21 @@
-.counter {
-  font-size: 16px;
-  padding: 5px 10px;
-  border-radius: 5px;
-  color: var(--accent);
-  background: var(--accent-bg);
-  border: 2px solid transparent;
-  transition: border-color 0.3s;
-  margin-bottom: 24px;
-
-  &:hover {
-    border-color: var(--accent-border);
-  }
-  &:focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 2px;
-  }
-}
-
-.hero {
-  position: relative;
-
-  .base,
-  .framework,
-  .vite {
-    inset-inline: 0;
-    margin: 0 auto;
-  }
-
-  .base {
-    width: 170px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .framework,
-  .vite {
-    position: absolute;
-  }
-
-  .framework {
-    z-index: 1;
-    top: 34px;
-    height: 28px;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) scale(1.4);
-  }
-
-  .vite {
-    z-index: 0;
-    top: 107px;
-    height: 26px;
-    width: auto;
-    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) scale(0.8);
-  }
-}
-
-#center {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-  place-content: center;
-  place-items: center;
-  flex-grow: 1;
-
-  @media (max-width: 1024px) {
-    padding: 32px 20px 24px;
-    gap: 18px;
-  }
-}
-
-#next-steps {
-  display: flex;
-  border-top: 1px solid var(--border);
+/* Hovedinnholdet under toppfeltet */
+.main {
+  padding: 24px;
   text-align: left;
-
-  & > div {
-    flex: 1 1 0;
-    padding: 32px;
-    @media (max-width: 1024px) {
-      padding: 24px 20px;
-    }
-  }
-
-  .icon {
-    margin-bottom: 16px;
-    width: 22px;
-    height: 22px;
-  }
-
-  @media (max-width: 1024px) {
-    flex-direction: column;
-    text-align: center;
-  }
-}
-
-#docs {
-  border-right: 1px solid var(--border);
-
-  @media (max-width: 1024px) {
-    border-right: none;
-    border-bottom: 1px solid var(--border);
-  }
 }
 
-#next-steps ul {
-  list-style: none;
-  padding: 0;
+/* Linjen over resultatene: overskrift til venstre, valg av visning til høyre */
+.results-bar {
   display: flex;
-  gap: 8px;
-  margin: 32px 0 0;
-
-  .logo {
-    height: 18px;
-  }
-
-  a {
-    color: var(--text-h);
-    font-size: 16px;
-    border-radius: 6px;
-    background: var(--social-bg);
-    display: flex;
-    padding: 6px 12px;
-    align-items: center;
-    gap: 8px;
-    text-decoration: none;
-    transition: box-shadow 0.3s;
-
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .button-icon {
-      height: 18px;
-      width: 18px;
-    }
-  }
-
-  @media (max-width: 1024px) {
-    margin-top: 20px;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    li {
-      flex: 1 1 calc(50% - 8px);
-    }
-
-    a {
-      width: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-    }
-  }
-}
-
-#spacer {
-  height: 88px;
-  border-top: 1px solid var(--border);
-  @media (max-width: 1024px) {
-    height: 48px;
-  }
+  align-items: baseline;
+  justify-content: space-between;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border);
 }
 
-.ticks {
-  position: relative;
-  width: 100%;
-
-  &::before,
-  &::after {
-    content: '';
-    position: absolute;
-    top: -4.5px;
-    border: 5px solid transparent;
-  }
-
-  &::before {
-    left: 0;
-    border-left-color: var(--border);
-  }
-  &::after {
-    right: 0;
-    border-right-color: var(--border);
-  }
+.results-bar__views {
+  display: flex;
+  gap: 16px;
+  font-family: var(--mono);
+  font-size: 14px;
 }

frontend/src/App.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { GameList } from './components/GameList/GameList';
 import { mockGames } from './mocks/games';
-import { SearchBar } from './components/SearchBar/SearchBar';
 import { useDebounce } from './hooks/useDebounce';
-import { Logo} from './components/Logo/Logo';
+import { Header } from './components/Header/Header';
+import './App.css';
 
 /**
  * Midlertidig forside: viser spillene med mockdata til GraphQL er klart.
@@ -12,15 +12,17 @@ import { Logo} from './components/Logo/Logo';
 function App() {
   const [favorites, setFavorites] = useState<Set<string>>(new Set());
   const [view, setView] = useState<'list' | 'grid'>('list');
+  const [showFavorites, setShowFavorites] = useState(false);
 
   // Det brukeren skriver nå, og det vi faktisk søker på etter 300 ms pause
   const [input, setInput] = useState('');
   const query = useDebounce(input.trim(), 300);
 
   // MIDLERTIDIG: filtrerer mockdata på klienten for å kunne teste søket.
   // Når GraphQL er klart, sendes `query` til backend og filtreres i databasen.
-  const games = mockGames.filter((g) =>
-    g.name.toLowerCase().includes(query.toLowerCase()),
+  const games = mockGames.filter(
+    (g) =>
+      g.name.toLowerCase().includes(query.toLowerCase()) && (!showFavorites || favorites.has(g.id)),
   );
 
   const toggleFavorite = (id: string) => {
@@ -33,28 +35,48 @@ function App() {
   };
 
   return (
-    <main style={{ padding: '20px 24px' }}>
-      <Logo /> {/* NY: logoen øverst til høyre */}
-      <SearchBar value={input} onChange={setInput} />
-      <h2>Søkeresultater</h2>
-
-      {/* Bytter mellom visning 1 (liste) og visning 2 (rutenett) */}
-      <div role="group" aria-label="Visning">
-        <button type="button" aria-pressed={view === 'list'} onClick={() => setView('list')}>
-          Liste
-        </button>
-        <button type="button" aria-pressed={view === 'grid'} onClick={() => setView('grid')}>
-          Rutenett
-        </button>
-      </div>
-
-      <GameList
-        games={games}
-        view={view}
-        favorites={favorites}
-        onToggleFavorite={toggleFavorite}
+    <>
+      <Header
+        search={input}
+        onSearchChange={setInput}
+        favoritesCount={favorites.size}
+        showFavorites={showFavorites}
+        onToggleFavorites={() => setShowFavorites((v) => !v)}
       />
-    </main>
+
+      <main className="main">
+        <div className="results-bar">
+          <h2 className="label">{showFavorites ? 'Favoritter' : 'Søkeresultater'}</h2>
+
+          {/* Bytter mellom visning 1 (liste) og visning 2 (rutenett) */}
+          <div role="group" aria-label="Visning" className="results-bar__views">
+            <button
+              type="button"
+              className="text-button"
+              aria-pressed={view === 'list'}
+              onClick={() => setView('list')}
+            >
+              liste
+            </button>
+            <button
+              type="button"
+              className="text-button"
+              aria-pressed={view === 'grid'}
+              onClick={() => setView('grid')}
+            >
+              rutenett
+            </button>
+          </div>
+        </div>
+
+        <GameList
+          games={games}
+          view={view}
+          favorites={favorites}
+          onToggleFavorite={toggleFavorite}
+        />
+      </main>
+    </>
   );
 }
 

frontend/src/components/Header/Header.css

@@ -0,0 +1,33 @@
+.header {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border);
+}
+
+.header__search {
+  flex: 1;
+}
+
+/* Menyen til høyre, i monospace som på clemenbe.no */
+.header__nav {
+  display: flex;
+  gap: 20px;
+  margin-left: auto;
+  font-family: var(--mono);
+  font-size: 15px;
+  white-space: nowrap;
+}
+
+/* Mobil: logo og meny på første linje, søket på hele andre linje */
+@media (max-width: 600px) {
+  .header {
+    flex-wrap: wrap;
+    gap: 12px 20px;
+  }
+  .header__search {
+    order: 3;
+    flex-basis: 100%;
+  }
+}