feat: enhance Dockerfile and entrypoint for user permissions and environment variable handling

Dockerfile

@@ -9,6 +9,10 @@ RUN npm run build
 # Final runtime image
 FROM node:24-alpine
 WORKDIR /app
+
+# ensure su-exec present to drop privileges later
+RUN apk add --no-cache ca-certificates su-exec
+
 # copy package manifests and install deps (leverage Docker cache)
 COPY backend/package*.json backend/package-lock*.json ./backend/
 RUN cd backend && npm ci --silent

README.md

@@ -1,16 +1,31 @@
-Here is example usage of `docker-compose.yml`:
+# Tally Counter
+
+Run the app with Docker Compose (recommended). The container startup/entrypoint will create the runtime folders and apply migrations; pass numeric PUID/PGID via environment to run as a non-root user.
+
 
 ```yaml
-service
+services:
   tally-counter:
     image: gitea.kanawave.net/sebastas/tally-counter:latest     #this image
     container_name: tally-counter
-    user: 2000:2000 #uid:gid
     restart: unless-stopped
     networks:
-      - proxy   # traefik proxy network
+      - proxy   # connect any proxy networks (for traefik)
+    environment:
+      - PUID=1000   # host uid forwarded to container
+      - PGID=1000   # host gid forwarded to container
+    ports:
+      - "3000:3000" # Set whatever port you want on the left side (host)
     volumes:
-      - ./tally-counter:/data   # for persistant storage (db + uploads)
+      - ./tally-counter:/data         # persistent DB + uploads (bind mount)
 ```
 
-Quick and dirty setup!
+Add any `labels` for traefik
+
+### Notes & tips
+
+The entrypoint will:
+- ensure `$DATA_DIR` exists,
+- create `sqlite.db` if missing,
+- run `prisma migrate deploy` (if CLI available and migrations exist),
+- then drop privileges to the provided `PUID:PGID` and exec the app.

docker/entrypoint.sh

@@ -3,27 +3,50 @@ set -eu
 
 DATA_DIR="${DATA_DIR:-/data}"
 SCHEMA_PATH="./prisma/schema.prisma"
+PUID="${PUID:-}"
+PGID="${PGID:-$PUID}"
 
-# ensure data dir exists and is writable
 mkdir -p "$DATA_DIR"
 chmod 0775 "$DATA_DIR" || true
 
-# ensure DATABASE_URL is set to the runtime DATA_DIR
 : "${DATABASE_URL:=file:${DATA_DIR}/sqlite.db}"
 export DATABASE_URL
 
-# create sqlite file if missing
 SQLITE_DB_PATH="${DATA_DIR}/sqlite.db"
 if [ ! -f "$SQLITE_DB_PATH" ]; then
   touch "$SQLITE_DB_PATH"
   chmod 0664 "$SQLITE_DB_PATH" || true
 fi
 
-# run non-interactive migrations if CLI available
+# run migrations if prisma CLI available
 if command -v npx >/dev/null 2>&1 && [ -f "$SCHEMA_PATH" ]; then
   echo "Running prisma migrate deploy..."
   npx prisma migrate deploy --schema="$SCHEMA_PATH" || echo "prisma migrate deploy failed or no migrations to apply"
 fi
 
-# exec main process
+# If root and numeric PUID supplied, create/reuse group by GID then create user and chown
+if [ "$(id -u)" = "0" ] && [ -n "$PUID" ]; then
+  # try find an existing group with this GID
+  existing_group="$(getent group | awk -F: -v gid="$PGID" '$3==gid{print $1; exit}')"
+  if [ -n "$existing_group" ]; then
+    grp="$existing_group"
+  else
+    grp="appgroup"
+    addgroup -g "${PGID}" "$grp" 2>/dev/null || true
+  fi
+
+  if ! id -u app >/dev/null 2>&1; then
+    adduser -D -u "${PUID}" -G "$grp" -s /bin/sh app 2>/dev/null || true
+  fi
+
+  # ensure runtime paths writable by numeric ids
+  chown -R "${PUID}:${PGID}" "$DATA_DIR" /app/backend /app/frontend/dist 2>/dev/null || true
+
+  # drop privileges and run command
+  echo "Running as user: "${PUID}""
+  echo "Running as group: "${PGID}""
+  exec su-exec "${PUID}:${PGID}" "$@"
+fi
+
+# otherwise run as current user
 exec "$@"

frontend/src/App.css

@@ -415,6 +415,37 @@ html, body, #root {
   outline-offset: 8px;
 }
 
+/* container grid */
+.counters-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  max-width: var(--max-width);
+  margin: 0 auto;
+  justify-content: center;
+  align-items: start;
+}
+
+/* keep each card centered in its cell and center its inner content */
+.counters-grid > .counter-card {
+  justify-self: center;
+  width: 100%;
+  max-width: 460px;
+  box-sizing: border-box;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* ensure the actual counter element stays centered and doesn't stretch awkwardly */
+.counter-card .counter {
+  width: 100%;
+  max-width: 420px;
+  margin: 0 auto;
+  display: flex; 
+}
+
 /* ---------------------------
    Utilities / footer
    --------------------------- */

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Counter from './components/Counter'
 import CreateCounter from './components/CreateCounter'
 import { apiUrl } from './utils/api'
@@ -6,6 +6,13 @@ import './App.css'
 
 type CounterRecord = { id: number; value: number; name?: string; imageUrl?: string; position?: number }
 
+// small pure helper kept outside the component so it's stable
+const swapInArray = (arr: CounterRecord[], i: number, j: number) => {
+  const copy = arr.slice()
+  ;[copy[i], copy[j]] = [copy[j], copy[i]]
+  return copy
+}
+
 export default function App() {
   const [counters, setCounters] = useState<CounterRecord[]>([])
   const [loading, setLoading] = useState(true)
@@ -13,33 +20,46 @@ export default function App() {
   const [draggingId, setDraggingId] = useState<number | null>(null)
   const [dragOverId, setDragOverId] = useState<number | null>(null)
 
+  // track which modal ids are currently open (idempotent)
+  const [modalOpenSet, setModalOpenSet] = useState<Set<number>>(new Set())
+  const draggingEnabled = useMemo(() => modalOpenSet.size === 0, [modalOpenSet])
+
+  // helper: idempotently add/remove modal id
+  const handleEditingChange = useCallback((id: number, editing: boolean) => {
+    setModalOpenSet((prev) => {
+      const next = new Set(prev)
+      if (editing) next.add(id)
+      else next.delete(id)
+      return next
+    })
+  }, [])
+
+  // mounted ref to avoid setting state on unmounted component
+  const mountedRef = useRef(true)
+  useEffect(() => {
+    mountedRef.current = true
+    return () => {
+      mountedRef.current = false
+    }
+  }, [])
+
   useEffect(() => {
-    let mounted = true
     ;(async () => {
       try {
         const res = await fetch(apiUrl('/api/counters'))
         const list: CounterRecord[] = await res.json()
-        if (!mounted) return
+        if (!mountedRef.current) return
         setCounters(Array.isArray(list) ? list : [])
       } catch (err) {
+        // keep minimal logging here
         console.error('failed to load counters', err)
-        if (mounted) setCounters([])
+        if (mountedRef.current) setCounters([])
       } finally {
-        if (mounted) setLoading(false)
+        if (mountedRef.current) setLoading(false)
       }
     })()
-    return () => {
-      mounted = false
-    }
   }, [])
 
-  // swap two items in an array (keeps array length and only swaps the two indexes)
-  const swapInArray = (arr: CounterRecord[], i: number, j: number) => {
-    const copy = arr.slice()
-    ;[copy[i], copy[j]] = [copy[j], copy[i]]
-    return copy
-  }
-
   const clearDragState = useCallback(() => {
     setDraggingId(null)
     setDragOverId(null)
@@ -121,7 +141,8 @@ export default function App() {
     clearDragState()
   }, [clearDragState])
 
-  const handleChange = async (id: number, next: number) => {
+  const handleChange = useCallback(
+    async (id: number, next: number) => {
       // enforce non-negative values
       const safeNext = Math.max(0, next)
 
@@ -159,14 +180,16 @@ export default function App() {
           return n
         })
       }
-  }
+    },
+    [counters]
+  )
 
-  const handleCreated = (c: CounterRecord) => {
+  const handleCreated = useCallback((c: CounterRecord) => {
     setCounters((prev) => [...prev, c])
-  }
+  }, [])
 
-  // onUpdate: upload file (if present), then PATCH name/imageUrl for given id
-  const handleUpdate = async (id: number, payload: { name?: string; file?: File | null }) => {
+  const handleUpdate = useCallback(
+    async (id: number, payload: { name?: string; file?: File | null }) => {
       setSavingIds((s) => {
         const n = new Set(s)
         n.add(id)
@@ -219,10 +242,12 @@ export default function App() {
           return n
         })
       }
-  }
+    },
+    []
+  )
 
-  // added delete handler
-  const handleDelete = async (id: number) => {
+  const handleDelete = useCallback(
+    async (id: number) => {
       setSavingIds((s) => {
         const n = new Set(s)
         n.add(id)
@@ -244,7 +269,9 @@ export default function App() {
           return n
         })
       }
-  }
+    },
+    []
+  )
 
   if (loading) return <div className="loading">Loading counters…</div>
 
@@ -267,17 +294,18 @@ export default function App() {
             <p>Create your first counter to begin tracking.</p>
           </div>
         ) : (
-          <div className="counters-grid" style={{ display: 'grid', gap: 16, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
-            {counters.map((c) => (
+          <div className="counters-grid">
+            {counters.map((c) => {
+              return (
                 <div
                   key={c.id}
                   className={`counter-card card ${draggingId === c.id ? 'dragging' : ''} ${dragOverId === c.id ? 'drag-over' : ''}`}
-                draggable={true}
-                onDragStart={(e) => handleDragStart(e, c.id)}
-                onDragEnter={(e) => handleDragOver(e, c.id)}
-                onDragOver={(e) => handleDragOver(e, c.id)}
-                onDrop={(e) => handleDropOnCard(e, c.id)}
-                onDragEnd={handleDragEnd}
+                  draggable={draggingEnabled}
+                  onDragStart={draggingEnabled ? (e) => handleDragStart(e, c.id) : undefined}
+                  onDragEnter={draggingEnabled ? (e) => handleDragOver(e, c.id) : undefined}
+                  onDragOver={draggingEnabled ? (e) => handleDragOver(e, c.id) : undefined}
+                  onDrop={draggingEnabled ? (e) => handleDropOnCard(e, c.id) : undefined}
+                  onDragEnd={draggingEnabled ? handleDragEnd : undefined}
                 >
                   <Counter
                     id={String(c.id)}
@@ -289,9 +317,11 @@ export default function App() {
                     onChange={(next) => handleChange(c.id, next)}
                     onUpdate={(payload) => handleUpdate(c.id, payload)}
                     onDelete={() => handleDelete(c.id)}
+                    onEditingChange={(editing: boolean) => handleEditingChange(c.id, editing)}
                   />
                 </div>
-            ))}
+              )
+            })}
           </div>
         )}
       </main>

frontend/src/components/Counter.tsx

@@ -15,6 +15,7 @@ interface CounterProps {
 
   onUpdate?: (payload: { name?: string; file?: File | null }) => Promise<void> | void
   onDelete?: () => Promise<void> | void    // added delete prop
+  onEditingChange?: (editing: boolean) => void
 }
 
 const clamp = (v: number, min?: number, max?: number) => {
@@ -36,6 +37,7 @@ const Counter: React.FC<CounterProps> = ({
   isSaving = false,
   onUpdate,
   onDelete,
+  onEditingChange,
 }) => {
   const setValue = useCallback(
     (next: number) => {
@@ -97,23 +99,26 @@ const Counter: React.FC<CounterProps> = ({
     setEditName(label ?? '')
     setEditFile(null)
     setEditing(true)
-  }, [label])
+  }, [label, onEditingChange])
 
   const closeEdit = useCallback(() => {
     setEditing(false)
     setEditFile(null)
     setPreviewUrl(null)
-  }, [])
+  }, [onEditingChange])
 
   const handleSave = useCallback(async () => {
     if (!onUpdate) {
+      // close and notify parent
       setEditing(false)
+      onEditingChange?.(false)
       return
     }
     try {
       setSavingLocal(true)
       await onUpdate({ name: editName || undefined, file: editFile })
       setEditing(false)
+      onEditingChange?.(false)
     } catch (err) {
       console.error('update failed', err)
     } finally {
@@ -128,6 +133,7 @@ const Counter: React.FC<CounterProps> = ({
       await onDelete()
       // close modal locally (parent will remove the card)
       setEditing(false)
+      onEditingChange?.(false)
     } catch (err) {
       console.error('delete failed', err)
     } finally {
@@ -135,6 +141,20 @@ const Counter: React.FC<CounterProps> = ({
     }
   }, [onDelete])
 
+  // Call the latest onEditingChange but only re-run when `editing` toggles.
+  // This avoids re-running the effect when the parent's callback identity changes.
+  const onEditingChangeRef = useRef(onEditingChange)
+  useEffect(() => {
+    onEditingChangeRef.current = onEditingChange
+  }, [onEditingChange])
+
+  useEffect(() => {
+    onEditingChangeRef.current?.(editing)
+    return () => {
+      if (editing) onEditingChangeRef.current?.(false)
+    }
+  }, [editing])
+
   return (
     <div
       className={className ?? 'counter'}