be/app/database.py

@@ -13,8 +13,7 @@ engine = create_async_engine(
     settings.DATABASE_URL,
     echo=True,  # Log SQL queries (useful for debugging)
     future=True, # Use SQLAlchemy 2.0 style features
-    pool_recycle=3600, # Optional: recycle connections after 1 hour
-    pool_pre_ping=True # Add this line to ensure connections are live
+    pool_recycle=3600 # Optional: recycle connections after 1 hour
 )
 
 # Create a configured "Session" class

fe/src/assets/valerie-ui.scss

@@ -37,13 +37,11 @@
 
 	/* Textures */
 	--paper-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23a59a8a' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M36 60v-6h6v6h-6zm18-12v-6h6v6h-6zM6 0v6H0V0h6zM6 12v6H0v-6h6zM18 0v6h-6V0h6zM18 12v6h-6v-6h6zM30 0v6h-6V0h6zM30 12v6h-6v-6h6zM42 0v6h-6V0h6zM42 12v6h-6v-6h6zM54 0v6h-6V0h6zM54 12v6h-6v-6h6zM6 24v6H0v-6h6zM6 36v6H0v-6h6zM6 48v6H0v-6h6zM18 24v6h-6v-6h6zM18 36v6h-6v-6h6zM18 48v6h-6v-6h6zM30 24v6h-6v-6h6zM30 36v6h-6v-6h6zM30 48v6h-6v-6h6zM42 24v6h-6v-6h6zM42 36v6h-6v-6h6zM42 48v6h-6v-6h6zM54 24v6h-6v-6h6zM54 36v6h-6v-6h6zM54 48v6h-6v-6h6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-  --progress-texture: repeating-linear-gradient(
-    45deg,
+	--progress-texture: repeating-linear-gradient(45deg,
 			rgba(0, 0, 0, 0.05),
 			rgba(0, 0, 0, 0.05) 5px,
 			transparent 5px,
-    transparent 10px
-  );
+			transparent 10px);
 }
 
 /* Accessibility Helpers */
@@ -61,6 +59,7 @@
 
 /* Reduced Motion Preference */
 @media (prefers-reduced-motion: reduce) {
+
 	*,
 	*::before,
 	*::after {
@@ -80,7 +79,7 @@
 }
 
 body {
-  font-family: 'Patrick Hand', cursive;
+	font-family: "Patrick Hand", cursive;
 	background-color: var(--light);
 	background-image: var(--paper-texture);
 	// padding: 2rem 1rem;s
@@ -98,25 +97,22 @@ body {
 }
 
 /* Focus Visible Styles */
-:is(a, button, input, select, textarea, [tabindex]):not([tabindex='-1']):focus-visible {
+:is(a, button, input, select, textarea, [tabindex]):not([tabindex="-1"]):focus-visible {
 	outline: var(--focus-outline);
 	outline-offset: var(--focus-outline-offset);
-  box-shadow:
-    0 0 0 var(--focus-outline-width) var(--focus-outline-color),
+	box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
 		var(--shadow-md);
 	z-index: 10;
 	/* Bring focused element forward */
 }
 
 .btn:focus-visible {
-  box-shadow:
-    0 0 0 var(--focus-outline-width) var(--focus-outline-color),
+	box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
 		var(--shadow-lg);
 }
 
 .form-input:focus-visible {
-  box-shadow:
-    var(--shadow-inset),
+	box-shadow: var(--shadow-inset),
 		0 0 0 var(--focus-outline-width) var(--focus-outline-color),
 		var(--shadow-sm);
 }
@@ -133,23 +129,21 @@ body {
 	/* Higher than non-focused tabs */
 }
 
-.checkbox-label input:focus-visible ~ .checkmark,
-.radio-label input:focus-visible ~ .checkmark {
+.checkbox-label input:focus-visible~.checkmark,
+.radio-label input:focus-visible~.checkmark {
 	outline: var(--focus-outline);
 	outline-offset: var(--focus-outline-offset);
-  box-shadow:
-    var(--shadow-sm),
+	box-shadow: var(--shadow-sm),
 		0 0 0 var(--focus-outline-width) var(--focus-outline-color);
 }
 
-.switch-container input:focus-visible + .switch {
+.switch-container input:focus-visible+.switch {
 	outline: var(--focus-outline);
 	outline-offset: var(--focus-outline-offset);
 }
 
 .avatar:focus-visible {
-  box-shadow:
-    0 0 0 var(--focus-outline-width) var(--focus-outline-color),
+	box-shadow: 0 0 0 var(--focus-outline-width) var(--focus-outline-color),
 		var(--shadow-sm);
 }
 
@@ -175,7 +169,7 @@ h3 {
 h1::after,
 h2::after,
 h3::after {
-  content: '';
+	content: "";
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -211,7 +205,7 @@ h3 {
 	margin-right: 0.5em;
 }
 
-button > .icon:last-child {
+button>.icon:last-child {
 	margin-right: 0;
 }
 
@@ -236,8 +230,7 @@ button > .icon:last-child {
 	padding: 0.8rem 1.6rem;
 	cursor: pointer;
 	box-shadow: var(--shadow-md);
-  transition:
-    transform var(--transition-speed) var(--transition-ease-out),
+	transition: transform var(--transition-speed) var(--transition-ease-out),
 		box-shadow var(--transition-speed) var(--transition-ease-out),
 		background-color var(--transition-speed) var(--transition-ease-out);
 	position: relative;
@@ -300,6 +293,7 @@ button > .icon:last-child {
 }
 
 @keyframes jiggle-subtle {
+
 	0%,
 	100% {
 		transform: translate(2px, 2px) scale(0.98) rotate(0deg);
@@ -330,7 +324,7 @@ button > .icon:last-child {
 
 /* Removed .card:hover transform/shadow increase */
 .card::before {
-  content: '';
+	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: var(--paper-texture);
@@ -340,7 +334,7 @@ button > .icon:last-child {
 	/* Prevent texture from interfering */
 }
 
-.card > * {
+.card>* {
 	position: relative;
 	z-index: 1;
 	/* Ensure content is above texture */
@@ -422,8 +416,7 @@ textarea.form-input {
 	font-family: inherit;
 	font-size: 1rem;
 	box-shadow: var(--shadow-inset), var(--shadow-sm);
-  transition:
-    transform var(--transition-speed) var(--transition-ease-out),
+	transition: transform var(--transition-speed) var(--transition-ease-out),
 		box-shadow var(--transition-speed) var(--transition-ease-out),
 		border-color var(--transition-speed) var(--transition-ease-out);
 	box-sizing: border-box;
@@ -513,9 +506,9 @@ select.form-input {
 	border-radius: 50%;
 }
 
-.checkbox-label input:checked ~ .checkmark:after,
-.radio-label input:checked ~ .checkmark:after {
-  content: '';
+.checkbox-label input:checked~.checkmark:after,
+.radio-label input:checked~.checkmark:after {
+	content: "";
 	position: absolute;
 	display: block;
 	transform-origin: center center;
@@ -602,7 +595,7 @@ select.form-input {
 }
 
 .list-item::before {
-  content: '';
+	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: var(--paper-texture);
@@ -723,12 +716,12 @@ select.form-input {
 	/* Push to the right on larger screens */
 }
 
-.list-item-details > * {
+.list-item-details>* {
 	margin-left: 0.5rem;
 }
 
 /* Spacing between items in details */
-.list-item-details > :first-child {
+.list-item-details> :first-child {
 	margin-left: 0;
 }
 
@@ -771,7 +764,7 @@ select.form-input {
 }
 
 .badge-accent.badge-sticky::after {
-  content: '';
+	content: "";
 	position: absolute;
 	bottom: -1px;
 	right: -1px;
@@ -823,7 +816,7 @@ select.form-input {
 
 /* Tabs */
 .tabs {
-  // margin-bottom: 2rem;
+	margin-bottom: 2rem;
 }
 
 .tab-list {
@@ -850,19 +843,14 @@ select.form-input {
 	font-weight: bold;
 	position: relative;
 	box-shadow: var(--shadow-sm);
-  transition:
-    transform var(--transition-speed) var(--transition-ease-out),
-    box-shadow var(--transition-speed) var(--transition-ease-out),
-    background-color var(--transition-speed) var(--transition-ease-out),
-    color var(--transition-speed) var(--transition-ease-out),
-    border-color var(--transition-speed) var(--transition-ease-out);
+	transition: transform var(--transition-speed) var(--transition-ease-out), box-shadow var(--transition-speed) var(--transition-ease-out), background-color var(--transition-speed) var(--transition-ease-out), color var(--transition-speed) var(--transition-ease-out), border-color var(--transition-speed) var(--transition-ease-out);
 	text-transform: uppercase;
 	letter-spacing: 0.5px;
 	flex-grow: 0;
 }
 
-.tab-item[aria-selected='true'] {
-  background-color: var(--primary) !important;
+.tab-item[aria-selected="true"] {
+	background-color: var(--primary);
 	color: var(--dark);
 	border-color: var(--black);
 	/* Ensure all borders are black */
@@ -874,8 +862,8 @@ select.form-input {
 	/* transform: translateY(-3px); REMOVED */
 }
 
-.tab-item:not([aria-selected='true']):hover {
-  background-color: var(--secondary) !important;
+.tab-item:not([aria-selected="true"]):hover {
+	background-color: var(--secondary);
 	transform: translateY(-2px);
 	box-shadow: var(--shadow-md);
 }
@@ -899,7 +887,7 @@ select.form-input {
 }
 
 .tab-content::before {
-  content: '';
+	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: var(--paper-texture);
@@ -908,7 +896,7 @@ select.form-input {
 	pointer-events: none;
 }
 
-.tab-content > * {
+.tab-content>* {
 	position: relative;
 	z-index: 1;
 }
@@ -924,17 +912,13 @@ select.form-input {
 	z-index: 1000;
 	opacity: 0;
 	visibility: hidden;
-  transition:
-    opacity var(--transition-speed) var(--transition-ease-out),
-    visibility 0s linear var(--transition-speed);
+	transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear var(--transition-speed);
 }
 
 .modal-backdrop.open {
 	opacity: 1;
 	visibility: visible;
-  transition:
-    opacity var(--transition-speed) var(--transition-ease-out),
-    visibility 0s linear 0s;
+	transition: opacity var(--transition-speed) var(--transition-ease-out), visibility 0s linear 0s;
 }
 
 .modal-container {
@@ -954,7 +938,7 @@ select.form-input {
 }
 
 .modal-container::before {
-  content: '';
+	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: var(--paper-texture);
@@ -1016,9 +1000,7 @@ select.form-input {
 	padding: 0;
 	line-height: 1;
 	color: var(--dark);
-  transition:
-    color var(--transition-speed) var(--transition-ease-out),
-    transform var(--transition-speed-fast) ease-out;
+	transition: color var(--transition-speed) var(--transition-ease-out), transform var(--transition-speed-fast) ease-out;
 }
 
 .close-button .icon {
@@ -1064,7 +1046,7 @@ select.form-input {
 }
 
 .alert::before {
-  content: '';
+	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: var(--paper-texture);
@@ -1073,7 +1055,7 @@ select.form-input {
 	pointer-events: none;
 }
 
-.alert > .alert-content {
+.alert>.alert-content {
 	/* Wrap main content */
 	display: flex;
 	align-items: center;
@@ -1144,6 +1126,7 @@ select.form-input {
 
 /* Darker blue border */
 
+
 /* Progress Bar */
 .progress-container {
 	width: 100%;
@@ -1221,7 +1204,7 @@ select.form-input {
 
 .switch:before {
 	position: absolute;
-  content: '';
+	content: "";
 	height: 24px;
 	/* Adjusted size */
 	width: 24px;
@@ -1233,19 +1216,18 @@ select.form-input {
 	background-color: var(--dark);
 	border: 2px solid var(--light);
 	box-shadow: var(--shadow-sm);
-  transition:
-    transform 0.4s var(--transition-ease-out),
+	transition: transform 0.4s var(--transition-ease-out),
 		background-color 0.4s var(--transition-ease-out),
 		border-color 0.4s var(--transition-ease-out);
 	transform: translateY(-50%);
 	/* Vertical centering */
 }
 
-.switch-container input:checked + .switch {
+.switch-container input:checked+.switch {
 	background-color: var(--secondary-accent);
 }
 
-.switch-container input:checked + .switch:before {
+.switch-container input:checked+.switch:before {
 	background-color: var(--light);
 	border-color: var(--dark);
 	/* Width (64) - border*2 (6) - left (2) - width (24) = 32 */
@@ -1266,7 +1248,7 @@ select.form-input {
 }
 
 .table-container::before {
-  content: '';
+	content: "";
 	position: absolute;
 	inset: 0;
 	background-image: var(--paper-texture);
@@ -1469,8 +1451,7 @@ select.form-input {
 	left: 50%;
 	transform: translateX(-50%) scale(0.95);
 	transform-origin: bottom center;
-  transition:
-    opacity var(--transition-speed) var(--transition-ease-out),
+	transition: opacity var(--transition-speed) var(--transition-ease-out),
 		visibility 0s linear var(--transition-speed),
 		transform var(--transition-speed) var(--transition-ease-out);
 	box-shadow: var(--shadow-md);
@@ -1487,7 +1468,7 @@ select.form-input {
                when shown, removing it from the parent's clipping context.
                This CSS provides structure but cannot overcome parent overflow clipping. */
 .tooltip-text::after {
-  content: '';
+	content: "";
 	position: absolute;
 	top: 100%;
 	left: 50%;
@@ -1497,8 +1478,8 @@ select.form-input {
 	border-color: var(--dark) transparent transparent transparent;
 }
 
-.tooltip .tooltip-trigger:hover + .tooltip-text,
-.tooltip .tooltip-trigger:focus-visible + .tooltip-text,
+.tooltip .tooltip-trigger:hover+.tooltip-text,
+.tooltip .tooltip-trigger:focus-visible+.tooltip-text,
 .tooltip-text.visible {
 	visibility: visible;
 	opacity: 1;
@@ -1544,6 +1525,7 @@ select.form-input {
 }
 
 @keyframes pulse-dot {
+
 	0%,
 	80%,
 	100% {
@@ -1583,6 +1565,7 @@ select.form-input {
 
 /* Match button text color */
 
+
 /* Responsive */
 @media (max-width: 768px) {
 	body {
@@ -1648,7 +1631,7 @@ select.form-input {
 		border-right: var(--border);
 	}
 
-  .tab-item[aria-selected='true'] {
+	.tab-item[aria-selected="true"] {
 		border-bottom-color: var(--primary);
 		margin-bottom: 0;
 		/* No longer needs negative margin */
@@ -1678,7 +1661,7 @@ select.form-input {
 		/* Allow badges/avatar wrap on mobile */
 	}
 
-  .list-item-details > * {
+	.list-item-details>* {
 		margin-left: 0;
 		margin-right: 0.5rem;
 		margin-bottom: 0.25rem;
@@ -1700,6 +1683,7 @@ select.form-input {
 
 	/* Example smaller distance */
 
+
 	.table {
 		min-width: unset;
 	}
@@ -1723,7 +1707,7 @@ select.form-input {
 		flex-direction: column;
 	}
 
-  .flex-layout-stack-mobile > .card {
+	.flex-layout-stack-mobile>.card {
 		width: 100% !important;
 		margin: 0 0 1.5rem 0 !important;
 		flex-basis: auto !important;
@@ -1733,12 +1717,12 @@ select.form-input {
 		flex-direction: column;
 	}
 
-  .form-row-wrap-mobile > .form-group {
+	.form-row-wrap-mobile>.form-group {
 		margin-right: 0 !important;
 		width: 100%;
 	}
 
-  .form-row-wrap-mobile > .form-group:not(:last-child) {
+	.form-row-wrap-mobile>.form-group:not(:last-child) {
 		margin-bottom: 1.5rem;
 	}
 }

fe/src/pages/GroupDetailPage.vue

@@ -300,7 +300,7 @@ onMounted(() => {
 .neo-card {
   border-radius: 18px;
   box-shadow: 6px 6px 0 #111;
-  background: var(--light);
+  background: #fff;
   border: 3px solid #111;
   overflow: hidden;
 }

fe/src/pages/GroupsPage.vue

@@ -333,8 +333,7 @@ onMounted(async () => {
   min-width: 260px;
   width: 100%;
   margin: 0 auto;
-  border: none;
-  background: var(--light);
+  background: #fff;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -365,7 +364,7 @@ onMounted(async () => {
 
 .neo-create-group-card {
   border: 3px dashed #111;
-  background: var(--light);
+  background: #fafafa;
   padding: 2.5rem 0;
   text-align: center;
   font-weight: 900;

fe/src/pages/ListDetailPage.vue

@@ -809,7 +809,7 @@ const editItem = (item: Item) => {
   padding: 0.4rem 1rem;
   border: 3px solid #111;
   border-radius: 50px;
-  background: var(--light);
+  background: #fff;
   box-shadow: 3px 3px 0 #111;
 }
 
@@ -827,7 +827,7 @@ const editItem = (item: Item) => {
   box-shadow: 6px 6px 0 #111;
   width: 100%;
   margin: 0 0 2rem 0;
-  background: var(--light);
+  background: #fff;
   display: flex;
   flex-direction: column;
   cursor: pointer;
@@ -840,7 +840,7 @@ const editItem = (item: Item) => {
   margin: 0 0 2rem 0;
   break-inside: avoid;
   width: 100%;
-  background: var(--light);
+  background: #fff;
   display: flex;
   flex-direction: column;
 }
@@ -849,7 +849,7 @@ const editItem = (item: Item) => {
   padding: 1.2rem;
   margin-bottom: 0;
   border-bottom: 1px solid #eee;
-  background: var(--light);
+  background: #fff;
   transition: background-color 0.1s ease-in-out;
 }
 

fe/src/pages/ListsPage.vue

@@ -321,7 +321,7 @@ watch(currentGroupId, () => {
   box-shadow: 6px 6px 0 #111;
   width: 100%;
   margin: 0 0 2rem 0;
-  background: var(--light);
+  background: #fff;
   display: flex;
   flex-direction: column;
   /* padding: 2rem 2rem 1.5rem 2rem;
@@ -330,7 +330,6 @@ watch(currentGroupId, () => {
   cursor: pointer;
   /* transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; */
   border: 3px solid #111;
-  padding-inline: 1rem;
 }
 
 .neo-list-card:hover {
@@ -393,7 +392,7 @@ watch(currentGroupId, () => {
 
 .neo-create-list-card {
   border: 3px dashed #111;
-  background: var(--light);
+  background: #fafafa;
   padding: 2.5rem 0;
   text-align: center;
   font-weight: 900;
@@ -449,14 +448,12 @@ watch(currentGroupId, () => {
 }
 
 .neo-new-item-input {
-    outline: none;
-  border: none;
   margin-top: 0.5rem;
   padding: 0.5rem;
-  background-color: var(--light) !important	;
 }
 
 .neo-new-item-input input[type="text"] {
+  background: transparent;
   border: none;
   outline: none;
   all: unset;