@immich/ui 0.6.0 → 0.8.0

package/README.md

@@ -1,58 +1,52 @@
-# create-svelte
+# @immich/ui
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+A component library for [Immich](https://immich.app), written in [Svelte](https://svelte.dev).
 
-Read more about creating a library [in the docs](https://svelte.dev/docs/kit/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
+## Install
 
 ```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
+npm i -D @immich/ui
 ```
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+## Usage
+
+Import components from `@immich/ui`. For example:
+
+```html
+<script lang="ts">
+	import {
+		Card,
+		CardBody,
+		CardHeader,
+		CardTitle,
+		CardDescription,
+		Heading,
+		Text,
+	} from '@immich/ui';
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle>@immich/ui</CardTitle>
+		<CardDescription>A component library</CardDescription>
+	</CardHeader>
+	<CardBody>
+		<Lorem />
+	</CardBody>
+	<CardFooter>Privacy should not be a luxury</CardFooter>
+</Card>
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+## Documentation
 
-## Building
+To view the examples located at `src/routes/examples`, run `npm start` and navigate to http://localhost:5173/.
 
-To build your library:
+## Contributing
 
-```bash
-npm run package
-```
+PR's are welcome! Also feel free to reach out to the team on [Discord](https://discord.immich.app).
 
-To create a production version of your showcase app:
+## Technology
 
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
-```
+- [Svelte](https://svelte.dev)
+- [tailwindcss](https://tailwindcss.com)
+- [Material Design icons (@mdi/js)](https://pictogrammers.com/library/mdi/)

package/dist/assets/appstore-badge.svg

@@ -0,0 +1,46 @@
+<svg id="livetype" xmlns="http://www.w3.org/2000/svg" width="119.66407" height="40" viewBox="0 0 119.66407 40">
+  <title>Download_on_the_App_Store_Badge_US-UK_RGB_blk_4SVG_092917</title>
+  <g>
+    <g>
+      <g>
+        <path d="M110.13477,0H9.53468c-.3667,0-.729,0-1.09473.002-.30615.002-.60986.00781-.91895.0127A13.21476,13.21476,0,0,0,5.5171.19141a6.66509,6.66509,0,0,0-1.90088.627A6.43779,6.43779,0,0,0,1.99757,1.99707,6.25844,6.25844,0,0,0,.81935,3.61816a6.60119,6.60119,0,0,0-.625,1.90332,12.993,12.993,0,0,0-.1792,2.002C.00587,7.83008.00489,8.1377,0,8.44434V31.5586c.00489.3105.00587.6113.01515.9219a12.99232,12.99232,0,0,0,.1792,2.0019,6.58756,6.58756,0,0,0,.625,1.9043A6.20778,6.20778,0,0,0,1.99757,38.001a6.27445,6.27445,0,0,0,1.61865,1.1787,6.70082,6.70082,0,0,0,1.90088.6308,13.45514,13.45514,0,0,0,2.0039.1768c.30909.0068.6128.0107.91895.0107C8.80567,40,9.168,40,9.53468,40H110.13477c.3594,0,.7246,0,1.084-.002.3047,0,.6172-.0039.9219-.0107a13.279,13.279,0,0,0,2-.1768,6.80432,6.80432,0,0,0,1.9082-.6308,6.27742,6.27742,0,0,0,1.6172-1.1787,6.39482,6.39482,0,0,0,1.1816-1.6143,6.60413,6.60413,0,0,0,.6191-1.9043,13.50643,13.50643,0,0,0,.1856-2.0019c.0039-.3106.0039-.6114.0039-.9219.0078-.3633.0078-.7246.0078-1.0938V9.53613c0-.36621,0-.72949-.0078-1.09179,0-.30664,0-.61426-.0039-.9209a13.5071,13.5071,0,0,0-.1856-2.002,6.6177,6.6177,0,0,0-.6191-1.90332,6.46619,6.46619,0,0,0-2.7988-2.7998,6.76754,6.76754,0,0,0-1.9082-.627,13.04394,13.04394,0,0,0-2-.17676c-.3047-.00488-.6172-.01074-.9219-.01269-.3594-.002-.7246-.002-1.084-.002Z" style="fill: #a6a6a6"/>
+        <path d="M8.44483,39.125c-.30468,0-.602-.0039-.90429-.0107a12.68714,12.68714,0,0,1-1.86914-.1631,5.88381,5.88381,0,0,1-1.65674-.5479,5.40573,5.40573,0,0,1-1.397-1.0166,5.32082,5.32082,0,0,1-1.02051-1.3965,5.72186,5.72186,0,0,1-.543-1.6572,12.41351,12.41351,0,0,1-.1665-1.875c-.00634-.2109-.01464-.9131-.01464-.9131V8.44434S.88185,7.75293.8877,7.5498a12.37039,12.37039,0,0,1,.16553-1.87207,5.7555,5.7555,0,0,1,.54346-1.6621A5.37349,5.37349,0,0,1,2.61183,2.61768,5.56543,5.56543,0,0,1,4.01417,1.59521a5.82309,5.82309,0,0,1,1.65332-.54394A12.58589,12.58589,0,0,1,7.543.88721L8.44532.875H111.21387l.9131.0127a12.38493,12.38493,0,0,1,1.8584.16259,5.93833,5.93833,0,0,1,1.6709.54785,5.59374,5.59374,0,0,1,2.415,2.41993,5.76267,5.76267,0,0,1,.5352,1.64892,12.995,12.995,0,0,1,.1738,1.88721c.0029.2832.0029.5874.0029.89014.0079.375.0079.73193.0079,1.09179V30.4648c0,.3633,0,.7178-.0079,1.0752,0,.3252,0,.6231-.0039.9297a12.73126,12.73126,0,0,1-.1709,1.8535,5.739,5.739,0,0,1-.54,1.67,5.48029,5.48029,0,0,1-1.0156,1.3857,5.4129,5.4129,0,0,1-1.3994,1.0225,5.86168,5.86168,0,0,1-1.668.5498,12.54218,12.54218,0,0,1-1.8692.1631c-.2929.0068-.5996.0107-.8974.0107l-1.084.002Z"/>
+      </g>
+      <g id="_Group_" data-name="&lt;Group&gt;">
+        <g id="_Group_2" data-name="&lt;Group&gt;">
+          <g id="_Group_3" data-name="&lt;Group&gt;">
+            <path id="_Path_" data-name="&lt;Path&gt;" d="M24.76888,20.30068a4.94881,4.94881,0,0,1,2.35656-4.15206,5.06566,5.06566,0,0,0-3.99116-2.15768c-1.67924-.17626-3.30719,1.00483-4.1629,1.00483-.87227,0-2.18977-.98733-3.6085-.95814a5.31529,5.31529,0,0,0-4.47292,2.72787c-1.934,3.34842-.49141,8.26947,1.3612,10.97608.9269,1.32535,2.01018,2.8058,3.42763,2.7533,1.38706-.05753,1.9051-.88448,3.5794-.88448,1.65876,0,2.14479.88448,3.591.8511,1.48838-.02416,2.42613-1.33124,3.32051-2.66914a10.962,10.962,0,0,0,1.51842-3.09251A4.78205,4.78205,0,0,1,24.76888,20.30068Z" style="fill: #fff"/>
+            <path id="_Path_2" data-name="&lt;Path&gt;" d="M22.03725,12.21089a4.87248,4.87248,0,0,0,1.11452-3.49062,4.95746,4.95746,0,0,0-3.20758,1.65961,4.63634,4.63634,0,0,0-1.14371,3.36139A4.09905,4.09905,0,0,0,22.03725,12.21089Z" style="fill: #fff"/>
+          </g>
+        </g>
+        <g>
+          <path d="M42.30227,27.13965h-4.7334l-1.13672,3.35645H34.42727l4.4834-12.418h2.083l4.4834,12.418H43.438ZM38.0591,25.59082h3.752l-1.84961-5.44727h-.05176Z" style="fill: #fff"/>
+          <path d="M55.15969,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H48.4302v1.50586h.03418a3.21162,3.21162,0,0,1,2.88281-1.60059C53.645,21.34766,55.15969,23.16406,55.15969,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C52.30227,29.01563,53.24953,27.81934,53.24953,25.96973Z" style="fill: #fff"/>
+          <path d="M65.12453,25.96973c0,2.81348-1.50586,4.62109-3.77832,4.62109a3.0693,3.0693,0,0,1-2.84863-1.584h-.043v4.48438h-1.8584V21.44238H58.395v1.50586h.03418A3.21162,3.21162,0,0,1,61.312,21.34766C63.60988,21.34766,65.12453,23.16406,65.12453,25.96973Zm-1.91016,0c0-1.833-.94727-3.03809-2.39258-3.03809-1.41992,0-2.375,1.23047-2.375,3.03809,0,1.82422.95508,3.0459,2.375,3.0459C62.26711,29.01563,63.21438,27.81934,63.21438,25.96973Z" style="fill: #fff"/>
+          <path d="M71.71047,27.03613c.1377,1.23145,1.334,2.04,2.96875,2.04,1.56641,0,2.69336-.80859,2.69336-1.91895,0-.96387-.67969-1.541-2.28906-1.93652l-1.60937-.3877c-2.28027-.55078-3.33887-1.61719-3.33887-3.34766,0-2.14258,1.86719-3.61426,4.51855-3.61426,2.624,0,4.42285,1.47168,4.4834,3.61426h-1.876c-.1123-1.23926-1.13672-1.9873-2.63379-1.9873s-2.52148.75684-2.52148,1.8584c0,.87793.6543,1.39453,2.25488,1.79l1.36816.33594c2.54785.60254,3.60645,1.626,3.60645,3.44238,0,2.32324-1.85059,3.77832-4.79395,3.77832-2.75391,0-4.61328-1.4209-4.7334-3.667Z" style="fill: #fff"/>
+          <path d="M83.34621,19.2998v2.14258h1.72168v1.47168H83.34621v4.99121c0,.77539.34473,1.13672,1.10156,1.13672a5.80752,5.80752,0,0,0,.61133-.043v1.46289a5.10351,5.10351,0,0,1-1.03223.08594c-1.833,0-2.54785-.68848-2.54785-2.44434V22.91406H80.16262V21.44238H81.479V19.2998Z" style="fill: #fff"/>
+          <path d="M86.065,25.96973c0-2.84863,1.67773-4.63867,4.29395-4.63867,2.625,0,4.29492,1.79,4.29492,4.63867,0,2.85645-1.66113,4.63867-4.29492,4.63867C87.72609,30.6084,86.065,28.82617,86.065,25.96973Zm6.69531,0c0-1.9541-.89551-3.10742-2.40137-3.10742s-2.40039,1.16211-2.40039,3.10742c0,1.96191.89453,3.10645,2.40039,3.10645S92.76027,27.93164,92.76027,25.96973Z" style="fill: #fff"/>
+          <path d="M96.18606,21.44238h1.77246v1.541h.043a2.1594,2.1594,0,0,1,2.17773-1.63574,2.86616,2.86616,0,0,1,.63672.06934v1.73828a2.59794,2.59794,0,0,0-.835-.1123,1.87264,1.87264,0,0,0-1.93652,2.083v5.37012h-1.8584Z" style="fill: #fff"/>
+          <path d="M109.3843,27.83691c-.25,1.64355-1.85059,2.77148-3.89844,2.77148-2.63379,0-4.26855-1.76465-4.26855-4.5957,0-2.83984,1.64355-4.68164,4.19043-4.68164,2.50488,0,4.08008,1.7207,4.08008,4.46582v.63672h-6.39453v.1123a2.358,2.358,0,0,0,2.43555,2.56445,2.04834,2.04834,0,0,0,2.09082-1.27344Zm-6.28223-2.70215h4.52637a2.1773,2.1773,0,0,0-2.2207-2.29785A2.292,2.292,0,0,0,103.10207,25.13477Z" style="fill: #fff"/>
+        </g>
+      </g>
+    </g>
+    <g id="_Group_4" data-name="&lt;Group&gt;">
+      <g>
+        <path d="M37.82619,8.731a2.63964,2.63964,0,0,1,2.80762,2.96484c0,1.90625-1.03027,3.002-2.80762,3.002H35.67092V8.731Zm-1.22852,5.123h1.125a1.87588,1.87588,0,0,0,1.96777-2.146,1.881,1.881,0,0,0-1.96777-2.13379h-1.125Z" style="fill: #fff"/>
+        <path d="M41.68068,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C44.57522,13.99463,45.01369,13.42432,45.01369,12.44434Z" style="fill: #fff"/>
+        <path d="M51.57326,14.69775h-.92187l-.93066-3.31641h-.07031l-.92676,3.31641h-.91309l-1.24121-4.50293h.90137l.80664,3.436h.06641l.92578-3.436h.85254l.92578,3.436h.07031l.80273-3.436h.88867Z" style="fill: #fff"/>
+        <path d="M53.85354,10.19482H54.709v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915h-.88867V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
+        <path d="M59.09377,8.437h.88867v6.26074h-.88867Z" style="fill: #fff"/>
+        <path d="M61.21779,12.44434a2.13346,2.13346,0,1,1,4.24756,0,2.1338,2.1338,0,1,1-4.24756,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C64.11232,13.99463,64.5508,13.42432,64.5508,12.44434Z" style="fill: #fff"/>
+        <path d="M66.4009,13.42432c0-.81055.60352-1.27783,1.6748-1.34424l1.21973-.07031v-.38867c0-.47559-.31445-.74414-.92187-.74414-.49609,0-.83984.18213-.93848.50049h-.86035c.09082-.77344.81836-1.26953,1.83984-1.26953,1.12891,0,1.76563.562,1.76563,1.51318v3.07666h-.85547v-.63281h-.07031a1.515,1.515,0,0,1-1.35254.707A1.36026,1.36026,0,0,1,66.4009,13.42432Zm2.89453-.38477v-.37646l-1.09961.07031c-.62012.0415-.90137.25244-.90137.64941,0,.40527.35156.64111.835.64111A1.0615,1.0615,0,0,0,69.29543,13.03955Z" style="fill: #fff"/>
+        <path d="M71.34816,12.44434c0-1.42285.73145-2.32422,1.86914-2.32422a1.484,1.484,0,0,1,1.38086.79h.06641V8.437h.88867v6.26074h-.85156v-.71143h-.07031a1.56284,1.56284,0,0,1-1.41406.78564C72.0718,14.772,71.34816,13.87061,71.34816,12.44434Zm.918,0c0,.95508.4502,1.52979,1.20313,1.52979.749,0,1.21191-.583,1.21191-1.52588,0-.93848-.46777-1.52979-1.21191-1.52979C72.72121,10.91846,72.26613,11.49707,72.26613,12.44434Z" style="fill: #fff"/>
+        <path d="M79.23,12.44434a2.13323,2.13323,0,1,1,4.24707,0,2.13358,2.13358,0,1,1-4.24707,0Zm3.333,0c0-.97607-.43848-1.54687-1.208-1.54687-.77246,0-1.207.5708-1.207,1.54688,0,.98389.43457,1.55029,1.207,1.55029C82.12453,13.99463,82.563,13.42432,82.563,12.44434Z" style="fill: #fff"/>
+        <path d="M84.66945,10.19482h.85547v.71533h.06641a1.348,1.348,0,0,1,1.34375-.80225,1.46456,1.46456,0,0,1,1.55859,1.6748v2.915H87.605V12.00586c0-.72363-.31445-1.0835-.97168-1.0835a1.03294,1.03294,0,0,0-1.0752,1.14111v2.63428h-.88867Z" style="fill: #fff"/>
+        <path d="M93.51516,9.07373v1.1416h.97559v.74854h-.97559V13.2793c0,.47168.19434.67822.63672.67822a2.96657,2.96657,0,0,0,.33887-.02051v.74023a2.9155,2.9155,0,0,1-.4834.04541c-.98828,0-1.38184-.34766-1.38184-1.21582v-2.543h-.71484v-.74854h.71484V9.07373Z" style="fill: #fff"/>
+        <path d="M95.70461,8.437h.88086v2.48145h.07031a1.3856,1.3856,0,0,1,1.373-.80664,1.48339,1.48339,0,0,1,1.55078,1.67871v2.90723H98.69v-2.688c0-.71924-.335-1.0835-.96289-1.0835a1.05194,1.05194,0,0,0-1.13379,1.1416v2.62988h-.88867Z" style="fill: #fff"/>
+        <path d="M104.76125,13.48193a1.828,1.828,0,0,1-1.95117,1.30273A2.04531,2.04531,0,0,1,100.73,12.46045a2.07685,2.07685,0,0,1,2.07617-2.35254c1.25293,0,2.00879.856,2.00879,2.27V12.688h-3.17969v.0498a1.1902,1.1902,0,0,0,1.19922,1.29,1.07934,1.07934,0,0,0,1.07129-.5459Zm-3.126-1.45117h2.27441a1.08647,1.08647,0,0,0-1.1084-1.1665A1.15162,1.15162,0,0,0,101.63527,12.03076Z" style="fill: #fff"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/dist/assets/fdroid-badge.svg

@@ -0,0 +1,124 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Original Author: Unknown (if you are the original creator of the F-Droid button, please contact laura@ind.ie so I can credit you!)  -->
+<!-- Author: Created by Laura Kalbag and Released with ❤ by ind.ie (laura@ind.ie) -->
+<!-- License: This work is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/4.0/. (As attribution is included in this file, you needn't include additional attribution on your site.) -->
+<!-- How to use: The original blog post about this SVG button and how I use SVG on the Ind.ie website is at https://ind.ie/blog/f-droid-button/ -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="button_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="1490 188 300 104" enable-background="new 1490 188 300 104" xml:space="preserve">
+<g id="get_it_on_f-droid_2_">
+	<path id="button" d="M1780,292h-280c-5.5,0-10-4.5-10-10v-84c0-5.5,4.5-10,10-10h280c5.5,0,10,4.5,10,10v84
+		C1790,287.5,1785.5,292,1780,292z"/>
+	<g id="f-droid_2_">
+		<path fill="#FFFFFF" d="M1621.2,236.8v3.6v1.2v5h-0.3h-0.6h-2.2c-0.7,0-1-0.3-1.2-1c-0.1-0.4-0.2-1.6-0.3-3.4h-13.5v11.1h13.2v5.5
+			h-13.2v10.1c0.9,0.2,1.7,0.3,2.6,0.4c0.9,0.2,1.3,0.7,1.3,1.6v3h-3.9h-7.1h-3.9v-3c0-0.9,0.4-1.5,1.3-1.6c0.9-0.2,1.7-0.3,2.6-0.4
+			V242c-0.9-0.2-1.7-0.3-2.6-0.4c-0.9-0.2-1.3-0.7-1.3-1.6v-3h3.9h22.7h1.2L1621.2,236.8L1621.2,236.8z"/>
+		<path fill="#FFFFFF" d="M1637.2,256v5.4h-13.5V256H1637.2z"/>
+		<path fill="#FFFFFF" d="M1676.7,255.6c0,5-1.7,10-5.3,13.5c-3.7,3.6-8.8,5.3-13.9,5.3h-13.9h-3.9v-3c0-0.9,0.4-1.5,1.3-1.6
+			c0.9-0.2,1.7-0.3,2.6-0.4V242c-0.9-0.2-1.7-0.3-2.6-0.4c-0.9-0.2-1.3-0.7-1.3-1.6v-3h3.9h13.9c5.1,0,10.2,1.6,13.9,5.3
+			C1675.1,245.6,1676.7,250.7,1676.7,255.6C1676.7,258.4,1676.7,252.9,1676.7,255.6z M1669.6,255.6c0-3.4-0.8-6.9-3.1-9.5
+			s-5.6-3.7-8.9-3.7h-6.8v26.4h6.8c3.4,0,6.7-1.1,8.9-3.7C1668.8,262.5,1669.6,259,1669.6,255.6z"/>
+		<path fill="#FFFFFF" d="M1699.7,248.1l-0.9,4.8c-0.2,1.1-1.3,0.9-2.1,0.7c-1-0.3-2.2-0.3-3.1,0c-2.2,0.5-3.7,2.3-4.5,4.2v11.4
+			c2.3,0.4,2.3,0.4,2.6,0.4c0.9,0.2,1.3,0.7,1.3,1.6v3h-3.9l0,0h-6.5h-3.9v-3c0-0.9,0.4-1.5,1.3-1.6c0.4-0.1,0.4-0.1,2.6-0.4v-16.3
+			c-2.3-0.4-2.3-0.4-2.6-0.4c-0.9-0.2-1.3-0.7-1.3-1.6v-3h3.9l0,0h3.8c1.1,0,1.7,0.4,1.9,1.6l0.3,3.2c1.1-1.9,2.6-3.7,4.7-4.7
+			C1695.2,247,1697.8,246.9,1699.7,248.1z"/>
+		<path fill="#FFFFFF" d="M1719.4,248.3c5.7,2.3,8,8,7.8,13.7c-0.3,5.6-3.4,10.7-9.1,12.3c-5.4,1.5-11.9,0-15.1-4.9
+			c-3.1-4.6-3.2-11.6-0.3-16.4C1706,247.6,1713.6,246,1719.4,248.3C1721,248.9,1717.8,247.6,1719.4,248.3z M1718.9,267.6
+			c2-2.8,2-7.1,1.2-10.2c-0.3-1.5-1-2.9-2.2-3.9c-1.3-1-3-1.4-4.6-1.2c-3.5,0.2-5.3,2.7-5.8,5.9c-0.5,3.1-0.5,7.5,1.8,10
+			C1711.8,270.7,1716.8,270.5,1718.9,267.6C1720,266.2,1717.9,269.1,1718.9,267.6z"/>
+		<path fill="#FFFFFF" d="M1743.3,271.4v3h-3.9h-6.5h-4v-3c0-0.9,0.4-1.5,1.3-1.6c0.9-0.2,1.7-0.3,2.6-0.4v-16.4
+			c-0.9-0.2-1.7-0.3-2.6-0.4c-0.9-0.2-1.3-0.7-1.3-1.6v-3h3.9h6.5v21.5c0.9,0.2,1.7,0.3,2.6,0.4
+			C1742.9,269.9,1743.3,270.5,1743.3,271.4z M1740,241.6c-1,2-3.4,3-5.4,2.2c-2-0.9-3.1-3.3-2.2-5.3c0.9-2.1,3.3-3,5.4-2.2
+			C1739.9,237.1,1741,239.5,1740,241.6C1739.8,242,1740.3,241,1740,241.6z"/>
+		<path fill="#FFFFFF" d="M1773.4,274.3h-3.7h-3.9c-0.8,0-1.5-0.3-1.7-1.2l-0.5-2.4c-2.4,2.8-5.9,4.5-9.8,4.1
+			c-3.8-0.4-6.5-3.2-7.8-6.6c-2.4-6.6-1.3-16.3,5.6-19.8c3.8-1.9,8.5-1.5,11.6,1.5V241c-0.9-0.2-1.7-0.3-2.6-0.4
+			c-0.9-0.2-1.3-0.7-1.3-1.6v-3h3.9h6.5v33.5c0.8,0.2,1.6,0.3,2.4,0.4c0.9,0.2,1.3,0.7,1.3,1.6V274.3z M1763.3,254.6
+			c-1.7-2-4.2-2.9-6.7-2.3c-2.5,0.6-3.9,2.8-4.4,5.1c-0.5,2.3-0.5,5-0.1,7.4c0.4,2.3,1.7,4.4,4.1,4.9c2.9,0.5,5.4-1,7.2-3.1V254.6z"
+			/>
+	</g>
+	<g id="get_it_on_2_">
+		<path fill="#FFFFFF" d="M1597.5,218.2v-2.9h7.6v6.9c-3.7,3.6-11.2,3.9-14.5-0.3c-3.3-4.2-2.4-11.5,2.6-14c2.2-1.1,5.1-1.1,7.3-0.4
+			s3.8,2.4,4.3,4.7l-3.5,0.7c-0.7-2.5-3.5-3.3-5.8-2.5c-2.2,0.7-3.1,2.8-3.2,4.9c-0.1,2.2,0.3,4.6,2.1,5.9c2.1,1.6,5.1,0.9,7-0.6
+			v-2.3H1597.5z"/>
+		<path fill="#FFFFFF" d="M1608.3,224.7v-17.3h13v2.9h-9.4v3.8h8.8v2.9h-8.8v4.8h9.8v2.9L1608.3,224.7L1608.3,224.7z"/>
+		<path fill="#FFFFFF" d="M1628.6,224.7v-14.4h-5.1v-2.9h13.9v2.9h-5.1v14.5L1628.6,224.7L1628.6,224.7z"/>
+		<path fill="#FFFFFF" d="M1646.3,224.7v-17.3h3.5v17.3H1646.3z"/>
+		<path fill="#FFFFFF" d="M1657.1,224.7v-14.4h-5.1v-2.9h13.9v2.9h-5.1v14.5L1657.1,224.7L1657.1,224.7z"/>
+		<path fill="#FFFFFF" d="M1674.1,216.1c0-1.7,0.3-3.3,0.8-4.4c0.8-1.7,2.2-3.2,3.9-4c2.8-1.1,6.5-1,9,0.9c2.5,1.8,3.4,4.9,3.3,7.8
+			c-0.1,2.9-1.1,5.8-3.8,7.5c-2.5,1.6-6.1,1.6-8.7,0.3C1675.4,222.7,1674.1,219.4,1674.1,216.1z M1677.8,216c0,2.3,0.7,4.8,3.1,5.6
+			c2.2,0.9,4.8,0,5.8-2c1-1.9,1-4.9,0.3-6.8c-0.9-2.1-3.1-3.1-5.3-2.7C1678.7,210.6,1677.8,213.4,1677.8,216z"/>
+		<path fill="#FFFFFF" d="M1693.9,224.7v-17.3h3.4l7.2,11.6v-11.6h3.3v17.3h-3.6l-7.1-11.4v11.4H1693.9z"/>
+	</g>
+	<g id="droid_2_">
+		<g>
+
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="413.9844" y1="440.5436" x2="413.9844" y2="452.6552" gradientTransform="matrix(3.7209 0 0 -3.7209 0 1914.4187)">
+				<stop  offset="0" style="stop-color:#2B6099"/>
+				<stop  offset="0.1299" style="stop-color:#2F69A1"/>
+				<stop  offset="0.3451" style="stop-color:#3B83B6"/>
+				<stop  offset="0.5" style="stop-color:#4699C8"/>
+				<stop  offset="0.9944" style="stop-color:#479ECB"/>
+			</linearGradient>
+			<path fill="url(#SVGID_1_)" d="M1570.1,275.2h-59.3c-2.9,0-5.2-2.3-5.2-5.2v-34.7c0-2.9,2.4-5.2,5.2-5.2h59.3
+				c2.9,0,5.2,2.3,5.2,5.2V270C1575.3,272.8,1572.9,275.2,1570.1,275.2z"/>
+
+				<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="413.9844" y1="440.5436" x2="413.9844" y2="452.6552" gradientTransform="matrix(3.7209 0 0 -3.7209 0 1914.4187)">
+				<stop  offset="0" style="stop-color:#2B6099"/>
+				<stop  offset="0.5" style="stop-color:#58A4CD"/>
+				<stop  offset="0.7865" style="stop-color:#7FB8D9"/>
+				<stop  offset="1" style="stop-color:#9EC9E2"/>
+			</linearGradient>
+			<path fill="url(#SVGID_2_)" d="M1570.1,231.9c1.9,0,3.5,1.6,3.5,3.5V270c0,1.9-1.6,3.5-3.5,3.5h-59.3c-1.9,0-3.5-1.6-3.5-3.5
+				v-34.7c0-1.9,1.6-3.5,3.5-3.5H1570.1 M1570.1,230.1h-59.3c-2.9,0-5.2,2.3-5.2,5.2V270c0,2.9,2.4,5.2,5.2,5.2h59.3
+				c2.9,0,5.2-2.3,5.2-5.2v-34.7C1575.3,232.5,1572.9,230.1,1570.1,230.1L1570.1,230.1z"/>
+		</g>
+		<g>
+			<path fill="#295384" d="M1540.4,236.6c8.9,0,16.1,7.2,16.1,16c0,8.8-7.2,16-16.1,16s-16.1-7.2-16.1-16S1531.5,236.6,1540.4,236.6
+				 M1540.4,235.3c-9.6,0-17.4,7.8-17.4,17.3s7.8,17.3,17.4,17.3s17.4-7.8,17.4-17.3S1550.1,235.3,1540.4,235.3L1540.4,235.3z"/>
+		</g>
+		<path fill="#295384" d="M1535.4,251.1c1.9-5.7,10.7-3.9,10.2,2.2c-0.5,5.6-8.5,6.2-10.2,1.2c0,0,0,0.1,0,0l0,0
+			c-2.4,0.2-4.7,0.4-7.1,0.6c1.7,10.1,15.3,13.1,21.6,5.3c6.5-8,0.3-20.2-10-19.8c-5.6,0.3-10.5,4.3-11.5,9.8"/>
+		<path fill="#7B952D" d="M1580.3,198.7l-2-1.6c-0.3-0.3-1-0.3-1.2,0.1l-6.8,7.9c-0.3,0.3-0.3,1,0.1,1.2l2,1.6
+			c0.3,0.3,1,0.3,1.2-0.1l6.8-7.9C1580.7,199.6,1580.6,199,1580.3,198.7z"/>
+		<path fill="#7B952D" d="M1500.6,198.1l2-1.6c0.3-0.3,1-0.3,1.2,0.1l6.8,7.9c0.3,0.3,0.3,1-0.1,1.2l-2,1.6c-0.3,0.3-1,0.3-1.2-0.1
+			l-6.8-7.9C1500.2,199,1500.3,198.5,1500.6,198.1z"/>
+
+			<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="413.9844" y1="453.354" x2="413.9844" y2="459.4099" gradientTransform="matrix(3.7209 0 0 -3.7209 0 1914.4187)">
+			<stop  offset="0" style="stop-color:#BCDB52"/>
+			<stop  offset="0.3206" style="stop-color:#C5E358"/>
+			<stop  offset="0.5" style="stop-color:#CDEA5C"/>
+			<stop  offset="0.9944" style="stop-color:#DCF285"/>
+		</linearGradient>
+		<path fill="url(#SVGID_3_)" stroke="#7B952D" stroke-miterlimit="10" d="M1572.7,227.5h-64.5c-1,0-1.7-0.8-1.7-1.7v-19.1
+			c0-1,0.8-1.7,1.7-1.7h64.5c1,0,1.7,0.8,1.7,1.7v19.1C1574.4,226.7,1573.6,227.5,1572.7,227.5z"/>
+		<g>
+			<ellipse fill="#FFFFFF" cx="1523" cy="215.4" rx="6.1" ry="6.1"/>
+
+				<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="409.8439" y1="458.401" x2="408.7539" y2="454.8358" gradientTransform="matrix(3.7209 0 0 -3.7209 0 1914.4187)">
+				<stop  offset="0" style="stop-color:#8BA53D"/>
+				<stop  offset="8.484717e-02" style="stop-color:#94AE45"/>
+				<stop  offset="0.2259" style="stop-color:#AEC65C"/>
+				<stop  offset="0.4048" style="stop-color:#D7ED81"/>
+				<stop  offset="0.4246" style="stop-color:#DCF285"/>
+			</linearGradient>
+			<path fill="url(#SVGID_4_)" d="M1523,222.3c-3.8,0-7-3.1-7-6.9c0-3.8,3.1-6.9,7-6.9c3.8,0,7,3.1,7,6.9
+				C1529.9,219.2,1526.9,222.3,1523,222.3z M1523,210.2c-2.9,0-5.2,2.3-5.2,5.2s2.4,5.2,5.2,5.2s5.2-2.3,5.2-5.2
+				S1525.9,210.2,1523,210.2z"/>
+		</g>
+		<g>
+			<ellipse fill="#FFFFFF" cx="1557.8" cy="215.4" rx="6.1" ry="6.1"/>
+
+				<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="419.2189" y1="458.401" x2="418.129" y2="454.8359" gradientTransform="matrix(3.7209 0 0 -3.7209 0 1914.4187)">
+				<stop  offset="0" style="stop-color:#8BA53D"/>
+				<stop  offset="8.484717e-02" style="stop-color:#94AE45"/>
+				<stop  offset="0.2259" style="stop-color:#AEC65C"/>
+				<stop  offset="0.4048" style="stop-color:#D7ED81"/>
+				<stop  offset="0.4246" style="stop-color:#DCF285"/>
+			</linearGradient>
+			<path fill="url(#SVGID_5_)" d="M1557.8,222.3c-3.8,0-7-3.1-7-6.9c0-3.8,3.1-6.9,7-6.9c3.8,0,7,3.1,7,6.9
+				C1564.8,219.2,1561.8,222.3,1557.8,222.3z M1557.8,210.2c-2.9,0-5.2,2.3-5.2,5.2s2.4,5.2,5.2,5.2c2.9,0,5.2-2.3,5.2-5.2
+				S1560.8,210.2,1557.8,210.2z"/>
+		</g>
+	</g>
+</g>
+</svg>

package/dist/components/Alert/Alert.svelte

@@ -4,6 +4,7 @@
 	import Icon from '../Icon/Icon.svelte';
 	import Text from '../Text/Text.svelte';
 	import type { Color } from '../../types.js';
+	import { cleanClass } from '../../utils.js';
 	import {
 		mdiAlertOutline,
 		mdiCheckCircleOutline,
@@ -14,12 +15,13 @@
 
 	type Props = {
 		color?: Color;
-		icon?: string;
-		title: string;
+		icon?: string | false;
+		title?: string;
+		class?: string;
 		children?: Snippet;
 	};
 
-	const { color = 'info', icon: iconOverride, title, children }: Props = $props();
+	const { color = 'info', icon: iconOverride, title, class: className, children }: Props = $props();
 
 	const icons: Partial<Record<Color, string>> = {
 		success: mdiCheckCircleOutline,
@@ -27,12 +29,14 @@
 		danger: mdiCloseCircleOutline,
 	};
 
-	const icon = $derived(iconOverride || (icons[color] ?? mdiInformationOutline));
+	const icon = $derived(
+		iconOverride === false ? undefined : iconOverride || (icons[color] ?? mdiInformationOutline),
+	);
 </script>
 
-<Card {color} variant="subtle">
+<Card {color} variant="subtle" class={cleanClass(className)}>
 	<CardHeader>
-		<div class="flex gap-2">
+		<div class={cleanClass('flex gap-2')}>
 			{#if icon}
 				<div>
 					<Icon {icon} size="1.5em" class="h-7" />
@@ -40,7 +44,9 @@
 			{/if}
 
 			<div class="flex flex-col gap-2">
-				<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
+				{#if title}
+					<Text size="large" fontWeight={children ? 'bold' : undefined}>{title}</Text>
+				{/if}
 				{#if children}
 					{@render children()}
 				{/if}

package/dist/components/Alert/Alert.svelte.d.ts

@@ -2,8 +2,9 @@ import type { Color } from '../../types.js';
 import type { Snippet } from 'svelte';
 declare const Alert: import("svelte").Component<{
     color?: Color;
-    icon?: string;
-    title: string;
+    icon?: string | false;
+    title?: string;
+    class?: string;
     children?: Snippet;
 }, {}, "">;
 export default Alert;

package/dist/components/AppShell/AppShell.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { withChildrenSnippets } from '../../common/use-child.svelte.js';
+	import Scrollable from '../Scrollable/Scrollable.svelte';
+	import { ChildKey } from '../../constants.js';
+	import { cleanClass } from '../../utils.js';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		class?: string;
+		children?: Snippet;
+	};
+
+	const { class: className, children }: Props = $props();
+
+	const { getChildren: getChildSnippet } = withChildrenSnippets(ChildKey.AppShell);
+	const header = $derived(getChildSnippet(ChildKey.AppShellHeader));
+	const sidebar = $derived(getChildSnippet(ChildKey.AppShellSidebar));
+</script>
+
+<div class={cleanClass('flex h-screen flex-col overflow-hidden', className)}>
+	{#if header}
+		<header class="border-b">
+			{@render header?.()}
+		</header>
+	{/if}
+	<div class="flex w-full grow overflow-y-auto">
+		{#if sidebar}
+			{@render sidebar()}
+		{/if}
+		<Scrollable class="grow">
+			{@render children?.()}
+		</Scrollable>
+	</div>
+</div>

package/dist/components/AppShell/AppShell.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { Snippet } from 'svelte';
+declare const AppShell: import("svelte").Component<{
+    class?: string;
+    children?: Snippet;
+}, {}, "">;
+export default AppShell;

package/dist/components/AppShell/AppShellHeader.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ChildKey } from '../../constants.js';
+	import Child from '../../internal/Child.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		children: Snippet;
+	};
+
+	let { children }: Props = $props();
+</script>
+
+<Child for={ChildKey.AppShell} as={ChildKey.AppShellHeader}>
+	{@render children?.()}
+</Child>

package/dist/components/AppShell/AppShellHeader.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Snippet } from 'svelte';
+declare const AppShellHeader: import("svelte").Component<{
+    children: Snippet;
+}, {}, "">;
+export default AppShellHeader;

package/dist/components/AppShell/AppShellSidebar.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { ChildKey } from '../../constants.js';
+	import Child from '../../internal/Child.svelte';
+	import { cleanClass } from '../../utils.js';
+	import Scrollable from '../Scrollable/Scrollable.svelte';
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		class?: string;
+		children: Snippet;
+		noBorder?: boolean;
+	};
+
+	let { class: className, children, noBorder = false }: Props = $props();
+</script>
+
+<Child for={ChildKey.AppShell} as={ChildKey.AppShellSidebar}>
+	<Scrollable
+		class={cleanClass('hidden h-full w-min shrink-0 lg:block', className, noBorder || 'border-r')}
+	>
+		{@render children?.()}
+	</Scrollable>
+</Child>

package/dist/components/AppShell/AppShellSidebar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+declare const AppShellSidebar: import("svelte").Component<{
+    class?: string;
+    children: Snippet;
+    noBorder?: boolean;
+}, {}, "">;
+export default AppShellSidebar;

package/dist/components/AppShell/PageLayout.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title?: string | undefined;
+		description?: string | undefined;
+		scrollbar?: boolean;
+		buttons?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		title = undefined,
+		description = undefined,
+		scrollbar = true,
+		buttons,
+		children,
+	}: Props = $props();
+
+	let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden');
+	let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full');
+</script>
+
+<section class="relative">
+	{#if title || buttons}
+		<div
+			class="dark:border-immich-neutral dark:text-immich-dark-fg absolute flex h-16 w-full place-items-center justify-between border-b p-4"
+		>
+			<div class="flex items-center gap-2">
+				{#if title}
+					<div class="font-medium" tabindex="-1">{title}</div>
+				{/if}
+				{#if description}
+					<p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
+				{/if}
+			</div>
+			{@render buttons?.()}
+		</div>
+	{/if}
+
+	<div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
+		{@render children?.()}
+	</div>
+</section>

package/dist/components/AppShell/PageLayout.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+declare const PageLayout: import("svelte").Component<{
+    title?: string | undefined;
+    description?: string | undefined;
+    scrollbar?: boolean;
+    buttons?: Snippet;
+    children?: Snippet;
+}, {}, "">;
+export default PageLayout;

package/dist/components/Avatar/Avatar.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import type { Size } from '../../types.js';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size?: Size;
+		color?:
+			| 'primary'
+			| 'pink'
+			| 'red'
+			| 'yellow'
+			| 'blue'
+			| 'green'
+			| 'purple'
+			| 'orange'
+			| 'gray'
+			| 'amber';
+		name: string;
+	};
+
+	const { color = 'primary', size = 'medium', name }: Props = $props();
+
+	const styles = tv({
+		base: 'flex h-full w-full select-none items-center justify-center font-medium',
+		variants: {
+			size: {
+				tiny: 'w-5 h-5 text-xs',
+				small: 'w-7 h-7 text-sm',
+				medium: 'w-10 h-10 text-md',
+				large: 'w-12 h-12 text-lg',
+				giant: 'w-16 h-16 text-xl',
+			},
+			color: {
+				primary: 'bg-primary text-light',
+				pink: 'bg-pink-400 text-light',
+				red: 'bg-red-500 text-light',
+				yellow: 'bg-yellow-500 text-light',
+				purple: 'bg-purple-600 text-dark',
+				orange: 'bg-orange-600 text-light',
+				gray: 'bg-gray-600 text-dark',
+				amber: 'bg-amber-600 text-light',
+				blue: 'bg-blue-500 text-dark',
+				green: 'bg-green-600 text-dark',
+			},
+		},
+	});
+
+	const wrapper = tv({
+		base: 'overflow-hidden shadow-md rounded rounded-full',
+	});
+
+	const getInitials = (name: string) => {
+		return name
+			.split(' ')
+			.map((part) => part.at(0))
+			.join('')
+			.substr(0, 2)
+			.toUpperCase();
+	};
+
+	const initials = $derived(getInitials(name));
+</script>
+
+<figure class={wrapper()}>
+	<span class={styles({ size, color })}>{initials}</span>
+</figure>

package/dist/components/Avatar/Avatar.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Size } from '../../types.js';
+declare const Avatar: import("svelte").Component<{
+    size?: Size;
+    color?: "primary" | "pink" | "red" | "yellow" | "blue" | "green" | "purple" | "orange" | "gray" | "amber";
+    name: string;
+}, {}, "">;
+export default Avatar;

package/dist/components/Card/Card.svelte

@@ -27,28 +27,28 @@
 	}: Props = $props();
 
 	const cardStyles = tv({
-		base: 'rounded-2xl bg-light text-dark shadow-sm dark:border-gray-600 w-full overflow-hidden',
+		base: 'flex flex-col rounded-2xl bg-light text-dark shadow-sm w-full overflow-hidden',
 		variants: {
 			defaultStyle: {
-				true: 'border border-gray-300 dark:border-gray-600',
+				true: 'border',
 				false: '',
 				default: '',
 			},
 			outlineColor: {
 				primary: 'border border-primary',
-				secondary: 'border border-gray-300 dark:border-gray-600',
+				secondary: 'border',
 				success: 'border border-success',
 				danger: 'border border-danger',
 				warning: 'border border-warning',
 				info: 'border border-info',
 			},
 			subtleColor: {
-				primary: 'bg-primary/50 dark:bg-primary/25',
+				primary: 'bg-primary/25 dark:bg-primary/25',
 				secondary: 'bg-dark/15 text-dark',
-				success: 'bg-success/25 dark:bg-success/50',
+				success: 'bg-success/15 dark:bg-success/30',
 				danger: 'bg-danger/25 dark:bg-danger/50',
 				warning: 'bg-warning/25 dark:bg-warning/50',
-				info: 'bg-info/25',
+				info: 'bg-info/25 dark:bg-info/50',
 			},
 		},
 	});
@@ -155,9 +155,7 @@
 {/snippet}
 
 {#snippet footer()}
-	<div class="flex items-center p-4 pt-0">
-		{@render footerChildren?.()}
-	</div>
+	{@render footerChildren?.()}
 {/snippet}
 
 <div

package/dist/components/Card/CardBody.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <Child for={ChildKey.Card} as={ChildKey.CardBody}>
-	<div class={twMerge(cleanClass('w-full p-4', className))}>
+	<div class={twMerge(cleanClass('w-full grow p-4', className))}>
 		{@render children?.()}
 	</div>
 </Child>