feat: improve header responsiveness and update seed initialization

- Add text truncation for title on mobile screens
- Hide user info section on mobile, show simplified icons only
- Update seed.ts to create admin and demo users with proper password hashing
- Add bcryptjs for password hashing in seed script
- Update QWEN.md documentation with seed command and default users

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

src/components/ui/card.tsx

@@ -2,7 +2,6 @@ import {
 	Box,
 	Card as MantineCard,
 	type CardProps as MantineCardProps,
-
 	Title,
 } from "@mantine/core";
 import type React from "react";

src/components/ui/help-card.tsx

@@ -1,90 +1,86 @@
-import { Card, useMantineTheme, useComputedColorScheme } from '@mantine/core';
-import type { CardProps } from '@mantine/core';
-import type { ReactNode } from 'react';
+import type { CardProps } from "@mantine/core";
+import { Card, useComputedColorScheme, useMantineTheme } from "@mantine/core";
+import type { ReactNode } from "react";
 
 interface HelpCardProps extends CardProps {
-  children: ReactNode;
-  icon?: ReactNode;
-  title?: string;
-  minHeight?: string | number; // Allow specifying a minimum height
+	children: ReactNode;
+	icon?: ReactNode;
+	title?: string;
+	minHeight?: string | number; // Allow specifying a minimum height
 }
 
 export const HelpCard = ({
-  children,
-  icon,
-  title,
-  minHeight = 'auto', // Default to auto, but allow override
-  ...props
+	children,
+	icon,
+	title,
+	minHeight = "auto", // Default to auto, but allow override
+	...props
 }: HelpCardProps) => {
-  const theme = useMantineTheme();
-  const colorScheme = useComputedColorScheme('light');
-  const isDark = colorScheme === 'dark';
+	const theme = useMantineTheme();
+	const colorScheme = useComputedColorScheme("light");
+	const isDark = colorScheme === "dark";
 
-  return (
-    <Card
-      shadow="sm"
-      padding="xl"
-      radius="md"
-      withBorder
-      style={{
-        backgroundColor: isDark ? theme.colors.dark[7] : theme.white,
-        borderRadius: '16px',
-        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-        border: `1px solid ${
-          isDark ? theme.colors.dark[4] : theme.colors.gray[3]
-        }`,
-        minHeight, // Apply the minimum height
-        display: 'flex',
-        flexDirection: 'column',
-      }}
-      {...props}
-    >
-      {(icon || title) && (
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '12px',
-            marginBottom: '16px',
-          }}
-        >
-          {icon && (
-            <div
-              style={{
-                backgroundColor: isDark
-                  ? theme.colors.blue[8]
-                  : theme.colors.blue[0],
-                borderRadius: '8px',
-                padding: '8px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              {icon}
-            </div>
-          )}
+	return (
+		<Card
+			shadow="sm"
+			padding="xl"
+			radius="md"
+			withBorder
+			style={{
+				backgroundColor: isDark ? theme.colors.dark[7] : theme.white,
+				borderRadius: "16px",
+				transition: "transform 0.2s ease, box-shadow 0.2s ease",
+				border: `1px solid ${
+					isDark ? theme.colors.dark[4] : theme.colors.gray[3]
+				}`,
+				minHeight, // Apply the minimum height
+				display: "flex",
+				flexDirection: "column",
+			}}
+			{...props}
+		>
+			{(icon || title) && (
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						gap: "12px",
+						marginBottom: "16px",
+					}}
+				>
+					{icon && (
+						<div
+							style={{
+								backgroundColor: isDark
+									? theme.colors.blue[8]
+									: theme.colors.blue[0],
+								borderRadius: "8px",
+								padding: "8px",
+								display: "flex",
+								alignItems: "center",
+								justifyContent: "center",
+							}}
+						>
+							{icon}
+						</div>
+					)}
 
-          {title && (
-            <h3
-              style={{
-                margin: 0,
-                fontSize: '16px',
-                fontWeight: 600,
-                color: isDark
-                  ? theme.colors.dark[0]
-                  : theme.colors.dark[9],
-              }}
-            >
-              {title}
-            </h3>
-          )}
-        </div>
-      )}
+					{title && (
+						<h3
+							style={{
+								margin: 0,
+								fontSize: "16px",
+								fontWeight: 600,
+								color: isDark ? theme.colors.dark[0] : theme.colors.dark[9],
+							}}
+						>
+							{title}
+						</h3>
+					)}
+				</div>
+			)}
 
-      <div style={{ flex: 1 }}>
-        {children}
-      </div>
-    </Card>
-  );
+			<div style={{ flex: 1 }}>{children}</div>
+		</Card>
+	);
 };