{:else}
-
- {#each $github.reviews.data as review}
-
- - onClick(review.node.url)}
- >
-
- {review.node.repository.nameWithOwner} - {review.node.title}
-
-
-
- #{review.node.number} opened on{' '}
- {dateToString(review.node.createdAt, 'YYYY-MM-DD h:m')} by @
- {review.node.author.login}
-
-
- {/each}
-
+
+
+ {#each $github.reviews.data as review}
+
+ - onClick(review.node.url)}
+ >
+
+
+
+
+ {review.node.repository.nameWithOwner}
+ {review.node.title}
+
+
+
+ #{review.node.number} opened on{' '}
+ {dateToString(review.node.createdAt, 'YYYY-MM-DD h:m')} by @{review
+ .node.author.login}
+
+
+
+ {/each}
+
+
{/if}
diff --git a/src/components/Settings.svelte b/src/components/Settings.svelte
new file mode 100644
index 0000000..ce867df
--- /dev/null
+++ b/src/components/Settings.svelte
@@ -0,0 +1,94 @@
+
+
+
+
Settings
+
+
+
+
+
+
+
+
+
(fetchInterval = e.detail.value)}
+ initialValue={fetchInterval}
+ min={5}
+ max={60}
+ id="fetch_interval"
+ />
+
+
+
+
+
+ {app.name}@{app.version}
+
+
diff --git a/src/components/Theme.svelte b/src/components/Theme.svelte
new file mode 100644
index 0000000..42c6a93
--- /dev/null
+++ b/src/components/Theme.svelte
@@ -0,0 +1,66 @@
+
+
+
+
+
+
+ Appearance
+
diff --git a/src/components/Toggle.svelte b/src/components/Toggle.svelte
index cedfce3..6e30c87 100644
--- a/src/components/Toggle.svelte
+++ b/src/components/Toggle.svelte
@@ -7,7 +7,7 @@
diff --git a/src/lib/api.ts b/src/lib/api.ts
index bcd9402..6fa3885 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -30,20 +30,6 @@ export const getUserData = async (
};
};
-export const addAccount = (
- account: AuthState,
- token: string,
- hostname: string,
- user?: User
-): AuthState => {
- return {
- ...account,
- token,
- hostname,
- user: user ?? null,
- };
-};
-
export const getReviews = async (account: AuthState): Promise
=> {
const search = `type:pr state:open review-requested:${account.user?.login}`;
const text = `
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index ed4c4f6..4a1bc0f 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,16 +1,11 @@
import { writable } from 'svelte/store';
-import {
- Appearance,
- type AuthTokenOptions,
- type SettingsState,
-} from '../types';
+import type { AuthTokenOptions, SettingsState } from '../types';
import { getUserData } from './api';
import { disable, enable } from './auto-start';
import { clearState, loadState, saveState } from './storage';
export const defaultSettings: SettingsState = {
openAtStartup: false,
- appearance: Appearance.SYSTEM,
fetchInterval: 30000,
};
diff --git a/src/lib/storage.ts b/src/lib/storage.ts
index bbedead..516314e 100644
--- a/src/lib/storage.ts
+++ b/src/lib/storage.ts
@@ -1,5 +1,6 @@
import type { AuthState, SettingsState } from '../types';
import { invoke } from '@tauri-apps/api';
+import { github } from './github';
export const loadState = (): {
account?: AuthState;
@@ -20,5 +21,12 @@ export const saveState = (
export const clearState = (): void => {
invoke('set_review_count', { count: '' });
+ github.update((prev) => ({
+ ...prev,
+ reviews: {
+ count: 0,
+ data: [],
+ },
+ }));
localStorage.clear();
};
diff --git a/src/lib/theme.ts b/src/lib/theme.ts
new file mode 100644
index 0000000..645d984
--- /dev/null
+++ b/src/lib/theme.ts
@@ -0,0 +1,57 @@
+import { writable } from 'svelte/store';
+import type { Appearance } from '../types';
+
+// indicate if we're in dark mode or not
+let dark: boolean;
+
+let theme: keyof typeof Appearance;
+
+function setMatchTheme({ matches: dark }: MediaQueryListEvent) {
+ // only set if we haven't overridden the theme
+ if (!localStorage.getItem('gitbar-theme')) {
+ setMode(dark);
+ }
+}
+
+function setTheme(isDark: boolean) {
+ setMode(isDark);
+}
+
+function toggle() {
+ setMode(!dark);
+}
+
+function setMode(value: boolean) {
+ dark = value;
+
+ // update page styling
+ if (dark) {
+ document.documentElement.classList.add('dark');
+ } else {
+ document.documentElement.classList.remove('dark');
+ }
+
+ const newMode = dark ? 'dark' : 'light';
+
+ appearance.update((prev) => {
+ return {
+ ...prev,
+ theme: newMode,
+ };
+ });
+ // store the theme as a local override
+ localStorage.setItem('gitbar-theme', newMode);
+
+ // if the toggled-to theme matches the system defined theme, clear the local override
+ // this effectively provides a way to override or revert to "automatic" setting mode
+ if (window.matchMedia(`(prefers-color-scheme: ${newMode})`).matches) {
+ localStorage.removeItem('gitbar-theme');
+ }
+}
+
+export const appearance = writable({
+ theme,
+ toggle,
+ setTheme,
+ setMatchTheme,
+});
diff --git a/src/types.ts b/src/types.ts
index 6958062..5c2760d 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -13,14 +13,12 @@ export interface AuthState {
export interface SettingsState {
openAtStartup: boolean;
- appearance?: Appearance;
fetchInterval: number;
}
export enum Appearance {
- SYSTEM = 'SYSTEM',
- LIGHT = 'LIGHT',
- DARK = 'DARK',
+ light = 'light',
+ dark = 'dark',
}
export interface AuthTokenOptions {
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 1fb7ffd..212fd05 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,8 +1,60 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
+ darkMode: 'class',
content: ['./index.html', './src/**/*.{html,js,svelte,ts}'],
theme: {
- extend: {},
+ extend: {
+ colors: {
+ blue: {
+ 50: '#eff7ff',
+ 100: '#dbedfe',
+ 200: '#bfe0fe',
+ 300: '#93cdfd',
+ 400: '#60b1fa',
+ 500: '#3b91f6',
+ 600: '#1f6feb',
+ 700: '#1d5dd8',
+ 800: '#1e4baf',
+ 900: '#1e438a',
+ },
+ slate: {
+ 50: '#f4f6f7',
+ 100: '#e2e8eb',
+ 200: '#c8d2d9',
+ 300: '#a2b3be',
+ 400: '#758c9b',
+ 500: '#5a7180',
+ 600: '#4d5e6d',
+ 700: '#43505b',
+ 800: '#3c454e',
+ 900: '#30363d',
+ },
+ stone: {
+ 50: '#f4f7f9',
+ 100: '#d9e4ee',
+ 200: '#b2c8dd',
+ 300: '#84a3c4',
+ 400: '#5a7ea7',
+ 500: '#41628b',
+ 600: '#324b6f',
+ 700: '#2b3f5a',
+ 800: '#263449',
+ 900: '#0d1117',
+ },
+ gray: {
+ 50: '#f2f6f9',
+ 100: '#dfe8ee',
+ 200: '#c2d3df',
+ 300: '#97b3c9',
+ 400: '#668caa',
+ 500: '#4a7090',
+ 600: '#405d7a',
+ 700: '#394d65',
+ 800: '#354355',
+ 900: '#161b22',
+ },
+ },
+ },
},
plugins: [],
};
diff --git a/tsconfig.json b/tsconfig.json
index a20071e..c4e1c5f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,3 @@
-
{
"extends": "@tsconfig/svelte/tsconfig.json",
"compilerOptions": {
diff --git a/website/static/screenshot-light.png b/website/static/screenshot-light.png
index 0afcc3a..a2fce82 100644
Binary files a/website/static/screenshot-light.png and b/website/static/screenshot-light.png differ
diff --git a/website/static/screenshot.png b/website/static/screenshot.png
index beb7eee..750d9b1 100644
Binary files a/website/static/screenshot.png and b/website/static/screenshot.png differ