fix: mobile pages (#211)

apps/api.immich.app/routes/(docs)/+layout.svelte

@@ -52,7 +52,7 @@
       <div>
         <NavbarItem title="Introduction" href={ApiPage.Introduction} icon={mdiNoteOutline} activeIcon={mdiNote} />
         <NavbarItem
-          title="Getting Started"
+          title="Getting started"
           href={ApiPage.GettingStarted}
           icon={mdiCompassOutline}
           activeIcon={mdiCompass}

apps/api.immich.app/routes/(docs)/getting-started/+page.svelte

@@ -7,7 +7,7 @@
 </script>
 
 <ApiPageContent
-  title="Getting Started"
+  title="Getting started"
   description="Learn how to authorize your requests to the Immich API"
   nextSteps={[
     { href: ApiPage.Authentication, title: 'Learn about Authentication' },

apps/api.immich.app/routes/(docs)/models/[id]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import ApiSchema from '$lib/api/components/ApiSchema.svelte';
   import type { ApiModel } from '$lib/api/services/open-api';
-  import { Heading, Text } from '@immich/ui';
+  import { Code, Heading } from '@immich/ui';
   import type { PageData } from './$types';
 
   type Props = {
@@ -23,10 +23,14 @@
   const type = $derived(getType(model));
 </script>
 
-<Heading size="large" class="mb-4" tag="h1">
+<Heading size="large" class="mb-2" tag="h1">
   <a href="#{model.name}" id={model.name} class="scroll-m-8 flex gap-2">
     <span>{model.name}</span>
-    <Text color="muted">[{type}]</Text>
   </a>
 </Heading>
+
+<div class="mb-4">
+  <Code color="muted">{type}</Code>
+</div>
+
 <ApiSchema schema={model} />

apps/api.immich.app/routes/+layout.svelte

@@ -96,7 +96,7 @@
         text: asText('introduction'),
       },
       {
-        title: 'Getting Started',
+        title: 'Getting started',
         description: 'Learn how to get started with Immich API',
         href: ApiPage.GettingStarted,
         text: asText('getting', 'started'),

src/lib/api/components/ApiPageContent.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { PUBLIC_IMMICH_SPEC_URL } from '$env/static/public';
   import ApiNextSteps from '$lib/api/components/ApiNextSteps.svelte';
-  import { getOpenApi } from '$lib/api/services/open-api';
-  import { Heading, Text, Stack, Link } from '@immich/ui';
+  import { Heading, Stack, Text } from '@immich/ui';
   import type { Snippet } from 'svelte';
 
   type Props = {
@@ -13,19 +11,14 @@
   };
 
   const { title, description, nextSteps = [], children }: Props = $props();
-
-  const { info } = getOpenApi();
 </script>
 
 <Stack gap={8}>
   <div class="flex justify-between place-items-end">
-    <div class="flex flex-col gap-2 mt-8">
-      <Heading size="title" tag="h1">{title}</Heading>
+    <div class="flex flex-col gap-2">
+      <Heading size="giant" tag="h1">{title}</Heading>
       <Text color="muted" size="giant" fontWeight="bold">{description}</Text>
     </div>
-    <Text color="muted" size="giant" fontWeight="bold">
-      <Link href={PUBLIC_IMMICH_SPEC_URL}>v{info.version}</Link>
-    </Text>
   </div>
 
   <hr class="border border-subtle" />

src/lib/api/components/ApiParams.svelte

@@ -1,40 +1,21 @@
 <script lang="ts">
-  import ApiSchemaType from '$lib/api/components/ApiSchemaType.svelte';
   import type { ParameterObject } from '$lib/api/services/open-api.d';
-  import { Card } from '@immich/ui';
+  import ApiParamsInternal from './ApiParamsInternal.svelte';
 
   type Props = {
     params: ParameterObject[];
   };
 
-  const { params }: Props = $props();
+  const { params: parameters }: Props = $props();
+
+  let params = $derived(
+    parameters.map((param) => ({
+      name: param.name,
+      description: param.description,
+      type: param.schema,
+      required: param.required,
+    })),
+  );
 </script>
 
-<Card color="secondary">
-  <div class="grid grid-cols-12 py-2 px-4 font-bold bg-subtle text-dark mb-2 border-b">
-    <div class="col-span-3">Property</div>
-    <div class="col-span-3">Type</div>
-    <div class="col-span-3">Required</div>
-    <div class="col-span-3">Description</div>
-  </div>
-  {#each params as param, i (i)}
-    <div class="grid grid-cols-12 py-2 px-4">
-      <div class="col-span-3">
-        <code>{param.name}</code>
-      </div>
-      <div class="col-span-3">
-        {#if param.schema}
-          <ApiSchemaType schema={param.schema} />
-        {/if}
-      </div>
-      <div class="col-span-3">
-        {#if param.required}
-          <span class="py-1 px-2 dark:bg-red-900 dark:text-red-50 bg-red-200 rounded-lg" title="Param is required"
-            >Required</span
-          >
-        {/if}
-      </div>
-      <div class="col-span-3">{param.description}</div>
-    </div>
-  {/each}
-</Card>
+<ApiParamsInternal {params} />

src/lib/api/components/ApiParamsInternal.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import ApiSchemaType from '$lib/api/components/ApiSchemaType.svelte';
+  import type { ReferenceObject, SchemaObject } from '$lib/api/services/open-api.d';
+  import { Card, CardBody, Text } from '@immich/ui';
+
+  type InternalParam = {
+    name: string;
+    description?: string;
+    type?: SchemaObject | ReferenceObject;
+    required?: boolean;
+  };
+
+  type Props = {
+    params: InternalParam[];
+  };
+
+  const { params }: Props = $props();
+</script>
+
+<div class="flex flex-col gap-2 lg:hidden">
+  {#each params as param, i (i)}
+    <Card color="secondary">
+      <CardBody class="py-2 flex flex-col gap-2">
+        <div class="flex gap-2">
+          <div class="flex justify-between w-full place-items-center">
+            <Text>
+              <code>{param.name} </code>
+              {#if param.required}
+                <span class="text-danger">*</span>
+              {/if}
+            </Text>
+            {#if param.type}
+              <ApiSchemaType schema={param.type} />
+            {/if}
+          </div>
+        </div>
+        {#if param.description}
+          <Text color="muted" class="whitespace-pre-wrap">{param.description}</Text>
+        {/if}
+      </CardBody>
+    </Card>
+  {/each}
+</div>
+
+<div class="hidden lg:block">
+  <Card color="secondary">
+    <div class="grid grid-cols-12 py-2 px-4 font-bold bg-subtle text-dark mb-2 border-b">
+      <div class="col-span-3">Property</div>
+      <div class="col-span-3">Type</div>
+      <div class="col-span-3">Required</div>
+      <div class="col-span-3">Description</div>
+    </div>
+    {#each params as param, i (i)}
+      <div class="grid grid-cols-12 py-2 px-4">
+        <div class="col-span-3">
+          <code>{param.name}</code>
+        </div>
+        <div class="col-span-3">
+          {#if param.type}
+            <ApiSchemaType schema={param.type} />
+          {/if}
+        </div>
+        <div class="col-span-3">
+          {#if param.required}
+            <span class="py-1 px-2 dark:bg-red-900 dark:text-red-50 bg-red-200 rounded-lg" title="Param is required"
+              >Required</span
+            >
+          {/if}
+        </div>
+        <div class="col-span-3">{param.description}</div>
+      </div>
+    {/each}
+  </Card>
+</div>

src/lib/api/components/ApiPlayground.svelte

@@ -79,12 +79,10 @@
 
   {#if playgroundManager.connected}
     <div class="flex flex-col gap-4">
-      <div class="flex gap-2 place-items-center">
-        <div class="max-w-64">
-          <Field label="Method">
-            <Select bind:value={selectedMethod} data={httpMethods} />
-          </Field>
-        </div>
+      <div class="flex flex-col gap-2 md:place-items-center">
+        <Field label="Method">
+          <Select bind:value={selectedMethod} data={httpMethods} />
+        </Field>
         <Field label="Url">
           <Input bind:value={requestUrl} />
         </Field>

src/lib/api/components/ApiSchemaObject.svelte

@@ -1,40 +1,25 @@
 <script lang="ts">
-  import ApiSchemaType from '$lib/api/components/ApiSchemaType.svelte';
   import type { SchemaObject } from '$lib/api/services/open-api.d';
-  import { Card } from '@immich/ui';
+  import ApiParamsInternal from './ApiParamsInternal.svelte';
 
   type Props = {
     schema: SchemaObject;
   };
 
   const { schema }: Props = $props();
+
+  let params = $derived(
+    schema.properties
+      ? Object.entries(schema.properties).map(([name, property]) => ({
+          name,
+          description: (property as SchemaObject)?.description,
+          type: property,
+          required: schema.required?.includes(name),
+        }))
+      : undefined,
+  );
 </script>
 
-{#if schema.properties}
-  <Card color="secondary">
-    <div class="grid grid-cols-12 py-2 px-4 font-bold bg-subtle text-dark mb-2">
-      <div class="col-span-3">Property</div>
-      <div class="col-span-3">Type</div>
-      <div class="col-span-3">Required</div>
-      <div class="col-span-3">Description</div>
-    </div>
-    {#each Object.entries(schema.properties) as [name, property], i (i)}
-      <div class="grid grid-cols-12 py-2 px-4">
-        <div class="col-span-3">
-          <code>{name}</code>
-        </div>
-        <div class="col-span-3">
-          <ApiSchemaType schema={property} />
-        </div>
-        <div class="col-span-3">
-          {#if schema.required?.includes(name)}
-            <span class="py-1 px-2 dark:bg-red-900 dark:text-red-50 bg-red-200 rounded-lg" title="Param is required"
-              >Required</span
-            >
-          {/if}
-        </div>
-        <div class="col-span-3">{(property as SchemaObject)?.description}</div>
-      </div>
-    {/each}
-  </Card>
+{#if params}
+  <ApiParamsInternal {params} />
 {/if}

src/lib/api/components/ApiSchemaType.svelte

@@ -15,7 +15,7 @@
 
   const { fromRef } = getOpenApi();
 
-  const badgeClasses = 'py-1 px-2 rounded-lg';
+  const badgeClasses = 'py-1 px-2 rounded-lg text-sm';
   const Colors = {
     Pink: 'dark:bg-pink-900 dark:text-pink-50 bg-pink-200',
     Green: 'dark:bg-green-900 dark:text-green-50 bg-green-200',

src/lib/components/PageContent.svelte

@@ -13,7 +13,7 @@
 
 <div {...restProps} class="flex flex-col h-full mx-auto">
   <div class="grow {className ? className : ''}">
-    <div class="w-full h-full px-4 py-10 sm:px-20 lg:p-10">
+    <div class="w-full h-full p-4 md:p-6 lg:p-8">
       {@render children?.()}
     </div>
   </div>