slint::slint! {
    import { Button, ComboBox, LineEdit, ListView, Palette, ScrollView, Spinner } from "std-widgets.slint";

    export struct ServerRow { name: string, url: string }
    export struct RepositoryRow {
        name: string, owner: string, description: string, meta: string, favorite: bool,
    }
    export struct LabelRow { name: string, background: color, foreground: color }
    export struct IssueRow {
        number: int, title: string, summary: string, meta: string, labels: [LabelRow],
    }
    export struct PullRow {
        number: int, owner: string, repository: string, title: string, summary: string, meta: string,
    }
    export struct MarkdownBlock { text: styled-text, kind: string }
    export struct CommentRow { author: string, body: [MarkdownBlock], meta: string }
    export struct GraphLane { color: color, top: bool, bottom: bool, node: bool, connect_left: bool }
    export struct CommitRow {
        sha: string, title: string, meta: string, refs: string, lanes: [GraphLane],
    }
    export struct FileRow { path: string, status: string }
    export struct ActivityRow {
        icon: string, title: string, detail: string, meta: string,
        target: string, owner: string, repository: string, number: int, sha: string,
    }
    export struct DiffLine { old_number: string, new_number: string, text: string, kind: string }
    export struct HeatCell { week: int, day: int, level: int }

    export global IconTheme {
        in-out property <int> style: 0;
    }

    export global AppTheme {
        in-out property <int> mode: 0;
        private property <color> system-background: Palette.background;
        out property <bool> dark: mode == 2 || (mode == 0 && system-background.to-oklch().lightness < 0.5);
        out property <color> accent: dark ? #0a84ff : #0879e1;
        out property <color> accent-soft: dark ? #17324d : #e5f2fd;
        out property <color> page: dark ? #1c1c1e : #f2f2f7;
        out property <color> surface: dark ? #2c2c2e : #ffffff;
        out property <color> surface-muted: dark ? #3a3a3c : #f5f5f8;
        out property <color> header: dark ? #242426 : #f8f8fa;
        out property <color> toolbar: dark ? #242426 : #fbfbfc;
        out property <color> border: dark ? #48484a : #dedee3;
        out property <color> separator: dark ? #3a3a3c : #d8d8dd;
        out property <color> text: dark ? #f2f2f7 : #17171a;
        out property <color> text-secondary: dark ? #c7c7cc : #5f5f66;
        out property <color> text-tertiary: dark ? #8e8e93 : #85858c;
        out property <color> code-background: dark ? #242426 : #e9e9ed;
        out property <color> quote-background: dark ? #242426 : #f6f6f8;
        out property <color> loading-overlay: dark ? #00000088 : #ffffff88;
        changed mode => {
            Palette.color-scheme = mode == 1 ? ColorScheme.light : mode == 2 ? ColorScheme.dark : ColorScheme.unknown;
        }
    }

    component AppIcon inherits Rectangle {
        in property <string> kind;
        in property <int> style: IconTheme.style;
        in property <color> icon-color: AppTheme.accent;
        background: transparent;

        private property <bool> duotone: root.style == 1;
        private property <bool> bold: root.style == 2;
        private property <bool> issue-kind: root.kind == "issues" || root.kind == "issue-open" || root.kind == "issue-close" || root.kind == "issue-reopen" || root.kind == "issue-comment";
        private property <bool> repository-kind: root.kind == "repositories" || root.kind == "repo-create" || root.kind == "repo-rename" || root.kind == "repo-star" || root.kind == "repo-watch" || root.kind == "update";
        private property <bool> pull-kind: root.kind == "pulls" || root.kind == "pull-open" || root.kind == "pull-merge" || root.kind == "pull-close" || root.kind == "pull-reopen" || root.kind == "pull-comment" || root.kind == "pull-approve" || root.kind == "pull-reject";
        private property <bool> tag-kind: root.kind == "tag-push" || root.kind == "tag-delete";
        private property <bool> branch-kind: root.kind == "branch-create" || root.kind == "branch-delete";
        private property <bool> closed-shape: root.kind == "home" || root.issue-kind || root.repository-kind || root.kind == "favorite" || root.kind == "favorite-filled" || root.tag-kind || root.kind == "release";
        private property <bool> has-badge: root.kind == "branch-create" || root.kind == "branch-delete" || root.kind == "push" || root.kind == "repo-create" || root.kind == "repo-rename" || root.kind == "repo-star" || root.kind == "repo-watch" || root.kind == "update" || root.kind == "issue-open" || root.kind == "issue-close" || root.kind == "issue-reopen" || root.kind == "issue-comment" || root.kind == "pull-open" || root.kind == "pull-merge" || root.kind == "pull-close" || root.kind == "pull-reopen" || root.kind == "pull-comment" || root.kind == "pull-approve" || root.kind == "pull-reject" || root.kind == "tag-push" || root.kind == "tag-delete";
        private property <bool> positive: root.kind == "issue-close" || root.kind == "pull-merge" || root.kind == "pull-approve";
        private property <bool> destructive: root.kind == "branch-delete" || root.kind == "pull-close" || root.kind == "pull-reject" || root.kind == "tag-delete";
        private property <color> badge-color: root.positive ? #20a866 : root.destructive ? #e45b4d : root.duotone ? #26bfd1 : root.icon-color;
        private property <string> shape: root.kind == "home"
            ? "M3 10.5 L12 3 L21 10.5 V21 H15 V14 H9 V21 H3 Z"
            : root.issue-kind
            ? "M4 5 H20 V9 C18 9 18 15 20 15 V19 H4 V15 C6 15 6 9 4 9 Z"
            : root.repository-kind
            ? "M6 3 H18 C19.1 3 20 3.9 20 5 V21 H6 C4.9 21 4 20.1 4 19 V5 C4 3.9 4.9 3 6 3 Z"
            : root.pull-kind
            ? "M7 4 V20 M17 4 V11 C17 15 14 17 10 17 M7 4 H7 M17 4 H17"
            : root.kind == "settings"
            ? "M12 3 V6 M12 18 V21 M3 12 H6 M18 12 H21 M5.6 5.6 L7.8 7.8 M16.2 16.2 L18.4 18.4 M18.4 5.6 L16.2 7.8 M7.8 16.2 L5.6 18.4"
            : root.kind == "back"
            ? (root.bold ? "M16 4 L7 12 L16 20 Z" : "M16 4 L7 12 L16 20")
            : root.kind == "filter"
            ? (root.bold ? "M3 5 H21 L14 13 V20 L10 22 V13 Z" : "M4 6 H20 M4 12 H20 M4 18 H20")
            : root.kind == "favorite" || root.kind == "favorite-filled"
            ? "M12 3 L14.8 8.7 L21 9.6 L16.5 14 L17.6 20.3 L12 17.3 L6.4 20.3 L7.5 14 L3 9.6 L9.2 8.7 Z"
            : root.kind == "disclosure"
            ? (root.bold ? "M8 4 L17 12 L8 20 Z" : "M8 4 L17 12 L8 20")
            : root.branch-kind
            ? "M7 4 V20 M7 11 C11 11 14 9 14 5"
            : root.kind == "push"
            ? "M4 8 H13 M4 12 H13 M4 16 H13"
            : root.tag-kind
            ? "M3 5 V13 L11 21 L21 11 L13 3 H5 C3.9 3 3 3.9 3 5 Z"
            : root.kind == "release"
            ? "M4 8 L12 4 L20 8 V18 L12 22 L4 18 Z"
            : "M12 4 V20 M4 12 H20";
        private property <string> detail: root.kind == "home"
            ? "M9 21 V14 H15 V21"
            : root.issue-kind
            ? "M12 8 V13 M12 16.5 V17"
            : root.repository-kind
            ? "M7 3 V21 M11 9 L8.5 12 L11 15 M15 9 L17.5 12 L15 15"
            : root.pull-kind
            ? "M7 4 A1.8 1.8 0 1 1 6.99 4 M7 20 A1.8 1.8 0 1 1 6.99 20 M17 4 A1.8 1.8 0 1 1 16.99 4"
            : root.kind == "settings"
            ? "M12 8 A4 4 0 1 1 11.99 8"
            : root.kind == "filter" && !root.bold
            ? "M9 4 V8 M15 10 V14 M8 16 V20"
            : root.tag-kind
            ? "M8 8 A1.5 1.5 0 1 1 7.99 8"
            : root.kind == "release"
            ? "M12 18 V8 M9 11 L12 8 L15 11 M7 6 V3 M17 6 V3"
            : "";
        private property <string> badge-detail: root.kind == "branch-create" || root.kind == "repo-create" || root.kind == "issue-open" || root.kind == "pull-open"
            ? "M18 15.5 V20.5 M15.5 18 H20.5"
            : root.kind == "issue-close" || root.kind == "pull-merge" || root.kind == "pull-approve"
            ? "M15.4 18 L17.2 19.8 L20.7 16.2"
            : root.kind == "branch-delete" || root.kind == "tag-delete"
            ? "M15.3 18 H20.7"
            : root.kind == "pull-close" || root.kind == "pull-reject"
            ? "M16 16 L20 20 M20 16 L16 20"
            : root.kind == "push" || root.kind == "tag-push"
            ? "M18 20.5 V15.5 M15.7 17.8 L18 15.5 L20.3 17.8"
            : root.kind == "repo-rename"
            ? "M15.3 20.6 L16 18 L19.7 14.3 L21.7 16.3 L18 20 Z"
            : root.kind == "repo-star"
            ? "M18 14.5 L19 16.7 L21.4 17 L19.6 18.7 L20.1 21 L18 19.8 L15.9 21 L16.4 18.7 L14.6 17 L17 16.7 Z"
            : root.kind == "repo-watch"
            ? "M14.5 18 C16.3 15.8 19.7 15.8 21.5 18 C19.7 20.2 16.3 20.2 14.5 18 M18 17 A1 1 0 1 1 17.99 17"
            : root.kind == "issue-reopen" || root.kind == "pull-reopen"
            ? "M20.8 17 A3 3 0 1 0 20.2 20.3 M20.8 17 H18.5 M20.8 17 V19.3"
            : root.kind == "issue-comment" || root.kind == "pull-comment"
            ? "M15.5 17 H20.5 V20 H18 L16 21 V20 H15.5 Z M17 18.5 H17.1 M19 18.5 H19.1"
            : root.kind == "update"
            ? "M18 14.8 L18.8 17.2 L21.2 18 L18.8 18.8 L18 21.2 L17.2 18.8 L14.8 18 L17.2 17.2 Z"
            : "";

        Path {
            width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
            commands: root.shape;
            fill: root.closed-shape ? (root.bold || root.kind == "favorite-filled" ? root.icon-color : root.duotone ? #26bfd133 : transparent) : transparent;
            stroke: root.closed-shape && (root.bold || root.kind == "favorite-filled") ? transparent : root.icon-color;
            stroke-width: root.bold ? 3px : root.duotone ? 2.2px : 1.8px;
            stroke-line-cap: round; stroke-line-join: round;
        }
        if root.detail != "": Path {
            width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
            commands: root.detail; fill: transparent;
            stroke: root.bold && root.closed-shape ? #ffffff : root.icon-color;
            stroke-width: root.bold ? 2.4px : 1.8px;
            stroke-line-cap: round; stroke-line-join: round;
        }
        if root.has-badge: Path {
            width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
            commands: "M18 13.5 A4.5 4.5 0 1 1 17.99 13.5 Z";
            fill: root.style == 0 ? AppTheme.surface : root.badge-color;
            stroke: root.style == 0 ? root.badge-color : #ffffff;
            stroke-width: root.style == 2 ? 1.5px : 1.2px;
        }
        if root.has-badge: Path {
            width: 100%; height: 100%; viewbox-width: 24; viewbox-height: 24;
            commands: root.badge-detail; fill: root.style == 0 ? transparent : #ffffff;
            stroke: root.style == 0 ? root.badge-color : #ffffff;
            stroke-width: root.bold ? 2px : 1.6px;
            stroke-line-cap: round; stroke-line-join: round;
        }
    }

    component IconStyleChoice inherits Rectangle {
        in property <int> value;
        in property <string> label;
        callback clicked();
        background: IconTheme.style == root.value ? AppTheme.accent-soft : AppTheme.surface-muted;
        border-color: IconTheme.style == root.value ? AppTheme.accent : AppTheme.border;
        border-width: IconTheme.style == root.value ? 2px : 1px;
        border-radius: 11px;
        TouchArea { clicked => { root.clicked(); } }
        AppIcon { x: (parent.width - 30px) / 2; y: 10px; width: 30px; height: 30px; kind: "repositories"; style: root.value; }
        Text { y: 48px; width: 100%; text: root.label; font-size: 12px; font-weight: IconTheme.style == root.value ? 650 : 500; color: AppTheme.text; horizontal-alignment: center; }
    }

    component AppearanceChoice inherits Rectangle {
        in property <int> value;
        in property <string> label;
        callback clicked();
        background: AppTheme.mode == root.value ? AppTheme.accent-soft : AppTheme.surface-muted;
        border-color: AppTheme.mode == root.value ? AppTheme.accent : AppTheme.border;
        border-width: AppTheme.mode == root.value ? 2px : 1px;
        border-radius: 11px;
        TouchArea { clicked => { root.clicked(); } }
        Text {
            width: 100%; height: 100%; text: root.label;
            font-size: 14px; font-weight: AppTheme.mode == root.value ? 650 : 500;
            color: AppTheme.mode == root.value ? AppTheme.accent : AppTheme.text;
            horizontal-alignment: center; vertical-alignment: center;
        }
    }

    component Header inherits Rectangle {
        in property <string> title;
        in property <bool> can_back;
        in property <bool> can_filter: false;
        callback back();
        callback filter();
        height: 58px;
        width: 100%;
        background: AppTheme.header;
        border-color: AppTheme.border;
        border-width: 0px;

        if can_back: TouchArea {
            x: 8px; width: 54px;
            clicked => { root.back(); }
            AppIcon { x: 7px; y: 17px; width: 24px; height: 24px; kind: "back"; }
        }
        Text {
            x: root.can_back || root.can_filter ? 62px : 12px;
            width: parent.width - 2 * self.x;
            text: root.title;
            horizontal-alignment: center;
            vertical-alignment: center;
            font-size: 18px;
            font-weight: 600;
            color: AppTheme.text;
            overflow: elide;
        }
        if can_filter: TouchArea {
            x: parent.width - 58px; width: 58px;
            clicked => { root.filter(); }
            AppIcon { x: 17px; y: 17px; width: 24px; height: 24px; kind: "filter"; }
        }
        Rectangle { y: parent.height - 1px; height: 1px; background: AppTheme.border; }
    }

    component EdgeBack inherits SwipeGestureHandler {
        callback back();
        width: 24px;
        height: 100%;
        handle-swipe-right: true;
        swiped => { root.back(); }
    }

    component EmptyState inherits VerticalLayout {
        in property <string> title;
        in property <string> detail;
        alignment: center;
        spacing: 8px;
        Text { text: root.title; font-size: 21px; font-weight: 600; horizontal-alignment: center; color: AppTheme.text; }
        Text { text: root.detail; font-size: 15px; horizontal-alignment: center; wrap: word-wrap; color: AppTheme.text-secondary; }
    }

    component MarkdownContent inherits VerticalLayout {
        in property <[MarkdownBlock]> blocks;
        spacing: 8px;

        for block in root.blocks: Rectangle {
            height: block.kind == "rule" ? 9px : rendered.preferred-height + (block.kind == "code" || block.kind == "table" ? 16px : 0px);
            background: block.kind == "code" || block.kind == "table" ? AppTheme.code-background : block.kind == "quote" ? AppTheme.quote-background : transparent;
            border-radius: block.kind == "code" || block.kind == "table" ? 7px : 0px;
            if block.kind == "quote": Rectangle { width: 3px; height: 100%; background: AppTheme.text-tertiary; border-radius: 2px; }
            if block.kind == "rule": Rectangle { y: 4px; width: 100%; height: 1px; background: AppTheme.separator; }
            rendered := StyledText {
                x: block.kind == "code" || block.kind == "table" ? 8px : block.kind == "quote" ? 11px : 0px;
                y: block.kind == "code" || block.kind == "table" ? 8px : 0px;
                width: parent.width - self.x - (block.kind == "code" || block.kind == "table" ? 8px : 0px);
                text: block.text;
                default-color: AppTheme.text;
                link-color: AppTheme.accent;
                default-font-family: block.kind == "code" || block.kind == "table" ? "monospace" : "";
                default-font-size: block.kind == "heading1" ? 24px : block.kind == "heading2" ? 21px : block.kind == "heading3" ? 19px : block.kind == "heading4" ? 17px : 16px;
            }
        }
    }

    component CommentCard inherits Rectangle {
        in property <CommentRow> comment;
        height: content.preferred-height + 24px;
        background: AppTheme.surface;
        border-radius: 10px;
        content := VerticalLayout {
            x: 12px; y: 10px; width: parent.width - 24px;
            spacing: 5px;
            Text { text: root.comment.author; font-size: 13px; font-weight: 600; color: AppTheme.text; }
            MarkdownContent { width: parent.width; blocks: root.comment.body; }
            Text { text: root.comment.meta; font-size: 11px; color: AppTheme.text-tertiary; }
        }
    }

    component FileCard inherits Rectangle {
        in property <FileRow> file;
        callback clicked();
        height: 66px;
        background: AppTheme.surface;
        border-color: AppTheme.border;
        border-width: 1px;
        border-radius: 10px;
        TouchArea { clicked => { root.clicked(); } }
        Text { x: 13px; y: 10px; width: parent.width - 26px; text: root.file.path; font-size: 14px; font-weight: 600; color: AppTheme.text; overflow: elide; }
        Text { x: 13px; y: 38px; width: parent.width - 26px; text: root.file.status; font-size: 12px; color: AppTheme.text-secondary; }
    }

    component TabButton inherits Rectangle {
        in property <string> kind;
        in property <string> label;
        in property <bool> active;
        private property <length> icon-area-height: root.height * 3 / 4;
        private property <length> icon-size: min(42px, self.icon-area-height - 6px);
        callback clicked();
        background: transparent;
        TouchArea { clicked => { root.clicked(); } }
        AppIcon {
            x: (parent.width - root.icon-size) / 2;
            y: (root.icon-area-height - root.icon-size) / 2;
            width: root.icon-size; height: root.icon-size;
            kind: root.kind; icon-color: root.active ? AppTheme.accent : AppTheme.text-tertiary;
        }
        Text {
            y: root.icon-area-height; height: parent.height - self.y; width: 100%; text: root.label;
            color: root.active ? AppTheme.accent : AppTheme.text-tertiary; font-size: 9px;
            font-weight: root.active ? 600 : 400;
            horizontal-alignment: center; vertical-alignment: center;
        }
    }

    component PullToRefreshGesture inherits SwipeGestureHandler {
        in property <bool> at_top;
        in property <bool> refreshing;
        callback refresh();
        enabled: root.at_top && !root.refreshing;
        handle-swipe-down: true;
        swiped => { root.refresh(); }
        @children
        if self.swiping: Rectangle {
            x: (parent.width - 142px) / 2; y: 8px; width: 142px; height: 32px;
            background: AppTheme.surface-muted; border-radius: 16px;
            Text { text: "Release to refresh"; font-size: 12px; color: AppTheme.text-secondary; horizontal-alignment: center; vertical-alignment: center; }
        }
    }

    export component AppWindow inherits Window {
        title: "Gotcha";
        preferred-width: 390px;
        preferred-height: 844px;
        background: AppTheme.page;
        private property <length> toolbar-height: 68px;

        in-out property <string> tab: "home";
        in-out property <string> page: "servers";
        in-out property <[ServerRow]> servers;
        in-out property <[RepositoryRow]> repositories;
        in-out property <[IssueRow]> issues;
        in-out property <[PullRow]> pulls;
        in-out property <[CommentRow]> comments;
        in-out property <[CommitRow]> commits;
        in-out property <[FileRow]> files;
        in-out property <[ActivityRow]> activities;
        in-out property <[HeatCell]> heat_cells;
        in-out property <int> contribution_count;
        in-out property <bool> has_active_server;
        in-out property <string> home_server;
        in-out property <string> server_title;
        in-out property <string> repository_title;
        in-out property <string> issue_title;
        in-out property <string> issue_meta;
        in-out property <[MarkdownBlock]> issue_body;
        in-out property <string> detail_title;
        in-out property <string> detail_meta;
        in-out property <string> detail_files_ref;
        in-out property <[MarkdownBlock]> detail_body;
        in-out property <[DiffLine]> diff_lines;
        in-out property <int> diff_columns;
        in-out property <string> issue_filter: "open";
        in-out property <string> pull_filter: "open";
        in-out property <[string]> branch_choices;
        in-out property <int> branch_index;
        in-out property <bool> filter_open;
        in-out property <bool> loading;
        in-out property <bool> home_loading;
        in-out property <bool> refreshing;
        in-out property <string> error;
        in-out property <int> home_scroll_request;
        in-out property <int> servers_scroll_request;
        in-out property <int> repositories_scroll_request;
        in-out property <int> issues_scroll_request;
        in-out property <int> issue_scroll_request;
        private property <bool> home_at_top: true;
        private property <bool> repositories_at_top: true;
        private property <bool> issues_at_top: true;
        private property <bool> issue_at_top: true;

        callback select_tab(string);
        callback refresh_home();
        callback refresh_repositories();
        callback refresh_issues();
        callback refresh_issue();
        callback refresh_pulls();
        callback refresh_pull();
        callback refresh_commits();
        callback show_add_server();
        callback save_server(string, string, string);
        callback select_server(int);
        callback select_repository(string, string);
        callback toggle_favorite(string, string);
        callback select_issue(int);
        callback select_pull(string, string, int);
        callback select_commit(string);
        callback select_branch(string);
        callback select_file(string);
        callback select_pull_file(string);
        callback select_activity(string, string, string, int, string);
        callback choose_filter(string);
        callback choose_icon_style(int);
        callback choose_appearance(int);
        callback back();

        if tab == "home": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: root.has_active_server ? root.home_server : "Home"; can_back: false; }

            if !root.has_active_server: EmptyState {
                x: 32px; width: parent.width - 64px; y: 210px; height: 190px;
                title: "No server selected";
                detail: "Open Issues to select a server or add your first one.";
            }

            if root.has_active_server: Rectangle {
                x: 16px; y: 72px; width: parent.width - 32px; height: 118px;
                background: AppTheme.surface; border-radius: 12px;
                Text { x: 13px; y: 10px; text: "Activity · last 12 months"; font-size: 13px; font-weight: 600; color: AppTheme.text; }
                Text { x: 13px; y: 86px; text: root.contribution_count + " contributions"; font-size: 12px; color: AppTheme.text-secondary; }
                for cell in root.heat_cells: Rectangle {
                    x: 13px + cell.week * 6.7px; y: 39px + cell.day * 6.2px;
                    width: 5.2px; height: 5.2px; border-radius: 1px;
                    background: cell.level == 0 ? (AppTheme.dark ? #3a3a3c : #e5e5e9) : cell.level == 1 ? #b8d9f4 : cell.level == 2 ? #72b5e8 : cell.level == 3 ? #278bd4 : #0969b7;
                }
            }

            if root.has_active_server && !root.home_loading && root.activities.length == 0: EmptyState {
                x: 32px; width: parent.width - 64px; y: 250px; height: 150px;
                title: "No recent activity";
                detail: "Your recent server actions will appear here.";
            }

            if root.has_active_server: PullToRefreshGesture {
                x: 16px; y: 202px; width: parent.width - 32px; height: parent.height - 214px;
                at_top: root.home_at_top; refreshing: root.home_loading;
                refresh => { root.refresh_home(); }
                home_list := ListView {
                    property <int> scroll_request: root.home_scroll_request;
                    width: 100%; height: 100%; mouse-drag-pan-enabled: true;
                    changed scroll_request => { self.viewport-y = 0px; root.home_at_top = true; }
                    scrolled => { root.home_at_top = self.viewport-y >= 0px; }
                    for activity in root.activities: Rectangle {
                        height: 94px;
                        background: AppTheme.surface; border-radius: 12px;
                        TouchArea {
                            enabled: activity.target != "";
                            clicked => { root.select_activity(activity.target, activity.owner, activity.repository, activity.number, activity.sha); }
                        }
                        Rectangle {
                            x: 12px; y: 14px; width: 34px; height: 34px; border-radius: 17px;
                            background: AppTheme.accent-soft;
                            AppIcon { x: 5px; y: 5px; width: 24px; height: 24px; kind: activity.icon; }
                        }
                        Text { x: 57px; y: 11px; width: parent.width - 69px; height: 24px; text: activity.title; font-size: 15px; font-weight: 600; color: AppTheme.text; overflow: elide; }
                        Text { x: 57px; y: 36px; width: parent.width - 69px; height: 35px; text: activity.detail; font-size: 13px; color: AppTheme.text-secondary; wrap: word-wrap; overflow: elide; }
                        Text { x: 57px; y: 72px; width: parent.width - 69px; text: activity.meta; font-size: 11px; color: AppTheme.text-tertiary; overflow: elide; }
                    }
                }
            }

            if root.home_loading: Spinner { width: 34px; height: 34px; x: (parent.width - self.width) / 2; y: 222px; }
        }

        if tab == "settings": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header {
                x: 0; y: 0; can_back: false;
                title: "Settings";
            }
            Rectangle {
                x: 16px; y: 76px; width: parent.width - 32px; height: 184px;
                background: AppTheme.surface; border-radius: 12px;
                Text { x: 15px; y: 13px; text: "Icon style"; font-size: 18px; font-weight: 650; color: AppTheme.text; }
                Text { x: 15px; y: 43px; width: parent.width - 30px; text: "Choose how navigation and activity icons look throughout Gotcha."; font-size: 13px; color: AppTheme.text-secondary; wrap: word-wrap; }
                IconStyleChoice { x: 12px; y: 91px; width: (parent.width - 36px) / 3; height: 78px; value: 0; label: "Outline"; clicked => { root.choose_icon_style(0); } }
                IconStyleChoice { x: 18px + (parent.width - 36px) / 3; y: 91px; width: (parent.width - 36px) / 3; height: 78px; value: 1; label: "Duotone"; clicked => { root.choose_icon_style(1); } }
                IconStyleChoice { x: 24px + 2 * (parent.width - 36px) / 3; y: 91px; width: (parent.width - 36px) / 3; height: 78px; value: 2; label: "Bold"; clicked => { root.choose_icon_style(2); } }
            }
            Rectangle {
                x: 16px; y: 276px; width: parent.width - 32px; height: 136px;
                background: AppTheme.surface; border-radius: 12px;
                Text { x: 15px; y: 13px; text: "Appearance"; font-size: 18px; font-weight: 650; color: AppTheme.text; }
                Text { x: 15px; y: 43px; width: parent.width - 30px; text: "Follow iOS automatically or choose a fixed light or dark appearance."; font-size: 13px; color: AppTheme.text-secondary; wrap: word-wrap; }
                AppearanceChoice { x: 12px; y: 81px; width: (parent.width - 36px) / 3; height: 42px; value: 0; label: "Auto"; clicked => { root.choose_appearance(0); } }
                AppearanceChoice { x: 18px + (parent.width - 36px) / 3; y: 81px; width: (parent.width - 36px) / 3; height: 42px; value: 1; label: "Light"; clicked => { root.choose_appearance(1); } }
                AppearanceChoice { x: 24px + 2 * (parent.width - 36px) / 3; y: 81px; width: (parent.width - 36px) / 3; height: 42px; value: 2; label: "Dark"; clicked => { root.choose_appearance(2); } }
            }
        }

        if (tab == "issues" || tab == "repositories") && page == "servers": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: "Servers"; can_back: false; }
            if root.servers.length > 0: servers_list := ListView {
                property <int> scroll_request: root.servers_scroll_request;
                x: 16px; y: 76px; width: parent.width - 32px; height: parent.height - 154px;
                mouse-drag-pan-enabled: true;
                changed scroll_request => { self.viewport-y = 0px; }
                for server[index] in root.servers: Rectangle {
                    height: 76px;
                    background: AppTheme.surface;
                    border-color: AppTheme.border;
                    border-width: 1px;
                    border-radius: 12px;
                    TouchArea { clicked => { root.select_server(index); } }
                    Text { x: 16px; y: 13px; width: parent.width - 54px; text: server.name; font-size: 17px; font-weight: 600; color: AppTheme.text; overflow: elide; }
                    Text { x: 16px; y: 42px; width: parent.width - 54px; text: server.url; font-size: 13px; color: AppTheme.text-secondary; overflow: elide; }
                    AppIcon { x: parent.width - 29px; y: 26px; width: 20px; height: 20px; kind: "disclosure"; icon-color: AppTheme.text-tertiary; }
                }
            }
            Button { x: 16px; y: parent.height - 66px; width: parent.width - 32px; height: 48px; text: "Add Server"; clicked => { root.show_add_server(); } }
        }

        if (tab == "issues" || tab == "repositories") && page == "add": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: "Add Server"; can_back: true; back => { root.back(); } }
            VerticalLayout {
                x: 20px; y: 92px; width: parent.width - 40px; height: 260px; spacing: 10px;
                Text { text: "Name"; font-size: 13px; color: AppTheme.text-secondary; }
                server_name := LineEdit { placeholder-text: "Work"; }
                Text { text: "Server URL"; font-size: 13px; color: AppTheme.text-secondary; }
                server_url := LineEdit { placeholder-text: "https://gitea.example.com"; }
                Text { text: "Access token"; font-size: 13px; color: AppTheme.text-secondary; }
                server_token := LineEdit { placeholder-text: "Token"; input-type: InputType.password; }
            }
            Button {
                x: 20px; y: 380px; width: parent.width - 40px; height: 48px;
                text: root.loading ? "Connecting…" : "Add Server";
                enabled: !root.loading;
                clicked => { root.save_server(server_name.text, server_url.text, server_token.text); }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        if (tab == "issues" || tab == "repositories") && page == "repositories": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: root.server_title; can_back: true; back => { root.back(); } }
            if root.refreshing: Spinner { x: parent.width - 42px; y: 17px; width: 24px; height: 24px; }
            if !root.loading && root.repositories.length == 0: EmptyState {
                x: 34px; width: parent.width - 68px; y: 220px; height: 160px;
                title: "No repositories";
                detail: "This account does not own any repositories on this server.";
            }
            PullToRefreshGesture {
                x: 20px; y: 70px; width: parent.width - 40px; height: parent.height - 82px;
                at_top: root.repositories_at_top; refreshing: root.refreshing;
                refresh => { root.refresh_repositories(); }
                repositories_list := ListView {
                    property <int> scroll_request: root.repositories_scroll_request;
                    width: 100%; height: 100%; mouse-drag-pan-enabled: true;
                    changed scroll_request => { self.viewport-y = 0px; root.repositories_at_top = true; }
                    scrolled => { root.repositories_at_top = self.viewport-y >= 0px; }
                    for repo in root.repositories: Rectangle {
                        height: 104px;
                        background: AppTheme.surface;
                        border-color: AppTheme.border;
                        border-width: 1px;
                        border-radius: 12px;
                        TouchArea { clicked => { root.select_repository(repo.owner, repo.name); } }
                        Text { x: 15px; y: 11px; width: parent.width - 62px; text: repo.name; font-size: 17px; font-weight: 600; color: AppTheme.text; overflow: elide; }
                        Text { x: 15px; y: 39px; width: parent.width - 30px; text: repo.description; font-size: 14px; color: AppTheme.text-secondary; overflow: elide; }
                        Text { x: 15px; y: 71px; width: parent.width - 30px; text: repo.meta; font-size: 12px; color: AppTheme.text-tertiary; overflow: elide; }
                        TouchArea {
                            x: parent.width - 52px; y: 2px; width: 48px; height: 48px;
                            clicked => { root.toggle_favorite(repo.owner, repo.name); }
                            AppIcon { x: 10px; y: 10px; width: 28px; height: 28px; kind: repo.favorite ? "favorite-filled" : "favorite"; icon-color: repo.favorite ? #f2a900 : AppTheme.text-tertiary; }
                        }
                    }
                }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        if tab == "issues" && page == "issues": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header {
                x: 0; y: 0; title: root.repository_title; can_back: true; can_filter: true;
                back => { root.back(); }
                filter => { root.filter_open = true; }
            }
            if root.refreshing: Spinner { x: parent.width - 42px; y: 17px; width: 24px; height: 24px; }
            if !root.loading && root.issues.length == 0: EmptyState {
                x: 34px; width: parent.width - 68px; y: 220px; height: 160px;
                title: "No " + root.issue_filter + " issues";
                detail: "No issues match the selected status.";
            }
            PullToRefreshGesture {
                x: 20px; y: 70px; width: parent.width - 40px; height: parent.height - 82px;
                at_top: root.issues_at_top; refreshing: root.refreshing;
                refresh => { root.refresh_issues(); }
                issues_list := ListView {
                    property <int> scroll_request: root.issues_scroll_request;
                    width: 100%; height: 100%; mouse-drag-pan-enabled: true;
                    changed scroll_request => { self.viewport-y = 0px; root.issues_at_top = true; }
                    scrolled => { root.issues_at_top = self.viewport-y >= 0px; }
                    for issue in root.issues: Rectangle {
                        height: issue.labels.length > 0 ? 138px : 112px;
                        background: AppTheme.surface;
                        border-color: AppTheme.border;
                        border-width: 1px;
                        border-radius: 12px;
                        TouchArea { clicked => { root.select_issue(issue.number); } }
                        Text { x: 15px; y: 11px; width: parent.width - 44px; text: issue.title; font-size: 16px; font-weight: 600; color: AppTheme.text; overflow: elide; }
                        Text { x: 15px; y: 39px; width: parent.width - 30px; height: 38px; text: issue.summary; font-size: 13px; color: AppTheme.text-secondary; wrap: word-wrap; overflow: elide; }
                        if issue.labels.length > 0: HorizontalLayout {
                            x: 15px; y: 82px; width: parent.width - 30px; height: 22px; spacing: 5px;
                            for label in issue.labels: Rectangle {
                                width: min(104px, max(48px, (parent.width - (issue.labels.length - 1) * 5px) / issue.labels.length));
                                height: 22px; background: label.background; border-radius: 11px;
                                Text { x: 7px; width: parent.width - 14px; text: label.name; color: label.foreground; font-size: 11px; font-weight: 600; horizontal-alignment: center; vertical-alignment: center; overflow: elide; }
                            }
                        }
                        Text { x: 15px; y: issue.labels.length > 0 ? 112px : 86px; width: parent.width - 30px; text: issue.meta; font-size: 12px; color: AppTheme.text-tertiary; overflow: elide; }
                    }
                }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        if tab == "issues" && page == "issue": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: "Issue"; can_back: true; back => { root.back(); } }
            if root.refreshing: Spinner { x: parent.width - 42px; y: 17px; width: 24px; height: 24px; }
            PullToRefreshGesture {
                x: 18px; y: 78px; width: parent.width - 36px; height: parent.height - 96px;
                at_top: root.issue_at_top; refreshing: root.refreshing;
                refresh => { root.refresh_issue(); }
                issue_scroll := ScrollView {
                    property <int> scroll_request: root.issue_scroll_request;
                    width: 100%; height: 100%; mouse-drag-pan-enabled: true;
                    changed scroll_request => { self.viewport-y = 0px; root.issue_at_top = true; }
                    scrolled => { root.issue_at_top = self.viewport-y >= 0px; }
                    VerticalLayout {
                        width: parent.width;
                        spacing: 12px;
                        alignment: start;
                        Text { text: root.issue_title; font-size: 23px; font-weight: 650; color: AppTheme.text; wrap: word-wrap; }
                        Text { text: root.issue_meta; font-size: 13px; color: AppTheme.text-secondary; wrap: word-wrap; }
                        Rectangle { height: 1px; background: AppTheme.separator; }
                        MarkdownContent { width: parent.width; blocks: root.issue_body; }
                        if root.comments.length > 0: Text { text: "Comments"; font-size: 17px; font-weight: 600; color: AppTheme.text; }
                        for comment in root.comments: CommentCard { width: parent.width; comment: comment; }
                    }
                }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        if tab == "pulls" && !root.has_active_server: Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: "Home"; can_back: false; }
            EmptyState {
                x: 32px; width: parent.width - 64px; y: 210px; height: 190px;
                title: "No server selected";
                detail: "Open Issues or Repositories to select a server or add your first one.";
            }
        }

        if tab == "pulls" && root.has_active_server && page == "pulls": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header {
                x: 0; y: 0; title: "Pull Requests"; can_back: false; can_filter: true;
                filter => { root.filter_open = true; }
            }
            if root.refreshing: Spinner { x: parent.width - 92px; y: 17px; width: 24px; height: 24px; }
            if !root.loading && root.pulls.length == 0: EmptyState {
                x: 34px; width: parent.width - 68px; y: 220px; height: 160px;
                title: "No " + root.pull_filter + " pull requests";
                detail: "No pull requests match the selected status.";
            }
            PullToRefreshGesture {
                x: 16px; y: 70px; width: parent.width - 32px; height: parent.height - 82px;
                at_top: root.issues_at_top; refreshing: root.refreshing;
                refresh => { root.refresh_pulls(); }
                ListView {
                    width: 100%; height: 100%; mouse-drag-pan-enabled: true;
                    scrolled => { root.issues_at_top = self.viewport-y >= 0px; }
                    for pull in root.pulls: Rectangle {
                        height: 112px;
                        background: AppTheme.surface; border-color: AppTheme.border; border-width: 1px; border-radius: 12px;
                        TouchArea { clicked => { root.select_pull(pull.owner, pull.repository, pull.number); } }
                        Text { x: 14px; y: 10px; width: parent.width - 28px; text: pull.repository + "  #" + pull.number; font-size: 12px; color: AppTheme.text-secondary; overflow: elide; }
                        Text { x: 14px; y: 31px; width: parent.width - 28px; text: pull.title; font-size: 16px; font-weight: 600; color: AppTheme.text; overflow: elide; }
                        Text { x: 14px; y: 57px; width: parent.width - 28px; text: pull.summary; font-size: 13px; color: AppTheme.text-secondary; overflow: elide; }
                        Text { x: 14px; y: 85px; width: parent.width - 28px; text: pull.meta; font-size: 12px; color: AppTheme.text-tertiary; overflow: elide; }
                    }
                }
            }
        }

        if tab == "pulls" && page == "pull": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: "Pull Request"; can_back: true; back => { root.back(); } }
            if root.refreshing: Spinner { x: parent.width - 42px; y: 17px; width: 24px; height: 24px; }
            PullToRefreshGesture {
                x: 18px; y: 78px; width: parent.width - 36px; height: parent.height - 96px;
                at_top: root.issue_at_top; refreshing: root.refreshing;
                refresh => { root.refresh_pull(); }
                ScrollView {
                    width: 100%; height: 100%; mouse-drag-pan-enabled: true;
                    scrolled => { root.issue_at_top = self.viewport-y >= 0px; }
                    VerticalLayout {
                        width: parent.width; spacing: 12px; alignment: start;
                        Text { text: root.detail_title; font-size: 23px; font-weight: 650; color: AppTheme.text; wrap: word-wrap; }
                        Text { text: root.detail_meta; font-size: 13px; color: AppTheme.text-secondary; wrap: word-wrap; }
                        Rectangle { height: 1px; background: AppTheme.separator; }
                        MarkdownContent { width: parent.width; blocks: root.detail_body; }
                        if root.files.length > 0: Text { text: root.detail_files_ref; font-size: 17px; font-weight: 600; color: AppTheme.text; }
                        for file in root.files: FileCard { width: parent.width; file: file; clicked => { root.select_pull_file(file.path); } }
                        if root.comments.length > 0: Text { text: "Comments"; font-size: 17px; font-weight: 600; color: AppTheme.text; }
                        for comment in root.comments: CommentCard { width: parent.width; comment: comment; }
                    }
                }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        if tab == "repositories" && page == "commits": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: root.repository_title; can_back: true; back => { root.back(); } }
            ComboBox {
                x: 16px; y: 66px; width: parent.width - 32px; height: 42px;
                model: root.branch_choices; current-index: root.branch_index;
                selected(value) => { root.select_branch(value); }
            }
            if root.refreshing: Spinner { x: parent.width - 42px; y: 17px; width: 24px; height: 24px; }
            if !root.loading && root.commits.length == 0: EmptyState {
                x: 34px; width: parent.width - 68px; y: 220px; height: 160px;
                title: "No commits";
                detail: "This repository has no commit history.";
            }
            PullToRefreshGesture {
                x: 16px; y: 116px; width: parent.width - 32px; height: parent.height - 128px;
                at_top: root.repositories_at_top; refreshing: root.refreshing;
                refresh => { root.refresh_commits(); }
                ListView {
                    width: 100%; height: 100%; mouse-drag-pan-enabled: true;
                    scrolled => { root.repositories_at_top = self.viewport-y >= 0px; }
                    for commit in root.commits: commit_row := Rectangle {
                        property <length> graph-width: commit.lanes.length > 0 ? min(72px, commit.lanes.length * 10px + 8px) : 0px;
                        property <length> lane-spacing: (self.graph-width - 8px) / max(1, commit.lanes.length);
                        height: 86px; background: transparent;
                        Rectangle { width: 100%; height: 100%; background: AppTheme.surface; border-color: AppTheme.border; border-width: 1px; border-radius: 12px; }
                        TouchArea { clicked => { root.select_commit(commit.sha); } }
                        for lane[index] in commit.lanes: Rectangle {
                            x: 4px + index * commit_row.lane-spacing;
                            width: 3px; height: 100%; background: transparent;
                            if lane.top: Rectangle {
                                y: -1px; width: 3px;
                                height: lane.connect_left && !lane.bottom ? 37px : 42px;
                                background: lane.color;
                            }
                            if lane.bottom: Rectangle {
                                y: lane.connect_left && !lane.top ? 45px : 40px;
                                width: 3px;
                                height: parent.height - (lane.connect_left && !lane.top ? 44px : 39px);
                                background: lane.color;
                            }
                            if lane.connect_left && lane.top == lane.bottom: Rectangle {
                                x: -commit_row.lane-spacing; y: 39px;
                                width: commit_row.lane-spacing + 3px; height: 3px;
                                background: lane.color;
                            }
                            if lane.connect_left && lane.bottom && !lane.top: Path {
                                x: 1.5px - commit_row.lane-spacing; y: 35px;
                                width: commit_row.lane-spacing; height: 11px;
                                viewbox-width: 10; viewbox-height: 11;
                                commands: "M 0 5.5 L 5 5.5 Q 10 5.5 10 10.5";
                                fill: transparent; stroke: lane.color; stroke-width: 3px; stroke-line-cap: round;
                            }
                            if lane.connect_left && lane.top && !lane.bottom: Path {
                                x: 1.5px - commit_row.lane-spacing; y: 35px;
                                width: commit_row.lane-spacing; height: 11px;
                                viewbox-width: 10; viewbox-height: 11;
                                commands: "M 10 0.5 Q 10 5.5 5 5.5 L 0 5.5";
                                fill: transparent; stroke: lane.color; stroke-width: 3px; stroke-line-cap: round;
                            }
                            if lane.node: Rectangle {
                                x: -3px; y: 36px; width: 9px; height: 9px; border-radius: 5px;
                                background: lane.color; border-color: AppTheme.surface; border-width: 2px;
                            }
                        }
                        Text { x: parent.graph-width + 14px; y: 8px; width: parent.width - self.x - 14px; text: commit.title; font-size: 15px; font-weight: 600; color: AppTheme.text; overflow: elide; }
                        Text { x: parent.graph-width + 14px; y: 33px; width: parent.width - self.x - 14px; text: commit.refs != "" ? commit.refs : commit.meta; font-size: 12px; color: commit.refs != "" ? AppTheme.accent : AppTheme.text-secondary; overflow: elide; }
                        Text { x: parent.graph-width + 14px; y: 53px; width: parent.width - self.x - 14px; text: commit.refs != "" ? commit.meta + "  ·  " + commit.sha : commit.sha; font-size: 11px; color: AppTheme.text-tertiary; overflow: elide; }
                    }
                }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        if tab == "repositories" && page == "files": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: "Changed Files"; can_back: true; back => { root.back(); } }
            if !root.loading && root.files.length == 0: EmptyState {
                x: 34px; width: parent.width - 68px; y: 220px; height: 160px;
                title: "No changed files";
                detail: "This commit does not contain file changes.";
            }
            ListView {
                x: 16px; y: 70px; width: parent.width - 32px; height: parent.height - 82px; mouse-drag-pan-enabled: true;
                for file in root.files: FileCard { file: file; clicked => { root.select_file(file.path); } }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        if (tab == "repositories" || tab == "pulls") && page == "diff": Rectangle {
            x: root.safe-area-insets.left; y: root.safe-area-insets.top;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.height - root.safe-area-insets.top - root.safe-area-insets.bottom - root.toolbar-height;
            background: AppTheme.page;
            Header { x: 0; y: 0; title: root.detail_title; can_back: true; back => { root.back(); } }
            ScrollView {
                x: 12px; y: 70px; width: parent.width - 24px; height: parent.height - 82px; mouse-drag-pan-enabled: true;
                viewport-width: max(self.visible-width, root.diff_columns * 7px + 100px);
                viewport-height: diff_rows.preferred-height;
                diff_rows := VerticalLayout {
                    width: parent.viewport-width;
                    for line in root.diff_lines: Rectangle {
                        height: 20px;
                        background: line.kind == "addition" ? (AppTheme.dark ? #173d25 : #ddf5e3) : line.kind == "removal" ? (AppTheme.dark ? #4a2020 : #fde2e1) : line.kind == "hunk" ? (AppTheme.dark ? #17324d : #dcecff) : line.kind == "header" ? AppTheme.surface-muted : AppTheme.surface;
                        Text { x: 0; width: 38px; text: line.old_number; font-family: "monospace"; font-size: 11px; color: AppTheme.text-tertiary; horizontal-alignment: right; vertical-alignment: center; }
                        Text { x: 42px; width: 38px; text: line.new_number; font-family: "monospace"; font-size: 11px; color: AppTheme.text-tertiary; horizontal-alignment: right; vertical-alignment: center; }
                        Rectangle { x: 84px; width: 1px; height: 100%; background: AppTheme.separator; }
                        Text {
                            x: 90px; width: parent.width - 94px; text: line.text; font-family: "monospace"; font-size: 11px;
                            color: line.kind == "addition" ? (AppTheme.dark ? #7fe787 : #176b2c) : line.kind == "removal" ? (AppTheme.dark ? #ff7b72 : #a12720) : line.kind == "hunk" ? (AppTheme.dark ? #79c0ff : #175b9e) : AppTheme.text;
                            wrap: no-wrap; overflow: clip; vertical-alignment: center;
                        }
                    }
                }
            }
            EdgeBack { x: 0; y: 0; back => { root.back(); } }
        }

        Rectangle {
            x: root.safe-area-insets.left;
            y: root.height - root.safe-area-insets.bottom - root.toolbar-height;
            width: root.width - root.safe-area-insets.left - root.safe-area-insets.right;
            height: root.toolbar-height;
            background: AppTheme.toolbar;
            TabButton {
                x: 0; width: parent.width / 5; height: parent.height; kind: "home"; label: "Home"; active: root.tab == "home";
                clicked => {
                    if root.tab == "home" { root.home_scroll_request += 1; }
                    root.select_tab("home");
                }
            }
            TabButton {
                x: parent.width / 5; width: parent.width / 5; height: parent.height; kind: "issues"; label: "Issues"; active: root.tab == "issues";
                clicked => {
                    if root.tab == "issues" {
                        if root.page == "servers" { root.servers_scroll_request += 1; }
                        if root.page == "repositories" { root.repositories_scroll_request += 1; }
                        if root.page == "issues" { root.issues_scroll_request += 1; }
                        if root.page == "issue" { root.issue_scroll_request += 1; }
                    }
                    root.select_tab("issues");
                }
            }
            TabButton { x: parent.width * 2 / 5; width: parent.width / 5; height: parent.height; kind: "repositories"; label: "Repos"; active: root.tab == "repositories"; clicked => { root.select_tab("repositories"); } }
            TabButton { x: parent.width * 3 / 5; width: parent.width / 5; height: parent.height; kind: "pulls"; label: "Pulls"; active: root.tab == "pulls"; clicked => { root.select_tab("pulls"); } }
            TabButton { x: parent.width * 4 / 5; width: parent.width / 5; height: parent.height; kind: "settings"; label: "Settings"; active: root.tab == "settings"; clicked => { root.select_tab("settings"); } }
        }

        if root.loading && (root.tab == "issues" || root.tab == "repositories" || root.tab == "pulls"): Rectangle {
            width: 100%; height: 100%;
            background: AppTheme.loading-overlay;
            TouchArea { }
            Spinner { width: 38px; height: 38px; x: (parent.width - self.width) / 2; y: (parent.height - self.height) / 2; }
        }
        if root.filter_open: Rectangle {
            width: 100%; height: 100%; background: #00000066;
            TouchArea { clicked => { root.filter_open = false; } }
            Rectangle {
                x: 28px; y: (parent.height - 190px) / 2; width: parent.width - 56px; height: 190px;
                background: AppTheme.surface; border-radius: 14px;
                Text { x: 18px; y: 16px; width: parent.width - 36px; text: "Status"; font-size: 19px; font-weight: 650; color: AppTheme.text; }
                VerticalLayout {
                    x: 18px; y: 54px; width: parent.width - 36px; height: 118px; spacing: 8px;
                    Button { text: "Open"; clicked => { root.choose_filter("open"); root.filter_open = false; } }
                    Button { text: "Closed"; clicked => { root.choose_filter("closed"); root.filter_open = false; } }
                }
            }
        }
        if root.error != "": Rectangle {
            x: 14px; y: parent.height - root.safe-area-insets.bottom - 132px; width: parent.width - 28px; height: 66px;
            background: #d93d35; border-radius: 12px;
            Text { x: 14px; width: parent.width - 28px; text: root.error; color: white; font-size: 13px; wrap: word-wrap; vertical-alignment: center; }
            TouchArea { clicked => { root.error = ""; } }
        }
    }
}