Merge pull request #13 from OHTU-German-learning-website/master

merge

gradesa/src/app/admin/glossary/glossary.css

@@ -9,13 +9,51 @@
   margin: 0 0 var(--u-sm);
 }
 
-.glossary-index-item {
-  display: inline-block;
-  padding: 0.35rem 0.75rem;
+.glossary-index-letter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.45rem 0.75rem;
   border-radius: var(--radius-sm);
   background-color: var(--bg3);
   color: var(--fg1);
-  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+
+.glossary-index-letter:hover,
+.glossary-index-letter:focus {
+  background-color: var(--bg4);
+  border-color: var(--bg5);
+}
+
+.glossary-index-group {
+  padding: var(--u-sm);
+  border-radius: var(--radius-sm);
+  background-color: var(--bg3);
+  display: grid;
+  gap: var(--u-2xs);
+}
+
+.glossary-index-group-title {
+  margin: 0 0 var(--u-xs);
+  font-size: 1rem;
+}
+
+.glossary-index-entry {
+  display: inline-block;
+  color: var(--fg1);
+  text-decoration: none;
+  padding: 0.35rem 0.5rem;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.2s;
+}
+
+.glossary-index-entry:hover,
+.glossary-index-entry:focus {
+  background-color: var(--bg4);
 }
 
 .glossary-card {
@@ -25,18 +63,60 @@
   border: 1px solid var(--bg3);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   transition: box-shadow 0.2s;
+  scroll-margin-top: 100px;
 }
 
 .glossary-card:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
 }
 
+.glossary-letter-group {
+  border-top: 1px solid var(--bg3);
+  padding-top: var(--u-md);
+}
+
+.glossary-letter-title {
+  margin: 0 0 var(--u-sm);
+  font-size: 1.35rem;
+  scroll-margin-top: 100px;
+}
+
+.glossary-back-to-top {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg2);
+  text-decoration: none;
+  font-size: 0.95rem;
+  margin-top: var(--u-sm);
+}
+
+.glossary-back-to-top:hover,
+.glossary-back-to-top:focus {
+  color: var(--fg1);
+  text-decoration: underline;
+}
+
 .glossary-word {
   color: var(--fg1);
   margin: 0;
   font-size: 1.2rem;
 }
 
+.glossary-word-link {
+  text-decoration: none;
+  display: block;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.2s, padding 0.2s;
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+}
+
+.glossary-word-link:hover,
+.glossary-word-link:focus {
+  background-color: var(--bg4);
+}
+
+
 .glossary-definition {
   color: var(--fg2);
   margin: 0.5rem 0;

gradesa/src/app/admin/glossary/page.js

@@ -57,27 +57,66 @@ export default function GlossaryList() {
     a.word.localeCompare(b.word)
   );
 
+  const entriesByLetter = sortedEntries.reduce((map, entry) => {
+    const letter = (entry.word?.[0] || "").toUpperCase();
+    if (!map[letter]) {
+      map[letter] = [];
+    }
+    map[letter].push(entry);
+    return map;
+  }, {});
+
+  const letters = Object.keys(entriesByLetter).sort();
+
   return (
     <Column gap="md" width="100%">
       <Row justify="space-between" gap="xl" width="100%" align="center">
-        <h2>Glossareinträge</h2>
+        <h2 id="glossary-top">Glossareinträge</h2>
       </Row>
       <LinkButton href="/admin/glossary/create">
         Neuen Eintrag erstellen
       </LinkButton>
 
-      {sortedEntries.length > 0 && (
+      {letters.length > 0 && (
         <Container className="glossary-index" mb="md">
           <h3>Register</h3>
+          <Container display="flex" flexWrap="wrap" gap="xs" mb="sm">
+            {letters.map((letter) => (
+              <a
+                key={letter}
+                className="glossary-index-letter"
+                href={`#letter-${letter}-section`}
+              >
+                {letter}
+              </a>
+            ))}
+          </Container>
+
           <Container
             display="grid"
             templateColumns="repeat(auto-fit, minmax(160px, 1fr))"
             gap="sm"
           >
-            {sortedEntries.map((entry) => (
-              <span key={entry.id} className="glossary-index-item">
+            {letters.map((letter) => (
+              <Container key={letter} className="glossary-index-group">
+                <h4
+                  id={`letter-${letter}`}
+                  className="glossary-index-group-title"
+                >
+                  {letter}
+                </h4>
+                <Column gap="xs">
+                  {entriesByLetter[letter].map((entry) => (
+                    <a
+                      key={entry.id}
+                      href={`#entry-${entry.id}`}
+                      className="glossary-index-entry"
+                    >
                       {entry.word}
-              </span>
+                    </a>
+                  ))}
+                </Column>
+              </Container>
             ))}
           </Container>
         </Container>
@@ -89,19 +128,36 @@ export default function GlossaryList() {
           beginnen.
         </p>
       ) : (
+        <Container display="grid" gap="md">
+          {letters.map((letter) => (
+            <Container key={letter} className="glossary-letter-group">
+              <h3
+                id={`letter-${letter}-section`}
+                className="glossary-letter-title"
+              >
+                {letter}
+              </h3>
               <Container
                 display="grid"
                 templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
                 gap="md"
               >
-          {sortedEntries.map((entry) => (
-            <Container key={entry.id} className="glossary-card">
+                {entriesByLetter[letter].map((entry) => (
+                  <Container
+                    key={entry.id}
+                    id={`entry-${entry.id}`}
+                    className="glossary-card"
+                  >
                     <Column gap="sm">
                       <h4 className="glossary-word">{entry.word}</h4>
-                <RenderHTML data={entry.word_definition} disableGlossary />
+                      <RenderHTML
+                        data={entry.word_definition}
+                        disableGlossary
+                      />
                       <Row justify="space-between" className="glossary-meta">
                         <span>
-                    Erstellt: {new Date(entry.created_at).toLocaleDateString()}
+                          Erstellt:{" "}
+                          {new Date(entry.created_at).toLocaleDateString()}
                         </span>
                         <Row gap="sm">
                           <LinkButton
@@ -132,6 +188,12 @@ export default function GlossaryList() {
                   </Container>
                 ))}
               </Container>
+              <a href="#glossary-top" className="glossary-back-to-top">
+                Zurück nach oben
+              </a>
+            </Container>
+          ))}
+        </Container>
       )}
     </Column>
   );

gradesa/src/app/glossary/glossary.css

@@ -78,6 +78,22 @@
 .glossary-letter-title {
   margin: 0 0 var(--u-sm);
   font-size: 1.35rem;
+  scroll-margin-top: 100px;
+}
+
+.glossary-back-to-top {
+  display: inline-flex;
+  align-items: center;
+  color: var(--fg2);
+  text-decoration: none;
+  font-size: 0.95rem;
+  margin-top: var(--u-sm);
+}
+
+.glossary-back-to-top:hover,
+.glossary-back-to-top:focus {
+  color: var(--fg1);
+  text-decoration: underline;
 }
 
 .glossary-word {
@@ -86,6 +102,21 @@
   font-size: 1.2rem;
 }
 
+.glossary-word-link {
+  text-decoration: none;
+  display: block;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.2s, padding 0.2s;
+  padding: 0.25rem 0.5rem;
+  margin: -0.25rem -0.5rem;
+}
+
+.glossary-word-link:hover,
+.glossary-word-link:focus {
+  background-color: var(--bg4);
+}
+
+
 .glossary-definition {
   color: var(--fg2);
   margin: 0.5rem 0;

gradesa/src/app/glossary/page.js

@@ -33,7 +33,7 @@ export default function GlossaryPage() {
   return (
     <Column gap="md" width="100%">
       <Row justify="space-between" gap="xl" width="100%" align="center">
-        <h2>Glossar</h2>
+        <h2 id="glossary-top">Glossar</h2>
       </Row>
 
       {letters.length > 0 && (
@@ -114,6 +114,9 @@ export default function GlossaryPage() {
                   </Container>
                 ))}
               </Container>
+              <a href="#glossary-top" className="glossary-back-to-top">
+                Zurück nach oben
+              </a>
             </Container>
           ))}
         </Container>

gradesa/src/components/ui/layout/container.jsx

@@ -92,7 +92,7 @@ const getValue = (cssProp, value) => {
   return value;
 };
 
-export const Container = memo(({ children, className, ...props }) => {
+export const Container = memo(({ children, className, id, ...props }) => {
   const mediaQueries = {};
 
   const validLayoutPropsEntries = useMemo(
@@ -159,7 +159,7 @@ export const Container = memo(({ children, className, ...props }) => {
     };
   }, [validLayoutPropsEntries]);
   return (
-    <div style={style} className={className}>
+    <div id={id} style={style} className={className}>
       {children}
     </div>
   );