Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-08 14:43:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: create dedicated settings page instead of creating many modals

Browse Source
This commit is contained in:
Sonny
2025-08-21 15:59:03 +02:00
parent c2a1d06008
commit 376e9e32c3
16 changed files with 219 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
app/user_settings/controllers/show_user_settings_controller.ts Normal file
View File

@@ -0,0 +1,10 @@
import { HttpContext } from '@adonisjs/core/http';
export default class ShowUserSettingsController {
public async render({ auth, inertia }: HttpContext) {
const user = await auth.authenticate();
return inertia.render('user_settings/show', {
user,
});
}
}

1
app/user_settings/routes/routes.ts Normal file
View File

@@ -0,0 +1 @@
import './user_settings_routes.js';

8
app/user_settings/routes/user_settings_routes.ts Normal file
View File

@@ -0,0 +1,8 @@
import router from '@adonisjs/core/services/router';
const ShowUserSettingsController = () =>
import('#user_settings/controllers/show_user_settings_controller');
router
.get('/user/settings', [ShowUserSettingsController, 'render'])
.as('user.settings');

16
inertia/components/common/floating_navbar/user_dropdown.tsx
View File

@@ -1,11 +1,9 @@
import { Avatar, Group, Menu, Text, UnstyledButton } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks';
import { modals } from '@mantine/modals';
import cx from 'clsx';
import { useTranslation } from 'react-i18next';
import { TbChevronDown, TbLogout, TbSettings, TbShield } from 'react-icons/tb';
import { InternalLinkUnstyled } from '~/components/common/links/internal_link_unstyled';
import { UserPreferences } from '~/components/common/user_preferences/user_preferences';
import { useAuth } from '~/hooks/use_auth';
import classes from './user_dropdown.module.css';
@@ -15,13 +13,6 @@ export function UserDropdown() {
useDisclosure(false);
const { t } = useTranslation();
const handlePreferencesModal = () => {
modals.open({
title: t('user-preferences'),
children: <UserPreferences />,
});
};
return (
<Menu
width={260}
@@ -64,12 +55,13 @@ export function UserDropdown() {
</>
)}
<Menu.Label>{t('common:settings')}</Menu.Label>
<Menu.Label>{t('common:user')}</Menu.Label>
<Menu.Item
leftSection={<TbSettings size={16} />}
onClick={handlePreferencesModal}
component={InternalLinkUnstyled}
href="/user/settings"
>
{t('common:preferences')}
{t('common:settings')}
</Menu.Item>
<Menu.Item
leftSection={<TbLogout size={16} />}

36
inertia/components/common/floating_tabs/floating_tabs.module.css Normal file
View File

@@ -0,0 +1,36 @@
.list {
position: relative;
margin-bottom: var(--mantine-spacing-md);
}
.indicator {
z-index: -1 !important;
background-color: var(--mantine-color-white);
border-radius: var(--mantine-radius-md);
border: 1px solid var(--mantine-color-gray-2);
box-shadow: var(--mantine-shadow-sm);
@mixin dark {
background-color: var(--mantine-color-dark-6);
border-color: var(--mantine-color-dark-4);
}
}
.tab {
z-index: 1;
font-weight: 500;
transition: color 100ms ease;
color: var(--mantine-color-gray-7);
&[data-active] {
color: var(--mantine-color-black);
}
@mixin dark {
color: var(--mantine-color-dark-1);
&[data-active] {
color: var(--mantine-color-white);
}
}
}

79
inertia/components/common/floating_tabs/floating_tabs.tsx Normal file
View File

@@ -0,0 +1,79 @@
import {
FloatingIndicator,
Indicator,
Tabs as MantineTabs,
Stack,
} from '@mantine/core';
import { useState } from 'react';
import classes from './floating_tabs.module.css';
export type FloatingTab = {
value: string;
label: string;
content: React.ReactNode;
disabled?: boolean;
indicator?: {
content: string;
color?: string;
pulse?: boolean;
disabled?: boolean;
};
};
interface FloatingTabsProps {
tabs: FloatingTab[];
keepMounted?: boolean;
}
export function FloatingTabs({ tabs, keepMounted = false }: FloatingTabsProps) {
const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
const [value, setValue] = useState<string | null>(tabs[0].value);
const [controlsRefs, setControlsRefs] = useState<
Record<string, HTMLButtonElement | null>
>({});
const setControlRef = (val: string) => (node: HTMLButtonElement) => {
controlsRefs[val] = node;
setControlsRefs(controlsRefs);
};
return (
<MantineTabs
variant="none"
value={value}
onChange={setValue}
keepMounted={keepMounted}
>
<MantineTabs.List ref={setRootRef} className={classes.list}>
{tabs.map((tab) => (
<Indicator
label={tab.indicator?.content}
color={tab.indicator?.color}
processing={tab.indicator?.pulse}
disabled={!tab.indicator || tab.indicator.disabled}
size={16}
key={tab.value}
>
<MantineTabs.Tab
value={tab.value}
ref={setControlRef(tab.value)}
className={classes.tab}
disabled={tab.disabled}
>
{tab.label}
</MantineTabs.Tab>
</Indicator>
))}
<FloatingIndicator
target={value ? controlsRefs[value] : null}
parent={rootRef}
className={classes.indicator}
/>
</MantineTabs.List>
{tabs.map((tab) => (
<MantineTabs.Panel key={tab.value} value={tab.value}>
<Stack>{tab.content}</Stack>
</MantineTabs.Panel>
))}
</MantineTabs>
);
}

17
inertia/components/common/user_preferences/user_preferences.tsx
View File

@@ -1,15 +1,10 @@
import { LinkListDisplay } from '#shared/types/index';
import { Fieldset, Stack, Text } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { ComboList } from '~/components/common/combo_list/combo_list';
import { CollectionListSelector } from '~/components/dashboard/collection/collection_list_selector';
import { useDisplayPreferences } from '~/hooks/use_display_preferences';
import { LinkListSelector } from '~/components/dashboard/link/link_list_selector';
import { useIsMobile } from '~/hooks/use_is_mobile';
import { getLinkListDisplayOptions } from '~/lib/display_preferences';
export function UserPreferences() {
const { displayPreferences, handleUpdateDisplayPreferences } =
useDisplayPreferences();
const { t } = useTranslation();
const isMobile = useIsMobile();
@@ -28,15 +23,7 @@ export function UserPreferences() {
<Text size="sm" c="dimmed">
{t('display-preferences.link-list-display')}
</Text>
<ComboList
selectedValue={displayPreferences.linkListDisplay}
values={getLinkListDisplayOptions()}
setValue={(value) =>
handleUpdateDisplayPreferences({
linkListDisplay: value as LinkListDisplay,
})
}
/>
<LinkListSelector />
</Stack>
</Fieldset>
);

20
inertia/components/dashboard/collection/collection_list_selector.tsx
View File

@@ -1,20 +1,28 @@
import { COLLECTION_LIST_DISPLAYS } from '#shared/lib/display_preferences';
import { CollectionListDisplay } from '#shared/types/index';
import { ComboList } from '~/components/common/combo_list/combo_list';
import { SegmentedControl } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useDisplayPreferences } from '~/hooks/use_display_preferences';
import { getCollectionListDisplayOptions } from '~/lib/display_preferences';
export function CollectionListSelector() {
const { t } = useTranslation();
const { displayPreferences, handleUpdateDisplayPreferences } =
useDisplayPreferences();
const data = COLLECTION_LIST_DISPLAYS.map((display) => ({
label: t(`display-preferences.${display}`),
value: display,
}));
return (
<ComboList
selectedValue={displayPreferences.collectionListDisplay}
values={getCollectionListDisplayOptions()}
setValue={(value) =>
<SegmentedControl
data={data}
value={displayPreferences.collectionListDisplay}
onChange={(value) =>
handleUpdateDisplayPreferences({
collectionListDisplay: value as CollectionListDisplay,
})
}
w="50%"
/>
);
}

28
inertia/components/dashboard/link/link_list_selector.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { LINK_LIST_DISPLAYS } from '#shared/lib/display_preferences';
import { LinkListDisplay } from '#shared/types/index';
import { SegmentedControl } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { useDisplayPreferences } from '~/hooks/use_display_preferences';
export function LinkListSelector() {
const { t } = useTranslation();
const { displayPreferences, handleUpdateDisplayPreferences } =
useDisplayPreferences();
const data = LINK_LIST_DISPLAYS.map((display) => ({
label: t(`display-preferences.${display}`),
value: display,
}));
return (
<SegmentedControl
data={data}
value={displayPreferences.linkListDisplay}
onChange={(value) =>
handleUpdateDisplayPreferences({
linkListDisplay: value as LinkListDisplay,
})
}
w="50%"
/>
);
}

5
inertia/i18n/locales/en/common.json
View File

@@ -89,7 +89,10 @@
"preferences-description": "Display preferences do not apply on mobile",
"display-preferences": {
"collection-list-display": "Collection list display",
"link-list-display": "Link list display"
"link-list-display": "Link list display",
"inline": "Inline",
"list": "List",
"grid": "Grid"
},
"coming-soon": "Under development"
}

5
inertia/i18n/locales/fr/common.json
View File

@@ -89,7 +89,10 @@
"preferences-description": "Les préférences d'affichage ne s'appliquent pas sur mobile",
"display-preferences": {
"collection-list-display": "Affichage de la liste des collections",
"link-list-display": "Affichage de la liste des liens"
"link-list-display": "Affichage de la liste des liens",
"inline": "En ligne",
"list": "Liste",
"grid": "Grille"
},
"coming-soon": "En cours de développement"
}

5
inertia/layouts/small_content.tsx
View File

@@ -12,7 +12,8 @@ const SmallContentLayout = ({ children }: PropsWithChildren) => (
export default SmallContentLayout;
const LAYOUT_WIDTH = '800px';
const LAYOUT_WIDTH = '1500px';
const CONTENT_WIDTH = '800px';
const Layout = ({ children }: PropsWithChildren) => (
<>
{/* Top navbar */}
@@ -29,7 +30,7 @@ const Layout = ({ children }: PropsWithChildren) => (
style={{
height: '100%',
maxWidth: '100%',
width: LAYOUT_WIDTH,
width: CONTENT_WIDTH,
marginInline: 'auto',
marginBlock: rem(30),
}}

34
inertia/lib/display_preferences.tsx
View File

@@ -1,34 +0,0 @@
import {
COLLECTION_LIST_DISPLAYS,
LINK_LIST_DISPLAYS,
} from '#shared/lib/display_preferences';
import { AiOutlineFolder } from 'react-icons/ai';
import { IoGridOutline } from 'react-icons/io5';
import { TbList } from 'react-icons/tb';
import { ValueWithIcon } from '~/components/common/combo_list/combo_list';
const collectionListDisplayIcons = {
list: <TbList size={20} />,
inline: <AiOutlineFolder size={20} />,
} as const;
export function getCollectionListDisplayOptions(): ValueWithIcon[] {
return COLLECTION_LIST_DISPLAYS.map((display) => ({
label: display,
value: display,
icon: collectionListDisplayIcons[display],
}));
}
const linkListDisplayIcons = {
list: <TbList size={20} />,
grid: <IoGridOutline size={20} />,
} as const;
export function getLinkListDisplayOptions(): ValueWithIcon[] {
return LINK_LIST_DISPLAYS.map((display) => ({
label: display,
value: display,
icon: linkListDisplayIcons[display],
}));
}

24
inertia/pages/user_settings/show.tsx Normal file
View File

@@ -0,0 +1,24 @@
import { useTranslation } from 'react-i18next';
import {
FloatingTab,
FloatingTabs,
} from '~/components/common/floating_tabs/floating_tabs';
import { UserPreferences } from '~/components/common/user_preferences/user_preferences';
import SmallContentLayout from '~/layouts/small_content';
function UserSettingsShow() {
const { t } = useTranslation();
const tabs: FloatingTab[] = [
{
label: t('preferences'),
value: 'preferences',
content: <UserPreferences />,
},
];
return <FloatingTabs tabs={tabs} />;
}
UserSettingsShow.layout = (page: React.ReactNode) => (
<SmallContentLayout>{page}</SmallContentLayout>
);
export default UserSettingsShow;

1
package.json
View File

@@ -31,6 +31,7 @@
"#search/*": "./app/search/*.js",
"#shared_collections/*": "./app/shared_collections/*.js",
"#user/*": "./app/user/*.js",
"#user_settings/*": "./app/user_settings/*.js",
"#providers/*": "./providers/*.js",
"#database/*": "./database/*.js",
"#tests/*": "./tests/*.js",

1
start/routes.ts
View File

@@ -8,3 +8,4 @@ import '#links/routes/routes';
import '#search/routes/routes';
import '#shared_collections/routes/routes';
import '#user/routes/routes';
import '#user_settings/routes/routes';