frontend-vanilla/src/store.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

import type { Feed, Item, Category } from './types.ts';

export type StoreEvent = 'feeds-updated' | 'tags-updated' | 'items-updated' | 'active-feed-updated' | 'active-tag-updated' | 'loading-state-changed' | 'filter-updated' | 'search-updated' | 'theme-updated' | 'sidebar-toggle';

export type FilterType = 'unread' | 'all' | 'starred';

export class Store extends EventTarget {
    feeds: Feed[] = [];
    tags: Category[] = [];
    items: Item[] = [];
    activeFeedId: number | null = null;
    activeTagName: string | null = null;
    filter: FilterType = 'unread';
    searchQuery: string = '';
    loading: boolean = false;
    hasMore: boolean = true;
    theme: string = localStorage.getItem('neko-theme') || 'light';
    fontTheme: string = localStorage.getItem('neko-font-theme') || 'default';
    sidebarVisible: boolean = window.innerWidth > 768;

    setFeeds(feeds: Feed[]) {
        this.feeds = feeds;
        this.emit('feeds-updated');
    }

    setTags(tags: Category[]) {
        this.tags = tags;
        this.emit('tags-updated');
    }

    setItems(items: Item[], append: boolean = false) {
        if (append) {
            this.items = [...this.items, ...items];
        } else {
            this.items = items;
        }
        this.emit('items-updated');
    }

    setActiveFeed(id: number | null) {
        this.activeFeedId = id;
        this.activeTagName = null;
        this.emit('active-feed-updated');
    }

    setActiveTag(name: string | null) {
        this.activeTagName = name;
        this.activeFeedId = null;
        this.emit('active-tag-updated');
    }

    setFilter(filter: FilterType) {
        if (this.filter !== filter) {
            this.filter = filter;
            this.emit('filter-updated');
        }
    }

    setSearchQuery(query: string) {
        if (this.searchQuery !== query) {
            this.searchQuery = query;
            this.emit('search-updated');
        }
    }

    setLoading(loading: boolean) {
        this.loading = loading;
        this.emit('loading-state-changed');
    }

    setHasMore(hasMore: boolean) {
        this.hasMore = hasMore;
    }

    setTheme(theme: string) {
        this.theme = theme;
        localStorage.setItem('neko-theme', theme);
        this.emit('theme-updated');
    }

    setFontTheme(fontTheme: string) {
        this.fontTheme = fontTheme;
        localStorage.setItem('neko-font-theme', fontTheme);
        this.emit('theme-updated');
    }

    setSidebarVisible(visible: boolean) {
        this.sidebarVisible = visible;
        this.emit('sidebar-toggle');
    }

    toggleSidebar() {
        this.setSidebarVisible(!this.sidebarVisible);
    }

    private emit(type: StoreEvent, detail?: any) {
        this.dispatchEvent(new CustomEvent(type, { detail }));
    }

    on(type: StoreEvent, callback: (e: CustomEvent) => void) {
        this.addEventListener(type, callback as EventListener);
    }
}

export const store = new Store();