Merge branch 'cardsboard' of https://github.com/edufeed-org/kanban-editor into cardsboard

Author: johappel

src/app.css

@@ -27,19 +27,19 @@
   --card-foreground: oklch(38% .02 250);
   --popover: oklch(97% 0 0);
   --popover-foreground: oklch(38% .02 250);
-  --primary: oklch(58% .19 35);
+  --primary: oklch(33% 0.16 264);
   --primary-foreground: oklch(100% 0 0);
-  --secondary: oklch(94% 0 0);
+  --secondary: oklch(76% 0.19 65);
   --secondary-foreground: oklch(38% .02 250);
   --muted: oklch(94% 0 0);
   --muted-foreground: oklch(55% .01 250);
-  --accent: oklch(58% .19 35);
+  --accent: oklch(76% 0.19 65);
   --accent-foreground: oklch(100% 0 0);
   --destructive: oklch(65% .2 25);
   --destructive-foreground: oklch(100% 0 0);
   --border: oklch(88% .005 250);
   --input: oklch(91% 0 0);
-  --ring: oklch(58% .19 35);
+  --ring: oklch(76% 0.19 65);
 
   /* Semantic Status Colors */
   --info: oklch(72% .11 230);
@@ -50,21 +50,21 @@
   --warning-foreground: oklch(20% 0 0);
 
   /* Chart Colors */
-  --chart-1: oklch(58% .19 35);
+  --chart-1: oklch(33% 0.16 264);
   --chart-2: oklch(72% .15 150);
   --chart-3: oklch(72% .11 230);
-  --chart-4: oklch(82% .17 85);
+  --chart-4: oklch(76% 0.19 65);
   --chart-5: oklch(65% .2 25);
 
   /* Sidebar */
   --sidebar: oklch(97% 0 0);
   --sidebar-foreground: oklch(38% .02 250);
-  --sidebar-primary: oklch(58% .19 35);
+  --sidebar-primary: oklch(33% 0.16 264);
   --sidebar-primary-foreground: oklch(100% 0 0);
   --sidebar-accent: oklch(94% 0 0);
   --sidebar-accent-foreground: oklch(38% .02 250);
   --sidebar-border: oklch(88% .005 250);
-  --sidebar-ring: oklch(58% .19 35);
+  --sidebar-ring: oklch(76% 0.19 65);
 
   /* Board */
   --column-border: oklch(85% .01 250);
@@ -93,19 +93,19 @@
   --card-foreground: oklch(90% 0 0);
   --popover: oklch(18% .01 250);
   --popover-foreground: oklch(90% 0 0);
-  --primary: oklch(58% .19 35);
+  --primary: oklch(54% 0.1466 268.46);
   --primary-foreground: oklch(100% 0 0);
-  --secondary: oklch(50% .02 250);
+  --secondary: oklch(76% 0.19 65);
   --secondary-foreground: oklch(100% 0 0);
   --muted: oklch(30% .01 250);
   --muted-foreground: oklch(65% .01 250);
-  --accent: oklch(58% .19 35);
+  --accent: oklch(76% 0.19 65);
   --accent-foreground: oklch(100% 0 0);
   --destructive: oklch(65% .2 25);
   --destructive-foreground: oklch(100% 0 0);
   --border: oklch(35% .01 250);
   --input: oklch(26% .01 250);
-  --ring: oklch(58% .19 35);
+  --ring: oklch(76% 0.19 65);
 
   /* Semantic Status Colors */
   --info: oklch(72% .11 230);
@@ -116,21 +116,21 @@
   --warning-foreground: oklch(15% 0 0);
 
   /* Chart Colors */
-  --chart-1: oklch(58% .19 35);
+  --chart-1: oklch(54% 0.1466 268.46);
   --chart-2: oklch(72% .15 150);
   --chart-3: oklch(72% .11 230);
-  --chart-4: oklch(82% .17 85);
+  --chart-4: oklch(76% 0.19 65);
   --chart-5: oklch(65% .2 25);
 
   /* Sidebar */
   --sidebar: oklch(18% .01 250);
   --sidebar-foreground: oklch(90% 0 0);
-  --sidebar-primary: oklch(58% .19 35);
+  --sidebar-primary: oklch(54% 0.1466 268.46);
   --sidebar-primary-foreground: oklch(100% 0 0);
   --sidebar-accent: oklch(30% .01 250);
   --sidebar-accent-foreground: oklch(90% 0 0);
   --sidebar-border: oklch(35% .01 250);
-  --sidebar-ring: oklch(58% .19 35);
+  --sidebar-ring: oklch(76% 0.19 65);
 
   /* Board */
   --column-border: oklch(35% .01 250);

src/lib/components/ui/button/button.svelte

@@ -7,13 +7,13 @@
 		base: "focus-visible:border-accent focus-visible:ring-accent/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: "bg-primary focus-visible:border-accent focus-visible:ring-accent/50 text-primary-foreground shadow-xs hover:bg-primary/90",
+				default: "bg-primary focus-visible:border-accent focus-visible:ring-accent/50 text-primary-foreground shadow-xs hover:bg-primary/60",
 				destructive:
 					"bg-destructive shadow-xs hover:bg-destructive/90 focus-visible:border-accent focus-visible:ring-accent/50 dark:bg-destructive/60 text-white",
 				outline:
 					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:border-accent focus-visible:ring-accent/50 dark:bg-input/30 dark:border-input dark:hover:bg-accent/50 border",
-				secondary: "bg-secondary focus-visible:border-accent focus-visible:ring-accent/50 text-secondary-foreground shadow-xs hover:bg-secondary/80",
-				ghost: "hover:bg-accent focus-visible:border focus-visible:border-accent focus-visible:ring-accent/50 hover:text-accent-foreground dark:hover:bg-accent/50",
+				secondary: "bg-background border border-primary text-primary focus-visible:border-accent focus-visible:ring-accent/50 shadow-xs hover:bg-muted",
+				ghost: "hover:bg-accent focus-visible:border focus-visible:border-accent focus-visible:ring-accent hover:text-accent-foreground dark:hover:bg-accent",
 				link: "text-primary underline-offset-4 hover:underline focus-visible:border-accent focus-visible:ring-accent/50",
 			},
 			size: {

src/routes/cardsboard/BoardsList.svelte

@@ -405,10 +405,10 @@
     <!-- Expandable Menu (Dropdown-Style) -->
     {#if hamburgerMenuOpen}
         <div transition:slide={{ duration: 200 }} class="border-b rounded -mx-0 -mt-2 mb-1 max-h-[40vh] overflow-y-auto bg-[var(--card)]">
-            <!-- 1. Eigenschaften (Board Settings) -->
+            <!-- 1. Einstellungen (Board Settings) -->
             <MenuItem 
                 icon={PackageOpenIcon} 
-                label="Eigenschaften" 
+                label="Einstellungen"
                 onclick={() => { 
                     settingsDialogOpen = true;
                     hamburgerMenuOpen = false;
@@ -845,8 +845,8 @@
     <Button
         onclick={authStore.isAuthenticated ? handleCreateBoard : null}
         disabled={authStore.isAuthenticated ? false : true}
-        class="w-full gap-2 h-auto py-2 whitespace-normal add-board-button"
-        variant="ghost"
+        class="w-full gap-2 h-auto py-2 whitespace-normal"
+        variant="default"
         data-testid="create-board-button"
     >
         {#if isCreating}

src/routes/cardsboard/CardDetailsDialog.svelte

@@ -786,7 +786,7 @@
 					<h3 class="text-sm font-semibold text-muted-foreground">Beschreibung</h3>
 					{#if !readOnly && !isEditingDescription}
 						<Button
-							variant="ghost"
+							variant="secondary"
 							size="sm"
 							onclick={() => isEditingDescription = true}
 							class="h-6 px-2 text-xs"
@@ -871,7 +871,7 @@
 			{#if !readOnly}
 			<div bind:this={actionBarRef} class="flex justify-center gap-3 py-2">
 				<Button
-					variant={isEditingImage ? 'default' : 'ghost'}
+					variant={isEditingImage ? 'default' : 'secondary'}
 					size="sm"
 					onclick={() => {
 						isEditingImage = !isEditingImage;
@@ -891,7 +891,7 @@
 					</span>
 				</Button>
 				<Button
-					variant={isAddingLink ? 'default' : 'ghost'}
+					variant={isAddingLink ? 'default' : 'secondary'}
 					size="sm"
 					onclick={() => {
 						isAddingLink = !isAddingLink;
@@ -922,15 +922,13 @@
 				<!-- Mode Toggle -->
 				<div class="flex gap-1">
 					<Button
-						type="button"
 						variant={imageMode === 'url' ? 'default' : 'outline'}
 						size="sm"
 						onclick={() => (imageMode = 'url')}
 					>
 						URL eingeben
 					</Button>
 					<Button
-						type="button"
 						variant={imageMode === 'oer' ? 'default' : 'outline'}
 						size="sm"
 						onclick={() => (imageMode = 'oer')}
@@ -1298,14 +1296,15 @@
 						size="sm"
 						onclick={handleAddComment}
 						disabled={isSubmitting || !commentText.trim()}
-						class="gap-2 bg-primary"
+						class="gap-2"
+						variant="secondary"
 					>
 						{#if isSubmitting}
 							<LoaderIcon class="h-4 w-4 animate-spin" />
 							<span>Wird gesendet...</span>
 						{:else}
 							<SendIcon class="h-4 w-4" />
-							<span>Absenden</span>
+							<span>Kommentar absenden</span>
 						{/if}
 					</Button>
 				</div>

src/routes/cardsboard/Column.svelte

@@ -381,30 +381,7 @@
 		flex: 0 0 auto;
 	}
 
-	/* Add-Card-Button: Inside scrollable area but outside dndzone */
-	.add-card-button {
-		border-radius: var(--radius-md);
-		/* border: 2px dotted var(--accent); */
-		background: var(--muted);
-		color: var(--foreground);
-		transition: all 0.2s ease;
-		font-size: 0.9rem;
-		cursor: pointer;
-		width: 100%;
-		margin-top: 0.5rem;
-		flex-shrink: 0;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.add-card-button:hover {
-		background: var(--primary);
-		color: var(--primary-foreground);
-	}
-
-	/* Hover style handled via pointer events on the element (no separate .hover selector to satisfy Svelte) */
-
-	.card-wrapper {
+    .card-wrapper {
 		margin-bottom: 0.75rem;
 	}
 
@@ -689,9 +666,9 @@
 
 		<!-- Add Card Button: OUTSIDE dndzone, INSIDE scrollable container -->
 		{#if !readOnly}
-		<button 
-			class="add-card-button flex items-center gap-2.5 px-4 py-5 rounded-md shadow-lg"
-			type="button"
+		<Button 
+			class="flex items-center gap-2.5 px-4 py-5 rounded-md shadow-lg"
+			data-testid="add-card-button"
 			onclick={(e) => {
 				e.stopPropagation();
 				e.preventDefault();
@@ -739,7 +716,7 @@
 		>
 			<SquarePlusIcon class="h-4.5 w-4.5" />
 			<span>Karte hinzufügen</span>
-		</button>
+		</Button>
 		{/if}
 	</div>
 </div>

src/routes/cardsboard/LeftSidebarFooter.svelte

@@ -87,7 +87,7 @@
 			{#if isAuthenticated && currentUser}
 				<!-- User ist angemeldet -->
 				<DropdownMenu.Root>
-					<DropdownMenu.Trigger class="bg-secondary rounded-md w-full">
+					<DropdownMenu.Trigger class="rounded-md w-full">
 						<div class="px-3 py-3 flex items-center gap-2" data-testid="auth-user-avatar">
 							<Avatar.Root class="h-8 w-8 flex-shrink-0">
 								<Avatar.Image