feat: comprehensive UI improvements and accessibility enhancements (Issue #55)

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "Workwise",
 	"private": true,
-	"version": "0.6.007",
+	"version": "0.6.008",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",

src/app.css

@@ -61,7 +61,7 @@ h3 {
 }
 
 .dash-grid-2 {
-	@apply grid grid-cols-2 gap-8;
+	@apply mt-2 grid grid-cols-2;
 }
 
 .dash-tile-rect {
@@ -70,7 +70,7 @@ h3 {
 }
 
 .dash-tile-square {
-	@apply card border-primary bg-base-100 my-1 rounded-lg border p-6 transition-shadow hover:shadow-md;
+	@apply card border-primary bg-base-100 mx-10 my-1 rounded-lg border p-3 transition-shadow hover:shadow-md;
 	@apply flex flex-col items-center justify-center text-center;
 	@apply cursor-pointer;
 	/* Height constraints relative to .list-item */
@@ -87,8 +87,8 @@ h3 {
 }
 
 .footer {
-	@apply bg-primary text-primary-content h-20;
-	padding-bottom: env(safe-area-inset-bottom);
+	@apply bg-primary text-primary-content h-16;
+	/* padding-bottom: env(safe-area-inset-bottom); */
 	padding-left: env(safe-area-inset-left);
 	padding-right: env(safe-area-inset-right);
 }
@@ -106,23 +106,23 @@ h3 {
 }
 
 .header-container-logo {
-	@apply rounded-xl bg-white p-2 shadow-sm;
+	@apply flex-shrink-0 rounded-xl bg-white p-2 shadow-sm;
 }
 
 .header-content {
-	@apply flex h-20 w-full flex-row items-center justify-between px-2 sm:px-6 lg:px-8;
+	@apply flex h-20 w-full flex-row items-center justify-between px-5;
 }
 
 .header-left {
-	@apply flex items-center space-x-4 px-2;
+	@apply flex items-center space-x-4;
 }
 
 .view {
 	@apply flex h-full w-full flex-col overflow-hidden;
 }
 
 .view-header {
-	@apply bg-accent max-w-full p-3;
+	@apply bg-accent h-14 max-w-full px-5;
 	/* height: 4.5rem; */
 	display: grid;
 	grid-template-columns: 1fr auto;
@@ -180,7 +180,7 @@ h3 {
 }
 
 .status-default {
-	@apply bg-base-300;
+	@apply bg-accent;
 }
 
 .status-action {
@@ -243,6 +243,171 @@ h3 {
 	@apply mx-1 mb-2 w-full;
 }
 
+.help-section {
+	border-bottom: 1px solid hsl(var(--bc) / 0.1);
+}
+
+.help-section:last-child {
+	border-bottom: none;
+	padding-bottom: 0;
+}
+
+.screenshot-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.breadcrumb {
+	font-size: 1.25rem;
+	font-weight: 700;
+}
+
+.breadcrumb-list {
+	@apply m-0 flex list-none items-center p-0;
+	white-space: nowrap;
+	overflow: hidden;
+	min-width: 0;
+	flex: 1;
+}
+
+.breadcrumb-item {
+	@apply flex flex-shrink-0 items-center;
+}
+
+.breadcrumb-item:last-child {
+	@apply min-w-0 flex-shrink;
+	max-width: 100%;
+}
+
+.breadcrumb-link {
+	@apply text-accent-content cursor-pointer border-none bg-transparent p-0 font-normal underline transition-colors hover:text-white;
+}
+
+.breadcrumb-current {
+	@apply text-accent-content font-bold;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.breadcrumb-separator {
+	@apply text-accent-content/70 flex-shrink-0 font-normal;
+	margin: 0 0.25rem;
+}
+
+.actions-crud {
+	@apply space-y-4;
+}
+
+.actions-header {
+	@apply mb-4;
+}
+
+.actions-list {
+	@apply space-y-3;
+}
+
+.action-item {
+	@apply card border-primary bg-base-100 mb-3 rounded-lg border-2 p-3 transition-shadow hover:shadow-md;
+}
+
+.action-view {
+	@apply flex items-start justify-between gap-3;
+}
+
+.action-content {
+	@apply flex-1;
+}
+
+.action-description {
+	@apply text-base-content mb-2 font-medium;
+}
+
+.action-date {
+	@apply text-base-content/60 text-xs;
+}
+
+.action-buttons {
+	@apply flex flex-shrink-0 gap-2;
+}
+
+.action-edit-form {
+	@apply space-y-3;
+}
+
+.action-description-input {
+	@apply textarea border-primary focus:border-accent w-full rounded-lg border p-3 outline-none;
+}
+
+.action-edit-buttons {
+	@apply flex gap-2;
+}
+
+.action-edit-buttons .btn-sm {
+	@apply btn btn-sm;
+}
+
+.action-edit-buttons .btn-submit {
+	@apply btn btn-accent hover:btn-secondary text-base-100 btn-sm;
+}
+
+.new-action-form {
+	@apply card border-primary bg-base-100 space-y-3 rounded-lg border-2 border-dashed p-4;
+}
+
+.new-action-buttons {
+	@apply flex gap-2;
+}
+
+.new-action-buttons .btn-sm {
+	@apply btn btn-sm;
+}
+
+.new-action-buttons .btn-submit {
+	@apply btn btn-accent hover:btn-secondary text-base-100 btn-sm;
+}
+
+.add-action-btn {
+	@apply border-primary hover:border-accent w-full;
+}
+
+/* Error states */
+.border-error {
+	@apply border-error;
+}
+
+/* Loading states */
+.btn:disabled {
+	@apply cursor-not-allowed opacity-50;
+}
+
+.loading-xs {
+	width: 1rem;
+	height: 1rem;
+}
+
+/* Font size controls */
+.font-size-extra-small {
+	font-size: 12px;
+}
+
+.font-size-small {
+	font-size: 14px;
+}
+
+.font-size-medium {
+	font-size: 16px;
+}
+
+.font-size-large {
+	font-size: 18px;
+}
+
+.font-size-extra-large {
+	font-size: 20px;
+}
+
 @media (max-width: 375px) {
 	.dash-grid {
 		@apply grid-cols-1;

src/lib/components/cards/ListItem.svelte

@@ -126,7 +126,11 @@
 >
 	<div
 		id="list-item-{item.id}-row"
-		class="flex w-full {table === 'questions' ? 'flex-row items-center justify-between' : table === 'resources' ? 'flex-row items-center justify-center' : 'flex-col items-start md:flex-row md:items-center md:justify-between'}"
+		class="flex w-full {table === 'questions'
+			? 'flex-row items-center justify-between'
+			: table === 'resources'
+				? 'flex-row items-center justify-center'
+				: 'flex-col items-start md:flex-row md:items-center md:justify-between'}"
 	>
 		{#if table === 'actions'}
 			<!-- Text content for actions, stacked vertically -->
@@ -155,8 +159,10 @@
 							<Tooltip text="Question already answered or skipped" position="right">
 								<div
 									id="list-item-{item.id}-status-icon"
-									class="status-indicator-lg status-default"
-								></div>
+									class="status-indicator-lg status-default flex items-center justify-center"
+								>
+									<span class="text-s text-white">✓</span>
+								</div>
 							</Tooltip>
 						{:then response}
 							{@const hasValidStatus =
@@ -166,32 +172,40 @@
 								<Tooltip text="Question already answered or skipped" position="right">
 									<div
 										id="list-item-{item.id}-status-icon"
-										class="status-indicator-lg status-default"
-									></div>
+										class="status-indicator-lg status-default flex items-center justify-center"
+									>
+										<span class="text-s text-white">✓</span>
+									</div>
 								</Tooltip>
 							{:else}
 								<!-- Magenta -->
 								<Tooltip text="Question requires attention from user" position="right">
 									<div
 										id="list-item-{item.id}-status-icon"
-										class="status-indicator-lg status-active"
-									></div>
+										class="status-indicator-lg status-active flex items-center justify-center"
+									>
+										<span class="text-s text-white">?</span>
+									</div>
 								</Tooltip>
 							{/if}
 						{:catch}
 							<Tooltip text="Question already answered or skipped" position="right">
 								<div
 									id="list-item-{item.id}-status-icon"
-									class="status-indicator-lg status-default"
-								></div>
+									class="status-indicator-lg status-default flex items-center justify-center"
+								>
+									<span class="text-s text-white">✓</span>
+								</div>
 							</Tooltip>
 						{/await}
 					{:else}
 						<Tooltip text="Question already answered or skipped" position="right">
 							<div
 								id="list-item-{item.id}-status-icon"
-								class="status-indicator-lg status-default"
-							></div>
+								class="status-indicator-lg status-default flex items-center justify-center"
+							>
+								<span class="text-s text-white">✓</span>
+							</div>
 						</Tooltip>
 					{/if}
 				</div>
@@ -210,7 +224,7 @@
 							href={item.url}
 							target="_blank"
 							rel="noopener noreferrer"
-							class="text-accent hover:text-accent-dark text-sm underline break-all"
+							class="text-accent hover:text-accent-dark text-sm break-all underline"
 							onclick={(e) => e.stopPropagation()}
 						>
 							{item.url}