Merge develop to main

.github/workflows/deploy.yml

@@ -15,18 +15,21 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: lts/*
+          cache: pnpm
 
-      - name: Deps
-        run: |
-          npm install --global pnpm
-          pnpm i
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
 
-      - name: Build plugin(s)
-        run: pnpm lune ci
+      - name: Check code
+        run: pnpm check
 
       - name: Run SSG
         run: |
@@ -47,4 +50,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4

.github/workflows/lint.yml

@@ -0,0 +1,26 @@
+name: CI
+
+on:
+  pull_request:
+  push:
+    branches: [main, develop]
+
+permissions: {}
+
+jobs:
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+      - run: pnpm check

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm lint-staged

README.md

@@ -8,3 +8,26 @@ A collection of stable and useful plugins for Shelter.
 
 - [Browser](https://ilyeshdz.github.io/plugins/browser)
 - [Leaver](https://ilyeshdz.github.io/plugins/leaver)
+
+## Development
+
+```sh
+pnpm install
+pnpm run check
+```
+
+Useful commands:
+
+- `pnpm run fmt:check` checks formatting.
+- `pnpm run lint` runs Oxlint.
+- `pnpm run typecheck` runs TypeScript without emitting files.
+- `pnpm run build` builds all plugins with Lune.
+
+## Structure
+
+- `plugins/*` contains each Shelter plugin entrypoint, pages, icons, and
+  manifest.
+- `components` contains shared Solid UI pieces.
+- `lib/shelter` contains adapters around the Shelter runtime.
+- `lib` contains feature services and reusable utilities.
+- `lune-ssg` contains the static site templates used for GitHub Pages.

components/dropdown/index.scss

@@ -1,35 +1,35 @@
 .dropdownWrapper {
-    position: relative;
-    flex: 1;
+  position: relative;
+  flex: 1;
 
-    svg {
-        position: absolute;
-        right: 12px;
-        top: 50%;
-        transform: translateY(-50%);
-        pointer-events: none;
-        color: var(--header-secondary);
-    }
+  svg {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--header-secondary);
+  }
 }
 
 .dropdownSelect {
-    width: 100%;
-    padding: 10px 32px 10px 12px;
-    background: var(--input-background-default);
-    border: 1px solid var(--input-border-default);
-    border-radius: 4px;
-    color: var(--input-text);
-    font-size: 14px;
-    cursor: pointer;
-    appearance: none;
-    transition: border-color 0.2s;
+  width: 100%;
+  padding: 10px 32px 10px 12px;
+  background: var(--input-background-default);
+  border: 1px solid var(--input-border-default);
+  border-radius: 4px;
+  color: var(--input-text);
+  font-size: 14px;
+  cursor: pointer;
+  appearance: none;
+  transition: border-color 0.2s;
 
-    &:hover {
-        border-color: var(--input-border-hover);
-    }
+  &:hover {
+    border-color: var(--input-border-hover);
+  }
 
-    &:focus {
-        outline: none;
-        border-color: var(--brand-experiment);
-    }
-}
+  &:focus {
+    outline: none;
+    border-color: var(--brand-experiment);
+  }
+}

components/dropdown/index.tsx

@@ -1,47 +1,60 @@
 import { For } from "solid-js";
+
 import classes from "./index.scss";
 
 const {
-    ui: {
-        injectCss
-    }
+  ui: { injectCss },
 } = shelter;
 
-export const unloadDropdownCss = injectCss(classes.dropdownWrapper + " " + classes.dropdownSelect);
+export const unloadDropdownCss = injectCss(
+  classes.dropdownWrapper + " " + classes.dropdownSelect,
+);
 
 interface DropdownOption {
-    value: string;
-    label: string;
+  value: string;
+  label: string;
 }
 
 interface DropdownProps {
-    options: DropdownOption[];
-    value: string;
-    onChange: (value: string) => void;
-    class?: string;
+  options: DropdownOption[];
+  value: string;
+  onChange: (value: string) => void;
+  class?: string;
 }
 
 function ChevronDown() {
-    return (
-        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M6 9l6 6 6-6"/>
-        </svg>
-    );
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+    >
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  );
 }
 
 export function Dropdown(props: DropdownProps) {
-    return (
-        <div class={`${classes.dropdownWrapper} ${props.class || ''}`}>
-            <select
-                class={classes.dropdownSelect}
-                value={props.value}
-                onChange={(e: Event) => props.onChange((e.currentTarget as HTMLSelectElement).value)}
-            >
-                <For each={props.options} children={(option) => (
-                    <option value={option.value}>{option.label}</option>
-                )} />
-            </select>
-            <ChevronDown />
-        </div>
-    );
+  return (
+    <div class={`${classes.dropdownWrapper} ${props.class || ""}`}>
+      <select
+        class={classes.dropdownSelect}
+        value={props.value}
+        onChange={(e: Event) =>
+          props.onChange((e.currentTarget as HTMLSelectElement).value)
+        }
+      >
+        <For
+          each={props.options}
+          children={(option) => (
+            <option value={option.value}>{option.label}</option>
+          )}
+        />
+      </select>
+      <ChevronDown />
+    </div>
+  );
 }

components/feedback/index.scss

@@ -1,20 +1,20 @@
 .feedback {
-    border-radius: 6px;
-    padding: 12px;
-    font-size: 14px;
+  border-radius: 6px;
+  padding: 12px;
+  font-size: 14px;
 }
 
 .warning {
-    background-color: var(--background-feedback-warning);
-    color: var(--text-feedback-warning);
+  background-color: var(--background-feedback-warning);
+  color: var(--text-feedback-warning);
 }
 
 .info {
-    background-color: var(--background-feedback-info);
-    color: var(--text-feedback-info);
+  background-color: var(--background-feedback-info);
+  color: var(--text-feedback-info);
 }
 
 .critical {
-    background-color: var(--background-feedback-critical);
-    color: var(--text-feedback-critical);
+  background-color: var(--background-feedback-critical);
+  color: var(--text-feedback-critical);
 }

components/feedback/index.tsx

@@ -3,14 +3,14 @@ import classes from "./index.scss";
 type FeedbackType = "warning" | "info" | "critical";
 
 interface FeedbackProps {
-    type: FeedbackType;
-    children?: any;
+  type: FeedbackType;
+  children?: any;
 }
 
 export function Feedback(props: FeedbackProps) {
-    return (
-        <div class={`${classes.feedback} ${classes[props.type]}`}>
-            {props.children}
-        </div>
-    );
+  return (
+    <div class={`${classes.feedback} ${classes[props.type]}`}>
+      {props.children}
+    </div>
+  );
 }

components/item-card/index.scss

@@ -1,44 +1,44 @@
 .card {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    padding: 16px;
-    background: var(--background-muted);
-    border: 1px solid var(--background-accent);
-    border-radius: 8px;
-    transition: transform 0.15s;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: var(--background-muted);
+  border: 1px solid var(--background-accent);
+  border-radius: 8px;
+  transition: transform 0.15s;
 
-    &:hover {
-        transform: translateY(-1px);
-    }
+  &:hover {
+    transform: translateY(-1px);
+  }
 }
 
 .header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 8px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 8px;
 }
 
 .titleArea {
-    flex: 1;
-    min-width: 0;
+  flex: 1;
+  min-width: 0;
 }
 
 .descArea {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--text-muted);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: var(--text-muted);
 }
 
 .actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
 }
 
 .author {
-    color: var(--text-muted);
+  color: var(--text-muted);
 }