feat: apply Charbon·Lime design system, add gear icon, multi-provider git settings

- Replace app icon with new Charbon·Lime brand assets (icon.png + adaptive-icon.png) - Apply design tokens to theme.ts: bg #1B2433, primary/success #88D656 (lime), text1 #EEF2F5 (cream) - Add ⚙ gear button (lime) in HomeScreen header → navigates to /settings - Expand settings: git provider selector (Gitea / GitHub / GitLab) with per-provider fields - Add lib/git.ts: unified pushIncidentToGit() for Gitea, GitHub (PUT), and GitLab APIs - Update incident detail screen to use lib/git.ts and dynamic provider routing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-23 10:00:49 +02:00
parent 67c132d88b
commit fee283b5d6
9 changed files with 480 additions and 102 deletions
@@ -1,4 +1,5 @@
 import { useEffect } from "react";
+import { Pressable, Text } from "react-native";
 import { Stack, router } from "expo-router";
 import { StatusBar } from "expo-status-bar";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -28,7 +29,20 @@ export default function RootLayout() {
          animation: "slide_from_right",
        }}
      >
-        <Stack.Screen name="index" options={{ title: "SheetHappens" }} />
+        <Stack.Screen
+          name="index"
+          options={{
+            title: "SheetHappens",
+            headerRight: () => (
+              <Pressable
+                onPress={() => router.push("/settings")}
+                style={{ paddingLeft: 12, paddingRight: 4, paddingVertical: 6 }}
+              >
+                <Text style={{ color: Colors.primary, fontSize: 22, lineHeight: 26 }}>⚙</Text>
+              </Pressable>
+            ),
+          }}
+        />
        <Stack.Screen name="new" options={{ title: "New Incident", presentation: "modal" }} />
        <Stack.Screen name="incident/[id]" options={{ title: "Incident" }} />
        <Stack.Screen name="settings" options={{ title: "Settings" }} />
@@ -12,7 +12,8 @@ import * as Clipboard from "expo-clipboard";
 import * as SecureStore from "expo-secure-store";
 import { getIncidentById, updateIncident } from "@/lib/db";
 import { renderMarkdown } from "@/lib/markdown";
-import { pushIncidentToGitea } from "@/lib/gitea";
+import { pushIncidentToGit } from "@/lib/git";
+import type { GitProvider } from "@/lib/git";
 import type { Incident } from "@/types/incident";
 import { Colors } from "@/constants/theme";

@@ -59,28 +60,62 @@ export default function IncidentDetailScreen() {
    setIncident({ ...incident, status: "resolved" });
  }

-  async function handleGiteaPush() {
+  async function handleGitPush() {
    if (!incident) return;
-    const [url, token, owner, repo, template] = await Promise.all([
-      SecureStore.getItemAsync("gitea_url"),
-      SecureStore.getItemAsync("gitea_token"),
-      SecureStore.getItemAsync("gitea_owner"),
-      SecureStore.getItemAsync("gitea_repo"),
-      SecureStore.getItemAsync("md_template"),
-    ]);
-    if (!url || !token || !owner || !repo) {
-      Alert.alert("Gitea not configured", "Set up Gitea in Settings first.");
+    const [provider, template, giteaUrl, giteaToken, giteaOwner, giteaRepo, githubToken, githubOwner, githubRepo, gitlabUrl, gitlabToken, gitlabOwner, gitlabRepo] =
+      await Promise.all([
+        SecureStore.getItemAsync("git_provider"),
+        SecureStore.getItemAsync("md_template"),
+        SecureStore.getItemAsync("gitea_url"),
+        SecureStore.getItemAsync("gitea_token"),
+        SecureStore.getItemAsync("gitea_owner"),
+        SecureStore.getItemAsync("gitea_repo"),
+        SecureStore.getItemAsync("github_token"),
+        SecureStore.getItemAsync("github_owner"),
+        SecureStore.getItemAsync("github_repo"),
+        SecureStore.getItemAsync("gitlab_url"),
+        SecureStore.getItemAsync("gitlab_token"),
+        SecureStore.getItemAsync("gitlab_owner"),
+        SecureStore.getItemAsync("gitlab_repo"),
+      ]);
+
+    const p = (provider ?? "gitea") as GitProvider;
+
+    let url: string | undefined;
+    let token: string | null;
+    let owner: string | null;
+    let repo: string | null;
+
+    if (p === "gitea") {
+      url = giteaUrl ?? undefined;
+      token = giteaToken;
+      owner = giteaOwner;
+      repo = giteaRepo;
+    } else if (p === "github") {
+      token = githubToken;
+      owner = githubOwner;
+      repo = githubRepo;
+    } else {
+      url = gitlabUrl ?? undefined;
+      token = gitlabToken;
+      owner = gitlabOwner;
+      repo = gitlabRepo;
+    }
+
+    if (!token || !owner || !repo) {
+      Alert.alert("Git not configured", `Set up ${p.charAt(0).toUpperCase() + p.slice(1)} in Settings first.`);
      return;
    }
+
    setPushing(true);
-    const result = await pushIncidentToGitea(
+    const result = await pushIncidentToGit(
      incident,
-      { url, token, owner, repo },
+      { provider: p, url, token, owner, repo },
      template ?? undefined
    );
    setPushing(false);
    if (result.success) {
-      Alert.alert("Pushed", result.url ? `${result.url}` : "Push successful.");
+      Alert.alert("Pushed", result.url ?? "Push successful.");
    } else {
      Alert.alert("Push failed", result.error ?? "Unknown error");
    }
@@ -117,7 +152,7 @@ export default function IncidentDetailScreen() {
        <View
          style={{
            backgroundColor:
-              incident.status === "open" ? "#f59e0b20" : "#22c55e20",
+              incident.status === "open" ? "#f59e0b20" : "#88D65620",
            borderRadius: 6,
            paddingHorizontal: 10,
            paddingVertical: 4,
@@ -188,7 +223,7 @@ export default function IncidentDetailScreen() {
          <Pressable
            onPress={handleResolve}
            style={{
-              backgroundColor: "#22c55e20",
+              backgroundColor: "#88D65620",
              borderWidth: 1,
              borderColor: Colors.success,
              borderRadius: 10,
@@ -219,7 +254,7 @@ export default function IncidentDetailScreen() {
        </Pressable>

        <Pressable
-          onPress={handleGiteaPush}
+          onPress={handleGitPush}
          disabled={pushing}
          style={{
            backgroundColor: pushing ? Colors.surface2 : Colors.surface,
@@ -237,7 +272,7 @@ export default function IncidentDetailScreen() {
              fontSize: 15,
            }}
          >
-            {pushing ? "Pushing…" : "Push to Gitea"}
+            {pushing ? "Pushing…" : "Push to Git"}
          </Text>
        </Pressable>

@@ -100,7 +100,7 @@ export default function HomeScreen() {
                    backgroundColor:
                      item.status === "open"
                        ? "#f59e0b20"
-                        : "#22c55e20",
+                        : "#88D65620",
                    borderRadius: 4,
                    paddingHorizontal: 8,
                    paddingVertical: 2,
@@ -6,22 +6,33 @@ import {
  ScrollView,
  Switch,
  Pressable,
-  Alert,
 } from "react-native";
 import * as SecureStore from "expo-secure-store";
 import { Colors } from "@/constants/theme";
 import { DEFAULT_TEMPLATE } from "@/lib/markdown";
+import type { GitProvider } from "@/lib/git";

 const KEYS = {
  INPUT_MODE: "pref_input_mode",
  HOME_VIEW: "pref_home_view",
  AI_ENABLED: "pref_ai_enabled",
  AI_KEY: "pref_ai_key",
+  MD_TEMPLATE: "md_template",
+  GIT_PROVIDER: "git_provider",
+  // Gitea
  GITEA_URL: "gitea_url",
  GITEA_TOKEN: "gitea_token",
  GITEA_OWNER: "gitea_owner",
  GITEA_REPO: "gitea_repo",
-  MD_TEMPLATE: "md_template",
+  // GitHub
+  GITHUB_TOKEN: "github_token",
+  GITHUB_OWNER: "github_owner",
+  GITHUB_REPO: "github_repo",
+  // GitLab
+  GITLAB_URL: "gitlab_url",
+  GITLAB_TOKEN: "gitlab_token",
+  GITLAB_OWNER: "gitlab_owner",
+  GITLAB_REPO: "gitlab_repo",
 } as const;

 const LABEL = {
@@ -53,40 +64,76 @@ const INPUT = {
  fontFamily: "monospace",
 } as const;

+const PROVIDER_LABELS: Record<GitProvider, string> = {
+  gitea: "Gitea",
+  github: "GitHub",
+  gitlab: "GitLab",
+};
+
 export default function SettingsScreen() {
  const [inputMode, setInputMode] = useState<"voice" | "form">("form");
  const [homeView, setHomeView] = useState<"dashboard" | "capture">("dashboard");
  const [aiEnabled, setAiEnabled] = useState(false);
  const [aiKey, setAiKey] = useState("");
+  const [mdTemplate, setMdTemplate] = useState(DEFAULT_TEMPLATE);
+  const [saved, setSaved] = useState(false);
+
+  // Git provider
+  const [gitProvider, setGitProvider] = useState<GitProvider>("gitea");
+  // Gitea
  const [giteaUrl, setGiteaUrl] = useState("");
  const [giteaToken, setGiteaToken] = useState("");
  const [giteaOwner, setGiteaOwner] = useState("");
  const [giteaRepo, setGiteaRepo] = useState("");
-  const [mdTemplate, setMdTemplate] = useState(DEFAULT_TEMPLATE);
-  const [saved, setSaved] = useState(false);
+  // GitHub
+  const [githubToken, setGithubToken] = useState("");
+  const [githubOwner, setGithubOwner] = useState("");
+  const [githubRepo, setGithubRepo] = useState("");
+  // GitLab
+  const [gitlabUrl, setGitlabUrl] = useState("");
+  const [gitlabToken, setGitlabToken] = useState("");
+  const [gitlabOwner, setGitlabOwner] = useState("");
+  const [gitlabRepo, setGitlabRepo] = useState("");

  useEffect(() => {
    (async () => {
-      const [im, hv, ai, key, gu, gt, go, gr, tpl] = await Promise.all([
-        SecureStore.getItemAsync(KEYS.INPUT_MODE),
-        SecureStore.getItemAsync(KEYS.HOME_VIEW),
-        SecureStore.getItemAsync(KEYS.AI_ENABLED),
-        SecureStore.getItemAsync(KEYS.AI_KEY),
-        SecureStore.getItemAsync(KEYS.GITEA_URL),
-        SecureStore.getItemAsync(KEYS.GITEA_TOKEN),
-        SecureStore.getItemAsync(KEYS.GITEA_OWNER),
-        SecureStore.getItemAsync(KEYS.GITEA_REPO),
-        SecureStore.getItemAsync(KEYS.MD_TEMPLATE),
-      ]);
+      const [im, hv, ai, key, tpl, gp, gu, gt, go, gr, ghu, ghown, ghrepo, glu, glt, glo, glr] =
+        await Promise.all([
+          SecureStore.getItemAsync(KEYS.INPUT_MODE),
+          SecureStore.getItemAsync(KEYS.HOME_VIEW),
+          SecureStore.getItemAsync(KEYS.AI_ENABLED),
+          SecureStore.getItemAsync(KEYS.AI_KEY),
+          SecureStore.getItemAsync(KEYS.MD_TEMPLATE),
+          SecureStore.getItemAsync(KEYS.GIT_PROVIDER),
+          SecureStore.getItemAsync(KEYS.GITEA_URL),
+          SecureStore.getItemAsync(KEYS.GITEA_TOKEN),
+          SecureStore.getItemAsync(KEYS.GITEA_OWNER),
+          SecureStore.getItemAsync(KEYS.GITEA_REPO),
+          SecureStore.getItemAsync(KEYS.GITHUB_TOKEN),
+          SecureStore.getItemAsync(KEYS.GITHUB_OWNER),
+          SecureStore.getItemAsync(KEYS.GITHUB_REPO),
+          SecureStore.getItemAsync(KEYS.GITLAB_URL),
+          SecureStore.getItemAsync(KEYS.GITLAB_TOKEN),
+          SecureStore.getItemAsync(KEYS.GITLAB_OWNER),
+          SecureStore.getItemAsync(KEYS.GITLAB_REPO),
+        ]);
      if (im) setInputMode(im as "voice" | "form");
      if (hv) setHomeView(hv as "dashboard" | "capture");
      if (ai) setAiEnabled(ai === "true");
      if (key) setAiKey(key);
+      if (tpl) setMdTemplate(tpl);
+      if (gp) setGitProvider(gp as GitProvider);
      if (gu) setGiteaUrl(gu);
      if (gt) setGiteaToken(gt);
      if (go) setGiteaOwner(go);
      if (gr) setGiteaRepo(gr);
-      if (tpl) setMdTemplate(tpl);
+      if (ghu) setGithubToken(ghu);
+      if (ghown) setGithubOwner(ghown);
+      if (ghrepo) setGithubRepo(ghrepo);
+      if (glu) setGitlabUrl(glu);
+      if (glt) setGitlabToken(glt);
+      if (glo) setGitlabOwner(glo);
+      if (glr) setGitlabRepo(glr);
    })();
  }, []);

@@ -96,11 +143,19 @@ export default function SettingsScreen() {
      SecureStore.setItemAsync(KEYS.HOME_VIEW, homeView),
      SecureStore.setItemAsync(KEYS.AI_ENABLED, String(aiEnabled)),
      SecureStore.setItemAsync(KEYS.AI_KEY, aiKey),
+      SecureStore.setItemAsync(KEYS.MD_TEMPLATE, mdTemplate),
+      SecureStore.setItemAsync(KEYS.GIT_PROVIDER, gitProvider),
      SecureStore.setItemAsync(KEYS.GITEA_URL, giteaUrl),
      SecureStore.setItemAsync(KEYS.GITEA_TOKEN, giteaToken),
      SecureStore.setItemAsync(KEYS.GITEA_OWNER, giteaOwner),
      SecureStore.setItemAsync(KEYS.GITEA_REPO, giteaRepo),
-      SecureStore.setItemAsync(KEYS.MD_TEMPLATE, mdTemplate),
+      SecureStore.setItemAsync(KEYS.GITHUB_TOKEN, githubToken),
+      SecureStore.setItemAsync(KEYS.GITHUB_OWNER, githubOwner),
+      SecureStore.setItemAsync(KEYS.GITHUB_REPO, githubRepo),
+      SecureStore.setItemAsync(KEYS.GITLAB_URL, gitlabUrl),
+      SecureStore.setItemAsync(KEYS.GITLAB_TOKEN, gitlabToken),
+      SecureStore.setItemAsync(KEYS.GITLAB_OWNER, gitlabOwner),
+      SecureStore.setItemAsync(KEYS.GITLAB_REPO, gitlabRepo),
    ]);
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
@@ -171,8 +226,8 @@ export default function SettingsScreen() {
            >
              <Text
                style={{
-                  color: value === opt.key ? "#fff" : Colors.text2,
-                  fontWeight: "600",
+                  color: value === opt.key ? Colors.bg : Colors.text2,
+                  fontWeight: "700",
                  fontSize: 13,
                }}
              >
@@ -185,6 +240,38 @@ export default function SettingsScreen() {
    );
  }

+  function Field({
+    label,
+    value,
+    onChange,
+    placeholder,
+    secure,
+    url,
+  }: {
+    label: string;
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+    secure?: boolean;
+    url?: boolean;
+  }) {
+    return (
+      <>
+        <Text style={LABEL}>{label}</Text>
+        <TextInput
+          style={INPUT}
+          value={value}
+          onChangeText={onChange}
+          placeholder={placeholder}
+          placeholderTextColor={Colors.textDim}
+          secureTextEntry={secure}
+          autoCapitalize="none"
+          keyboardType={url ? "url" : "default"}
+        />
+      </>
+    );
+  }
+
  return (
    <ScrollView
      style={{ flex: 1, backgroundColor: Colors.bg }}
@@ -220,59 +307,126 @@ export default function SettingsScreen() {
        onValueChange={setAiEnabled}
      />
      {aiEnabled && (
+        <Field
+          label="API Key"
+          value={aiKey}
+          onChange={setAiKey}
+          placeholder="sk-..."
+          secure
+        />
+      )}
+
+      <Text style={SECTION_TITLE}>Git Repository</Text>
+
+      <SegmentRow
+        label="Provider"
+        value={gitProvider}
+        onChange={(v) => setGitProvider(v as GitProvider)}
+        options={(["gitea", "github", "gitlab"] as GitProvider[]).map((p) => ({
+          key: p,
+          label: PROVIDER_LABELS[p],
+        }))}
+      />
+
+      {gitProvider === "gitea" && (
        <>
-          <Text style={LABEL}>API Key</Text>
-          <TextInput
-            style={INPUT}
-            value={aiKey}
-            onChangeText={setAiKey}
-            placeholder="sk-..."
-            placeholderTextColor={Colors.textDim}
-            secureTextEntry
-            autoCapitalize="none"
+          <Field
+            label="Instance URL"
+            value={giteaUrl}
+            onChange={setGiteaUrl}
+            placeholder="https://homegit.example.com"
+            url
+          />
+          <Field
+            label="Token"
+            value={giteaToken}
+            onChange={setGiteaToken}
+            placeholder="Bearer token"
+            secure
+          />
+          <Field
+            label="Owner"
+            value={giteaOwner}
+            onChange={setGiteaOwner}
+            placeholder="username or org"
+          />
+          <Field
+            label="Repository"
+            value={giteaRepo}
+            onChange={setGiteaRepo}
+            placeholder="incidents"
          />
        </>
      )}

-      <Text style={SECTION_TITLE}>Gitea</Text>
-      <Text style={LABEL}>Instance URL</Text>
-      <TextInput
-        style={INPUT}
-        value={giteaUrl}
-        onChangeText={setGiteaUrl}
-        placeholder="https://homegit.gyozamancave.fr"
-        placeholderTextColor={Colors.textDim}
-        autoCapitalize="none"
-        keyboardType="url"
-      />
-      <Text style={LABEL}>Token</Text>
-      <TextInput
-        style={INPUT}
-        value={giteaToken}
-        onChangeText={setGiteaToken}
-        placeholder="Bearer token"
-        placeholderTextColor={Colors.textDim}
-        secureTextEntry
-        autoCapitalize="none"
-      />
-      <Text style={LABEL}>Owner</Text>
-      <TextInput
-        style={INPUT}
-        value={giteaOwner}
-        onChangeText={setGiteaOwner}
-        placeholder="username or org"
-        placeholderTextColor={Colors.textDim}
-        autoCapitalize="none"
-      />
-      <Text style={LABEL}>Repository</Text>
-      <TextInput
-        style={INPUT}
-        value={giteaRepo}
-        onChangeText={setGiteaRepo}
-        placeholder="incidents"
-        placeholderTextColor={Colors.textDim}
-        autoCapitalize="none"
-      />
+      {gitProvider === "github" && (
+        <>
+          <View
+            style={{
+              backgroundColor: Colors.surface,
+              borderRadius: 8,
+              padding: 12,
+              marginBottom: 14,
+              borderLeftWidth: 3,
+              borderLeftColor: Colors.primary,
+            }}
+          >
+            <Text style={{ color: Colors.text2, fontSize: 13 }}>
+              Uses api.github.com — no instance URL required.
+            </Text>
+          </View>
+          <Field
+            label="Personal Access Token"
+            value={githubToken}
+            onChange={setGithubToken}
+            placeholder="ghp_..."
+            secure
+          />
+          <Field
+            label="Owner (username or org)"
+            value={githubOwner}
+            onChange={setGithubOwner}
+            placeholder="your-username"
+          />
+          <Field
+            label="Repository"
+            value={githubRepo}
+            onChange={setGithubRepo}
+            placeholder="incidents"
+          />
+        </>
+      )}
+
+      {gitProvider === "gitlab" && (
+        <>
+          <Field
+            label="Instance URL"
+            value={gitlabUrl}
+            onChange={setGitlabUrl}
+            placeholder="https://gitlab.com"
+            url
+          />
+          <Field
+            label="Personal Access Token"
+            value={gitlabToken}
+            onChange={setGitlabToken}
+            placeholder="glpat-..."
+            secure
+          />
+          <Field
+            label="Namespace (user or group)"
+            value={gitlabOwner}
+            onChange={setGitlabOwner}
+            placeholder="your-username"
+          />
+          <Field
+            label="Repository"
+            value={gitlabRepo}
+            onChange={setGitlabRepo}
+            placeholder="incidents"
+          />
+        </>
+      )}

      <Text style={SECTION_TITLE}>Markdown Template</Text>
      <TextInput
@@ -294,7 +448,7 @@ export default function SettingsScreen() {
          marginTop: 8,
        }}
      >
-        <Text style={{ color: "#fff", fontSize: 16, fontWeight: "700" }}>
+        <Text style={{ color: Colors.bg, fontSize: 16, fontWeight: "700" }}>
          {saved ? "Saved ✓" : "Save Settings"}
        </Text>
      </Pressable>