chore: make title modifiable, fix inital db value

client/pages/AdminPage.tsx

@@ -14,13 +14,14 @@ import { useCurrentUser } from '../hooks/useCurrentUser'
 
 const CreateProblem = ({}) => {
     const [source, setSource] = useState('')
+    const [title, setTitle] = useState('')
 
     type ProblemFields = {
         title?: string
         content: string
     }
 
-    const createProblem = async () => {
+    const handleCreateProblem = async () => {
         if (source.trim().length === 0) {
             alert('Il campo di testo è vuoto!')
             return
@@ -28,6 +29,7 @@ const CreateProblem = ({}) => {
 
         const id = await server.post<ProblemFields>('/api/problem', {
             content: source,
+            title,
         })
 
         route(prependBaseUrl(`/problem/${id}`))
@@ -35,8 +37,17 @@ const CreateProblem = ({}) => {
 
     return (
         <>
+            <div class="problem-title">
+                <label>Titolo</label>
+                <input
+                    type="text"
+                    value={title}
+                    onInput={e => setTitle(e.target instanceof HTMLInputElement ? e.target.value : '')}
+                    placeholder="Problema..."
+                />
+            </div>
             <MarkdownEditor placeholder="Scrivi un nuovo problema..." {...{ source, setSource }} />
-            <button onClick={createProblem}>Aggiungi Problema</button>
+            <button onClick={handleCreateProblem}>Aggiungi Problema</button>
         </>
     )
 }
@@ -123,6 +134,8 @@ export const AdminPage = ({}) => {
                     <>
                         <hr />
                         <div class="subtitle">Controlli speciali solo per Admin</div>
+                        
+                        {/* TODO: make this work */}
                         <div class="scrollable">
                             <div class="users-table" style={{ '--cols': 4 }}>
                                 <div class="cell header">Username Ateneo</div>

client/pages/ProblemPage.tsx

@@ -53,6 +53,7 @@ export const ProblemPage = ({ id }: RouteProps) => {
 
     const [editing, setEditing] = useState<boolean>(false)
     const [modifiedProblemSource, setModifiedProblemSource] = useState<string>('')
+    const [modifiedProblemTitle, setModifiedProblemTitle] = useState<string>(problem?.title ?? '')
 
     useEffect(() => {
         if (problem) {
@@ -63,6 +64,7 @@ export const ProblemPage = ({ id }: RouteProps) => {
     const updateProblem = async () => {
         await server.patch(`/api/problem/${id}`, {
             content: modifiedProblemSource,
+            title: modifiedProblemTitle,
         })
         refreshProblem()
         setEditing(false)
@@ -92,6 +94,15 @@ export const ProblemPage = ({ id }: RouteProps) => {
                     </>
                 ) : (
                     <>
+                        <div class="problem-title">
+                            <label>Titolo</label>
+                            <input
+                                type="text"
+                                value={modifiedProblemTitle}
+                                onInput={e => setModifiedProblemTitle(e.target instanceof HTMLInputElement ? e.target.value : '')}
+                                placeholder="Problema..."
+                            />
+                        </div>
                         <MarkdownEditor
                             placeholder="Modifica testo del problema..."
                             source={modifiedProblemSource}

client/styles/main.scss

@@ -281,6 +281,18 @@ $heading-scale: 1.25;
 // Components
 //
 
+.row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+
+    @media screen and (max-width: $device-s-width), (pointer: coarse) {
+        flex-direction: column;
+        width: 100%;
+    }
+
+}
+
 .text-body {
     font-family: 'EB Garamond', serif;
     font-weight: 400;
@@ -362,7 +374,7 @@ main.page-home {
         // min-width: 0;
 
         display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(auto, 70ch));
+        grid-template-columns: repeat(auto-fit, minmax(auto, 71ch));
         gap: 2rem;
 
         justify-content: center;
@@ -699,12 +711,6 @@ header {
             font-weight: 400;
         }
 
-        .row {
-            display: flex;
-            gap: 0.5rem;
-            align-items: center;
-        }
-
         .pending {
             color: #1653a3;
             font-style: italic;
@@ -810,6 +816,10 @@ header {
 //
 
 main.page-admin {
+    .problem-title {
+        @extend .row;
+    }
+
     .users-table {
         @extend .table;