Fix and enforce not importing from rest of app in app-components

Add this config to `eslint.config.mjs` to enforce no imports from rest of app in `app-components` folder
```mjs
{
files: ['src/app-components/**/*.{ts,tsx,js,jsx}'],
rules: {
'no-restricted-imports': [
'error',
{
patterns: ['src/*', '!src/app-components'],
},
],
},
},
```

When running `yarn eslint` there will be errors because there is already code in `app-components` that imports from the app. Fix these plz 🙏

Start with eslint.config.mjs and run yarn eslint to identify existing violations in src/app-components. Trace each reported import from the app-components folder, then confirm that the configuration is enforced and yarn eslint completes without errors.

Written by the indexing model from the issue text.