Merge pull request #68 from MaddyGuthridge/maddy-usability-improvements

Various miscellaneous usability improvements

Author: MaddyGuthridge

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "minifolio",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": true,
   "license": "GPL-3.0-only",
   "scripts": {

package.json

@@ -2,7 +2,7 @@
   import { tooltip } from '$lib/ui';
   import type { Snippet } from 'svelte';
 
-  type Props = {
+  export type ButtonProps = {
     /** Display mode for button (controls background color) */
     mode?: 'default' | 'warning' | 'confirm';
     /** Hint for button (controls tooltip and aria-label) */
@@ -29,7 +29,7 @@
     disabled,
     onclick,
     mode = 'default',
-  }: Props = $props();
+  }: ButtonProps = $props();
 
   let { color, hoverColor, clickColor } = $derived.by(() => {
     if (mode === 'warning') {

src/components/base/Button.svelte renamed to src/components/base/button/Button.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Button } from './base';
+  import Button from './Button.svelte';
 
   type Props = {
     text: string;

src/components/CopyButton.svelte renamed to src/components/base/button/CopyButton.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Button, { type ButtonProps } from './Button.svelte';
+
+  // TypeScript seems to have it figured out, so not sure what ESLint is thinking :/
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  type Props = ButtonProps & { running: boolean };
+
+  const { children, running, ...rest }: Props = $props();
+</script>
+
+<Button {...rest}>
+  <div>
+    {#if running}
+      <div class="spin">
+        <i class="las la-sync"></i>
+      </div>
+    {/if}
+    {@render children()}
+  </div>
+</Button>
+
+<style>
+  div {
+    display: flex;
+    gap: 10px;
+  }
+
+  @keyframes rotating {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  .spin {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: rotating 2s linear infinite;
+  }
+</style>

src/components/base/button/SpinnerButton.svelte

@@ -0,0 +1,5 @@
+export { default as CopyButton } from './CopyButton.svelte';
+export { default as SpinnerButton } from './SpinnerButton.svelte';
+
+import Button from './Button.svelte';
+export default Button;

src/components/base/button/index.ts

@@ -1,4 +1,4 @@
-export { default as Button } from './Button.svelte';
+export { default as Button } from './button';
 export { default as Select } from './Select.svelte';
 export { default as TextInput } from './TextInput.svelte';
 export { default as TextArea } from './TextArea.svelte';

src/components/base/index.ts

@@ -69,6 +69,7 @@
   .card-outer {
     display: flex;
     flex-direction: column;
+    justify-content: center;
     height: 100%;
   }
 

src/components/card/ItemCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { dev } from '$app/environment';
   import { goto } from '$app/navigation';
-  import Button from '$components/base/Button.svelte';
+  import Button from '$components/base/button/Button.svelte';
   import Separator from '$components/Separator.svelte';
   import api from '$endpoints';
 

src/components/navbar/ControlButtons.svelte

@@ -55,6 +55,16 @@ export default (fetchFn: typeof fetch, token: string | undefined) => ({
     ).json() as Promise<RepoStatus>;
   },
 
+  /** Perform a git fetch */
+  fetch: async () => {
+    return apiFetch(
+      fetchFn,
+      'POST',
+      '/api/admin/git/fetch',
+      { token },
+    ).json() as Promise<RepoStatus>;
+  },
+
   /** Perform a git push */
   push: async () => {
     return apiFetch(