Semantic releases & settings panel improvements (#9)

This pull request introduces a range of changes to improve the release
workflow, enhance the user interface, and streamline the codebase. The
most significant updates include implementing semantic release
automation, renaming and restructuring components, and refining the
styling and functionality of the UI.

### Workflow and Release Management:
* Updated `.github/workflows/deploy.yml` to rename the workflow to
"Release and Deploy," added permissions for GitHub Actions, and
integrated `semantic-release` for automated versioning and changelog
generation. The workflow now builds and deploys only if a new release is
published.
[[1]](diffhunk://#diff-28802fbf11c83a2eee09623fb192785e7ca92a3f40602a517c011b947a1822d3L1-R1)
[[2]](diffhunk://#diff-28802fbf11c83a2eee09623fb192785e7ca92a3f40602a517c011b947a1822d3L10-R23)
[[3]](diffhunk://#diff-28802fbf11c83a2eee09623fb192785e7ca92a3f40602a517c011b947a1822d3L42-R67)
* Added a `.releaserc.json` configuration file to define semantic
release plugins, including changelog generation, npm publishing, and
GitHub integration.
* Updated `package.json` to include semantic release dependencies.

### Documentation:
* Added a `CONTRIBUTING.md` file with guidelines for contributing,
including instructions for using conventional commits to automate
versioning and changelogs.

### UI and Styling Enhancements:
* Improved the `Input` component in `app/components/ui/input.tsx` by
modifying focus ring styles and applying consistent formatting.
[[1]](diffhunk://#diff-b9a6c9f7652ddf8fa58f96f8ec45530f9de86663d2d678954de6ac2856400c11L1-R3)
[[2]](diffhunk://#diff-b9a6c9f7652ddf8fa58f96f8ec45530f9de86663d2d678954de6ac2856400c11L12-R21)
* Enhanced the layout and styling of the main interface in
`app/components/root.tsx` (renamed from
`app/components/section/root.tsx`), including updates to card
components, labels, and buttons for a more polished UI.
[[1]](diffhunk://#diff-9a0b111763bec5af65c0eb219bdcb14deba81a1cdf3f7be8ca2f22f31f3bd73aL157-R177)
[[2]](diffhunk://#diff-9a0b111763bec5af65c0eb219bdcb14deba81a1cdf3f7be8ca2f22f31f3bd73aL213-R231)

### File Restructuring:
* Renamed several files for better organization and imports, such as
`app/components/icon-picker/root.tsx` to
`app/components/icon-picker.tsx` and `app/components/preview/root.tsx`
to `app/components/preview.tsx`. Updated corresponding imports across
the codebase.
[[1]](diffhunk://#diff-e048232737afcfdad9d227474370bdda035799872928213c938450e9630f8b19L81-R81)
[[2]](diffhunk://#diff-ce2af7bdea5a636c44305777c2f686af5b96a7181ab282730c6d87cbac907cd3L3-R3)
[[3]](diffhunk://#diff-d4d02e1e213a6e908bde87dfb239e6d84dfbaeed2616b5695726416fbb2b2acbL3-R3)

### Functional Updates:
* Updated the `IconPicker` component layout to use a grid-based
structure instead of a flexbox for better alignment of icons.

Author: tommerty

.github/workflows/deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy to Coolify
+name: Release and Deploy
 
 on:
   push:
@@ -7,11 +7,20 @@ on:
   workflow_dispatch:
 
 jobs:
-  deploy:
+  release_and_deploy:
+    name: Release and Deploy
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      issues: write
+      pull-requests: write
+      id-token: write
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.PAT }}
 
       - name: Setup Node.js
         uses: actions/setup-node@v4
@@ -39,13 +48,27 @@ jobs:
             ${{ runner.os }}-pnpm-store-
 
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm install --frozen-lockfile
+
+      - name: Release
+        id: semantic
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          RELEASE_OUTPUT=$(pnpm exec semantic-release || true)
+          if [ $? -eq 0 ]; then
+            echo "new_release_published=true" >> $GITHUB_OUTPUT
+            echo "new_release_version=$(echo "$RELEASE_OUTPUT" | grep -oP '(?<=The next release version is )\d+\.\d+\.\d+')" >> $GITHUB_OUTPUT
+          else
+            echo "new_release_published=false" >> $GITHUB_OUTPUT
+          fi
 
       - name: Build
+        if: steps.semantic.outputs.new_release_published == 'true'
         run: pnpm build
 
       - name: Deploy to Coolify
-        if: github.ref == 'refs/heads/main'
+        if: steps.semantic.outputs.new_release_published == 'true'
         run: |
           curl -X POST \
             -H "Authorization: Bearer ${{ secrets.COOLIFY_TOKEN }}" \

.releaserc.json

@@ -0,0 +1,22 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md"
+      }
+    ],
+    "@semantic-release/npm",
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["package.json", "pnpm-lock.yaml", "CHANGELOG.md"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "@semantic-release/github"
+  ]
+}

CONTRIBUTING.md

@@ -0,0 +1,50 @@
+# Contributing to Stream Deck Icons
+
+First off, thank you for considering contributing to this project! Your help is greatly appreciated.
+
+## How to Contribute
+
+We use a system of conventional commits to automate versioning and releases. When you contribute, it's important that your commit messages follow this specification.
+
+### Commit Message Format
+
+Each commit message consists of a **header**, a **body** and a **footer**. The header has a special format that includes a **type**, a **scope** and a **subject**:
+
+```
+<type>(<scope>): <subject>
+<BLANK LINE>
+<body>
+<BLANK LINE>
+<footer>
+```
+
+The **header** is mandatory and the **scope** of the header is optional.
+
+### Type
+
+The type must be one of the following:
+
+- **feat**: A new feature
+- **fix**: A bug fix
+- **docs**: Documentation only changes
+- **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
+- **refactor**: A code change that neither fixes a bug nor adds a feature
+- **perf**: A code change that improves performance
+- **test**: Adding missing tests or correcting existing tests
+- **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation
+- **revert**: Reverts a previous commit
+
+### Examples
+
+Here are some examples of commit messages:
+
+- **feat(icons): add new icon set for Adobe products**
+- **fix(picker): resolve issue where color picker would not update**
+- **docs(readme): update installation instructions**
+- **chore(release): 1.0.0**
+
+By following this convention, we can automatically generate changelogs and determine the next version number for the project.
+
+### Pull Requests
+
+Please create a pull request with your changes. Ensure your branch is up-to-date with the `main` branch before submitting. All pull requests will be reviewed before being merged.

app/components/icon-picker/root.tsx renamed to app/components/icon-picker.tsx

@@ -78,7 +78,7 @@ const IconPicker: React.FC<IconPickerProps> = ({
         </Button>
       </PopoverTrigger>
       <PopoverContent className="w-96 p-0">
-        <div className="flex flex-col gap-2 items-center justify-center">
+        <div className="flex flex-col gap-0 items-center justify-center">
           <Input
             placeholder="Search icons..."
             value={searchTerm}
@@ -87,7 +87,7 @@ const IconPicker: React.FC<IconPickerProps> = ({
           <div
             ref={scrollContainerRef}
             onScroll={handleScroll}
-            className="flex flex-wrap gap-2 h-80 overflow-y-auto p-3"
+            className="grid grid-cols-4 gap-2 h-80 overflow-y-auto p-3"
           >
             {iconsToRender.map((iconName) => {
               const IconComponent = (TablerIcons as any)[iconName];

app/components/preview/root.tsx renamed to app/components/preview.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import * as TablerIcons from "@tabler/icons-react";
-import { type TextPosition } from "~/components/text-position-control/root";
+import { type TextPosition } from "~/components/text-position-control";
 
 interface PreviewProps {
   icon: string;

app/components/section/root.tsx renamed to app/components/root.tsx

@@ -4,13 +4,13 @@ import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import * as TablerIcons from "@tabler/icons-react";
 import html2canvas from "html2canvas";
-import Preview from "~/components/preview/root";
+import Preview from "~/components/preview";
 import TextPositionControl, {
   type TextPosition,
-} from "~/components/text-position-control/root";
+} from "~/components/text-position-control";
 import printStyles from "~/lib/print-styles.css?raw";
 import { renderToStaticMarkup } from "react-dom/server";
-import IconPicker from "~/components/icon-picker/root";
+import IconPicker from "~/components/icon-picker";
 import { Link } from "react-router";
 
 const Root: React.FC = () => {
@@ -154,15 +154,27 @@ const Root: React.FC = () => {
     <div className="container w-full mx-auto p-4 min-h-dvh h-dvh">
       <div className="flex items-start gap-8 h-full">
         <div className="w-1/3 h-full min-h-full">
-          <Card className="min-h-full h-full overflow-auto">
-            <CardHeader>
-              <CardTitle>Stream Deck Icon Builder</CardTitle>
+          <Card className="min-h-full h-full p-0 gap-0 overflow-hidden">
+            <CardHeader className="p-3 bg-accent">
+              <CardTitle>Stream Deck Icon</CardTitle>
             </CardHeader>
-            <CardContent className="space-y-4">
-              <div>
-                <label>Text</label>
-                <Input value={text} onChange={(e) => setText(e.target.value)} />
+            <CardContent className="space-y-4 overflow-auto py-3 px-3">
+              <div className="group relative">
+                <label
+                  htmlFor={"text"}
+                  className="bg-card text-muted-foreground group-focus-within:text-foreground absolute start-1 top-0 z-10 block -translate-y-1/2 px-2 text-xs font-medium group-has-disabled:opacity-50"
+                >
+                  Text
+                </label>
+                <Input
+                  id={"text"}
+                  className="h-10 !bg-card"
+                  placeholder="My button"
+                  value={text}
+                  onChange={(e) => setText(e.target.value)}
+                />
               </div>
+
               <div>
                 <label>Icon</label>
                 <IconPicker
@@ -210,13 +222,13 @@ const Root: React.FC = () => {
                 />
               </div>
             </CardContent>
-            <div className="mt-auto px-6 flex flex-col gap-3">
+            <div className="mt-auto px-3 py-3 flex flex-col gap-3 bg-accent rounded-b-md">
               <Button className="w-full justify-start" onClick={handleDownload}>
                 <TablerIcons.IconDownload />
                 Download Icon
               </Button>
               <Link to="https://github.com/tommerty/streamdeck-icons">
-                <Button variant={"secondary"} className="w-full justify-start">
+                <Button variant={"outline"} className="w-full justify-start">
                   <TablerIcons.IconBrandGithub />
                   GitHub
                 </Button>

app/components/text-position-control/root.tsx renamed to app/components/text-position-control.tsx

@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "~/lib/utils"
+import { cn } from "~/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
@@ -9,13 +9,13 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       data-slot="input"
       className={cn(
         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[0px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };

app/components/ui/input.tsx

@@ -1,6 +1,6 @@
 import type { Route } from "./+types/home";
 import { Welcome } from "../welcome/welcome";
-import Root from "~/components/section/root";
+import Root from "~/components/root";
 
 export function meta({}: Route.MetaArgs) {
   return [

app/routes/home.tsx

@@ -27,15 +27,19 @@
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^10.1.3",
     "@react-router/dev": "^7.5.3",
     "@tailwindcss/vite": "^4.1.4",
     "@types/node": "^20",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "semantic-release": "^24.0.0",
     "tailwindcss": "^4.1.4",
     "tw-animate-css": "^1.3.5",
     "typescript": "^5.8.3",
     "vite": "^6.3.3",
     "vite-tsconfig-paths": "^5.1.4"
   }
-}
+}