refactor: upgrade tools and implement svelte store for item list

- restructure src folder and component organization
- implement items store for better state management
- upgrade to Bun and add lint/typecheck to GitHub actions
- replace Prettier with ESLint for formatting and linting
- add Iconify with Tabler icon pack
- simplify component logic and fix Item tests

.github/workflows/deploy.yml

@@ -1,7 +1,7 @@
 name: Deploy to GitHub Pages
 on:
   push:
-    branches: 'main'
+    branches: main
 
 jobs:
   build_site:
@@ -29,7 +29,7 @@ jobs:
         uses: actions/upload-pages-artifact@v3
         with:
           # this should match the `pages` option in your adapter-static options
-          path: 'build/'
+          path: build/
 
   deploy:
     needs: build_site

.github/workflows/tests.yml

@@ -7,21 +7,44 @@ on:
     branches: [main]
 
 jobs:
-  run-tests:
+  test:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
-      - name: Install Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
+      - uses: oven-sh/setup-bun@v1
 
       - name: Install dependencies
-        run: npm install
+        run: bun i
 
       - name: Run Tests
-        run: npm run test
+        run: bun run test
+
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun i
+
+      - name: Run Lint
+        run: bun run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun i
+
+      - name: Run Typecheck
+        run: bun run typecheck

.vscode/settings.json

@@ -0,0 +1,50 @@
+{
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "warn" },
+    { "rule": "format/*", "severity": "warn" },
+    { "rule": "*-indent", "severity": "warn" },
+    { "rule": "*-spacing", "severity": "warn" },
+    { "rule": "*-spaces", "severity": "warn" },
+    { "rule": "*-order", "severity": "warn" },
+    { "rule": "*-dangle", "severity": "warn" },
+    { "rule": "*-newline", "severity": "warn" },
+    { "rule": "*quotes", "severity": "warn" },
+    { "rule": "*semi", "severity": "warn" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss",
+    "svelte"
+  ]
+}

README.md

@@ -1,38 +1,72 @@
-# create-svelte
+# Bun bun bun
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+More info: [Bun Docs](https://bun.sh/docs)
 
-## Creating a project
+>[!TIP]
+> just `bun` can be used as shorthand for pretty much all of its commands.
 
-If you're seeing this, you've probably already done this step. Congrats!
+## Install
+
+### Install all dependencies
 
 ```bash
-# create a new project in the current directory
-npm create svelte@latest
+bun i
+```
+
+### Install a specific package
 
-# create a new project in my-app
-npm create svelte@latest my-app
+```bash
+bun i <package>
 ```
 
-## Developing
+#### Flags
+
+- `-g` to install globally
+- `-D` to install as a dev dependency
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+## Development
 
 ```bash
-npm run dev
+bun dev
+```
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+## Build
+
+```bash
+bun build
 ```
 
-## Building
+## Running
 
-To create a production version of your app:
+### Scripts
 
 ```bash
-npm run build
+bun run <script>
 ```
 
-You can preview the production build with `npm run preview`.
+Example: `bun lint`
+
+### Binaries
+
+```bash
+bunx <binary>
+```
+
+`bun run` also works
+
+Example: `bun eslint`
+
+>[!NOTE]
+> To use the Bun runtime (instead of Node.js), pass `--bun` to the command: `bunx --bun vite dev`
+
+### Files
+
+```bash
+bun run <file>
+```
+
+Example: `bun src/index.ts`
+
+## `ni`
 
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+To forget about package managers: [antfu/ni](https://github.com/antfu-collective/ni?tab=readme-ov-file#ni)

eslint.config.js

@@ -1,33 +1,11 @@
-import js from '@eslint/js';
-import ts from 'typescript-eslint';
-import svelte from 'eslint-plugin-svelte';
-import prettier from 'eslint-config-prettier';
-import globals from 'globals';
+import antfu from '@antfu/eslint-config'
 
-/** @type {import('eslint').Linter.FlatConfig[]} */
-export default [
-	js.configs.recommended,
-	...ts.configs.recommended,
-	...svelte.configs['flat/recommended'],
-	prettier,
-	...svelte.configs['flat/prettier'],
-	{
-		languageOptions: {
-			globals: {
-				...globals.browser,
-				...globals.node
-			}
-		}
-	},
-	{
-		files: ['**/*.svelte'],
-		languageOptions: {
-			parserOptions: {
-				parser: ts.parser
-			}
-		}
-	},
-	{
-		ignores: ['build/', '.svelte-kit/', 'dist/']
-	}
-];
+export default antfu({
+  svelte: true,
+  rules: {
+    'svelte/valid-compile': 'off',
+    'no-console': 'off',
+    'svelte/html-quotes': ['warn', { prefer: 'double' }],
+    'curly': ['warn', 'multi-or-nest', 'consistent'],
+  },
+})