feat: Refactor user settings

[joachimdalen]

This is hopefully the first of many refactors to improve the UI. This change adds some wrapper code as well as refactors the User Settings section.

API Tokens vs Personal Access Tokens

I did a party rename from "API Tokens" to "Personal Access Tokens" as this is a more standardized term and more known. It is an easy change back if you do not like it.

Summary

Summary of changes

• Added centralized API wrapper and hook
• Renamed from "API Tokens" to "Personal Access Tokens"
• File splitting into smaller and more organized components
• Updated the design

Design update

This change also updates the design a bit. I moved to use purple as the primary color to match the logo. Loading, empty states and error display was also designed into the components.

Wrapper code

Some wrappers were added to centralize and simplify integrating with the API.

File	Description
src/modules/api/apiWrapper.ts	Helper to wrap and centralize axios integration
src/modules/api/useApiRequest.ts	Hook to wrap API interaction and provide feedback for errors, loading, data response and so on

Feature structure

I added a new root folder called modules to be the new home of the refactored code. This is to have an easy overview over what has been refactored and what is pending.

File	Description
src/user/*	Contains main files
src/user/components/*	Contains shared components / smaller parts of the UI
src/user/modals/*	Contains modals
src/user/types.ts	Contains types owned by the module / domain
src/user/userService.ts	Service responsible for interacting with the API

Screenshots

Loading

No tokens

Load error

Token list

[alfespa17]

Thank you @joachimdalen, I did a quick check and I think it looks good.