add cdn icons

apps/expo/app/(tabs)/apps/index.tsx

@@ -1,15 +1,15 @@
 import { useEffect, useState } from "react";
 import { RefreshControl } from "react-native";
+import { SvgUri } from "react-native-svg";
 import { router } from "expo-router";
 import { ChevronRight, Plus } from "@tamagui/lucide-icons";
 import { observer } from "mobx-react-lite";
-import { H4, Image, Paragraph, SizableText, View, XStack, YStack } from "tamagui";
+import { H4, Paragraph, SizableText, View, XStack, YStack } from "tamagui";
 
 import { Container } from "../../../components/container";
 import { Header } from "../../../components/header";
 import { ShadowCard } from "../../../components/shadow.card";
 import { AppSettings } from "../../../data/app.settings";
-import { appIcons } from "../../../data/apps";
 
 const Apps = observer(() => {
   const [refreshing, setRefreshing] = useState(false);
@@ -48,7 +48,7 @@ const Apps = observer(() => {
                 }}
               >
                 <XStack space="$2" alignItems="center">
-                  <Image source={{ uri: appIcons[app.iconKey] }} width={20} height={20} />
+                  <SvgUri uri={AppSettings.getIconUrl(app.iconKey)} width={20} height={20} />
                   <SizableText color="$text11" fontWeight={"900"} fontSize={"$5"}>
                     {app.name}
                   </SizableText>

apps/expo/app/(tabs)/overview/[appId].tsx

@@ -3,14 +3,13 @@ import { Link, Redirect, router, useLocalSearchParams } from "expo-router";
 import { ChevronRight, Cog } from "@tamagui/lucide-icons";
 import dayjs from "dayjs";
 import { observer } from "mobx-react-lite";
-import { H2, H4, Paragraph, SizableText, View, XStack, YStack } from "tamagui";
+import { H2, H4, Paragraph, SizableText, useTheme, View, XStack, YStack } from "tamagui";
 
 import { Container } from "../../../components/container";
 import { Divider } from "../../../components/divider";
 import { LineChart } from "../../../components/line.chart";
 import { PieChart } from "../../../components/pie.chart";
 import { ShadowCard } from "../../../components/shadow.card";
-import { socialMediaGradients } from "../../../data/apps";
 import { OverviewStore } from "../../../data/overview.store";
 
 const labelTextStyle = { color: "#797979", width: 100, marginTop: -2, fontFamily: "Satoshi", fontSize: 12 };
@@ -50,7 +49,14 @@ const App = observer(() => {
   const effectivenessByDayInPercentage = selectedApp ? OverviewStore.preventionsByDay(selectedApp) : null;
 
   const interruptionsSplitUpByAppInPercentage = OverviewStore.interruptionsSplitUpByAppInPercentage();
-
+  const theme = useTheme();
+  const greyColors: (string | undefined)[] = [
+    theme.grey3?.val as string,
+    theme.grey4?.val as string,
+    theme.grey5?.val as string,
+    theme.grey6?.val as string,
+    theme.grey7?.val as string,
+  ];
   return (
     <Container paddingTop={"$4"}>
       <YStack space="$4">
@@ -178,10 +184,9 @@ const App = observer(() => {
           <View overflow="hidden" flexDirection="row" justifyContent="center">
             <PieChart
               data={interruptionsSplitUpByAppInPercentage.map((interruptions) => {
+                const randomGrey = greyColors[Math.floor(Math.random() * greyColors.length)] ?? "#000";
                 return {
-                  color: socialMediaGradients[interruptions.app.key][0],
-                  gradientCenterColor:
-                    socialMediaGradients[interruptions.app.key][socialMediaGradients[interruptions.app.key].length - 1],
+                  color: randomGrey,
                   value: interruptions.percentage,
                   label: interruptions.app.name,
                   focused: interruptions.app.id === selectedApp.id,

apps/expo/app/(tabs)/overview/index.tsx

@@ -1,16 +1,16 @@
 import { useEffect } from "react";
+import { SvgUri } from "react-native-svg";
 import { router } from "expo-router";
 import { AlertTriangle, Check, ChevronRight, Plus, ShieldBan } from "@tamagui/lucide-icons";
 import dayjs from "dayjs";
 import { observer } from "mobx-react-lite";
-import { H1, H2, H4, Image, Paragraph, SizableText, View, XStack, YStack } from "tamagui";
+import { H1, H2, H4, Paragraph, SizableText, View, XStack, YStack } from "tamagui";
 
 import { Container } from "../../../components/container";
 import { Divider } from "../../../components/divider";
 import { Header } from "../../../components/header";
 import { PercentageTrend } from "../../../components/percentage.trend";
 import { ShadowCard } from "../../../components/shadow.card";
-import { appIcons } from "../../../data/apps";
 import { OverviewStore } from "../../../data/overview.store";
 import { WeeklySummary } from "./weekly.summary";
 
@@ -90,7 +90,7 @@ const Overview = observer(() => {
             >
               <XStack space="$2" justifyContent="space-between">
                 <XStack space="$2" alignItems="center">
-                  <Image source={{ uri: appIcons[app.iconKey] }} width={20} height={20} />
+                  <SvgUri uri={OverviewStore.getIconUrl(app.iconKey)} width={20} height={20} />
                   <SizableText color="$text11" fontWeight={"900"} fontSize={"$5"}>
                     {app.name}
                   </SizableText>

apps/expo/components/pie.chart.tsx

@@ -63,10 +63,10 @@ export const PieChart = ({
         centerLabelComponent={() => {
           return (
             <View style={{ justifyContent: "center", alignItems: "center" }}>
-              <H4 color="white" textAlign="center">
+              <H4 color="$grey11" textAlign="center">
                 {focusedData?.value}%
               </H4>
-              <SizableText color="white">{focusedData?.label}</SizableText>
+              <SizableText color="$grey11">{focusedData?.label}</SizableText>
             </View>
           );
         }}

apps/expo/data/app.settings.ts

@@ -40,6 +40,10 @@ export class AppSettingsSingleton {
   get apps(): App[] {
     return this.appsStore.apps;
   }
+
+  public getIconUrl = (iconKey: string): string => {
+    return this.appsStore.getIconUrl(iconKey);
+  };
 }
 
 export const AppSettings = new AppSettingsSingleton();

apps/expo/data/apps.ts

@@ -8,8 +8,8 @@ export interface App {
   name: string;
   settings: IAppSettings;
   active: boolean;
-  iconKey: keyof typeof appIcons;
-  key: keyof typeof deepLinks;
+  iconKey: SupportedApp;
+  key: SupportedApp;
 }
 
 interface IAppSettings {
@@ -18,7 +18,8 @@ interface IAppSettings {
   dailyTimeSpentMinutes: number;
 }
 
-export const deepLinks = {
+// TODO add more apps / test all apps
+export const deepLinks: Record<SupportedApp, string> = {
   instagram: "instagram",
   twitter: "twitter://user?screen_name=USERNAME",
   facebook: "fb://profile/USER_ID",
@@ -33,41 +34,68 @@ export const deepLinks = {
   telegram: "tg://resolve?domain=USERNAME",
   discord: "discord://discord.com/channels/USER_ID",
   safari: "https://www.google.com",
-} as const;
-
-export const appIcons = {
-  instagram: "https://cdn-icons-png.flaticon.com/512/174/174855.png",
-  twitter: "https://cdn-icons-png.flaticon.com/512/733/733579.png",
-  facebook: "https://cdn-icons-png.flaticon.com/512/733/733547.png",
-  youtube: "https://cdn-icons-png.flaticon.com/512/1384/1384060.png",
-  whatsapp: "https://cdn-icons-png.flaticon.com/512/733/733585.png",
-  spotify: "https://cdn-icons-png.flaticon.com/512/174/174872.png",
-  linkedin: "https://cdn-icons-png.flaticon.com/512/174/174857.png",
-  tiktok: "https://cdn-icons-png.flaticon.com/512/733/733547.png",
-  reddit: "https://cdn-icons-png.flaticon.com/512/733/733579.png",
-  snapchat: "https://cdn-icons-png.flaticon.com/512/733/733585.png",
-  twitch: "https://cdn-icons-png.flaticon.com/512/733/733579.png",
-  telegram: "https://cdn-icons-png.flaticon.com/512/733/733585.png",
-  discord: "https://cdn-icons-png.flaticon.com/512/733/733547.png",
-  safari: "https://static-00.iconduck.com/assets.00/safari-ios-icon-512x512-v014xh8r.png",
-} as const;
-
-export const socialMediaGradients = {
-  instagram: ["#405DE6", "#5851DB", "#833AB4", "#C13584", "#E1306C", "#FD1D1D", "#F56040"],
-  twitter: ["#00C6FF", "#0072FF"],
-  facebook: ["#3A5894", "#898F9C"],
-  youtube: ["#FF0000", "#282828"],
-  whatsapp: ["#075E54", "#128C7E", "#25D366", "#DCF8C6"],
-  spotify: ["#1DB954", "#191414"],
-  linkedin: ["#0A66C2", "#FFFFFF"],
-  tiktok: ["#ff0050", "#00F2EA"],
-  reddit: ["#FF4500", "#FFFFFF"],
-  snapchat: ["#FFFC00", "#FFFFFF"],
-  twitch: ["#6441A4", "#FFFFFF"],
-  telegram: ["#0088CC", "#FFFFFF"],
-  discord: ["#5865F2", "#FFFFFF"],
-  safari: ["#0E60FE", "#FFFFFF"],
-} as const;
+  bereal: "https://www.google.com",
+  clashofclans: "https://www.google.com",
+  clashroyale: "https://www.google.com",
+  imessage: "https://www.google.com",
+  netflix: "https://www.google.com",
+  candycrush: "https://www.google.com",
+  chrome: "https://www.google.com",
+  "disney+": "https://www.google.com",
+  firefox: "https://www.google.com",
+  gmail: "https://www.google.com",
+  mastodon: "https://www.google.com",
+  microsoftteams: "https://www.google.com",
+  outlook: "https://www.google.com",
+  pokemongo: "https://www.google.com",
+  roblox: "https://www.google.com",
+  signal: "https://www.google.com",
+  skype: "https://www.google.com",
+  sudoku: "https://www.google.com",
+  tinder: "https://www.google.com",
+  toonblast: "https://www.google.com",
+  tumblr: "https://www.google.com",
+  zalandofashion: "https://www.google.com",
+};
+
+export type SupportedApp =
+  | "instagram"
+  | "twitter"
+  | "facebook"
+  | "youtube"
+  | "whatsapp"
+  | "spotify"
+  | "linkedin"
+  | "tiktok"
+  | "reddit"
+  | "snapchat"
+  | "twitch"
+  | "telegram"
+  | "discord"
+  | "safari"
+  | "bereal"
+  | "clashofclans"
+  | "clashroyale"
+  | "imessage"
+  | "netflix"
+  | "candycrush"
+  | "chrome"
+  | "disney+"
+  | "firefox"
+  | "gmail"
+  | "mastodon"
+  | "microsoftteams"
+  | "outlook"
+  | "pokemongo"
+  | "roblox"
+  | "signal"
+  | "skype"
+  | "sudoku"
+  | "tinder"
+  | "toonblast"
+  | "tumblr"
+  | "zalandofashion";
+
 export const defaultAppSettings: IAppSettings = {
   breakDurationSeconds: 10,
   quickAppSwitchDurationMinutes: 5,
@@ -116,10 +144,10 @@ export class AppsStore {
       const app = await this.storage.create({
         name: appShortcutName,
         active: true,
-        iconKey: appShortcutName.toLowerCase().replace(" ", "") as keyof typeof appIcons,
+        iconKey: appShortcutName.toLowerCase().replace(" ", "") as SupportedApp,
         id: Crypto.randomUUID(),
         settings: defaultAppSettings,
-        key: appShortcutName.toLowerCase().replace(" ", "") as keyof typeof appIcons,
+        key: appShortcutName.toLowerCase().replace(" ", "") as SupportedApp,
       });
       if (!app) {
         throw new Error("App not created");
@@ -150,4 +178,9 @@ export class AppsStore {
   public set apps(value: App[]) {
     this._apps.replace(value);
   }
+
+  public getIconUrl = (iconKey: string) => {
+    const url = new URL(`https://cdn.simpleicons.org/${iconKey}`);
+    return url.toString();
+  };
 }

apps/expo/data/break.store.ts

@@ -31,7 +31,7 @@ export class BreakStoreSingleton {
       throw new Error("App not initialized");
     }
     await this.appStatisticsStore.trackEvent({ appId: this.app.id, type: "app-reopen" });
-    await Linking.openURL(deepLinks[this.app.key]);
+    await Linking.openURL(deepLinks[this.app.key as keyof typeof deepLinks]);
   }
 
   public async exitApp(): Promise<void> {

apps/expo/data/overview.store.ts

@@ -175,6 +175,10 @@ class OverviewStoreSingleton {
   get apps(): App[] {
     return this.appsStore.apps;
   }
+
+  public getIconUrl = (iconKey: string): string => {
+    return this.appsStore.getIconUrl(iconKey);
+  };
 }
 
 export const OverviewStore = new OverviewStoreSingleton();