Introduce LoadableData type for organizations

apps/desktop/src/lib/ai/butlerClient.ts

@@ -7,7 +7,7 @@ import {
 import { ModelKind, type AIClient, type AIEvalOptions, type Prompt } from '$lib/ai/types';
 import { andThenAsync, ok, wrapAsync, type Result } from '$lib/result';
 import { stringStreamGenerator } from '$lib/utils/promise';
-import type { HttpClient } from '@gitbutler/shared/httpClient';
+import type { HttpClient } from '@gitbutler/shared/network/httpClient';
 
 function splitPromptMessagesIfNecessary(
 	modelKind: ModelKind,

apps/desktop/src/lib/ai/service.test.ts

@@ -24,7 +24,7 @@ import {
 import { buildFailureFromAny, ok, unwrap, type Result } from '$lib/result';
 import { TokenMemoryService } from '$lib/stores/tokenMemoryService';
 import { Hunk } from '$lib/vbranches/types';
-import { HttpClient } from '@gitbutler/shared/httpClient';
+import { HttpClient } from '@gitbutler/shared/network/httpClient';
 import { plainToInstance } from 'class-transformer';
 import { get } from 'svelte/store';
 import { expect, test, describe, vi } from 'vitest';

apps/desktop/src/lib/ai/service.ts

@@ -21,7 +21,7 @@ import { get } from 'svelte/store';
 import type { GitConfigService } from '$lib/backend/gitConfigService';
 import type { SecretsService } from '$lib/secrets/secretsService';
 import type { TokenMemoryService } from '$lib/stores/tokenMemoryService';
-import type { HttpClient } from '@gitbutler/shared/httpClient';
+import type { HttpClient } from '@gitbutler/shared/network/httpClient';
 
 const maxDiffLengthLimitForAPI = 5000;
 const prDescriptionTokenLimit = 4096;

apps/desktop/src/lib/backend/projectCloudSync.svelte.ts

@@ -2,7 +2,7 @@ import { registerInterest } from '@gitbutler/shared/interest/registerInterestFun
 import { projectsSelectors } from '@gitbutler/shared/organizations/projectsSlice';
 import { readableToReactive } from '@gitbutler/shared/reactiveUtils.svelte';
 import type { ProjectService, ProjectsService } from '$lib/backend/projects';
-import type { HttpClient } from '@gitbutler/shared/httpClient';
+import type { HttpClient } from '@gitbutler/shared/network/httpClient';
 import type { ProjectService as CloudProjectService } from '@gitbutler/shared/organizations/projectService';
 import type { AppProjectsState } from '@gitbutler/shared/redux/store.svelte';
 

apps/desktop/src/lib/backend/projects.ts

@@ -6,7 +6,7 @@ import { persisted } from '@gitbutler/shared/persisted';
 import { open } from '@tauri-apps/plugin-dialog';
 import { plainToInstance } from 'class-transformer';
 import { derived, get, writable, type Readable } from 'svelte/store';
-import type { HttpClient } from '@gitbutler/shared/httpClient';
+import type { HttpClient } from '@gitbutler/shared/network/httpClient';
 import { goto } from '$app/navigation';
 
 export type KeyType = 'gitCredentialsHelper' | 'local' | 'systemExecutable';

apps/desktop/src/lib/components/ShareIssueModal.svelte

@@ -4,7 +4,7 @@
 	import { User } from '$lib/stores/user';
 	import * as toasts from '$lib/utils/toasts';
 	import { getContext, getContextStore } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Checkbox from '@gitbutler/ui/Checkbox.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';

apps/desktop/src/lib/stores/user.ts

@@ -4,7 +4,7 @@ import { showError } from '$lib/notifications/toasts';
 import { copyToClipboard } from '$lib/utils/clipboard';
 import { sleep } from '$lib/utils/sleep';
 import { openExternalUrl } from '$lib/utils/url';
-import { type HttpClient } from '@gitbutler/shared/httpClient';
+import { type HttpClient } from '@gitbutler/shared/network/httpClient';
 import { plainToInstance } from 'class-transformer';
 import { derived, writable } from 'svelte/store';
 import type { PostHogWrapper } from '$lib/analytics/posthog';

apps/desktop/src/routes/+layout.svelte

@@ -39,7 +39,7 @@
 	import * as events from '$lib/utils/events';
 	import { unsubscribe } from '$lib/utils/unsubscribe';
 	import { FeedService } from '@gitbutler/shared/feeds/service';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import { OrganizationService } from '@gitbutler/shared/organizations/organizationService';
 	import { ProjectService as CloudProjectService } from '@gitbutler/shared/organizations/projectService';
 	import { AppDispatch, AppState } from '@gitbutler/shared/redux/store.svelte';

apps/desktop/src/routes/+layout.ts

@@ -14,7 +14,7 @@ import { RemotesService } from '$lib/remotes/service';
 import { RustSecretService } from '$lib/secrets/secretsService';
 import { TokenMemoryService } from '$lib/stores/tokenMemoryService';
 import { UserService } from '$lib/stores/user';
-import { HttpClient } from '@gitbutler/shared/httpClient';
+import { HttpClient } from '@gitbutler/shared/network/httpClient';
 import { LineManagerFactory } from '@gitbutler/ui/commitLines/lineManager';
 import { LineManagerFactory as StackingLineManagerFactory } from '@gitbutler/ui/commitLines/lineManager';
 import lscache from 'lscache';

apps/desktop/src/routes/[projectId]/+layout.svelte

@@ -36,7 +36,7 @@
 	import { VirtualBranchService } from '$lib/vbranches/virtualBranch';
 	import { CloudBranchesService } from '@gitbutler/shared/cloud/stacks/service';
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import { ProjectService as CloudProjectService } from '@gitbutler/shared/organizations/projectService';
 	import { AppState } from '@gitbutler/shared/redux/store.svelte';
 	import { DesktopRoutesService, getRoutesService } from '@gitbutler/shared/sharedRoutes';

apps/desktop/src/routes/settings/organizations/+page.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import SettingsPage from '$lib/layout/SettingsPage.svelte';
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
 	import RegisterInterest from '@gitbutler/shared/interest/RegisterInterest.svelte';
+	import Loading from '@gitbutler/shared/network/Loading.svelte';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import CreateOrganizationModal from '@gitbutler/shared/organizations/CreateOrganizationModal.svelte';
 	import JoinOrganizationModal from '@gitbutler/shared/organizations/JoinOrganizationModal.svelte';
 	import OrganizationModal from '@gitbutler/shared/organizations/OrganizationModal.svelte';
@@ -34,23 +35,27 @@
 	<Button onclick={() => createOrganizationModal?.show()}>Create an Organizaton</Button>
 
 	<div>
-		{#each organizations as organization, index (organization.slug)}
+		{#each organizations as loadableOrganization, index (loadableOrganization.id)}
 			<SectionCard
 				roundedTop={index === 0}
 				roundedBottom={index === organizations.length - 1}
 				orientation="row"
 			>
 				{#snippet children()}
-					<div class="inline">
-						<p class="text-15 text-bold">{organization.name || organization.slug}</p>
-						{#if organization.name}
-							<p class="text-13">{organization.slug}</p>
-						{/if}
-					</div>
+					<Loading loadable={loadableOrganization}>
+						{#snippet children(organization)}
+							<div class="inline">
+								<p class="text-15 text-bold">{organization.name || organization.slug}</p>
+								{#if organization.name}
+									<p class="text-13">{organization.slug}</p>
+								{/if}
+							</div>
+						{/snippet}
+					</Loading>
 				{/snippet}
 
 				{#snippet actions()}
-					<OrganizationModal slug={organization.slug} />
+					<OrganizationModal slug={loadableOrganization.id} />
 				{/snippet}
 			</SectionCard>
 		{/each}

apps/web/src/lib/user/userService.ts

@@ -1,6 +1,6 @@
 import { setSentryUser } from '$lib/analytics/sentry';
 import { writable, type Writable } from 'svelte/store';
-import type { HttpClient } from '@gitbutler/shared/httpClient';
+import type { HttpClient } from '@gitbutler/shared/network/httpClient';
 
 export interface User {
 	id: string;

apps/web/src/routes/+layout.svelte

@@ -8,7 +8,7 @@
 		RepositoriesApiService
 	} from '@gitbutler/shared/cloud/repositories/service';
 	import { FeedService } from '@gitbutler/shared/feeds/service';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import { OrganizationService } from '@gitbutler/shared/organizations/organizationService';
 	import { ProjectService } from '@gitbutler/shared/organizations/projectService';
 	import { AppState } from '@gitbutler/shared/redux/store.svelte';

apps/web/src/routes/organizations/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import RegisterInterest from '@gitbutler/shared/interest/RegisterInterest.svelte';
 	import CreateOrganizationModal from '@gitbutler/shared/organizations/CreateOrganizationModal.svelte';
 	import JoinOrganizationModal from '@gitbutler/shared/organizations/JoinOrganizationModal.svelte';

apps/web/src/routes/projects/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	import { onMount } from 'svelte';

apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import dayjs from 'dayjs';
 	import relativeTime from 'dayjs/plugin/relativeTime';
 	import { onMount } from 'svelte';

apps/web/src/routes/projects/[projectId]/branches/[branchId]/stack/[changeId]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import hljs from 'highlight.js';
 	import { marked } from 'marked';
 	import { onMount } from 'svelte';

apps/web/src/routes/repositories/[repositoryId]/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { CloudBranchesService, BranchesApiService } from '@gitbutler/shared/cloud/stacks/service';
 	import { getContext } from '@gitbutler/shared/context';
-	import { HttpClient } from '@gitbutler/shared/httpClient';
+	import { HttpClient } from '@gitbutler/shared/network/httpClient';
 	import { setContext, type Snippet } from 'svelte';
 	import { writable } from 'svelte/store';
 	import { page } from '$app/stores';

packages/shared/src/lib/cloud/repositories/service.ts

@@ -1,6 +1,6 @@
 import { writableDerived } from '$lib/storeUtils';
 import { derived, get, type Readable, type Writable } from 'svelte/store';
-import type { HttpClient } from '$lib/httpClient';
+import type { HttpClient } from '$lib/network/httpClient';
 
 interface ApiRepository {
 	name: string;

packages/shared/src/lib/cloud/stacks/service.ts

@@ -1,6 +1,6 @@
 import { writableDerived } from '$lib/storeUtils';
 import { derived, get, type Readable, type Writable } from 'svelte/store';
-import type { HttpClient } from '$lib/httpClient';
+import type { HttpClient } from '$lib/network/httpClient';
 
 interface ApiPatchStatstics {
 	file_count: number;

packages/shared/src/lib/feeds/service.ts

@@ -6,7 +6,7 @@ import { POLLING_FAST, POLLING_REGULAR } from '$lib/polling';
 import { guardReadableTrue } from '$lib/storeUtils';
 import { apiToUser } from '$lib/users/types';
 import { upsertUsers } from '$lib/users/usersSlice';
-import type { HttpClient } from '$lib/httpClient';
+import type { HttpClient } from '$lib/network/httpClient';
 import type { AppDispatch } from '$lib/redux/store.svelte';
 
 export class FeedService {

packages/shared/src/lib/network/Loading.svelte

@@ -0,0 +1,24 @@
+<script lang="ts" generics="A">
+	import type { LoadableData } from '$lib/network/loadable';
+	import type { Snippet } from 'svelte';
+
+	type Props<A> = {
+		loadable?: LoadableData<A, unknown>;
+		children: Snippet<[A]>;
+	};
+
+	// eslint-disable-next-line no-undef
+	const { loadable, children }: Props<A> = $props();
+</script>
+
+{#if loadable?.type === 'found'}
+	{@render children(loadable.value)}
+{:else if loadable?.type === 'loading'}
+	<p>Loading...</p>
+{:else if loadable?.type === 'not-found'}
+	<p>Not found</p>
+{:else if loadable?.type === 'error'}
+	<p>{loadable.error.message}</p>
+{:else}
+	<p>Organization uninitialized</p>
+{/if}

packages/shared/src/lib/httpClient.ts → packages/shared/src/lib/network/httpClient.ts

@@ -1,3 +1,4 @@
+import { ApiError } from '$lib/network/types';
 import { derived, get, type Readable } from 'svelte/store';
 
 export const DEFAULT_HEADERS = {
@@ -100,7 +101,7 @@ async function parseResponseJSON(response: Response) {
 	if (response.status === 204 || response.status === 205) {
 		return null;
 	} else if (response.status >= 400) {
-		throw new Error(`HTTP Error ${response.statusText}: ${await response.text()}`);
+		throw new ApiError(`HTTP Error ${response.statusText}: ${await response.text()}`, response);
 	} else {
 		return await response.json();
 	}

packages/shared/src/lib/network/loadable.ts

@@ -0,0 +1,4 @@
+export type LoadableData<T, Id> =
+	| { type: 'loading' | 'not-found'; id: Id; error?: undefined }
+	| { type: 'found'; id: Id; value: T; error?: undefined }
+	| { type: 'error'; id: Id; error: Error };

packages/shared/src/lib/network/types.ts

@@ -0,0 +1,8 @@
+export class ApiError extends Error {
+	constructor(
+		message: string,
+		readonly response: Response
+	) {
+		super(message);
+	}
+}