Svelte re-build

astro.config.mjs

@@ -1,13 +1,25 @@
 import { defineConfig } from 'astro/config';
+import Icons from 'unplugin-icons/vite';
 
 import react from '@astrojs/react';
 import { visualizer } from 'rollup-plugin-visualizer';
+import svelte from '@astrojs/svelte';
 
 // https://astro.build/config
 export default defineConfig({
-	integrations: [react()],
+	integrations: [
+		react(),
+		svelte({
+			extensions: ['.svelte'],
+		}),
+	],
 	vite: {
-		plugins: [visualizer({ template: 'raw-data' })],
+		plugins: [
+			visualizer({ template: 'raw-data' }),
+			Icons({
+				compiler: 'svelte',
+			}),
+		],
 		build: {
 			rollupOptions: {
 				output: {

eslint.config.mjs

@@ -10,6 +10,7 @@ import { fileURLToPath } from 'node:url';
 import js from '@eslint/js';
 import { FlatCompat } from '@eslint/eslintrc';
 import testingLibrary from 'eslint-plugin-testing-library';
+import eslintPluginSvelte from 'eslint-plugin-svelte';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -29,6 +30,7 @@ export default [
 			'src/env.d.ts',
 		],
 	},
+	...eslintPluginSvelte.configs['flat/recommended'],
 	...fixupConfigRules(
 		compat.extends(
 			'eslint:recommended',

knowledge.md

@@ -0,0 +1,74 @@
+# TaskRatchet Web App
+
+## Verifying changes
+
+Use `pnpm verify` to check that code changes are valid.
+
+## Task Status Behavior
+
+- Pending tasks should have enabled controls (edit button, checkbox)
+- Task status must persist across page refreshes
+- Some controls should be disabled for non-pending tasks
+- Task status determines available actions:
+  - Pending: Can edit, complete, uncle, copy
+  - Complete: Can mark incomplete, copy
+  - Expired: Can copy
+- Completing tasks requires careful handling:
+  - Marking past-due tasks incomplete is a critical action
+  - Reversing incompleted past-due tasks requires support intervention
+  - UI should prevent accidental completion
+
+## Future Improvements
+
+### UI/UX
+
+- Add loading states for actions (uncle, edit, etc.)
+- Improve mobile responsiveness
+- Test dark mode thoroughly
+- Add keyboard navigation
+- Add ARIA labels for better accessibility
+
+### Error Handling
+
+- Add error handling for failed API calls
+- Add error boundaries for component failures
+
+### Testing
+
+- Add unit tests for new Svelte components
+- Test performance with large task lists
+- Test across different browsers
+- Add end-to-end tests for critical paths
+
+### Features
+
+- Consider adding task sorting options
+- Consider adding task filtering by status
+- Consider adding task categories or tags
+
+## Style Guide
+
+- Keep components minimal and focused
+- Use CSS variables for theming
+- Follow BEM naming convention for CSS
+- Use TypeScript for type safety
+
+## Architecture
+
+- Components should be self-contained
+- State management should be simple and local when possible
+- Modal state should be managed by the modal component
+- API calls should be centralized
+
+### Migration Strategy
+
+- Migrating from React to Svelte
+- New features should be built in Svelte
+- Keep React and Svelte code separate:
+  - React code lives in src/react/
+  - React tests excluded from main test suite
+  - New tests should be written for Svelte components
+- Test configuration:
+  - Exclude React tests while preserving Vitest defaults
+  - React tests remain in src/react/ but aren't run by default
+  - Maintain separate test suites for React and Svelte

package.json

@@ -9,25 +9,29 @@
     "preview": "astro preview",
     "astro": "astro",
     "preinstall": "npx only-allow pnpm",
-    "checkTs": "tsc --noEmit",
     "format": "prettier --write .",
     "lint": "eslint --max-warnings 0 .",
     "lint:fix": "eslint --max-warnings 0 --fix .",
     "test": "vitest",
-    "unused": "pnpm dlx depcheck"
+    "unused": "pnpm dlx depcheck",
+    "check": "svelte-check",
+    "checkTs": "npm run check",
+    "verify": "npm run build && npm run check && npm run lint && npm run test -- --run"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.3",
     "@astrojs/react": "^3.6.2",
+    "@astrojs/svelte": "^6.0.1",
     "@emotion/react": "^11.13.0",
     "@emotion/styled": "^11.13.0",
     "@mui/icons-material": "^5.16.6",
     "@mui/lab": "5.0.0-alpha.173",
     "@mui/material": "^5.16.6",
     "@mui/x-date-pickers": "^7.12.0",
-    "@taskratchet/sdk": "^0.0.7",
+    "@taskratchet/sdk": "^0.1.1",
     "astro": "^4.15.1",
     "dayjs": "^1.11.12",
+    "eslint-plugin-svelte": "^2.46.0",
     "humanize-duration": "^3.32.1",
     "query-string": "^9.1.0",
     "react": "^18.3.1",
@@ -37,12 +41,14 @@
     "react-query": "3.39.3",
     "react-router-dom": "^6.26.0",
     "react-toastify": "^10.0.5",
-    "typescript": "^5.5.4"
+    "svelte": "^5.2.2",
+    "typescript": "^5.6.3"
   },
   "devDependencies": {
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
+    "@iconify/json": "^2.2.273",
     "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
@@ -67,8 +73,10 @@
     "jsdom": "^24.1.1",
     "prettier": "3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
+    "svelte-check": "^4.0.9",
     "type-fest": "^4.23.0",
     "typescript": "^5.5.4",
+    "unplugin-icons": "^0.20.1",
     "vitest": "^2.0.5",
     "vitest-fetch-mock": "^0.3.0"
   }