5 feature set up designsystemet (#6)

[brinjemarie]

No description provided.

[johannegg]

lgtm

[Copilot]

Pull Request Overview

This PR sets up the design system styles and components, replaces the default Vite/React sample with a chat UI, and updates global styling and dependencies.

• Integrate @digdir/designsystemet theme, CSS, and React components in the app entrypoint
• Introduce ChatUI component and swap out the Vite/React starter content in App.tsx
• Add shared common.css, update App.css, and pull in external font in index.html

Reviewed Changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
tsconfig.node.json	Removed redundant comment lines
tsconfig.app.json	Removed redundant comment lines
src/main.tsx	Swapped index.css for common.css and imported design system
src/assets/common.css	New shared font and feature-setting styles
src/App.tsx	Added ChatUI, removed Vite sample, updated imports
src/App.css	New chat styles, removed legacy Vite sample styles
package.json	Added @digdir/designsystemet-* dependencies
index.html	Updated page title and added external font stylesheet

Comments suppressed due to low confidence (2)

src/App.tsx:7

• [nitpick] The new ChatUI component introduces user-interaction logic but doesn't have accompanying tests. Consider adding unit or integration tests for message flow and loading states.

function ChatUI() {

src/App.css:33

• CSS property values must not be wrapped in quotes. Change display: 'flex'; to display: flex; so the layout behaves as intended.

  display: 'flex';

[Copilot]

[nitpick] You're defining font-family: 'Inter', sans-serif; both here and again in App.css. Consider centralizing this in common.css only to avoid duplication.

[Copilot]

[nitpick] After sending a message, you may want to clear the input field by calling setValue(''), so users can type a new message immediately.

Suggested change

	setMessages((prev) => [...prev, { sender: 'user', text: value }]);
	setMessages((prev) => [...prev, { sender: 'user', text: value }]);
	setValue('');

[Copilot]

This chat window updates dynamically—consider adding role="log" and aria-live="polite" (or similar) to ensure screen readers announce new messages.

Suggested change

	<div className='chat-window'>
	<div className='chat-window' role="log" aria-live="polite">

[Copilot]

[nitpick] Using the array index as a key can cause rendering inefficiencies or glitches if the list changes. Consider using a unique identifier per message.

Suggested change

	{messages.map((msg, i) => (
	<div
	className={msg.sender === 'user' ? 'message-user' : 'message-bot'}
	key={i}>
	{messages.map((msg) => (
	<div
	className={msg.sender === 'user' ? 'message-user' : 'message-bot'}
	key={msg.id}>