{feedItem.title}
10 |
11 |
12 |
25 |
26 | )
27 | }
28 |
29 | interface ModalInnerProps {
30 | children: ReactNode
31 | icon?: ReactNode
32 | title?: string
33 | }
34 |
35 | export default ModalInner
36 |
--------------------------------------------------------------------------------
/packages/client/src/store/slices/layout/entities/tabs/tabsSlice.ts:
--------------------------------------------------------------------------------
1 | import { TAB_GROUP } from '#constants'
2 | import createSlice from '#store/createSlice'
3 |
4 | import { addTab, editTab, removeTab } from './actions'
5 | import tabsEntityAdapter, { tabsInitialState } from './tabsEntityAdapter'
6 |
7 | const tabsSlice = createSlice({
8 | name: 'tabs',
9 | initialState: tabsInitialState,
10 | reducers: {},
11 | extraReducers: (builder) => {
12 | // Add tab
13 | builder.addCase(addTab, (state, { payload: tab }) => {
14 | tabsEntityAdapter.upsertOne(state, tab)
15 | })
16 |
17 | // Remove tab
18 | builder.addCase(removeTab, (state, { payload: tabId }) => {
19 | tabsEntityAdapter.removeOne(state, tabId)
20 | })
21 |
22 | // Edit tab
23 | builder.addCase(editTab, (state, { payload: { id, changes } }) => {
24 | tabsEntityAdapter.updateOne(state, {
25 | id,
26 | changes: {
27 | group: TAB_GROUP,
28 | ...changes,
29 | },
30 | })
31 | })
32 | },
33 | })
34 |
35 | export default tabsSlice
36 |
--------------------------------------------------------------------------------
/packages/client/src/store/middleware/settings/restoreSettings.ts:
--------------------------------------------------------------------------------
1 | import { isError } from 'lodash-es'
2 |
3 | import { UNKNOWN_ERROR_MESSAGE } from '@newsdash/common/constants'
4 |
5 | import { restoreSettings as dbRestoreSettings } from '#store/middleware/db'
6 | import { showNotification } from '#store/slices/notifications/actions'
7 | import { restoreSettings as restoreSettingsAction } from '#store/slices/settings/actions'
8 | import type { AppListenerEffectAPI } from '#store/middleware/types'
9 |
10 | /** Restore settings from IndexedDB */
11 | async function restoreSettings(listenerApi: AppListenerEffectAPI) {
12 | try {
13 | const settings = await dbRestoreSettings()
14 | if (settings) {
15 | listenerApi.dispatch(restoreSettingsAction(settings))
16 | }
17 | } catch (error) {
18 | listenerApi.dispatch(
19 | showNotification({
20 | type: 'error',
21 | title: 'Failed to restore settings',
22 | message: `IndexedDB error: ${isError(error) ? error.message : UNKNOWN_ERROR_MESSAGE}`,
23 | })
24 | )
25 | }
26 | }
27 |
28 | export default restoreSettings
29 |
--------------------------------------------------------------------------------
/packages/client/src/store/slices/layout/actions.ts:
--------------------------------------------------------------------------------
1 | import type { LayoutBase } from 'rc-dock'
2 |
3 | import type { NormalizedEntities } from '#types/types'
4 |
5 | import layoutSlice from './layoutSlice'
6 |
7 | /** Handle rc-dock layout update */
8 | const rcLayoutChange = layoutSlice.createAction
13 |
14 | {icon}
15 | {title ? (
16 |
17 | {title}
18 |
19 | ) : undefined}
20 |
22 | {children}
23 |
24 |
12 | 
13 |
23 | )
24 | }
25 |
26 | export default TileFeedItem
27 |
--------------------------------------------------------------------------------
/packages/client/src/store/slices/app/appSlice.ts:
--------------------------------------------------------------------------------
1 | import type { PayloadAction } from '@reduxjs/toolkit'
2 |
3 | import createSlice from '#store/createSlice'
4 | import type { AppState, ModalName } from '#types/types'
5 |
6 | const initialState: AppState = {
7 | colorScheme: 'dark',
8 | headerVisible: false,
9 | initDone: false,
10 | modal: null,
11 | }
12 |
13 | const appSlice = createSlice({
14 | name: 'app',
15 | initialState: initialState,
16 |
17 | reducers: {
18 | changeColorScheme(state, { payload }: PayloadAction
14 |
15 |
20 |
22 |
16 |
19 | {feedItem.content}
21 |
26 |
34 | )
35 | }
36 |
37 | interface FeedProps {
38 | feedItems: FeedItem[]
39 | tab: Tab
40 | }
41 |
42 | export default Feed
43 |
--------------------------------------------------------------------------------
/packages/client/src/ui/components/Feed/FeedItem/TimeAgoBadge/TimeAgoBadge.module.css:
--------------------------------------------------------------------------------
1 | .badge {
2 | --badge-padding-x-sm: calc(var(--mantine-spacing-xs) * 0.5);
3 | background-color: light-dark(
4 | alpha(var(--mantine-color-dark-4), 70%),
5 | alpha(var(--mantine-color-gray-6), 60%)
6 | );
7 | box-shadow: var(--mantine-shadow-xs);
8 | color: var(--mantine-color-white);
9 | font-weight: 400;
10 | overflow: visible;
11 | text-shadow: none;
12 | text-transform: lowercase;
13 | transition-duration: var(--transition-duration);
14 | transition-property: background-color;
15 | transition-timing-function: var(--transition-timing-function);
16 |
17 | &.new {
18 | background-color: light-dark(
19 | alpha(var(--mantine-primary-color-filled), 70%),
20 | alpha(var(--mantine-primary-color-filled), 60%)
21 | );
22 |
23 | > span {
24 | color: var(--mantine-color-white);
25 | text-shadow: 0 1px 0 rgba(0 0 0 / 28%);
26 | }
27 | }
28 |
29 | a:visited > & {
30 | /* Can't change alpha value of :visited styles */
31 | background-color: light-dark(var(--mantine-color-dark-3), var(--mantine-color-gray-7));
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/client/src/store/slices/layout/entities/panels/selectors.ts:
--------------------------------------------------------------------------------
1 | import { placeHolderStyle as placeholderGroup } from 'rc-dock'
2 |
3 | import type { RootState } from '#store/types'
4 |
5 | import panelsEntityAdapter from './panelsEntityAdapter'
6 |
7 | /** Adapter selectors */
8 | const panelsSelectors = panelsEntityAdapter.getSelectors((state: RootState) => state.layout.panels)
9 |
10 | /** Select child panels */
11 | const selectChildPanels = (state: RootState, parentId: string) =>
12 | panelsSelectors.selectAll(state).filter((panel) => panel.parentId === parentId)
13 |
14 | /** Select placeholder panel */
15 | const selectPlaceholderPanel = (state: RootState) =>
16 | panelsSelectors.selectAll(state).find((panel) => panel.group === placeholderGroup)
17 |
18 | /** Select panel for tab insertion */
19 | const selectPanelForTab = (state: RootState) => panelsSelectors.selectAll(state).at(0)
20 |
21 | const selectPanelByActiveTabId = (state: RootState, tabId: string) =>
22 | panelsSelectors.selectAll(state).find((panel) => panel.activeId === tabId)
23 |
24 | export { selectChildPanels, selectPanelByActiveTabId, selectPanelForTab, selectPlaceholderPanel }
25 | export default panelsSelectors
26 |
--------------------------------------------------------------------------------
/packages/client/src/ui/components/modals/SettingsModal/ColorSchemeSettings.tsx:
--------------------------------------------------------------------------------
1 | import { SegmentedControl, useMantineColorScheme } from '@mantine/core'
2 | import { IconDeviceDesktop, IconMoonStars, IconSun } from '@tabler/icons-react'
3 |
4 | import { isColorScheme } from '#types/typeGuards'
5 | import InputWrapper from '#ui/components/common/InputWrapper/InputWrapper'
6 |
7 | import Label from './Label'
8 |
9 | const data = [
10 | {
11 | label: ,
12 | value: 'auto',
13 | },
14 | {
15 | label: ,
16 | value: 'light',
17 | },
18 | {
19 | label: ,
20 | value: 'dark',
21 | },
22 | ]
23 |
24 | function ColorSchemeSettings() {
25 | const { setColorScheme, colorScheme } = useMantineColorScheme()
26 |
27 | const onChange = (value: string) => {
28 | if (isColorScheme(value)) {
29 | setColorScheme(value)
30 | }
31 | }
32 |
33 | return (
34 |
28 |
29 | } onClick={onCancel}>
30 | Cancel
31 |
32 | {deleteButton}
33 | {mode === 'new' && confirmButton}
34 |
35 | {mode === 'edit' && confirmButton}
36 |
37 | )
38 | }
39 |
40 | interface ButtonGroupProps {
41 | mode: TabEditMode
42 | onCancel: () => void
43 | onDelete: () => void
44 | }
45 |
46 | export default ButtonGroup
47 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:22-alpine3.18 AS base
2 | LABEL maintainer="buzz {feedItem.title}
17 | {timeAgoBadge}
18 |
19 | ) : (
20 | <>
21 |
22 | {timeAgoBadge}
23 | {feedItem.title}
24 |
25 |
26 | )
27 |
28 | return (
29 | <>
30 |
32 |
39 |
40 | )
41 | }
42 |
43 | export default DetailFeedItem
44 |
--------------------------------------------------------------------------------
/packages/client/src/ui/components/Feed/Window/List.tsx:
--------------------------------------------------------------------------------
1 | import cx from 'clsx'
2 | import { memo, useMemo } from 'react'
3 | import { FixedSizeList, type ListChildComponentProps } from 'react-window'
4 |
5 | import { SCROLLER_PADDING_Y } from '#constants'
6 | import FeedItem from '#ui/components/Feed/FeedItem/FeedItem'
7 |
8 | import { listItemKey, parseHeight } from './utils'
9 | import type { ListData, ListProps } from './types'
10 |
11 | import classes from './List.module.css'
12 |
13 | const ListRow = memo(function ListRow({
14 | data: { items, tab },
15 | index,
16 | style,
17 | }: ListChildComponentProps{title}
33 | {hasContent && (
34 |
35 | {feedItem.content}
36 |
37 | )}
38 |
23 |
25 | )
26 | })
27 |
28 | function List({ items, rowHeight, tab, innerElementType, ...otherProps }: ListProps) {
29 | const itemCount = items.length
30 | const itemData = useMemo(() => ({ items, tab }), [items, tab])
31 |
32 | return (
33 | to iGoogle and Netvibes 24 |
13 |
{message}
14 |
15 | )
16 | }
17 |
18 | interface ErrorAlertProps {
19 | message: string
20 | }
21 |
22 | function LoadingAlert() {
23 | return (
24 |
30 | {itemIndex < items.length &&
32 | )
33 | })
34 |
35 | function Grid({ width, items, overscanCount, tab, ...otherProps }: GridProps) {
36 | const maxColumnWidth = tab.display === 'tiles' ? IMG_WIDTH : tab.maxColumnWidth
37 | const columnCount = Math.max(1, Math.floor(width / maxColumnWidth) + 1)
38 | const itemCount = items.length
39 | const rowCount = Math.ceil(itemCount / columnCount)
40 | const itemData = useMemo(
41 | () => ({ columnCount, rowCount, items, tab }),
42 | [columnCount, rowCount, items, tab]
43 | )
44 |
45 | return (
46 | / are treated as regular expressions.
17 |
18 | )
19 | }
20 |
21 | function FilterInput({ form, idx }: FilterInputProps) {
22 | const focusTrapRef = useFocusTrap()
23 |
24 | return (
25 |