adjust stories, move stuff

kitsune-soc · Jan 16, 2025 · 8cd83c1 · 8cd83c1
1 parent 1324ae5
commit 8cd83c1
Show file tree

Hide file tree

Showing 39 changed files with 222 additions and 1,052 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,4 +12,5 @@
     // Ensure VSCode uses pnpm instead of npm
     "eslint.packageManager": "pnpm",
     "npm.packageManager": "pnpm",
+    "css.lint.unknownAtRules": "ignore",
 }
diff --git a/kitsune-fe/package.json b/kitsune-fe/package.json
@@ -19,7 +19,7 @@
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "^3.2.3",
-		"@iconify-json/eos-icons": "^1.2.2",
+		"@iconify/svelte": "^4.2.0",
 		"@storybook/addon-essentials": "^8.5.0",
 		"@storybook/addon-interactions": "^8.5.0",
 		"@storybook/addon-svelte-csf": "^5.0.0-next.23",
@@ -52,7 +52,6 @@
 		"tailwindcss": "^3.4.17",
 		"typescript": "^5.7.3",
 		"typescript-eslint": "^8.19.1",
-		"unplugin-icons": "^22.0.0",
 		"vite": "^6.0.7",
 		"vitest": "^2.1.8",
 		"zod": "^3.24.1"

diff --git a/kitsune-fe/schema.graphql b/kitsune-fe/schema.graphql
@@ -1,6 +1,6 @@
 schema {
-	query: RootQuery
-	mutation: RootMutation
+  query: RootQuery
+  mutation: RootMutation
 }
 
 """
@@ -10,27 +10,27 @@ Indicates that an Input Object is a OneOf Input Object (and thus requires
 directive @oneOf on INPUT_OBJECT
 
 type Account {
-	avatar: MediaAttachment
-	createdAt: DateTime!
-	displayName: String
-	header: MediaAttachment
-	id: UUID!
-	locked: Boolean!
-	note: String
-	posts(after: String, before: String, first: Int, last: Int): PostConnection!
-	updatedAt: DateTime!
-	url: String!
-	username: String!
+  avatar: MediaAttachment
+  createdAt: DateTime!
+  displayName: String
+  header: MediaAttachment
+  id: UUID!
+  locked: Boolean!
+  note: String
+  posts(after: String, before: String, first: Int, last: Int): PostConnection!
+  updatedAt: DateTime!
+  url: String!
+  username: String!
 }
 
 enum CaptchaBackend {
-	H_CAPTCHA
-	M_CAPTCHA
+  H_CAPTCHA
+  M_CAPTCHA
 }
 
 type CaptchaInfo {
-	backend: CaptchaBackend!
-	key: String!
+  backend: CaptchaBackend!
+  key: String!
 }
 
 """
@@ -44,133 +44,99 @@ format, but it is always normalized to the UTC (Z) offset, e.g.
 scalar DateTime
 
 type Instance {
-	captcha: CaptchaInfo
-	characterLimit: Int!
-	description: String!
-	domain: String!
-	localPostCount: Int!
-	name: String!
-	registrationsOpen: Boolean!
-	userCount: Int!
-	version: String!
+  captcha: CaptchaInfo
+  characterLimit: Int!
+  description: String!
+  domain: String!
+  localPostCount: Int!
+  name: String!
+  registrationsOpen: Boolean!
+  userCount: Int!
+  version: String!
 }
 
 type MediaAttachment {
-	blurhash: String
-	contentType: String!
-	createdAt: DateTime!
-	description: String
-	id: UUID!
-	uploader: Account!
-	url: String!
+  blurhash: String
+  contentType: String!
+  createdAt: DateTime!
+  description: String
+  id: UUID!
+  uploader: Account!
+  url: String!
 }
 
 type OAuth2Application {
-	createdAt: DateTime!
-	id: UUID!
-	name: String!
-	redirectUri: String!
-	secret: String!
-	updatedAt: DateTime!
+  createdAt: DateTime!
+  id: UUID!
+  name: String!
+  redirectUri: String!
+  secret: String!
+  updatedAt: DateTime!
 }
 
-"""
-Information about pagination in a connection
-"""
+"""Information about pagination in a connection"""
 type PageInfo {
-	"""
-	When paginating forwards, the cursor to continue.
-	"""
-	endCursor: String
-
-	"""
-	When paginating forwards, are there more items?
-	"""
-	hasNextPage: Boolean!
-
-	"""
-	When paginating backwards, are there more items?
-	"""
-	hasPreviousPage: Boolean!
-
-	"""
-	When paginating backwards, the cursor to continue.
-	"""
-	startCursor: String
+  """When paginating forwards, the cursor to continue."""
+  endCursor: String
+
+  """When paginating forwards, are there more items?"""
+  hasNextPage: Boolean!
+
+  """When paginating backwards, are there more items?"""
+  hasPreviousPage: Boolean!
+
+  """When paginating backwards, the cursor to continue."""
+  startCursor: String
 }
 
 type Post {
-	account: Account!
-	attachments: [MediaAttachment!]!
-	content: String!
-	createdAt: DateTime!
-	id: UUID!
-	isSensitive: Boolean!
-	subject: String
-	updatedAt: DateTime!
-	url: String!
-	visibility: Visibility!
+  account: Account!
+  attachments: [MediaAttachment!]!
+  content: String!
+  createdAt: DateTime!
+  id: UUID!
+  isSensitive: Boolean!
+  subject: String
+  updatedAt: DateTime!
+  url: String!
+  visibility: Visibility!
 }
 
 type PostConnection {
-	"""
-	A list of edges.
-	"""
-	edges: [PostEdge!]!
-
-	"""
-	A list of nodes.
-	"""
-	nodes: [Post!]!
-
-	"""
-	Information to aid in pagination.
-	"""
-	pageInfo: PageInfo!
+  """A list of edges."""
+  edges: [PostEdge!]!
+
+  """A list of nodes."""
+  nodes: [Post!]!
+
+  """Information to aid in pagination."""
+  pageInfo: PageInfo!
 }
 
-"""
-An edge in a connection.
-"""
+"""An edge in a connection."""
 type PostEdge {
-	"""
-	A cursor for use in pagination
-	"""
-	cursor: String!
-
-	"""
-	The item at the end of the edge
-	"""
-	node: Post!
+  """A cursor for use in pagination"""
+  cursor: String!
+
+  """The item at the end of the edge"""
+  node: Post!
 }
 
 type RootMutation {
-	createPost(content: String!, isSensitive: Boolean!, visibility: Visibility!): Post!
-	deletePost(id: UUID!): UUID!
-	registerOauthApplication(name: String!, redirectUri: String!): OAuth2Application!
-	registerUser(captchaToken: String, email: String!, password: String!, username: String!): User!
-	updateUser(
-		avatar: Upload
-		displayName: String
-		header: Upload
-		locked: Boolean
-		note: String
-	): Account!
+  createPost(content: String!, isSensitive: Boolean!, visibility: Visibility!): Post!
+  deletePost(id: UUID!): UUID!
+  registerOauthApplication(name: String!, redirectUri: String!): OAuth2Application!
+  registerUser(captchaToken: String, email: String!, password: String!, username: String!): User!
+  updateUser(avatar: Upload, displayName: String, header: Upload, locked: Boolean, note: String): Account!
 }
 
 type RootQuery {
-	getAccountById(id: UUID!): Account
-	getPostById(id: UUID!): Post!
-	homeTimeline(after: String, before: String, first: Int, last: Int): PostConnection!
-	instance: Instance!
-	myAccount: Account!
-	publicTimeline(
-		after: String
-		before: String
-		first: Int
-		last: Int
-		onlyLocal: Boolean! = true
-	): PostConnection!
+  getAccountById(id: UUID!): Account
+  getPostById(id: UUID!): Post!
+  homeTimeline(after: String, before: String, first: Int, last: Int): PostConnection!
+  instance: Instance!
+  myAccount: Account!
+  publicTimeline(after: String, before: String, first: Int, last: Int, onlyLocal: Boolean! = true): PostConnection!
 }
 
 """
@@ -188,17 +154,17 @@ scalar UUID
 scalar Upload
 
 type User {
-	account: Account!
-	createdAt: DateTime!
-	email: String!
-	id: UUID!
-	updatedAt: DateTime!
-	username: String!
+  account: Account!
+  createdAt: DateTime!
+  email: String!
+  id: UUID!
+  updatedAt: DateTime!
+  username: String!
 }
 
 enum Visibility {
-	FOLLOWER_ONLY
-	MENTION_ONLY
-	PUBLIC
-	UNLISTED
+  FOLLOWER_ONLY
+  MENTION_ONLY
+  PUBLIC
+  UNLISTED
 }
diff --git a/kitsune-fe/src/hooks.server.ts b/kitsune-fe/src/hooks.server.ts
@@ -2,4 +2,5 @@ import { i18n } from '$lib/i18n';
 import type { Handle } from '@sveltejs/kit';
 
 const handleParaglide: Handle = i18n.handle();
+
 export const handle: Handle = handleParaglide;
diff --git a/kitsune-fe/src/lib/components/Button.svelte b/kitsune-fe/src/lib/components/Button.svelte
@@ -1,35 +1,51 @@
 <script lang="ts">
+	import Icon from '@iconify/svelte';
+
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 
 	let {
-		class: classNames = '',
 		children,
 		buttonType = 'primary',
+		loading = false,
 		...rest
 	}: {
-		class?: string;
 		/**
 		 * The type of button to render.
 		 *
 		 * @default 'primary'
 		 */
 		buttonType?: 'primary' | 'secondary' | 'danger';
+		loading?: boolean;
 		children: Snippet;
 	} & HTMLButtonAttributes = $props();
 
-	if (buttonType === 'primary') {
-		classNames += ` [&:not(:hover)]:text-dark-1 bg-shade1-dark hover:enabled:bg-shade2-dark`;
-	} else if (buttonType === 'secondary') {
-		classNames += ` border-solid border-2 bg-transparent`;
-	} else if (buttonType === 'danger') {
-		classNames += ` bg-red-700 text-white`;
-	}
+	let disabled = $derived(rest.disabled || loading);
 </script>
 
 <button
-	class={classNames + ` min-h-1 cursor-pointer rounded p-2 transition duration-500`}
 	{...rest}
+	class="min-h-1 rounded p-2 transition duration-500 {buttonType} {rest.class}"
+	class:cursor-not-allowed={disabled}
+	{disabled}
 >
-	{@render children()}
+	{#if loading}
+		<Icon class="m-auto h-auto w-8" icon="line-md:loading-loop" />
+	{:else}
+		{@render children()}
+	{/if}
 </button>
+
+<style>
+	.primary {
+		@apply bg-shade1-dark hover:enabled:bg-shade2-dark disabled:text-dark-1 [&:not(:hover)]:text-dark-1;
+	}
+
+	.secondary {
+		@apply border-2 border-solid bg-transparent;
+	}
+
+	.danger {
+		@apply bg-red-700 text-white;
+	}
+</style>
diff --git a/kitsune-fe/src/lib/components/Footer.svelte b/kitsune-fe/src/lib/components/Footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	let { backendVersion, frontendVersion }: { backendVersion: string; frontendVersion: string } =
+		$props();
+</script>
+
+<footer class="w-full text-sm max-lg:mb-5 max-lg:text-center lg:fixed lg:bottom-3 lg:left-3">
+	<p>
+		Backend version: {backendVersion}
+		<br />Frontend version: {frontendVersion}
+	</p>
+
+	<span>
+		Powered by
+		<a target="_blank" href="https://github.com/kitsune-soc/kitsune">Kitsune</a>
+	</span>
+</footer>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,4 +2,5 @@ import { i18n } from '$lib/i18n';
		import type { Handle } from '@sveltejs/kit';

		const handleParaglide: Handle = i18n.handle();

		export const handle: Handle = handleParaglide;